/*
 * thebamboostudio-v1 theme — "Our Story" page.
 * Styles markup rendered by extension/bamboo/catalog/view/template/story/story.twig.
 * Reuses .bb-crumb / .bb-page-head / .bb-eyebrow / .bb-lede / .bb-sec-head
 * (menu-page.css), .bb-stamp / .bb-btn / .bb-btn-filled / .bb-btn-outline
 * (theme.css), and .bb-organic + .bb-echo + blob-A/B/C (hero.css / header SVG)
 * as-is — only new classes are defined here.
 */

.thebamboostudio-v1 .bb-sec-head-center { max-width: 640px; margin-inline: auto; text-align: center; }
/* menu-page.css sets .bb-sec-head h2 to display:flex so the heading can share
   a line with " · Week of …". That overrides the parent's text-align:center,
   leaving the text flex-start-aligned within the centered box. Re-center via
   flex for the centered variant only — the menu page's sec-head isn't centered,
   so this rule doesn't conflict with its inline sub-heading. */
.thebamboostudio-v1 .bb-sec-head-center h2 { justify-content: center; }

/* ============ Section spacing (matches the mock: clamp(3.2rem, 6vw, 5.5rem)) ============
 * Each boundary is governed by exactly one side's padding (the entering
 * section's own top), matching the homepage's convention — otherwise an
 * exiting section's bottom padding silently doubles with the next
 * section's top padding. The last section's bottom relies solely on the
 * footer's own margin-top, same as the homepage.
 */
.thebamboostudio-v1 .bb-story-page > section { padding-top: clamp(3.2rem, 6vw, 5.5rem); }
.thebamboostudio-v1 .bb-story-page .bb-page-head {
  padding-top: clamp(1.8rem, 4vw, 2.8rem);
  padding-bottom: 0; /* .bb-page-head's shared base rule (menu-page.css) sets a small
    bottom padding for the menu page's tighter page-head; zero it here so #name's own
    top padding is the sole source of this gap, not a leftover stacked with it. */
}

/* ============ PAGE HEAD HERO (text + team photo, like landing hero) ============
 * One row, two columns. Title + lede live inside a single .bb-page-head-text
 * wrapper, so the photo can never stretch the gap between them — their
 * spacing is internal to the block. align-items: center then vertically
 * centers the whole text block against the (taller) photo.
 * Frame: a rounded rectangle (not a blob) with TWO offset echo layers in the
 * brand palette — sage bottom-left, blush top-right — so more of the wide
 * landscape team photo is visible. clip-path inset keeps the rounded-rect
 * shape attached to each layer as it offsets.
 */
.thebamboostudio-v1 .bb-page-head-hero .bb-page-head-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas: "text art";
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.thebamboostudio-v1 .bb-page-head-hero .bb-page-head-text { grid-area: text; }
.thebamboostudio-v1 .bb-page-head-hero .bb-page-head-art { grid-area: art; }
.thebamboostudio-v1 .bb-page-head-hero .bb-lede { max-width: 52ch; margin-top: 1rem; }

.thebamboostudio-v1 .bb-page-head-art { position: relative; }
.thebamboostudio-v1 .bb-page-head-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 630;
  max-width: 560px;
  margin-inline: auto;
}
.thebamboostudio-v1 .bb-page-head-photo .bb-echo {
  position: absolute;
  inset: 0;
  clip-path: inset(0 round 28px);
  z-index: 0;
}
.thebamboostudio-v1 .bb-page-head-photo .bb-echo-1 {
  background: var(--brand-primary-light);
  opacity: .45;
  transform: translate(-6%, 7%);
}
.thebamboostudio-v1 .bb-page-head-photo .bb-echo-2 {
  background: var(--color-blush);
  opacity: .55;
  transform: translate(6%, -6%);
}
.thebamboostudio-v1 .bb-page-head-photo img {
  clip-path: inset(0 round 28px);
}

