/**
 * blocks.css — foundation for the auto-generated block-library.
 *
 * Loaded after tokens.css, base.css, atoms.css, pf-block.css. This file
 * styles the universal block-shell + the slot-elements + the layout-kind
 * modifiers + per-category overrides emitted by the block-generator
 * (apps/sites/maestro/scripts/lib/block-generator.ts).
 *
 * Hooks the generator emits:
 *   - .block                          (every block-root)
 *   - .block--<slug>                  (per-block override-class)
 *   - .block--layout-<kind>           (grid|split|stack|stack-c|flex|carousel|h-scroll|masonry|card|fullbleed-stack|sticky-l|sticky-r|bento|absolute|fixed|drawer|filter-grid|compose)
 *   - .block--<axis>-<value>          (axis modifiers, e.g. .block--media-pos-R)
 *   - .block__container, .block__container--<size>
 *   - .block__cell, .block__cell--<name>
 *   - .block__<slot>                  (per-slot element class, e.g. .block__h1)
 *   - .block__<slot>-list/-item       (repeating slots)
 *   - data-block-type, data-layout-kind, data-category, data-section
 *
 * The layout-engine in the block-generator emits inline styles for
 * `display`, `grid-template-columns`, `gap`, `flex-direction` on the
 * container/section. THIS file is the visual layer on top: typography,
 * color, padding, button-styling, responsive collapse, category-driven
 * type-scale tweaks (heroes get display-XL, footers compact, etc.).
 *
 * Token-aliasing: the layout-parser produces var(--space-md|lg|xl) etc.
 * Those aren't emitted by tokens.css — they're aliased here onto the
 * real --space-inline-* / --space-block-* design-system tokens so a
 * theme-swap (different design-system.yaml) auto-propagates.
 */

/* =====================================================================
   1. Token aliases — bridge layout-parser shorthand to real tokens
   ===================================================================== */

:root {
  /* Generic spacing scale used by layout-parser (gap-xs..gap-xl). */
  --space-xs: var(--space-inline-xs, 0.25rem);
  --space-sm: var(--space-inline-sm, 0.5rem);
  --space-md: var(--space-inline-md, 1rem);
  --space-lg: var(--space-inline-lg, 1.5rem);
  --space-xl: var(--space-inline-xl, 2rem);

  /* Container widths for layout-parser containerToCssVar(). */
  --container-narrow: 40rem;
  --container-reading: 56rem;
  --container-default: 72rem;
  --container-wide: 88rem;

  /* Section breathing-room — defaults; categories override below. */
  --block-pad-y: var(--space-section-medium, 6rem);
  --block-pad-x: var(--space-inline-md, 1rem);

  /* Cell internal padding (used inside grid/split cells). */
  --block-cell-pad: 0;

  /* Vertical rhythm between consecutive slot-elements inside a stack. */
  --block-slot-gap: var(--space-block-default, 1rem);
}

/* =====================================================================
   2. Block root + container
   ===================================================================== */

.block {
  position: relative;
  padding-block: var(--block-pad-y);
  padding-inline: var(--block-pad-x);
  color: var(--color-text-default);
}

/* When a container is wrapped, padding lives on .block; the container
   only constrains width + handles the layout-grid/flex. */
.block__container {
  width: 100%;
  margin-inline: auto;
}
.block__container--narrow  { max-width: var(--container-narrow); }
.block__container--reading { max-width: var(--container-reading); }
.block__container--default { max-width: var(--container-default); }
.block__container--wide    { max-width: var(--container-wide); }

/* Cells inside grid/split layouts. */
.block__cell {
  min-width: 0; /* allow children to shrink in grid-cells */
  padding: var(--block-cell-pad);
  display: flex;
  flex-direction: column;
  gap: var(--block-slot-gap);
}

/* =====================================================================
   3. Slot elements — typography defaults
   ===================================================================== */

