/**
 * Fluid Framework - Feature Sections
 * @layer components
 *
 * Pre-built layouts for showcasing product features, service offerings,
 * and key benefits. Four layout variants via data-type attribute.
 *
 * Usage:
 *   <!-- Icon Grid (default) -->
 *   <section class="features">
 *     <header class="features__header">
 *       <h2>Features</h2>
 *       <p>Why teams choose us</p>
 *     </header>
 *     <div class="features__grid">
 *       <article class="feature">
 *         <div class="feature__icon"><svg>...</svg></div>
 *         <h3 class="feature__title">Fast</h3>
 *         <p class="feature__description">Loads in milliseconds.</p>
 *       </article>
 *     </div>
 *   </section>
 *
 *   <!-- Alternating rows -->
 *   <section class="features" data-type="alternating">
 *     <article class="feature">
 *       <div class="feature__content">
 *         <h3 class="feature__title">Title</h3>
 *         <p class="feature__description">Description</p>
 *       </div>
 *       <figure class="feature__media">
 *         <img src="..." alt="...">
 *       </figure>
 *     </article>
 *   </section>
 *
 *   <!-- Centered showcase -->
 *   <section class="features" data-type="showcase">
 *     <figure class="feature__media">
 *       <img src="..." alt="...">
 *     </figure>
 *     <div class="feature__content">
 *       <h2>Feature Name</h2>
 *       <p>Details about the feature.</p>
 *     </div>
 *   </section>
 *
 *   <!-- Comparison table -->
 *   <section class="features" data-type="comparison">
 *     <header class="features__header">
 *       <h2>Compare Plans</h2>
 *     </header>
 *     <table class="features__table">
 *       <thead><tr><th>Feature</th><th>Basic</th><th>Pro</th></tr></thead>
 *       <tbody><tr><td>Storage</td><td>5 GB</td><td>100 GB</td></tr></tbody>
 *     </table>
 *   </section>
 */

@layer components {
  /* The band's padding and edges, and the header (a section head), are in
     src/fluid.css (layouts). */

  .features__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */


  /* ========================================
     ICON GRID (default)
     Open items under an ink hairline, like cards; the hairlines line up.
     ======================================== */

  .features__grid {
    display: grid;
    gap: var(--features-gap, var(--space-l) var(--space-m));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--features-min, 16rem)), 1fr));
  }

  .feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block-start: var(--space-s);
    border-block-start: var(--border-width) solid var(--color-border-strong);
  }

  .feature__icon {
    display: flex;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-end: var(--space-xs);
    color: var(--accent-ink);
    flex-shrink: 0;
  }

  .feature__icon svg {
    inline-size: 100%;
    block-size: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .feature__title {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: calc(500 + var(--_dark-weight));
    line-height: var(--leading-heading);
    margin: 0;
  }

  .feature__description { margin: 0; }


  /* ========================================
     ALTERNATING
     Image/text rows that swap sides
     ======================================== */

  .features[data-type="alternating"] .features__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .features[data-type="alternating"] .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    align-items: center;
    padding: 0;
    border: 0;
  }

  .features[data-type="alternating"] .feature:nth-child(even) > :first-child { order: 2; }

  .features[data-type="alternating"] .feature__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .features[data-type="alternating"] .feature__title { font-size: var(--step-2); }

  .features[data-type="alternating"] .feature__media { margin: 0; }

  @media (max-width: 48rem) {
    .features[data-type="alternating"] .feature { grid-template-columns: 1fr; }
    .features[data-type="alternating"] .feature:nth-child(even) > :first-child { order: 0; }
  }


  /* ========================================
     SHOWCASE
     Single feature highlight with large image
     ======================================== */

  .features[data-type="showcase"] .feature__media { margin: 0; margin-block-end: var(--space-l); }

  .features[data-type="showcase"] .feature__content { max-inline-size: var(--container-md); }

  .features[data-type="showcase"] .feature__content :is(h2, h3) { font-size: var(--step-3); }

  .features[data-type="showcase"] .feature__content p { font-size: var(--step-1); }


  /* ========================================
     COMPARISON TABLE (the base table, centred figures)
     ======================================== */

  .features__table { text-align: center; }
  .features__table :is(th, td) { padding-inline: var(--space-s); }
  .features__table :is(th, td):first-child { text-align: start; padding-inline-start: 0; }

  .features__table [data-featured] {
    background-color: var(--accent-subtle);
    font-weight: 600;
  }

  .features__table thead [data-featured] { border-block-end-color: var(--accent); }
}