/**
 * Shared components — SPEC.md section 04.
 * Sections are stubbed in build order; each is filled by the issue noted above it.
 */


/* ttepavac-6yc.7 — Hero, category tile, testimonial card, Instagram strip */
/* ttepavac-6yc.8 — Filter chip, story card */
/* ttepavac-6yc.10 — Fine-art masthead, figure, buttons */
/* ttepavac-6yc.11 — Calendar, form, success card */
/* ttepavac-6yc.13 — Package card, add-on row, info card, process step, FAQ item */

/* --- Layout primitives used by every template ------------------------------ */

.tt-section {
  padding-block: var(--wp--preset--spacing--section-y);
  padding-inline: var(--wp--preset--spacing--section-x);
}

.tt-section--sub {
  padding-block: var(--wp--preset--spacing--section-y-sub);
}

/* Dark surfaces, named after the tokens they paint the way the CTA tones are.
   Global rather than block-scoped: the testimonial band and the category band
   are different blocks asking for the same two greens. */
.tt-section--forest-3 {
  background: var(--wp--preset--color--forest-3);
}

.tt-section--forest-1 {
  background: var(--wp--preset--color--forest-1);
}

/* Each of these is used on its own, never as a base plus modifier, so every one
   centres itself. Without the auto margin they pin to the left edge, which only
   shows up past the container width — invisible at 1440, obvious at 4K. */

.tt-container,
.tt-container--grid,
.tt-container--about,
.tt-container--stats,
.tt-container--wide,
.tt-container--fineart {
  width: 100%;
  margin-inline: auto;
}

.tt-container {
  max-width: var(--wp--custom--container--text);
}

.tt-container--grid {
  max-width: var(--wp--custom--container--grid);
}

.tt-container--about {
  max-width: var(--wp--custom--container--about);
}

.tt-container--stats {
  max-width: var(--wp--custom--container--stats);
}

.tt-container--wide {
  max-width: var(--wp--custom--container--wide);
}

.tt-container--fineart {
  max-width: var(--wp--custom--container--fineart);
}

/* Intrinsic grids — they reflow without breakpoints (SPEC 03). */
.tt-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--wp--preset--spacing--gap-grid);
}

.tt-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--wp--preset--spacing--gap-grid);
}

.tt-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--wp--preset--spacing--gap-grid);
}

.tt-grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr));
  gap: var(--wp--preset--spacing--gap-grid);
}

/* --- Pills ----------------------------------------------------------------- */

.tt-pill {
  display: inline-block;
  font-size: var(--wp--preset--font-size--button);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--button);
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: var(--wp--custom--radius--pill);
  white-space: nowrap;
  transition: background-color var(--wp--custom--motion--chip) var(--wp--custom--motion--ease),
    color var(--wp--custom--motion--chip) var(--wp--custom--motion--ease);
}

.tt-pill--solid {
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--forest-2);
}

.tt-pill--outline {
  border: 1px solid var(--wp--custom--alpha--outline-cream-55);
  color: var(--wp--preset--color--cream);
}

.tt-pill--outline:hover {
  background: var(--wp--custom--alpha--wash-cream);
}

.tt-pill--ink {
  background: var(--wp--preset--color--forest-1);
  color: var(--wp--preset--color--cream);
}

.tt-pill--ink-outline {
  border: 1px solid var(--wp--preset--color--btn-outline);
  color: var(--wp--preset--color--ink);
}

/* --- Section headers ------------------------------------------------------- */

.tt-head {
  max-width: var(--wp--custom--container--text);
  margin-inline: auto;
}

.tt-head--center {
  text-align: center;
}

/* The category band sets its lede beside the title rather than under it
   (prototype lines 100-108). It wraps on its own, so it needs no breakpoint. */
.tt-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--gap-grid);
  max-width: var(--wp--custom--container--grid);
}

/* Without this the group's min-content width keeps a long headline from
   shrinking, and the lede beside it is pushed out of the row. */
.tt-head__lead {
  min-width: 0;
}

.tt-head__kicker {
  font-size: var(--wp--preset--font-size--kicker);
  font-weight: 400;
  letter-spacing: var(--wp--custom--tracking--kicker);
  text-transform: uppercase;
  color: var(--wp--preset--color--royal);
  margin-bottom: 20px;
}

.tt-head--on-green .tt-head__kicker {
  color: var(--wp--preset--color--sage-1);
}

.tt-head__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--title);
  line-height: 1.02;
  color: var(--wp--preset--color--ink);
}

