/* ============================================================================
   18. Landing media fill + unified card language
   ----------------------------------------------------------------------------
   Two cross-cutting landing fixes: every media element fills its frame
   (object-fit: cover, never letterboxed), and every landing card shares ONE
   surface + radius + padding rhythm so the page reads as a single system
   instead of a handful of near-identical card styles.
   ========================================================================== */

/* ---- 18a. Media always fills its bounds -------------------------------- */

.hero-media-el,
.showcase-media-el,
.industry-media-el,
.pillar-media-el,
.compare-el,
.contact-media-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each media frame gets a fixed bound the media fills. */
.showcase-media,
.industry-media,
.pillar-media,
.compare-slider,
.contact-media {
  overflow: hidden;
}

.showcase-media {
  aspect-ratio: 4 / 3;
}

.industry-media,
.pillar-media,
.compare-slider {
  aspect-ratio: 16 / 9;
}

.contact-media {
  aspect-ratio: 4 / 3;
}

/* ---- 18b. One card language -------------------------------------------- */

/* Every landing card shares the same radius + glass surface. */
.feature-card,
.industry-card,
.pillar-card,
.chart-card,
.pricing-tier,
.steps li,
.faq details,
.quote,
.showcase-card {
  border-radius: var(--ta-r-lg);
}

/* Body cards: one padding rhythm (top/sides 1.5rem, bottom 1.75rem). */
.feature-card,
.chart-card,
.pricing-tier,
.steps li,
.faq details,
.quote,
.showcase-card {
  padding: 1.5rem 1.5rem 1.75rem;
}

/* Media cards: the media bleeds to the card edges (full-bleed header) and
   the text sits in the same padded body as every other card. */
.industry-card,
.pillar-card {
  padding: 0;
  overflow: hidden;
}

.industry-media,
.pillar-media {
  margin: 0;
  border-radius: 0;
}

.industry-body,
.pillar-body {
  padding: 1.5rem 1.5rem 1.75rem;
}

/* One hover treatment for every card. */
.feature-card:hover,
.industry-card:hover,
.pillar-card:hover,
.chart-card:hover,
.pricing-tier:hover,
.steps li:hover,
.faq details:hover,
.quote:hover,
a.showcase-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ta-accent) 30%, var(--ta-pane-rim));
  box-shadow: var(--ta-pane-shadow-lg);
}

/* ---- 18c. Hero-only pages fill the viewport ---------------------------- */

/* A landing whose hero is the LAST block in the page (nothing below it — no
   showcase, no features, no footer) should fill the viewport edge-to-edge:
   drop the container's bottom padding and the hero's section gap so there is
   no white space under the fold. Pages with content below the hero keep the
   normal rhythm — the `:has(> .hero:last-child)` guard means only hero-only
   pages are touched. */
main.container:has(> .hero:last-child) {
  padding-bottom: 0;
}

main.container:has(> .hero:last-child) .hero {
  margin-bottom: 0;
}