/* Site header — only what the block conversion changes.

   The authored header rules stay in public/css/korjin/components.css, which is
   global and therefore already loaded on every template (required for a section
   that renders in a group). Tokens only, per tokens.css. */

/* Mega panels now render inside .hdr__nav, beside the link that opens them,
   because a block cannot emit markup into two places and the panel belongs to
   exactly one nav item. .hdr__nav is not positioned, so the panel's absolute
   positioning still resolves against the sticky .hdr — same box, same full
   width. The one thing that does change: .hdr__nav is a flex row, and a
   panel's `hidden` attribute has to keep beating that display value. */
.hdr__nav .hdr__mega[hidden] {
  display: none;
}

/* .hdr__nav sets white-space: nowrap so nav labels never wrap mid-word. The
   panel used to be a sibling of .hdr__in and so never inherited it; nested in
   the nav it does, and every paragraph in the panel became one unwrappable
   line that ran out past the viewport. Inheritance is the whole cost of the
   move — reset it at the panel boundary. */
.hdr__nav .hdr__mega {
  white-space: normal;
}

/* Panel layout.

   components.css gives .mm__in a grid template per panel — .mm--shop,
   .mm--ritual, .mm--science — because the old renderer emitted a fixed block
   order and each panel's column count was known at author time. A panel the
   merchant composes has neither: they can add a column, drop the feature card,
   or build a panel that never existed. With no .mm--* class the bare .mm__in
   rule is `display: grid` with no template, so every block stacks in one
   column — and a 1:1 product shot at full panel width is then 570px tall.

   Flex with weighted children reproduces the authored proportions without
   needing to know the count: 1.9 / 1 / 1 / 1.2 was the shop panel's grid, and
   the same weights fall out of `flex-grow` for whatever blocks are present.

   Deviation from the original, deliberate: the science panel's feature column
   was 1.3fr against 1.2fr here. Holding per-panel weights would mean a class
   per panel again, which is the thing that broke. The difference is about 2%
   of the panel width. */
@media (min-width: 1000px) {
  .mm__in {
    display: flex;
    flex-wrap: nowrap;
  }

  .mm__in > .mm__block {
    flex: 1 1 0;
    /* Without this a long link label sets the column's floor and the weights
       stop being honoured. */
    min-width: 0;
  }

  .mm__in > .mm__block--products {
    flex: 1.9 1 0;
  }

  .mm__in > .mm__feature {
    flex: 1.2 1 0;
  }
}

/* `1fr` has a min-content floor, so a long word or an unbroken title sets the
   track's minimum and the track refuses to shrink to its share. The old
   renderer never hit this because it printed a hand-written short name; a real
   product title is 57 characters, which blew the products block from its 350px
   share out to 487px and pushed the whole document 78px wider than the
   viewport. minmax(0, 1fr) removes the floor and lets the title wrap. */
.mm__products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mm__card,
.mm__feature {
  min-width: 0;
}

/* Same floor, one level down: the card's own children must be allowed to wrap
   rather than setting the card's width. Word wrapping alone is enough now that
   white-space is reset above — breaking inside words would be worse than the
   problem. */
.mm__card-title,
.mm__card-meta,
.mm__cta {
  min-width: 0;
}