/* ==========================================================================
   Rooted — home page skin
   --------------------------------------------------------------------------
   Ported from the design kit's index.html <style> block.

   What changed on the way in, and why:
   - Every `display`, `grid-template-columns`, `gap`, `flex-direction` and
     `align-items` declaration that BB can express natively was REMOVED and
     now lives in the Box modules' node settings. Structure is BB's; skin is
     this file's. (BeaverBuilderRowBuildingGuide.md section 7.)
   - The responsive rules stayed here, because the kit breaks at 860/980/600
     and BB's own responsive settings only fire at its two global breakpoints.
     They are scoped `.fl-builder-content ...` (0,2,0) so they outrank BB's
     per-node `.fl-node-xxxx` rules (0,1,0), which load later in the document.
   - Selectors reach through BB's wrappers where a kit class sits on a module
     rather than the bare element it was written for.

   Loaded after rooted-framework.css and rooted-bb.css.
   ========================================================================== */

/* The container box: BB's module reset zeroes horizontal margin to kill the
   doubled-margin bug, which also kills `margin-inline: auto`. Put it back at
   matching specificity, after. */
.fl-builder-content .bb-container {
  width: 100%;
  max-width: var(--ds-width-container);
  margin-inline: auto;
  padding-inline: var(--ds-space-lg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.fl-builder-content .home-hero {
  background: var(--ds-color-panel);
  padding: var(--ds-space-lg) 0 var(--ds-space-2xl);
}
.fl-builder-content .home-hero__bar {
  padding-bottom: var(--ds-space-md);
  border-bottom: 1px solid var(--ds-color-text-12);
}
.fl-builder-content .home-hero__edition {
  font-family: var(--ds-font-body);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-sm);
  color: var(--ds-color-accent-deep);
}
.fl-builder-content .home-hero__main { margin-top: var(--ds-space-2xl); }
.fl-builder-content .home-hero__title.fl-heading { font-size: var(--ds-text-5xl); }
.fl-builder-content .home-hero__lede {
  font-size: var(--ds-text-lg);
  color: var(--ds-color-text-80);
  margin-top: var(--ds-space-md);
  max-width: 46ch;
}
.fl-builder-content .home-hero__actions { margin-top: var(--ds-space-lg); }
.fl-builder-content .home-hero__note {
  font-size: var(--ds-text-sm);
  color: var(--ds-color-text-55);
  margin-top: var(--ds-space-md);
}

/* The one blessed animation: a three-slide opacity cross-fade, wired by
   class in rooted.js. Slides are STATIC photo modules, never a repeater;
   prefers-reduced-motion holds slide one and starts no timer. */
.fl-builder-content .bb-hero-slides {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}
.fl-builder-content .bb-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.fl-builder-content .bb-hero-slide.is-active { opacity: 1; }
/* The slide IS the photo module's <figure>; only .fl-photo-content sits
   between it and the <img>. */
.fl-builder-content .bb-hero-slide .fl-photo-content { height: 100%; }
.fl-builder-content .bb-hero-slide img.fl-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Grid gaps
   BB emits the `gap` setting for a flex box but nothing at all for a grid
   box, so every grid gap on this page is declared here rather than in the
   node settings. Flex gaps stay in BB. (See rooted-bb.css section 7.)
   -------------------------------------------------------------------------- */
.fl-builder-content .home-hero__main,
.fl-builder-content .story__grid,
.fl-builder-content .week__grid { gap: var(--ds-space-2xl); }
.fl-builder-content .pteaser__grid,
.fl-builder-content .cta-band__inner { gap: var(--ds-space-xl); }
.fl-builder-content .bb-grid { gap: var(--ds-space-md); }

/* ==========================================================================
   Story
   ========================================================================== */
.fl-builder-content .story { padding: var(--ds-space-section) 0; }
.fl-builder-content .bb-stack { position: relative; }
/* The inset plate is the ONE photo on this page that is not full width.
   rooted-bb.css sets `.fl-builder-content .fl-photo { width: 100% }` at (0,2,0)
   to make photo modules fill their cell, which outranks the framework's bare
   `.bb-stack__front { width: 42% }` (0,1,0) and would blow the plate out to
   full width. Restate both the desktop width and the small-screen fallback
   here, where they can win. */
.fl-builder-content .bb-stack__front { width: 42%; }
.fl-builder-content .bb-stack__back img.fl-photo-img {
  width: 100%;
  border-radius: var(--ds-radius-md);
}
.fl-builder-content .bb-stack__front img.fl-photo-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ds-radius-sm);
}
.fl-builder-content .story__text {
  color: var(--ds-color-text-80);
  margin-top: var(--ds-space-sm);
  max-width: 54ch;
}
.fl-builder-content .story__text p + p { margin-top: var(--ds-space-sm); }
.fl-builder-content .story__cta { margin-top: var(--ds-space-md); }

