/* =====================================================
   CONTENT BLOCKS — storefront
   Styles the blocks a page document can hold and the frames around them. The design-system
   sections themselves (about-*, legal-*, value-card, stat-item, timeline-item, products__grid)
   are reused from _about.css, _legal.css and _cards.css — this file only adds what the design
   system genuinely does not have: the width scale, the hero frames' image and alignment, callout
   tones, the standalone quote, the table of contents, the legal two-column frame, and the ghost
   button.
   Loaded after site.css on purpose: .page-block--* and .container share specificity, and the
   modifier has to win.
   ===================================================== */

/* ── The reading width scale ─────────────────────────────────────────────
   A block declares how wide its text column may be; the shell decides nothing about width. ── */
.page-block {
  position: relative;
}

.page-block--narrow > .container { max-width: 640px; }
.page-block--regular > .container { max-width: var(--content-max); }
.page-block--wide > .container { max-width: 1040px; }
.page-block--full > .container { max-width: none; }

/* The legal and standard frames already limit the column. A block inside them bringing its own
   .container would narrow the text twice, so inside a shell the block stops owning the width. */
.legal-content__inner .page-block > .container,
.legal-content__inner .page-block--narrow > .container,
.legal-content__inner .page-block--regular > .container,
.legal-content__inner .page-block--wide > .container,
.legal-content__inner .page-block--full > .container {
  max-width: none;
  padding: 0;
}

/* ── Hero frames ───────────────────────────────────────────────────────
   .page-hero is emitted beside the frame the block picked (legal-hero / about-hero / page-header),
   so the shared parts are styled once here and the frames keep their own look. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.page-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero--overlay .page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(45 45 45 / 0.55);
}

.page-hero__label {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dusty-rose);
  margin: 0 0 var(--space-sm);
}

.page-hero--overlay .page-hero__label,
.page-hero--overlay .legal-hero__title,
.page-hero--overlay .legal-hero__desc {
  color: var(--color-white);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.page-hero--center,
.about-hero--center,
.legal-hero--center,
.page-header--center {
  text-align: center;
}

.page-hero--center .page-hero__actions,
.legal-hero--center .page-hero__actions,
.page-header--center .page-hero__actions {
  justify-content: center;
}

.page-hero--compact {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.page-hero--tall {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-header__subtitle {
  color: var(--color-gray-600);
  max-width: var(--content-max);
  margin: var(--space-sm) auto 0;
}

/* Ghost button: used across the storefront markup before it was ever defined, so it is defined
   here rather than by editing the button sheet another feature owns. */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-charcoal);
}

.btn--ghost:hover {
  border-color: var(--color-charcoal);
  background: var(--color-cream);
  color: var(--color-charcoal);
}

/* ── Sections and prose ───────────────────────────────────────────────
   store-rich-content carried the About page's CMS text with no rules at all, so the typography
   rich text needs is stated once here and shared by every prose-bearing block. */
.store-rich-content > :first-child { margin-top: 0; }

.store-rich-content > :last-child { margin-bottom: 0; }

.store-rich-content h2,
.store-rich-content h3,
.store-rich-content h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
  line-height: var(--line-height-tight);
  margin: var(--space-lg) 0 var(--space-sm);
}

.store-rich-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.store-rich-content h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.store-rich-content h4 { font-size: 1.125rem; }

.store-rich-content p,
.store-rich-content ul,
.store-rich-content ol {
  color: var(--color-gray-800);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-md);
}

.store-rich-content ul { list-style: disc; padding-left: 1.25rem; }
.store-rich-content ol { list-style: decimal; padding-left: 1.25rem; }
.store-rich-content li { margin-bottom: var(--space-xs); }

