/**
 * Section: Build Your Own
 *
 * Ported from .docs/mockup/css/shop.css §3 (lines 222-336) and its share of
 * the pooled responsive block (381-386). Tokens only.
 *
 * Kept literal because the mockup has them and no token matches: the `44px`
 * feature glyph, the `4px` row gap inside an add-on, the `1px` hairline, and
 * the `rgba(168, 200, 212, 0.22)` divider, which the section contract says
 * stays verbatim.
 *
 * The margins on `.eyebrow`, `h2` and the body paragraphs are the mockup's
 * own. They are NOT converted to a flex `gap` parent: the last paragraph's
 * bottom margin currently collapses into `.addons`'s top margin, and the flex
 * equivalent would add them instead, moving the add-on list down. Fidelity to
 * a signed-off design beats tidiness in a shipped stylesheet.
 *
 * ONE DELIBERATE DEPARTURE. The mockup writes the left column's paragraph
 * colour as `.byo-grid > div > p`, specificity (0,1,2), which also matches the
 * paragraph inside the white `.byo-feature` card and outranks the
 * `.byo-feature p` rule meant for it — leaving Coastal Blue body text on an
 * Off-White card at roughly 1.6:1. That is a WCAG failure by cascade accident,
 * not by design, so the feature card's rule is raised to
 * `.byo-grid > .byo-feature > p` here. Reported rather than silently absorbed.
 */

.byo {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
  background: var(--deep-ocean);
  color: var(--coastal-blue);
}

.byo-grid {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-2xl);
  align-items: start;
}

.byo-grid h2 {
  color: var(--off-white);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: var(--space-s);
}

.byo-grid h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--coastal-blue);
}

.byo-grid > div > p {
  color: var(--coastal-blue);
  line-height: 1.6;
  margin-bottom: var(--space-s);
  max-width: 52ch;
}

.byo-grid .eyebrow {
  color: var(--terracotta);
  margin-bottom: var(--space-s);
}

.addons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
}

.addon {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px var(--space-s);
  padding: var(--space-s) 0;
  border-top: 1px solid rgba(168, 200, 212, 0.22);
}

.addon h3 {
  color: var(--off-white);
  font-size: var(--text-h4);
  font-weight: 600;
}

.addon p {
  grid-column: 1;
  font-size: var(--text-small);
  color: var(--coastal-blue);
  line-height: 1.45;
}

.addon .ap {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--off-white);
  white-space: nowrap;
}

/* Feature card — the "Open the Builder" panel */
.byo-feature {
  background: var(--off-white);
  color: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  box-shadow: var(--shadow-lg);
}

.byo-feature .material-symbols-outlined {
  font-size: 44px;
  color: var(--terracotta);
}

.byo-feature h3 {
  font-size: var(--text-h3);
  font-weight: 700;
}

/* Raised specificity — see the contrast note at the top of this file. */
.byo-grid > .byo-feature > p {
  color: var(--graphite);
  line-height: 1.55;
  margin-bottom: 0;
  max-width: none;
}

.byo-feature .btn-primary {
  margin-top: var(--space-2xs);
  align-self: flex-start;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .byo-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}