.block__eyebrow {
  margin: 0;
  font-family: var(--text-ui-button-family);
  font-size: var(--text-body-small-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
}

.block__h1, .block__title {
  margin: 0;
  font-family: var(--text-heading-h1-family);
  font-size: var(--text-heading-h1-size);
  line-height: var(--text-heading-h1-line-height);
  font-weight: var(--text-heading-h1-weight, 600);
  letter-spacing: var(--text-heading-h1-letter-spacing, normal);
  color: var(--color-text-default);
}

.block__h2 {
  margin: 0;
  font-family: var(--text-heading-h2-family);
  font-size: var(--text-heading-h2-size);
  line-height: var(--text-heading-h2-line-height);
  font-weight: var(--text-heading-h2-weight, 600);
  letter-spacing: var(--text-heading-h2-letter-spacing, normal);
  color: var(--color-text-default);
}

.block__h3 {
  margin: 0;
  font-family: var(--text-heading-h3-family);
  font-size: var(--text-heading-h3-size);
  line-height: var(--text-heading-h3-line-height);
  font-weight: var(--text-heading-h3-weight, 600);
  color: var(--color-text-default);
}

.block__h4 {
  margin: 0;
  font-family: var(--text-heading-h4-family);
  font-size: var(--text-heading-h4-size);
  line-height: var(--text-heading-h4-line-height);
  font-weight: var(--text-heading-h4-weight, 600);
  color: var(--color-text-default);
}

.block__sub, .block__subtitle, .block__lead {
  margin: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.block__body, .block__description, .block__copy, .block__text {
  margin: 0;
  font-size: var(--text-body-default-size);
  line-height: var(--text-body-default-line-height);
  color: var(--color-text-default);
  max-width: 65ch;
}

.block__caption, .block__label, .block__meta {
  margin: 0;
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  color: var(--color-text-subtle);
}

.block__quote {
  margin: 0;
  font-family: var(--text-display-md-family);
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-line-height);
  color: var(--color-text-default);
  font-style: italic;
}

/* =====================================================================
   4. CTA buttons — primary / secondary / ghost
   ===================================================================== */

.block__cta-primary,
.block__cta-secondary,
.block__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline-xs);
  padding: var(--space-inline-sm) var(--space-inline-lg);
  font-family: var(--text-ui-button-family);
  font-size: var(--text-ui-button-size, 0.9375rem);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-medium);
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  cursor: pointer;
  align-self: flex-start;
}

.block__cta-primary,
.block__cta {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse, #fff);
  border: 1px solid var(--color-accent-primary);
}
.block__cta-primary:hover,
.block__cta:hover {
  background: var(--color-accent-primary-hover, var(--color-accent-primary));
  border-color: var(--color-accent-primary-hover, var(--color-accent-primary));
}

.block__cta-secondary {
  background: transparent;
  color: var(--color-text-default);
  border: 1px solid var(--color-border-strong, var(--color-border-default));
}
.block__cta-secondary:hover {
  background: var(--color-background-muted);
}

/* In stack-c layouts, center buttons too. */
.block--layout-stack-c .block__cta-primary,
.block--layout-stack-c .block__cta-secondary,
.block--layout-stack-c .block__cta {
  align-self: center;
}

/* =====================================================================
   5. Media + logo + icon placeholders
   ===================================================================== */

.block__media,
.block__image,
.block__logo,
.block__avatar,
.block__icon {
  display: block;
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--color-background-muted);
}

/* When the slot has no real content, give it a visible aspect-ratio so
   the layout doesn't collapse to zero-height during demo/development. */
.block__media:empty,
.block__image:empty,
.block__logo:empty {
  aspect-ratio: 16 / 10;
  min-height: 8rem;
  background: linear-gradient(135deg,
    var(--color-background-muted) 0%,
    var(--color-background-sunken, var(--color-background-muted)) 100%);
}

.block__avatar:empty {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  width: 3rem;
  height: 3rem;
}

.block__icon:empty {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-small);
}

img.block__media,
img.block__image,
img.block__logo,
img.block__avatar {
  width: 100%;
  height: auto;
}

/* =====================================================================
   6. Layout-kind modifiers
   ===================================================================== */

/* Stack-centered: center the whole content column. */
.block--layout-stack-c .block__container,
.block--layout-stack-c > * {
  text-align: center;
}
.block--layout-stack-c .block__sub,
.block--layout-stack-c .block__body {
  margin-inline: auto;
}

/* Card: padded box with subtle border. */
.block--layout-card {
  padding: var(--space-block-looser);
  border-radius: var(--radius-large);
  border: 1px solid var(--color-border-default);
  background: var(--color-background-default);
}

/* Bento: hint at multi-cell tile-grid; cells decide their own size. */
.block--layout-bento .block__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(8rem, auto);
  gap: var(--space-md);
}

/* Carousel + h-scroll cells need a width-floor so they're scrollable. */
.block--layout-carousel > * > .block__cell,
.block--layout-h-scroll > * > .block__cell,
.block--layout-carousel .block__cell,
.block--layout-h-scroll .block__cell {
  flex: 0 0 min(80vw, 24rem);
  scroll-snap-align: start;
}

/* Masonry: items take the natural height. */
.block--layout-masonry > .block__cell,
.block--layout-masonry .block__cell {
  break-inside: avoid;
  margin-bottom: var(--space-md);
}

/* Fullbleed: edge-to-edge, no horizontal padding. */
.block--layout-fullbleed-stack,
[data-layout-kind="fullbleed-stack"] {
  padding-inline: 0;
}

/* Sticky-l / sticky-r: make the smaller cell sticky inside its track. */
.block--layout-sticky-l .block__cell:first-child,
.block--layout-sticky-r .block__cell:last-child {
  position: sticky;
  top: var(--space-section-tight, 3rem);
  align-self: start;
}