@media (max-width: 900px) {
  .thebamboostudio-v1 .bb-page-head-hero .bb-page-head-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "art"
      "lede";
    gap: 1.4rem;
  }
  /* Flatten the text wrapper so its children become grid items again; the
     named areas re-sequence them to title → photo → lede on mobile (the
     photo sits "just below the title", before the lede). */
  .thebamboostudio-v1 .bb-page-head-hero .bb-page-head-text { display: contents; }
  .thebamboostudio-v1 .bb-page-head-hero .bb-page-head-top { grid-area: top; }
  .thebamboostudio-v1 .bb-page-head-hero .bb-page-head-art { grid-area: art; }
  .thebamboostudio-v1 .bb-page-head-hero .bb-lede { grid-area: lede; margin-top: 0; max-width: none; }
  .thebamboostudio-v1 .bb-page-head-photo {
    /* width:auto (not 100%) so the margins INSET the box — 100% + margins
       would overflow the container by the margin sum and break mobile
       responsiveness (horizontal scroll, no right-hand padding). */
    width: auto;
    max-width: none;
    /* Inset the photo so its offset echo layers (±6% of photo width, ~20px at
       360px) never touch the screen edges — the container's own 12px gutter
       alone isn't enough once the echoes extend past the photo. */
    margin-inline: clamp(14px, 5.5vw, 26px);
  }
  /* Room below the photo: its bottom echo + drop-shadow overflow the box, so
     the grid gap alone reads as flush against the lede on mobile. */
  .thebamboostudio-v1 .bb-page-head-hero .bb-page-head-art { padding-bottom: 14px; }
}

/* Divider between the page head and "What's In A Name" — see theme.css's
   Organic section dividers block for the shared wave pattern/positioning.
   Bigger pad than the homepage sections: the page-head's photo echoes
   overflow their grid area below the photo, so the wave needs extra
   clearance from the elements above it. */
.thebamboostudio-v1 #name {
  position: relative;
  --bb-divider-pad: clamp(4.8rem, 9vw, 8rem);
  padding-top: var(--bb-divider-pad);
}

/* ============ THE NAME (bamboo vs blossom cards) ============ */
.thebamboostudio-v1 .bb-name-grid {
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
@media (max-width: 820px) {
  .thebamboostudio-v1 .bb-name-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
.thebamboostudio-v1 .bb-name-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center;
}
.thebamboostudio-v1 .bb-name-photo { width: 172px; height: 172px; position: relative; }
.thebamboostudio-v1 .bb-name-card .bb-echo { opacity: .32; }
.thebamboostudio-v1 .bb-name-card-bamboo .bb-name-photo .bb-echo { background: var(--brand-primary-light); }
.thebamboostudio-v1 .bb-name-card-blossom .bb-name-photo .bb-echo { background: var(--color-blush); opacity: .5; }
.thebamboostudio-v1 .bb-name-glyph {
  font-family: var(--font-display);
  font-size: 2.6rem; line-height: 1; margin-top: 1.2rem;
  color: var(--brand-primary);
}
.thebamboostudio-v1 .bb-name-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; margin-top: .35rem;
  color: var(--color-heading);
}
.thebamboostudio-v1 .bb-name-role {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: .35rem;
}
.thebamboostudio-v1 .bb-name-card p { color: var(--color-text-muted); font-size: .95rem; margin-top: .8rem; max-width: 34ch; }
.thebamboostudio-v1 .bb-name-traits {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.1rem;
}
.thebamboostudio-v1 .bb-name-traits span {
  font-family: var(--font-eyebrow);
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .3rem .8rem;
  color: var(--color-text-muted);
}