/* ==========================================================================
   Classes
   ========================================================================== */
.fl-builder-content .classes {
  padding: var(--ds-space-section) 0;
  background: var(--ds-color-panel);
}
.fl-builder-content .classes__intro { max-width: 58ch; }
.fl-builder-content .classes__lead {
  color: var(--ds-color-text-55);
  margin-top: var(--ds-space-sm);
}
.fl-builder-content .classes__grid { margin-top: var(--ds-space-xl); }
.fl-builder-content .cls {
  background: var(--ds-color-elevated);
  border: 1px solid var(--ds-color-text-12);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  transition: border-color var(--ds-transition-base);
}
.fl-builder-content .cls:hover { border-color: var(--ds-color-accent); }
.fl-builder-content .cls__img img.fl-photo-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.fl-builder-content .cls__body { padding: var(--ds-space-md); }
.fl-builder-content .cls__level {
  display: inline-block;
  font-size: var(--ds-text-xs);
  color: var(--ds-color-accent-deep);
  border: 1px solid var(--ds-color-text-12);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  margin-top: var(--ds-space-xs);
  line-height: 1.6;
}
.fl-builder-content .cls__desc {
  color: var(--ds-color-text-55);
  font-size: var(--ds-text-sm);
  margin-top: var(--ds-space-xs);
}

/* ==========================================================================
   This week
   ========================================================================== */
.fl-builder-content .week { padding: var(--ds-space-section) 0; }
.fl-builder-content .bb-masthead {
  border-top: 1px solid var(--ds-color-text-25);
  border-bottom: 1px solid var(--ds-color-text-12);
  padding: var(--ds-space-sm) 0;
}
.fl-builder-content .bb-masthead__title.fl-heading {
  font-size: var(--ds-text-2xl);
  /* !important only because BB forces margin on .fl-heading first. */
  margin: 0 !important;
}
.fl-builder-content .bb-masthead__edition {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  letter-spacing: 0.01em;
  color: var(--ds-color-accent-deep);
}
.fl-builder-content .week__rows { margin-top: var(--ds-space-md); }
.fl-builder-content .bb-datarow {
  padding: var(--ds-space-md) 0;
  border-top: 1px solid var(--ds-color-text-12);
}
.fl-builder-content .week__cta { margin-top: var(--ds-space-md); }
.fl-builder-content .week__photo img.fl-photo-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ds-radius-md);
}

/* ==========================================================================
   Teachers
   ========================================================================== */
.fl-builder-content .teach {
  padding: var(--ds-space-section) 0;
  background: var(--ds-color-panel);
}
.fl-builder-content .teach__grid { margin-top: var(--ds-space-xl); }
.fl-builder-content .bb-teacher__photo img.fl-photo-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   Pricing teaser
   ========================================================================== */
