/* =============================================================================
   Timetics ROI Calculator — Style 2 (Two-Column Layout) v1.0.0
   Scoped under .timetics-roi-style-2 — zero impact on Style 1 (default).
   Depends on: calculator.css (base styles, custom properties, component CSS).
   ============================================================================= */

/* ── Container: expand to fill wider layouts ─────────────────────────────── */
.timetics-roi-style-2 {
  max-width: 100%; /* wider than the default 900 px to accommodate two columns */
  padding: 0;        /* columns handle their own internal padding */
}

/* ── Two-column grid ─────────────────────────────────────────────────────── */
/*
  Desktop layout (> 768 px):
    LEFT  (features panel)  — 46 %
    RIGHT (pricing panel)   — 54 %

  The features section sits first in the DOM for logical/a11y order and is
  assigned to the "left" grid area via grid-template-areas.
*/
.timetics-roi-style-2 {
  display: grid;
  grid-template-columns: 46fr 54fr;
  grid-template-areas: "features pricing";
  grid-template-rows: 1fr;
  gap: 28px;
  align-items: start; /* lets each column be only as tall as its content */
}

/* ── Column assignments ───────────────────────────────────────────────────── */
.timetics-roi-style-2 > .trc-features-section {
  grid-area: features;
}

.timetics-roi-style-2 > .trc-right-panel {
  grid-area: pricing;

  /* Sticky: right column stays in view while user scrolls the feature list */
  position: sticky;
  top: 24px;
}

/* ── LEFT COLUMN — Features panel ────────────────────────────────────────── */
.timetics-roi-style-2 .trc-features-section {
     padding: 0;
    background: transparent;
    border: none;
}

/* Compact the feature header for the narrower left column */
.timetics-roi-style-2 .trc-features-title {
  font-size: 14px;
}

/*
  Single-column feature list inside the left panel — makes each toggle row
  span the full width so labels are readable in the narrower 46 % column.
*/
.timetics-roi-style-2 .trc-features-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Slightly tighter feature rows to fit more items without scrolling */
.timetics-roi-style-2 .trc-feature-row {
  padding: 10px 12px;
}

/* ── RIGHT COLUMN — Pricing panel ────────────────────────────────────────── */
.timetics-roi-style-2 .trc-right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pricing header card — light surface background + subtle border */
.timetics-roi-style-2 .trc-header {
  background: var(--trc-bg);
  border: 1px solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  padding: 24px 24px 20px;
  margin-bottom: 0; /* gap on .trc-right-panel handles spacing */
}

/*
  Pricing cards: two-column grid inside the right panel.
  On very narrow right columns (e.g. two competitors) this still looks clean;
  with three cards they wrap to a 2 + 1 layout naturally.
*/
.timetics-roi-style-2 .trc-pricing-cards {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Savings banner: no extra margin — right-panel gap handles it */
.timetics-roi-style-2 .trc-savings-banner {
  margin-bottom: 0;
  border-radius: var(--trc-radius);
}

/* Slider section: no extra margin — right-panel gap handles it */
.timetics-roi-style-2 .trc-slider-section {
  margin-bottom: 0;
}

/* ── Responsive — collapse to single column at ≤ 768 px ─────────────────── */
@media (max-width: 768px) {
  .timetics-roi-style-2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pricing"
      "features";
    gap: 20px;
    padding: 0;
  }

  /* Disable sticky on mobile — stacking makes it irrelevant */
  .timetics-roi-style-2 > .trc-right-panel {
    position: static;
  }

  /* Remove max-height / overflow so features expand fully on mobile */
  .timetics-roi-style-2 .trc-features-section {
    max-height: none;
    overflow-y: visible;
  }

  /* Restore auto-fill columns for the feature grid on mobile */
  .timetics-roi-style-2 .trc-features-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ── Narrow phones (≤ 480 px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .timetics-roi-style-2 .trc-features-grid {
    grid-template-columns: 1fr;
  }

  .timetics-roi-style-2 .trc-pricing-cards {
    grid-template-columns: 1fr;
  }
}