/* ============ TIMELINE ============ */
.thebamboostudio-v1 .bb-timeline {
  list-style: none; margin: clamp(2.6rem, 5vw, 3.4rem) 0 0; padding: 0; position: relative;
}
.thebamboostudio-v1 .bb-timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--brand-primary-light) 55%, transparent) 0 26px,
    transparent 26px 34px);
  border-radius: var(--radius-pill);
}
.thebamboostudio-v1 .bb-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.4rem, 6vw, 4.5rem);
  padding-block: clamp(1.8rem, 3.5vw, 2.6rem);
  align-items: center;
}
.thebamboostudio-v1 .bb-tl-dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: 26px; height: 26px;
  background: var(--brand-primary); clip-path: url(#blobB);
  box-shadow: 0 0 0 6px var(--color-bg);
}
.thebamboostudio-v1 .bb-tl-item:nth-child(even) .bb-tl-dot { background: var(--brand-accent); }
.thebamboostudio-v1 .bb-tl-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  box-shadow: var(--shadow-md);
}
.thebamboostudio-v1 .bb-tl-item:nth-child(odd) .bb-tl-card { grid-column: 1; }
.thebamboostudio-v1 .bb-tl-item:nth-child(odd) .bb-tl-photo { grid-column: 2; }
.thebamboostudio-v1 .bb-tl-item:nth-child(even) .bb-tl-card { grid-column: 2; }
.thebamboostudio-v1 .bb-tl-item:nth-child(even) .bb-tl-photo { grid-column: 1; grid-row: 1; }
.thebamboostudio-v1 .bb-tl-item:nth-child(odd) .bb-tl-card { text-align: right; }
.thebamboostudio-v1 .bb-tl-year { border-color: var(--brand-primary); color: var(--brand-primary); font-size: .78rem; }
.thebamboostudio-v1 .bb-tl-item:nth-child(even) .bb-tl-year { border-color: var(--brand-accent); color: var(--brand-accent); }
.thebamboostudio-v1 .bb-tl-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; margin-top: .8rem;
  color: var(--color-heading);
}
.thebamboostudio-v1 .bb-tl-card p { color: var(--color-text-muted); font-size: .95rem; margin-top: .55rem; }
.thebamboostudio-v1 .bb-tl-photo { width: 100%; max-width: 230px; aspect-ratio: 1 / 1; margin-inline: auto; }
.thebamboostudio-v1 .bb-tl-photo .bb-echo { opacity: .3; }
.thebamboostudio-v1 .bb-tl-note { text-align: center; color: var(--color-text-muted); font-size: .85rem; margin-top: 1.8rem; }

@media (max-width: 760px) {
  .thebamboostudio-v1 .bb-timeline::before { left: 12px; transform: none; }
  .thebamboostudio-v1 .bb-tl-item { grid-template-columns: 1fr; gap: 1.1rem; padding-left: 44px; }
  .thebamboostudio-v1 .bb-tl-dot { left: 12px; width: 22px; height: 22px; }
  .thebamboostudio-v1 .bb-tl-item:nth-child(odd) .bb-tl-card,
  .thebamboostudio-v1 .bb-tl-item:nth-child(even) .bb-tl-card { grid-column: 1; text-align: left; }
  .thebamboostudio-v1 .bb-tl-item:nth-child(odd) .bb-tl-photo,
  .thebamboostudio-v1 .bb-tl-item:nth-child(even) .bb-tl-photo { grid-column: 1; grid-row: auto; max-width: 190px; margin-inline: 0; }
}

/* ============ FOUNDER QUOTE ============ */
.thebamboostudio-v1 .bb-founder-band {
  background: var(--color-bg-soft);
  border-radius: 32px;
  padding: clamp(2.4rem, 5vw, 3.6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.thebamboostudio-v1 .bb-founder-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.2rem);
  line-height: 1.3;
  color: var(--color-heading);
  max-width: 26ch;
  margin: 1rem auto 0;
  text-wrap: balance;
}
.thebamboostudio-v1 .bb-founder-attribution {
  margin-top: 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
}
.thebamboostudio-v1 .bb-founder-attribution img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--brand-primary-light); }
.thebamboostudio-v1 .bb-founder-who {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--color-heading);
}
.thebamboostudio-v1 .bb-founder-what { color: var(--color-text-muted); font-size: var(--fs-sm); }
.thebamboostudio-v1 .bb-founder-fringe {
  position: absolute; right: clamp(.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%);
  width: 60px; opacity: .35;
}
@media (max-width: 760px) { .thebamboostudio-v1 .bb-founder-fringe { display: none; } }

/* ============ CTA ============ */
.thebamboostudio-v1 .bb-cta-band { text-align: center; }
.thebamboostudio-v1 .bb-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.4vw + 1.2rem, 2.7rem);
  margin-block: .7rem .8rem;
  font-weight: 600;
  color: var(--color-heading);
}
.thebamboostudio-v1 .bb-cta-band p { color: var(--color-text-muted); font-size: 1.1rem; max-width: 48ch; margin-inline: auto; }
.thebamboostudio-v1 .bb-cta-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem;
}