/* ==========================================================================
   KELEBIHAN GABION WALL — benefits and comparison
   Ported verbatim from the scoped <style> block of src/pages/kelebihan-gabion-wall.astro.

   Enqueued ONLY on this page. That is load-bearing, not an optimisation:
   several class names here (.project, .explain, .benefit, .step, .cta,
   .prose, .faq-aside) are reused across pages with conflicting rules, and
   Astro's per-file scoping is what kept them apart. Keeping each page's
   rules in a file that loads on that page alone reproduces that isolation.
   Do not merge these into one stylesheet.
   ========================================================================== */

  .explain {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 62rem) {
    .explain {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: var(--space-2xl);
    }
  }

  .explain__text .prose {
    margin-top: var(--space-m);
  }

  .explain__text .lede {
    margin-bottom: var(--space-s);
  }

  /* --- Benefits --- */
  .benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-l) var(--space-2xl);
  }

  @media (min-width: 46rem) {
    .benefits {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .benefit {
    display: flex;
    gap: var(--space-s);
  }

  .benefit__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-s);
    background: var(--brand-100);
    color: var(--brand-700);
  }

  .benefit h3 {
    font-size: var(--step-1);
    line-height: 1.3;
  }

  .benefit p {
    margin-top: 0.375rem;
    color: var(--graphite-600);
    font-size: var(--step--1);
    line-height: 1.6;
    max-width: 42ch;
  }

  /* --- Comparison table --- */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background: var(--stone-000);
  }

  .compare {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: var(--step--1);
  }

  .compare th,
  .compare td {
    text-align: left;
    vertical-align: top;
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--rule);
    line-height: 1.55;
  }

  .compare thead th {
    background: var(--graphite-900);
    color: #fff;
    font-size: var(--step--3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .compare tbody th {
    font-weight: 700;
    color: var(--graphite-900);
    width: 12rem;
    background: var(--stone-050);
  }

  .compare td {
    color: var(--graphite-700);
  }

  .compare tbody tr:last-child th,
  .compare tbody tr:last-child td {
    border-bottom: 0;
  }

  .table-note {
    margin-top: var(--space-m);
    font-size: var(--step--1);
    color: var(--graphite-600);
    max-width: 60ch;
  }

  /* --- Two column lists --- */
  .two-col {
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 56rem) {
    .two-col {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2xl);
    }
  }

  .two-col h2 {
    font-size: var(--step-3);
    margin-bottom: var(--space-m);
  }

  .ticks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-s);
  }

  .ticks li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    line-height: 1.55;
    font-size: var(--step-0);
    color: var(--brand-100);
  }

  .ticks svg {
    flex: none;
    margin-top: 0.2rem;
    color: var(--tick-on-brand);
  }