/* ==========================================================================
   EC · Two-Up Feature — block styles
   ==========================================================================
   The base .two-up primitive (1fr/1fr grid, rounded 28px media, 820px reflow,
   .two-up--flip, inverse body colour) is a SHARED component in pb-shell.css and
   is NOT redefined here (docs/DESIGN-SYNC rule 3). This file ships only the
   per-variant additions this flexible block needs to cover all four mockup
   usages, plus the made-to-measure dimension diagram used by the "Made To Your
   Size" usage.

   Sources (v4b mockup):
   - Shop Collection media stretch  → css/home.css .shop-entry (~399-403)
   - From The Blog meta + media 3/2 → css/home.css .blog-feature (~975-976)
   - Made To Your Size diagram      → css/size-shape-guide.css .guide-intro__media
                                       + the .dimfield primitive (~104, ~115-199)
   - Start Designing (inverse close)→ css/designers-edit.css .edit-close__text/
                                       __reassure/__actions (~325-338): the white
                                       heading, muted reassurance line and action
                                       row, reproduced here on the .two-up
                                       primitive under .pb-two-up (see _sync.md).
   Own additions are namespaced .pb-two-up* so they never collide with the shared
   .two-up rules or another block's copy of the diagram. Enqueued only when the
   block is present via block.json's file:./style.css.
   ========================================================================== */

/* --- Shared additions across usages -------------------------------------- */
/* The default two-up media is a 4/3 frame (shell). Both Home usages give it a
   taller/wider ratio; keep the shell default and only nudge where a usage needs
   it via the eyebrow/meta + actions treatment below. */
.pb-two-up .pb-two-up__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
}
/* The quieter "From the journal" meta line (blog usage) — vs the tracked-caps
   .eyebrow used by the Shop Collection usage. */
.pb-two-up .pb-two-up__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* --- Inverse "considered close" (Designers' Edit "Start Designing") ------- */
/* Reproduces .edit-close's dark-anchor copy treatment on the .two-up primitive:
   the heading goes to the on-inverse strong ink and a muted reassurance line
   sits under the actions. Surface classes (.section--inverse.on-inverse) come
   from the render; the theme folds theme.css's re-inking so the band reads on
   the bone ground. */
.pb-two-up.section--inverse .two-up__text h2 { color: var(--text-strong); }
.pb-two-up.section--inverse .pb-two-up__reassure { color: var(--text-on-inverse-mut); }
.pb-two-up .pb-two-up__reassure {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-2xs);
}

/* --- Real photography in the two-up media slot ---------------------------- */
/* The theme ships NO global `.ph > img` cover rule — section isolation means
   every block carries its own copy (pb_ec_cta_band, pb_ec_hero, pb_ec_entry_tiles,
   pb_ec_image_hero, pb_ec_shape_grid, pb_ec_room_guides and pb_ec_category_grid
   each have one, and this block already had one for its `.shop-band` variant
   further down). The TWO-UP variant had none, so its photograph was the one
   `.ph` on the site still landing unfitted.

   What that cost, measured against v9b at 1500px on /9b-size-shape-guide/:
   `object-fit: fill` and `position: static` against v9b's `cover` / `absolute`,
   and a 628px-tall <img> in a 471px frame — the picture stretched and then
   clipped by the media slot's `overflow: hidden`. The shell's
   `.two-up__media .ph { position: absolute; inset: 0 }` sizes the FIELD but says
   nothing about the <img> inside it, and the shell's `.ph { display: grid;
   place-items: center }` is what was left holding the photo.

   Values are v9b's verbatim (css/size-shape-guide.css §0, the same preamble
   every v9b page sheet opens with). Applies to Home's "From The Blog" two-up as
   well, which carried the identical defect. */
