/* Build 440 — shared public card + typography system.
   Presentation only. This layer is deliberately late in the cascade and scoped
   to public main content. It standardises rhythm and card families without
   touching navigation, footer, hero crop/fade geometry, forms, tabs or filters.

   Card families:
   - elevated content cards: rounded, lightly bordered surfaces
   - compact interactive cards: smaller radius, no heavy shadow
   - integrated tiles: keep connected grid/separator geometry; only type rhythm
   Special image selectors/forms (Wedding packages, Booking, Credentials request)
   are intentionally excluded and remain owned by their specialist CSS. */

:root {
  --jt-type-section-title: clamp(2rem, 2.75vw, 3.25rem);
  --jt-type-card-title: clamp(1.18rem, 1.25vw, 1.46rem);
  --jt-type-body: clamp(.98rem, .86vw, 1.08rem);
  --jt-type-card-body: clamp(.92rem, .78vw, 1rem);
  --jt-type-kicker: .76rem;
  --jt-type-body-line: 1.66;
  --jt-type-card-line: 1.58;
  --jt-copy-measure: 68ch;

  --jt-card-radius: 16px;
  --jt-card-radius-compact: 10px;
  --jt-card-border-dark: rgba(210,162,58,.23);
  --jt-card-border-dark-hover: rgba(231,191,97,.52);
  --jt-card-border-light: rgba(61,48,31,.19);
  --jt-card-border-light-hover: rgba(126,90,24,.42);
  --jt-card-shadow-dark: 0 12px 30px rgba(0,0,0,.16);
  --jt-card-shadow-light: 0 10px 26px rgba(61,48,31,.07);
  --jt-card-focus: rgba(242,196,100,.42);
}

/* -------------------------------------------------------------------------
   1. TYPOGRAPHY CONTRACT
   ------------------------------------------------------------------------- */

/* Section headings only. Hero typography remains owned by Build 437. */
html body #main-content :is(
  .section-head,
  .resource-section-head,
  .contact-section-head,
  .reviews-section-head,
  .about-section-head,
  .collab-section-head,
  .occasions-section-head,
  .thov-section-head
) > h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  max-width: 18ch;
  font-family: Marcellus, Georgia, serif !important;
  font-size: var(--jt-type-section-title) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: .006em !important;
  text-wrap: balance;
}

html body #main-content :is(
  .section-head,
  .resource-section-head,
  .contact-section-head,
  .reviews-section-head,
  .about-section-head,
  .collab-section-head,
  .occasions-section-head,
  .thov-section-head
) > p:not(.kicker):not(.preview-section-eyebrow):not(.preview-eyebrow) {
  max-width: var(--jt-copy-measure) !important;
  margin-top: 0 !important;
  font-size: var(--jt-type-body) !important;
  line-height: var(--jt-type-body-line) !important;
  text-wrap: pretty;
}

/* Shared eyebrow/kicker rhythm inside normal section-heading wrappers only.
   Hero kickers remain completely owned by Build 437 and page-specific hero CSS. */
html body #main-content :is(
  .section-head,
  .resource-section-head,
  .contact-section-head,
  .reviews-section-head,
  .about-section-head,
  .collab-section-head,
  .occasions-section-head,
  .thov-section-head,
  .about-craft-head,
  .gig-snapshot-heading
) > :is(.kicker,.preview-section-eyebrow,.preview-eyebrow) {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: var(--jt-type-kicker) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

/* Ordinary long-form links should remain recognisable without turning every
   inline link into a CTA. Header/footer/navigation are outside #main-content. */
html body #main-content p a:not(.btn):not(.text-link):not([class*="chip"]),
html body #main-content li a:not(.btn):not(.text-link):not([class*="chip"]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   2. ELEVATED CONTENT-CARD FAMILY
   ------------------------------------------------------------------------- */
html body #main-content :is(
  .review-card,
  .supplier-card,
  .advice-card,
  .article-carousel-card,
  .credential-quick-card,
  .listen-featured-card,
  .preview-repertoire-card,
  .info-card,
  .setup-product-card
) {
  box-sizing: border-box;
  border-radius: var(--jt-card-radius) !important;
  border-color: var(--jt-card-border-dark) !important;
  box-shadow: var(--jt-card-shadow-dark) !important;
}

/* Light sections keep the same card shape but use quieter neutral borders. */
html body #main-content :is(.preview-v2-light,.preview-light-section,.reviews-featured) :is(
  .review-card,
  .supplier-card,
  .advice-card,
  .article-carousel-card,
  .credential-quick-card,
  .listen-featured-card,
  .preview-repertoire-card,
  .info-card,
  .setup-product-card
) {
  border-color: var(--jt-card-border-light) !important;
  box-shadow: var(--jt-card-shadow-light) !important;
}

/* Cards with independent text insets share one title/copy rhythm. Image-led
   card internals retain their own media dimensions and padding. */
html body #main-content :is(
  .supplier-card,
  .credential-quick-card,
  .listen-featured-card,
  .article-carousel-card
) :is(h2,h3) {
  font-family: Marcellus, Georgia, serif !important;
  font-size: var(--jt-type-card-title) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: .004em !important;
  text-wrap: balance;
}

html body #main-content :is(
  .supplier-card,
  .credential-quick-card,
  .listen-featured-card,
  .article-carousel-card
) p:not(.kicker):not(.supplier-category):not(.listen-song-eyebrow) {
  font-size: var(--jt-type-card-body) !important;
  line-height: var(--jt-type-card-line) !important;
}