.tt-head--on-green .tt-head__title {
  color: var(--wp--preset--color--cream-hi);
}

.tt-head__title em {
  font-style: italic;
  color: var(--wp--preset--color--royal);
}

.tt-head--on-green .tt-head__title em {
  color: var(--wp--preset--color--sage-3);
}

.tt-head__lede {
  margin-top: 22px;
  font-size: var(--wp--preset--font-size--body-s);
  line-height: 1.8;
  color: var(--wp--preset--color--ink-3);
  max-width: var(--wp--custom--container--lede);
}

/* base.css caps every paragraph at the reading measure, and a kicker is a <p>,
   so inside a centred head it needs the auto margins as much as the lede does —
   without them its 560px box is left-flushed and the kicker sits well left of
   the title it labels. */
.tt-head--center .tt-head__kicker,
.tt-head--center .tt-head__lede {
  margin-inline: auto;
}

.tt-head--split .tt-head__lede {
  margin-top: 0;
  max-width: var(--wp--custom--container--lede-split);
}

.tt-head--on-green .tt-head__lede {
  color: var(--wp--preset--color--on-green);
}

/* --- Stat ------------------------------------------------------------------ */

/* SPEC 04: numeral + caption, in the cream-page colours. The homepage sets
   three of them beside the about copy, About gives four their own band — so the
   pair lives here rather than in either block, and the band still has its
   numerals when the teaser is absent. The band's own colours are the --lg
   modifier in blocks/stats-band/style.css. */

.tt-stat__value {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--numeral);
  line-height: 1;
  color: var(--wp--preset--color--royal);
}

.tt-stat__label {
  display: block;
  margin-top: 10px;
  font-size: var(--wp--preset--font-size--caption);
  letter-spacing: var(--wp--custom--tracking--caption);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}

/* --- About: text beside a 4:5 portrait ------------------------------------- */

/* Shared by the homepage teaser and the About intro block. The intro's
   paragraphs are core paragraphs inside a .tt-about__body wrapper; the teaser
   still renders its own .tt-about__para, so both get the same rule. */

.tt-about__grid {
  align-items: center;
  gap: var(--wp--custom--gap--about);
}

.tt-about__para,
.tt-about__body > p {
  margin-top: 22px;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.85;
  color: var(--wp--preset--color--ink-2);
}

.tt-about__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --- Info card ------------------------------------------------------------- */

/* SPEC 04. Shared: Services sets these beside the add-on rows; anything else
   that wants a bordered white card gets them without pulling in a block's
   stylesheet. */

.tt-info {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  padding: 24px 28px;
}

.tt-info__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--card-title-s);
  line-height: 1.1;
  color: var(--wp--preset--color--ink);
}

.tt-info__text {
  margin-top: 10px;
  font-size: var(--wp--preset--font-size--body-s);
  line-height: 1.7;
  color: var(--wp--preset--color--ink-2);
}

/* Plain page (templates/page.html): the page-intro head over one reading
   column, built from core blocks — post title, then whatever text blocks the
   page holds. The design has no mock for it; it borrows the story intro's
   column and rhythm so a legal or contact page reads as part of the site.
   Every selector is prefixed with .tt-page because core's flow-layout rules
   (`body .is-layout-flow > *`) zero the vertical margins of a group's
   children at a specificity a lone class cannot beat. */
.tt-page .tt-page__body {
  max-width: var(--wp--custom--container--story);
  margin-inline: auto;
  margin-top: var(--wp--preset--spacing--section-gap);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.85;
  color: var(--wp--preset--color--ink-2);
}

.tt-page .tt-page__body p {
  max-width: none;
}

.tt-page .tt-page__body > * + * {
  margin-top: var(--wp--preset--spacing--gap-grid);
}

.tt-page .tt-page__body h2,
.tt-page .tt-page__body h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--wp--preset--color--ink);
}

.tt-page .tt-page__body h2 {
  font-size: var(--wp--preset--font-size--card-title-l);
  margin-top: var(--wp--preset--spacing--gap-addons);
}

.tt-page .tt-page__body h3 {
  font-size: var(--wp--preset--font-size--small-title);
  margin-top: var(--wp--preset--spacing--gap-cards);
}

.tt-page .tt-page__body ul,
.tt-page .tt-page__body ol {
  padding-inline-start: var(--wp--preset--spacing--gap-grid);
}

.tt-page .tt-page__body a {
  color: var(--wp--preset--color--royal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}