/* Cottage Flowers & More — per-site stylesheet.
 *
 * Shipped as site.css and linked AFTER the shared theme, so it overrides it without touching it.
 * This is where a replica's MEASURED numbers belong. The shared theme provides the mechanism with
 * neutral defaults; anything here is specific to reproducing THIS client's site and must never be
 * pushed up into theme/style.css, because every other client is built from that file.
 *
 * Every value below was measured from their live site at 1280px on 2026-07-28. If the build stops
 * matching, re-measure rather than nudging these until it looks right.
 * See sites/cottage-flowers/DESIGN-BRIEF.md sections 5, 5b and 6.
 */

/* ── Page width and vertical rhythm ───────────────────────────────────────────
   Their site is FULL WIDTH. Measured at 1280px, every content section is 1280 wide with
   its content starting at 0; there is no centred column. Our theme centres a 1140px wrap,
   which put content at left 70 and made the page read as a narrow column inside their
   layout.

   Their vertical rhythm is a flat 64px top and bottom on every text section. Ours computed
   to 115.2px from `--space-section: clamp(64px, 9vw, 128px)` plus `section_rhythm:
   generous`, so sections sat nearly twice as far apart as theirs. `generous` was added
   earlier in the takeover on the belief that our sections were too compressed; measuring
   their site shows the opposite. These two lines are the measured truth and win, because
   site.css loads after the theme. */
:root {
  --maxw: 100%;
  --space-section: 64px;
  --space-section-sm: 64px;
}
.wrap { padding: 0 64px; }              /* their About/Workshops columns start at 64 */
.services .wrap { padding: 0; }         /* the What We Do tiles run edge to edge, 0 to 1280 */

/* ── Header ───────────────────────────────────────────────────────────────────
   Theirs: 181px total — a 140px white logo row over a 41px slate nav bar.
   Ours lands on 183 (141 + 42). The theme's neutral 20px/11px padding gives 195. */
.site-header.has-navbar .header-row { padding: 14px 32px; }
.site-header.has-navbar .nav-strip .nav { padding: 8px 24px; }

/* On a phone theirs collapses to a 55px bar with a small logo; ours was still carrying the
   full 113px desktop wordmark, giving a 141px header that ate the screen. Measured at 390px. */
@media (max-width: 860px) {
  .site-header.has-navbar .header-row { padding: 8px 16px; }
  .logo-img img { max-height: 44px; }
}

/* ── Delivery band ────────────────────────────────────────────────────────────
   Theirs: a 384px photo column against 1280px of slate, band 462px tall.
   384/1280 = 30%. The theme default is 34% / 380px. */
.banner-band.has-media { padding-left: 30%; min-height: 440px; }
.banner-band .banner-media { width: 30%; }

@media (max-width: 860px) {
  /* the theme already stacks the band; keep the override from re-applying the inset */
  .banner-band.has-media { padding-left: 0; }
  .banner-band .banner-media { width: 100%; }
}

/* ── Footer ───────────────────────────────────────────────────────────────────
   Theirs is 550px in two dark rows: 353 + 197. Ours was 344 total, because the theme's
   footer is a compact modern block and theirs is generously padded (measured: 80px above
   the columns, 64px below the copyright row). The logo also carries more of the row on
   their site than ours did at the theme's 120px cap. */
.site-footer.rich .footer-top { padding: 80px 64px 44px; }
.site-footer.rich .footer-bottom { padding: 34px 64px 64px; }
.site-footer.rich .footer-brand .flogo { max-height: 150px; }

/* ── What we do ───────────────────────────────────────────────────────────────
   Theirs is a 2x2 of BIG tiles: 630x278 each at 1280, sitting side by side with a
   20px gutter. The theme's auto-fit grid gave three 351x340 cards per row, so the
   fourth wrapped on its own and the whole block read as small cards, not quarters.
   The COUNT decides the shape, so this does not have to be repeated per page: FOUR cards make the
   homepage 2x2 of quarters, SIX make the Workshops page a 3-across stack. A blanket
   `repeat(2, 1fr)` put the Workshops page's six cards into three rows of two. */
.services .grid { gap: 20px; }
.services .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.services .grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
.services .grid .card { min-height: 278px; }

@media (max-width: 980px) {
  .services .grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .services .grid,
  .services .grid:has(> :nth-child(4):last-child),
  .services .grid:has(> :nth-child(6):last-child) { grid-template-columns: 1fr; }
}

/* ── Photo-beside-panel sections ──────────────────────────────────────────────
   Theirs overlap: the colour box sits 64px OVER the photo column, and the pair is
   inset from the page edges rather than full-bleed. About = photo 576 + box 640,
   Workshops flipped, Testimonials = photo 640 + box 640.
   `.split-text` is FIRST in the DOM, so `flip` is what moves the PHOTO to the left. */
.split-inner:has(.has-panel) { align-items: stretch; gap: 0; }
/* gap: 0 because the theme's clamp() gap resolves to 64px at 1280, exactly cancelling the -64px
   overlap below, so the photo and the box ended up merely touching. Theirs overlap. */
.split-text.has-panel { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
/* photo right (Workshops): the box reaches over the photo's left edge */
.split-text.has-panel { margin-right: -64px; }
/* photo left (About, Testimonials): mirrored */
.split.flip .split-text.has-panel { margin-right: 0; margin-left: -64px; }
.split-media img { aspect-ratio: 1 / 1; height: 100%; }

@media (max-width: 860px) {
  .split-inner:has(.has-panel) { align-items: center; }
  .split-text.has-panel,
  .split.flip .split-text.has-panel { margin-left: 0; margin-right: 0; }
  .split-media img { aspect-ratio: 4 / 3; height: auto; }
}