/* Review copy uses a readable editorial measure and one consistent rhythm. */
html body #main-content .review-card blockquote {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  font-size: clamp(.98rem,.82vw,1.06rem) !important;
  line-height: 1.66 !important;
  text-wrap: pretty;
}
html body #main-content .review-card footer {
  font-size: .9rem;
  line-height: 1.45;
}

/* Wedding Advice titles are H2s by design and can run longer than ordinary
   card titles. Keep them larger but within a consistent editorial range. */
html body.resource-page-advice #main-content .advice-card h2 {
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.3rem,1.55vw,1.72rem) !important;
  line-height: 1.2 !important;
  letter-spacing: .003em !important;
  text-wrap: balance;
}
html body.resource-page-advice #main-content .advice-card__excerpt {
  font-size: clamp(.94rem,.8vw,1rem) !important;
  line-height: 1.62 !important;
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   3. INTERACTIVE-CARD STATES
   ------------------------------------------------------------------------- */
html body #main-content :is(
  .supplier-card,
  .advice-card,
  .article-carousel-card,
  .setup-product-card
) {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  html body #main-content :is(
    .supplier-card,
    .advice-card,
    .article-carousel-card,
    .setup-product-card
  ):hover {
    transform: translateY(-2px) !important;
    border-color: var(--jt-card-border-dark-hover) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.20) !important;
  }
  html body #main-content :is(.preview-v2-light,.preview-light-section) :is(
    .supplier-card,
    .advice-card,
    .article-carousel-card,
    .setup-product-card
  ):hover {
    border-color: var(--jt-card-border-light-hover) !important;
    box-shadow: 0 14px 30px rgba(61,48,31,.10) !important;
  }
}

html body #main-content :is(.supplier-card,.setup-product-card):focus-visible,
html body #main-content :is(.advice-card,.article-carousel-card):focus-within {
  outline: 3px solid var(--jt-card-focus) !important;
  outline-offset: 3px !important;
}

/* Compact utility cards intentionally do not receive the elevated 16px look. */
html body #main-content .performance-map-venue-card {
  border-radius: var(--jt-card-radius-compact) !important;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  html body #main-content .performance-map-venue-card:hover {
    transform: translateY(-1px);
  }
}
html body #main-content .performance-map-venue-card:focus-visible {
  outline: 3px solid rgba(126,90,24,.28) !important;
  outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
   4. INTEGRATED TILE FAMILY
   These are intentionally connected grids, not floating cards. Preserve their
   straight separators/edge-to-edge geometry while standardising text rhythm.
   ------------------------------------------------------------------------- */
html body #main-content :is(.occasion-type-card,.occasions-flow-card) h3 {
  margin-top: 0;
  margin-bottom: 8px !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.2rem,1.35vw,1.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .003em !important;
  text-wrap: balance;
}
html body #main-content :is(.occasion-type-card,.occasions-flow-card) p {
  font-size: clamp(.94rem,.8vw,1rem) !important;
  line-height: 1.58 !important;
  text-wrap: pretty;
}

/* THOV's lineup is intentionally more editorial and keeps its larger title scale. */
html body #main-content .thov-lineup-card h3 {
  margin-bottom: 8px !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.45rem,1.7vw,1.9rem) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}
html body #main-content .thov-lineup-card p:last-child {
  font-size: 1rem !important;
  line-height: 1.58 !important;
  text-wrap: pretty;
}

/* Gigs use compact schedule rows rather than floating cards. Keep their row
   geometry intact and only align the title/supporting-copy hierarchy. */
html body #main-content .schedule-card .event-info h3 {
  margin: 0 0 3px !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.02rem,1.05vw,1.18rem) !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: .002em !important;
}
html body #main-content .schedule-card .event-info p,
html body #main-content .schedule-card .event-date span {
  font-size: clamp(.82rem,.74vw,.9rem) !important;
  line-height: 1.42 !important;
}

/* Preserve specialist surfaces owned by later roadmap stages. */
html body #main-content :is(
  .booking-form-card,
  .booking-radio-card,
  .booking-person-card,
  .credentials-form-card,
  .package-card,
  .calendar-gig-dialog-card
) {
  /* Explicitly no card-system geometry here. */
}

/* -------------------------------------------------------------------------
   5. RESPONSIVE TYPE / CARD RHYTHM
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --jt-type-section-title: clamp(1.78rem,7.8vw,2.35rem);
    --jt-type-body: 1rem;
    --jt-type-card-title: clamp(1.15rem,5.5vw,1.38rem);
    --jt-type-card-body: .96rem;
    --jt-card-radius: 14px;
  }

  html body #main-content :is(
    .section-head,
    .resource-section-head,
    .contact-section-head,
    .reviews-section-head,
    .about-section-head,
    .collab-section-head,
    .occasions-section-head,
    .thov-section-head
  ) > h2 {
    max-width: 22ch;
    margin-bottom: 10px !important;
  }

  html body #main-content .review-card blockquote {
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #main-content :is(.supplier-card,.advice-card,.article-carousel-card,.setup-product-card,.performance-map-venue-card) {
    transition: none !important;
  }
  html body #main-content :is(.supplier-card,.advice-card,.article-carousel-card,.setup-product-card,.performance-map-venue-card):hover {
    transform: none !important;
  }
}