.pb-two-up .two-up__media .ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- EDITORIAL PROPORTIONS (Our Story's three story bands) ---------------- */
/* Ported from css/our-story.css SS2. The `.two-up` primitive tuned for READING
   rather than for a product feature: an asymmetric split, more air between the
   halves, the section-head heading size and long-form leading on the copy.

   THE RATIO IS ABOUT MEASURE, NOT TASTE. A 50/50 split reads as a slab, and at
   1360px each half carries a 90-character line. 0.72fr lands the copy COLUMN
   itself at roughly 525px / 48 characters at 1440, so the column does the work
   rather than a max-width floating inside a wider one; the 54ch cap below is a
   backstop for very wide containers, not the operative constraint.

   THE COPY COLUMN IS THE NARROW ONE IN BOTH DIRECTIONS. `.two-up--flip` moves
   the media into grid column 1 with `order: -1`, so the flipped band wants the
   ratio the other way round. render.php only writes the flip class on an
   editorial band when the media is asked for on the LEFT, and writes the text
   first in the source either way.

   THE CLASS IS v9b's OWN, and render.php adds it BESIDE `.pb-two-up` rather
   than replacing it. Beside, because this block's scoped `.ph > img` cover rule
   further down is keyed on `.pb-two-up`; v9b's own name so the declarations
   below are a copy of css/our-story.css SS2 rather than a translation of it.

   SPECIFICITY IS LOAD-BEARING, twice over. Block sheets are enqueued BEFORE
   pb-shell.css on this theme (the reverse of the mockup), so a rule that TIES a
   shell primitive silently loses. Every rule here therefore carries
   `.story-band` in front of the shell selector it overrides:
   (0,2,0) against `.two-up` at (0,1,0). The reflow below is the same trap in a
   media query. A media query adds NO specificity, so shell's 820px collapse at
   (0,1,0) cannot override the (0,2,0) split above and the bands would stay
   two-up on a phone unless the collapse is restated here at the same weight. */
.story-band .two-up {
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: center;
}
.story-band .two-up--flip { grid-template-columns: 1fr 0.72fr; }

.story-band .two-up__text {
  max-width: 54ch;
  gap: var(--space-md);
}
/* Match the section-heading size every other section gets from pb-shell's [J]
   `.section-head__text h2` rule. That selector does not reach a `.two-up`
   heading, which falls through to `--fs-h2` (2.5rem cap) and sets a full step
   smaller. The clamp is restated so the hierarchy is identical section to
   section. The FACE is left to [J]'s broad `h2` rule (IvyPresto Display
   Regular), so only the size is set here and nothing contends. */
.story-band .two-up__text h2 {
  font-size: clamp(1.95rem, 1.4rem + 2.2vw, 2.9rem);
}
/* Long-form editorial leading over the standard body size: this copy is read,
   not scanned, and --lh-loose is named in pb-tokens for exactly this. */
.story-band .two-up__text p {
  line-height: var(--lh-loose);
}

@media (max-width: 820px) {
  .story-band .two-up,
  .story-band .two-up--flip {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .story-band .two-up__text { max-width: none; }
  /* A 4/3 frame is too shallow once it spans the full column on a narrow
     screen; step it to 3/2 so the photography keeps some presence in the
     stack. */
  .story-band .two-up__media { aspect-ratio: 3 / 2; }
}

/* --- Dimension-diagram media (Size & Shape "Made To Your Size") ----------- */
/* When the media slot holds the CSS-drawn made-to-measure diagram, the frame
   drops its photo framing so the dimension lines can sit OUTSIDE the rug. */
.pb-two-up .pb-two-up__media--diagram {
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
}

/* DIMFIELD — the dimension-line diagram primitive, ported verbatim from
   css/size-shape-guide.css and scoped under .pb-two-up for section isolation.
   A plain sand-toned floor (no grid), the rug as a toned block lifted by a soft
   shadow, and one dimension line per axis drawn OUTSIDE the rug as
   tick -> line -> number -> line -> tick, the number in mono in a gap at centre. */
.pb-two-up .dimfield { display: flex; flex-direction: column; gap: var(--space-sm); }
.pb-two-up .dimfield__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  background: var(--ph-tone-3);
  border-radius: var(--radius-media);
  overflow: hidden;
  isolation: isolate;
}
.pb-two-up .dimfield--hero .dimfield__stage { aspect-ratio: 4 / 3.4; }
.pb-two-up .dimfield__rug {
  position: absolute;
  inset: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  background: var(--sage);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-pop);
  z-index: 1;
}
.pb-two-up .dimfield__rug::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xs);
  pointer-events: none;
}
.pb-two-up .dimfield__rug--hero { inset-block: 12% 10%; inset-inline: 22% 20%; }
.pb-two-up .dimfield__dim {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--slate-deep);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  z-index: 2;
}
.pb-two-up .dimfield__dim span {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-2xs);
  background: var(--ph-tone-3);
  white-space: nowrap;
}
.pb-two-up .dimfield__dim--w {
  top: clamp(0.85rem, 0.5rem + 1.4vw, 1.6rem);
  left: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  right: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  justify-content: center;
  --tick: 5px;
}
.pb-two-up .dimfield__dim--w::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: var(--hairline-width);
  background: var(--slate-deep);
}
.pb-two-up .dimfield__dim--w::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--tick));
  left: 0; right: 0;
  height: calc(var(--tick) * 2);
  background:
    linear-gradient(var(--slate-deep), var(--slate-deep)) left  center / var(--hairline-width) 100% no-repeat,
    linear-gradient(var(--slate-deep), var(--slate-deep)) right center / var(--hairline-width) 100% no-repeat;
}
.pb-two-up .dimfield__dim--h {
  --tick: 5px;
  top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  left: clamp(0.85rem, 0.5rem + 1.4vw, 1.6rem);
  flex-direction: column;
  justify-content: center;
}
.pb-two-up .dimfield__dim--h span { padding: var(--space-2xs) 0; }
.pb-two-up .dimfield__dim--h::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: var(--hairline-width);
  background: var(--slate-deep);
}
.pb-two-up .dimfield__dim--h::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--tick));
  top: 0; bottom: 0;
  width: calc(var(--tick) * 2);
  background:
    linear-gradient(var(--slate-deep), var(--slate-deep)) center top    / 100% var(--hairline-width) no-repeat,
    linear-gradient(var(--slate-deep), var(--slate-deep)) center bottom / 100% var(--hairline-width) no-repeat;
}
.pb-two-up .dimfield__foot {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* ==========================================================================
   FULL-BLEED BANNER  (variant = band; v9b B2, home.css section 3)
   ==========================================================================
   The Home routing band was a 50/50 two-up in v4b and became a full-bleed
   BANNER in v9b: the lifestyle photograph runs edge to edge as the section's
   ground with the heading + button overlaid over a legibility scrim. It stays a
   MID-PAGE section (not the hero, not the closing CTA), so the band height is
   generous but not full-viewport.

   Ported from css/home.css lines 428-495. Two rules also fold in the INLINE
   styles index.html itself writes on the band (`align-items: center` on the
   inner at :203, `margin-bottom: 20px` on the title at :204), because the
   mockup's rendered result is what the client is comparing against and those two
   declarations move the copy from left-anchored to centred. Each is marked
   below; the sheet's own values are kept alongside in the comment so the
   divergence is visible rather than lost.

   LOAD ORDER: pb-shell.css is enqueued AFTER block sheets here, the reverse of
   the mockup, so a block rule that TIES with a shell primitive on specificity
   silently loses. Every prefix below is load-bearing and names the primitive it
   has to out-rank.
   ========================================================================== */

/* (0,2,0) — LOAD-BEARING. `padding-block` ties with the shell's
   `.section { padding-block: var(--section-gap) }` at (0,1,0). The band pads ZERO
   so the photograph fills it; the inner's min-height + symmetric padding carry the
   band height instead. pb-section.css already EXCLUDES .shop-band from its
   section-rhythm normalisation for exactly this reason, and names the class in as
   many words — this rule is the port it was written to expect. `background` is the
   fallback ground while the photograph decodes. */
.section.shop-band {
  position: relative;
  padding-block: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--near-black);
  display: grid;
}