/* =====================================================================
   7. Repeating slot lists
   ===================================================================== */

[class*="-list"][class^="block__"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

[class*="-item"][class^="block__"] {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Inside a grid-style block, repeating items become grid-cells. */
.block--layout-grid [class*="-list"][class^="block__"],
.block--layout-bento [class*="-list"][class^="block__"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Inside a stack-style block (FAQs, narrative blocks, etc.), items
   should stack vertically — the default flex-wrap-row turns them into
   a row of N which is wrong for accordion-lists, FAQ items, etc. */
.block--layout-stack [class*="-list"][class^="block__"],
.block--layout-stack-c [class*="-list"][class^="block__"],
.block--layout-fullbleed-stack [class*="-list"][class^="block__"] {
  flex-direction: column;
  flex-wrap: nowrap;
}

/* And inside a stack-style list, items shouldn't have the `flex: 1 1 12rem`
   default (that produces a 12rem minimum height per item — fine for cards
   in a row, terrible for stacked FAQs which become 12rem-tall blanks). */
.block--layout-stack [class*="-list"][class^="block__"] > [class*="-item"],
.block--layout-stack-c [class*="-list"][class^="block__"] > [class*="-item"],
.block--layout-fullbleed-stack [class*="-list"][class^="block__"] > [class*="-item"] {
  flex: 0 0 auto;
}

/* When a repeating-slot list is the ONLY structural child of a grid block,
   dissolve the list-wrapper so its items become direct grid-cells of the
   parent. Without this, the inner list takes only 1 column of the parent
   grid, then auto-fits its own items inside that cramped column.
   This is what makes pricing-3-tier, testimonial-grid-3, features-3up
   render as proper N-column grids of items rather than a single column. */
.block--layout-grid > .block__container > [class*="-list"][class^="block__"]:only-child,
.block--layout-grid > [class*="-list"][class^="block__"]:only-child,
.block--layout-bento > .block__container > [class*="-list"][class^="block__"]:only-child,
.block--layout-bento > [class*="-list"][class^="block__"]:only-child {
  display: contents;
}

/* Columns-axis: when the spec exposes a `columns` axis (e.g.
   logos-mono-color-hover, footer-mid), honor it as an explicit
   grid-template-columns count. Wins over the auto-fit default; uses
   high-specificity selector + !important to beat the inline-style on
   the container that the layout-parser emits for explicit grid-N
   layouts. */
.block--columns-2 .block__container,
.block--columns-2 [class*="-list"][class^="block__"] { grid-template-columns: repeat(2, 1fr) !important; }
.block--columns-3 .block__container,
.block--columns-3 [class*="-list"][class^="block__"] { grid-template-columns: repeat(3, 1fr) !important; }
.block--columns-4 .block__container,
.block--columns-4 [class*="-list"][class^="block__"] { grid-template-columns: repeat(4, 1fr) !important; }
.block--columns-5 .block__container,
.block--columns-5 [class*="-list"][class^="block__"] { grid-template-columns: repeat(5, 1fr) !important; }
.block--columns-6 .block__container,
.block--columns-6 [class*="-list"][class^="block__"] { grid-template-columns: repeat(6, 1fr) !important; }

/* For columns-axis blocks whose layout-parser fell to compose (because
   spec said literal "grid-N"), the section/container has inline
   display:flex from the generator. Override with !important so the
   columns-N rules above take effect. */
.block--columns-2 .block__container,
.block--columns-3 .block__container,
.block--columns-4 .block__container,
.block--columns-5 .block__container,
.block--columns-6 .block__container,
.block--columns-2 [class*="-list"][class^="block__"],
.block--columns-3 [class*="-list"][class^="block__"],
.block--columns-4 [class*="-list"][class^="block__"],
.block--columns-5 [class*="-list"][class^="block__"],
.block--columns-6 [class*="-list"][class^="block__"] {
  display: grid !important;
  flex-direction: initial !important;
  gap: var(--space-md);
}

/* Real <table> rendering for blocks whose @layout starts with "table"
   (features-comparison-table, pricing-comparison-matrix, etc.). The
   generator emits a <table> with <thead>/<tbody> sections; this rule
   makes it readable. */
.block__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-default-size);
  line-height: var(--text-body-default-line-height);
}
.block__table thead th {
  text-align: left;
  font-family: var(--text-ui-button-family);
  font-weight: 600;
  font-size: var(--text-body-small-size);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-block-default) var(--space-inline-md);
  border-bottom: 2px solid var(--color-border-strong, var(--color-border-default));
}
.block__table tbody td {
  padding: var(--space-block-default) var(--space-inline-md);
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: top;
  color: var(--color-text-default);
}
.block__table tbody td:first-child {
  font-weight: 500;
}
/* Group-headers (e.g. "Connections", "Security & control" rows in the
   pricing matrix). The pattern: a <tr> whose td has colspan>1. */
