/* Abonament hub (/abonament/) — values parity-locked to the original styles.css
   "Step 9" block (plans hero, comparison table, box categories, reassurance
   strip, final CTA) + the Growly how-cards pattern this page reuses.
   Breakpoint map (Q2): 960→960, 640→768, 480→430.
   The original's .highlight-col !important war dissolves here: the page layer
   plus plain specificity ordering resolves every conflict (Q3, Q4). */

@layer pages {
  :root {
    /* Production-derived shade lifted verbatim from the original (page token,
       not brandbook palette — Q1): the "Fresh" column wash on the comparison
       table (lighter than --warm-cream). */
    --compare-highlight: #fdf7e2;
  }

  /* — Plans hero + cards (plan-card component itself lives in site.css) — */
  .plans {
    /* Hero instance: .plans-hero-head owns the 48px top gap. */
    padding: 0 24px 120px;
    background: var(--cream);
  }

  .plans-hero-head {
    max-width: var(--container);
    margin: 0 auto 72px;
    padding: 48px 24px 0;
    text-align: left;
  }

  .plans-hero-head .breadcrumb {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .plans-hero-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }

  .plans-hero-head .section-eyebrow {
    margin: 0 0 12px;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }

  /* .plans-hero-title now lives in site.css (shared with gaseste-ne/jurnal/
     legal-doc - UI-02); this page's own copy was byte-identical. */

  .plans-hero-sub {
    margin: 0 auto;
    max-width: 38rem;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
  }

  /* — Comparison table — */
  .comparison-container {
    max-width: var(--container);
    margin: 96px auto 0;
    padding: 0 12px;
  }

  .comparison-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(24px, 1.8vw + 16px, 32px);
    color: var(--green-deep);
    margin-bottom: 40px;
  }

  .comparison-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
  }

  .comparison-scroll-wrapper:focus-visible {
    outline: 3px solid var(--green-deep);
    outline-offset: 3px;
    border-radius: 16px;
  }

  .comparison-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  .comparison-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  .comparison-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(52, 49, 46, 0.24);
    border-radius: 4px;
  }

  .comparison-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 49, 46, 0.36);
  }

  .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 15px;
    color: var(--text);
    min-width: 720px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .comparison-table thead th {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--green-deep);
    background: transparent;
    border-bottom: 1px solid rgba(var(--green-deep-rgb), 0.12);
    padding-bottom: 16px;
  }

  .comparison-table tbody tr:last-child th,
  .comparison-table tbody tr:last-child td {
    border-bottom: none;
  }

  .comparison-table td {
    width: 25%;
    transition: background-color 150ms var(--cf-ease);
  }

  .comparison-table tbody th {
    font-weight: 700;
    color: var(--green-deep);
    background: transparent;
    width: 25%;
    transition: background-color 150ms var(--cf-ease);
  }

  /* Highlighted "Fresh" column as a vertical pill block */
  .comparison-table .highlight-col {
    background-color: var(--compare-highlight);
    position: relative;
    transition: background-color 150ms var(--cf-ease);
    border-bottom-color: rgba(255, 255, 255, 0.5);
  }

  .comparison-table thead th.highlight-col {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .comparison-table tbody tr:last-child td.highlight-col {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom: none;
  }

  .comparison-table tbody tr:hover td:not(.highlight-col) {
    background-color: rgba(var(--green-deep-rgb), 0.02);
  }

  .comparison-table tbody tr:hover th {
    background-color: rgba(var(--green-deep-rgb), 0.01);
  }

  .reco-badge {
    display: inline-block;
    background-color: transparent;
    border: 1px solid var(--green);
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
  }

  .comparison-table td strong {
    color: var(--green-deep);
  }

  .comparison-footnote {
    margin: 24px auto 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-soft);
    text-align: center;
    max-width: 42rem;
  }

  /* — Sub-page section inner container — */
  .subpage-section__inner {
    max-width: var(--container);
    margin: 0 auto;
  }

  /* — Box categories: 4 cream cards, one per plant family — */
  .box-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
  }

  .box-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    transition: transform 240ms var(--cf-ease), border-color 240ms var(--cf-ease);
  }

  .box-category:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--green-rgb), 0.32);
  }

  .box-category__leaf {
    display: block;
    width: 64px;
    margin: 0 auto 14px;
    flex-shrink: 0;
  }

  .box-category__leaf img,
  .box-category__leaf svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .box-category__leaf--flori {
    aspect-ratio: 126 / 192;
    color: var(--green);
  }

  .box-category__leaf--butterhead { color: var(--magenta); }
  .box-category__leaf--oakleaf    { color: var(--sky); }
  .box-category__leaf--romaine    { color: var(--orange); }

  .box-category__name {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--green-deep);
  }

  .box-category__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-soft);
  }

  /* — How-it-works cards (reuses the Growly card pattern; numeric icons) — */
  .growly-how__cards {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
  }

  .growly-how__card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px -22px rgba(var(--green-deep-rgb), 0.32);
  }

  .growly-how__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 4px;
    /* Numeric step markers on this page (the original set these inline). */
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
  }

  .growly-how__icon--magenta {
    background: color-mix(in srgb, var(--magenta) 12%, transparent);
    color: var(--magenta);
  }

  .growly-how__icon--sky {
    background: color-mix(in srgb, var(--sky) 14%, transparent);
    color: var(--sky);
  }

  .growly-how__icon--orange {
    background: color-mix(in srgb, var(--orange) 12%, transparent);
    color: var(--orange);
  }

  .growly-how__step-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--green-deep);
  }

  .growly-how__step-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-soft);
  }

  /* — Reassurance strip — */
  .reassurance-strip {
    background: var(--green);
    color: var(--warm-cream);
    padding: 22px 24px;
    text-align: center;
  }

  .reassurance-strip__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .reassurance-strip__sep {
    display: inline-block;
    width: 14px;
    height: 13px;
    background: var(--warm-cream);
    -webkit-mask: url("/assets/images/brand/heart-V.png") no-repeat center / contain;
            mask: url("/assets/images/brand/heart-V.png") no-repeat center / contain;
  }

  /* — Final CTA: "Gata să alegi?" + 3 plan-pick pills — */
  .abonament-final-cta {
    background: var(--cream);
    padding: 120px 24px 220px;
    text-align: center;
  }

  .abonament-final-cta h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(32px, 2.4vw + 16px, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--green-deep);
  }

  .abonament-final-cta h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--green);
  }

  .abonament-final-cta__sub {
    margin: 0 auto 28px;
    max-width: 36rem;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-soft);
  }

  .abonament-final-cta__picks {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .abonament-final-cta__picks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid var(--green);
    background: #fff;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 180ms var(--cf-ease), color 180ms var(--cf-ease);
  }

  .abonament-final-cta__picks a:hover,
  .abonament-final-cta__picks a:focus-visible {
    background: var(--green);
    color: #fff;
    outline: none;
  }

  .abonament-final-cta__picks a.is-recommended {
    background: var(--green);
    color: #fff;
  }

  .abonament-final-cta__picks a.is-recommended:hover,
  .abonament-final-cta__picks a.is-recommended:focus-visible {
    background: var(--green-hover);
  }

  /* — Tablet — */
  @media (max-width: 960px) {
    .box-categories {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* — Mobile — */
  @media (max-width: 768px) {
    .plans {
      padding: 0 16px 80px;
    }

    .plans-hero-head {
      margin-bottom: 48px;
    }

    .comparison-container {
      margin-top: 64px;
    }

    .abonament-final-cta {
      padding: 80px 16px 140px;
    }

    .subpage-section.faq {
      padding-bottom: 64px;
    }

    .reassurance-strip__inner {
      font-size: 14px;
      gap: 6px 14px;
    }
  }

  @media (max-width: 430px) {
    .box-categories {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
}