/* (0,2,0) — LOAD-BEARING. The media element is a `.ph` placeholder field and the
   shell's `.ph` sets `position: relative` + `border-radius: var(--radius-xs)` at
   (0,1,0); unprefixed, the shell would win on load order, the photo would stay in
   flow and the band would collapse to nothing. */
.shop-band .shop-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
}
/* Real-photography drop-in, scoped to this block: the theme ships no global
   `.ph > img` cover rule (section isolation — pb_ec_cta_band, pb_ec_hero and
   pb_ec_entry_tiles each carry their own copy). Without it the shell's
   `.ph { display: grid; place-items: center }` centres the photo at its intrinsic
   size instead of covering the band. */
.shop-band .ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Legibility scrim: firmer on the LEFT, easing off to the right so the lifestyle
   photograph still breathes, plus a soft base ramp from the foot that keeps the
   button legible. Carried verbatim from v9b. */
.shop-band .shop-band__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(20, 23, 25, 0.68) 0%, rgba(20, 23, 25, 0.42) 42%, rgba(20, 23, 25, 0.08) 78%),
    linear-gradient(to top, rgba(20, 23, 25, 0.34), rgba(20, 23, 25, 0) 60%);
  pointer-events: none;
}

/* The copy column, over the scrimmed photograph. The element also carries
   `.container`, which supplies the max-width and the page gutter.
   (0,2,0) — LOAD-BEARING: `padding-inline` ties with the shell's `.container` at
   (0,1,0), and the gutter is deliberately overridden here — a page gutter that is
   right for text on a page ground is tight for copy OVERLAID on a photograph, so
   this grows with the viewport and holds a comfortable floor on mobile.
   ALIGNMENT: v9b's sheet says `align-items: flex-start` but index.html:203 writes
   `style="align-items: center"` on this element, so the band RENDERS centred. The
   inline value is what the design shows and what is reproduced here. */