.block__table tbody td[colspan] {
  font-family: var(--text-ui-button-family);
  font-weight: 600;
  font-size: var(--text-body-small-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-background-muted);
  border-bottom: 1px solid var(--color-border-default);
  padding-block: var(--space-block-tight);
}

/* Bento hero-tile: when the bento has a hero-tile axis set to a corner
   (TL/TR/BL/BR), span the first item across 2 cols × 2 rows. Combined
   with the 4-col bento-default, this turns a 5-tile bento into a clean
   2x2 hero + 4 thirds (filling the remaining 6 cells over 2 rows). */
.block--layout-bento [class*="-item"][class^="block__"]:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* =====================================================================
   8. Per-category + per-section overrides
   ===================================================================== */

/* Heroes — bigger type, more breathing room. */
[data-section="heroes"] {
  --block-pad-y: var(--space-section-large, 9rem);
}
[data-section="heroes"] .block__h1 {
  font-family: var(--text-display-xl-family);
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line-height);
  font-weight: var(--text-display-xl-weight, 400);
  letter-spacing: var(--text-display-xl-letter-spacing, -0.02em);
}
[data-section="heroes"] .block__sub {
  font-size: var(--text-body-large-size);
  max-width: 50ch;
}

/* Footers + nav — compact. */
[data-section="footers"],
[data-section="navigation"],
[data-section="nav"],
[data-block-type^="footer-"],
[data-block-type^="nav-"] {
  --block-pad-y: var(--space-section-small, 4rem);
  --block-slot-gap: var(--space-block-default, 1rem);
}
[data-section="footers"] .block__h2,
[data-section="footers"] .block__h3,
[data-block-type^="footer-"] .block__h2,
[data-block-type^="footer-"] .block__h3 {
  font-size: var(--text-heading-h4-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Conversion-blocks (pricing, CTA-banners) — assertive but not loud. */
[data-category="conversion"] {
  --block-pad-y: var(--space-section-medium);
}
[data-category="conversion"] .block__h2 {
  font-family: var(--text-display-md-family);
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-line-height);
}

/* Content-blocks (text-heavy editorial) — reading-friendly. */
[data-category="content"] {
  --block-pad-y: var(--space-section-medium);
  --block-slot-gap: var(--space-block-loose, 1.5rem);
}
[data-category="content"] .block__body {
  max-width: 70ch;
}

/* Application-blocks (dashboards, tables, app-shell) — tight, no decoration. */
[data-category="applications"] {
  --block-pad-y: var(--space-section-tight, 3rem);
  --block-cell-pad: var(--space-md);
}

/* Grids-cards category — card-like cells get a subtle elevation. */
[data-category="grids-cards"] [class*="-item"][class^="block__"] {
  padding: var(--space-block-looser);
  border-radius: var(--radius-large);
  background: var(--color-background-default);
  border: 1px solid var(--color-border-default);
}

/* Pricing tiers (data-section="pricing") get the same card treatment
   plus extra padding + featured-tier highlight. Without it the tiers
   blend into the page background and lose hierarchy. */
[data-section="pricing"] [class*="-item"][class^="block__"] {
  padding: var(--space-block-looser);
  border-radius: var(--radius-large);
  background: var(--color-background-default);
  border: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-block-default);
}

/* Featured-center axis: highlight the middle tier with stronger border. */
.block--featured-center [class*="-item"][class^="block__"]:nth-child(2) {
  border-color: var(--color-accent-primary);
  border-width: 2px;
}

/* Niches — leave to the specialized blocks; keep generic spacing. */

/* =====================================================================
   9. Responsive collapse
   ===================================================================== */

@media (max-width: 768px) {
  /* Collapse multi-column grids/splits to single column. */
  .block--layout-grid .block__container,
  .block--layout-split .block__container,
  .block--layout-sticky-l .block__container,
  .block--layout-sticky-r .block__container,
  .block--layout-bento .block__container {
    grid-template-columns: 1fr !important;
  }
  /* Sticky cells unstick on small screens. */
  .block--layout-sticky-l .block__cell:first-child,
  .block--layout-sticky-r .block__cell:last-child {
    position: static;
  }
  /* Lower padding on small screens. */
  .block {
    --block-pad-y: var(--space-section-small, 4rem);
  }
  [data-section="heroes"] {
    --block-pad-y: var(--space-section-medium, 6rem);
  }
  /* Display-XL on heroes scales down via clamp() already; nothing to do. */
}

/* Print: kill background colors, keep typography. */
@media print {
  .block { background: transparent !important; padding-block: 1rem !important; }
}