.fl-builder-content .pteaser {
  padding: var(--ds-space-2xl) 0;
  background: var(--ds-color-petal);
}
.fl-builder-content .pteaser__lede {
  color: var(--ds-color-text-80);
  margin-top: var(--ds-space-sm);
  max-width: 50ch;
}

/* ==========================================================================
   Voices
   ========================================================================== */
.fl-builder-content .voices { padding: var(--ds-space-section) 0; }
.fl-builder-content .voices__grid { margin-top: var(--ds-space-xl); }

/* ==========================================================================
   Press
   ========================================================================== */
.fl-builder-content .press {
  padding: var(--ds-space-section) 0;
  background: var(--ds-color-panel);
}
.fl-builder-content .press__grid { margin-top: var(--ds-space-xl); }
.fl-builder-content .bb-tearsheet__cover img.fl-photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ==========================================================================
   Closing band
   ========================================================================== */
.fl-builder-content .cta-band { padding: var(--ds-space-2xl) 0; }
.fl-builder-content .cta-band h2.fl-heading {
  color: var(--ds-color-on-ink);
  margin: var(--ds-space-md) 0 0 !important;
}

/* The teachers head baselines its heading against its link. BB's Align
   control has no baseline option, so it is declared here. */
.fl-builder-content .teach__head { align-items: baseline; }
.fl-builder-content .teach__head h2.fl-heading { margin: 0 !important; }

/* ==========================================================================
   Responsive
   Kit breakpoints, restated at .fl-builder-content specificity so they
   outrank BB's later-loading per-node rules.
   ========================================================================== */
@media (max-width: 980px) {
  .fl-builder-content .bb-grid--4,
  .fl-builder-content .bb-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .fl-builder-content .home-hero__main,
  .fl-builder-content .story__grid,
  .fl-builder-content .week__grid { grid-template-columns: 1fr; }
  .fl-builder-content .home-hero__main { gap: var(--ds-space-xl); }
  .fl-builder-content .week__grid { gap: var(--ds-space-xl); }
  .fl-builder-content .story__grid { gap: var(--ds-space-2xl); }
  .fl-builder-content .home-hero__title.fl-heading { font-size: var(--ds-text-4xl); }
  .fl-builder-content .bb-hero-slides { aspect-ratio: 4 / 3; }
}

@media (max-width: 768px) {
  .fl-builder-content .pteaser__grid,
  .fl-builder-content .cta-band__inner { grid-template-columns: 1fr; }
  .fl-builder-content .pteaser__grid { gap: var(--ds-space-lg); }
  .fl-builder-content .cta-band__inner { gap: var(--ds-space-lg); }
  /* Doubled-margin belt-and-braces: at mobile widths the container's own
     gutter is the ONLY horizontal inset. Nothing inside may add its own. */
  .fl-builder-content .bb-container > .fl-module { margin-left: 0; margin-right: 0; }
  .fl-builder-content .bb-datarow { flex-direction: column; gap: 0.25rem; }
}

@media (max-width: 600px) {
  .fl-builder-content .bb-grid--4,
  .fl-builder-content .bb-grid--3,
  .fl-builder-content .bb-grid--2 { grid-template-columns: 1fr; }
  /* Shrink-to-fit image bleed: a split that top-aligns on desktop stops the
     media stretching once it becomes a flex column, so a %-width image
     resolves against its intrinsic size and spills past the viewport. */
  .fl-builder-content .story__grid,
  .fl-builder-content .week__grid { align-items: stretch; }
  .fl-builder-content .bb-stack__front { position: static; width: 70%; margin: -2rem 0 0 auto; }
  .fl-builder-content .bb-stack__front img.fl-photo-img { width: 100%; }
}

@media (max-width: 480px) {
  /* Cards carrying 32-40px of internal padding read as a second margin once
     the section gutter is added. Trim them. */
  .fl-builder-content .cls__body { padding: var(--ds-space-sm); }
  .fl-builder-content .bb-quote,
  .fl-builder-content .bb-card { padding: var(--ds-space-md); }
}