.shop-band .shop-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: clamp(360px, 44vw, 560px);
  padding-block: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  padding-inline: clamp(var(--space-md), 5vw, var(--space-3xl));
  color: var(--white);
}
.shop-band .shop-band__inner > * { max-width: 46ch; }

/* Inks over the scrimmed photograph — all white/near-white. The eyebrow takes
   Woodland Sage (v9b round 8: was gold, which is retired). */
.shop-band .shop-band__eyebrow { color: var(--woodland-sage); }
/* (0,2,0) — the heading also has to clear pb-shell's `.section--inverse h2` should
   the band ever sit inside one, and its own display size is the H1 step, not the
   section-head H2. The 20px bottom margin is index.html:204's inline value: with
   the inner's own 24px gap it sets the measured heading-to-button distance in the
   mockup, so dropping it or rounding it to a token would land the button 4px out. */
.shop-band .shop-band__title {
  color: var(--white);
  font-size: var(--fs-h1);
  max-width: 18ch;
  margin-bottom: 20px;
}
.shop-band .shop-band__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  max-width: 42ch;
}
.shop-band .shop-band__lead > :last-child { margin-bottom: 0; }
.shop-band .shop-band__actions { margin-top: var(--space-2xs); }

/* The band is a DARK photographic ground, so the shell's resting OUTLINE primary
   (slate-deep ink + line) would vanish into it. Give the band CTA the same solid
   BANNER-CTA treatment the hero uses: a Woodland Sage chip with a white label at
   rest, deepening on hover/focus. (0,3,0) out-ranks both the shell base and
   pb-button's hover rule, so the solid model holds in every state. */
.shop-band .btn.btn--primary {
  background-color: var(--woodland-sage);
  border-color: var(--woodland-sage);
  color: var(--white);
}
.shop-band .btn.btn--primary:hover,
.shop-band .btn.btn--primary:focus-visible {
  background-color: var(--woodland-sage-deep);
  border-color: var(--woodland-sage-deep);
  color: var(--white);
}