.store-rich-content a {
  color: var(--color-dusty-rose-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.store-rich-content a:hover { color: var(--color-terracotta-strong); }

.store-rich-content blockquote {
  border-left: 3px solid var(--color-dusty-rose);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-gray-800);
}

.store-rich-content img {
  margin: var(--space-md) 0;
  border-radius: 2px;
}

/* Deep links: the legal anchors live on the section heading now, so the fixed header has to be
   subtracted there too — the same rule .legal-section already carries. */
.legal-section h2[id],
.legal-section h3[id],
.page-block [id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

/* ── Standalone image ─────────────────────────────────────────────── */
.page-image {
  margin: 0;
}

.page-image img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.page-image--narrow { max-width: 480px; }
.page-image--regular { max-width: 720px; }
.page-image--wide { max-width: 1040px; }
.page-image--full { max-width: none; }

.page-image--narrow,
.page-image--regular,
.page-image--wide {
  margin-inline: auto;
}

.page-image__caption {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
}

/* ── Split ──────────────────────────────────────────────────────────
   about-story__grid is image-first; the mirror image only has to swap the grid order. */
.page-split--image-right .about-story__image { order: 2; }
.page-split--image-right .about-story__content { order: 1; }

@media (max-width: 768px) {
  .page-split--image-right .about-story__image { order: 0; }
  .page-split--image-right .about-story__content { order: 1; }
}

/* ── Cards ──────────────────────────────────────────────────────────
   The design system's grid is hardcoded to three columns; the columns a block chose are passed in
   as a custom property so one rule covers 2, 3 and 4 without duplicating the card styles. */
.page-block__cards {
  grid-template-columns: repeat(var(--page-block-columns, 3), minmax(0, 1fr));
}

.value-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: var(--space-md);
}

.page-card__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dusty-rose-strong);
  margin: 0 0 var(--space-xs);
}

@media (max-width: 900px) {
  .page-block__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .page-block__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ── Team ─────────────────────────────────────────────────────────── */
.page-team__member + .page-team__member {
  margin-top: var(--space-xl);
}

/* ── Callout tones ──────────────────────────────────────────────────
   legal-notice today has the one "seller details missing" look; the four semantic tones share its
   shape and differ only in the accent. */
.page-callout--info { border-left-color: var(--color-info); }
.page-callout--success { border-left-color: var(--color-success); }
.page-callout--warning { border-left-color: var(--color-warning); }
.page-callout--error { border-left-color: var(--color-error); }

.page-callout__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs);
}

.page-callout > :last-child { margin-bottom: 0; }

/* ── Quote ──────────────────────────────────────────────────────────
   Nothing in the design system pulled a single sentence out of the prose before. */
.page-quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.page-quote__portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.page-quote__body {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
}

.page-quote__attribution {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

@media (max-width: 600px) {
  .page-quote { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .page-quote__portrait { margin-inline: auto; }
}

/* ── CTA tones ────────────────────────────────────────────────────── */
.page-cta--cream { background: var(--color-cream); }
.page-cta--rose { background: var(--color-dusty-rose-light); }
.page-cta--charcoal { background: var(--color-charcoal); }
.page-cta--charcoal .about-cta__title { color: var(--color-white); }
.page-cta--charcoal .about-cta__text { color: var(--color-gray-300); }

/* ── Buttons inside a block ───────────────────────────────────────── */
.page-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ── Products ─────────────────────────────────────────────────────── */
.page-block__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
}

.page-block__rail > * { scroll-snap-align: start; }

.page-products__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ── Table of contents ────────────────────────────────────────────── */
.page-toc {
  border: 1px solid var(--color-gray-200);
  border-radius: 4px;
  padding: var(--space-md);
  background: var(--color-gray-100);
}

.page-toc__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 var(--space-sm);
}

.page-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-toc__item a {
  display: block;
  padding: 0.3125rem 0;
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-toc__item a:hover {
  color: var(--color-terracotta-strong);
  border-bottom-color: var(--color-dusty-rose);
}

.page-toc__item--3 a {
  padding-left: var(--space-md);
  font-size: 0.9375rem;
  color: var(--color-gray-600);
}

/* ── Legal frame ──────────────────────────────────────────────────
   A sticky contents column beside the reading column. Below the desktop breakpoint the contents
   collapse above the text, where it is a disclosure the reader can open and skip. */
.page-legal {
  display: block;
}

.page-legal--toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .page-legal--toc {
    grid-template-columns: 240px minmax(0, 1fr);
    /* the reading column keeps its own measure, so the pair is centred as a whole */
    justify-content: center;
  }

  .page-legal__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
  }

  .page-legal__body {
    max-width: none;
    margin: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-legal__aside { scroll-behavior: auto; }
}