/**
 * @file
 * TV4ever – front page sections (node type "front_section").
 *
 * Each section node picks a style; the front page is simply the list of
 * published sections in the current language, ordered by weight.
 */

.tv-section {
  padding-block: var(--tv-space-8);
}

.tv-section__header {
  max-width: 48rem;
  margin-block-end: var(--tv-space-6);
}

.tv-section__title {
  margin-block-end: var(--tv-space-4);
}

.tv-section__intro {
  font-size: var(--tv-fs-lg);
  color: var(--tv-text-muted);
}

.tv-eyebrow {
  display: inline-block;
  margin-block-end: var(--tv-space-3);
  padding: 0.3rem 0.8rem;
  border-radius: var(--tv-radius-pill);
  background: var(--tv-surface-2);
  color: var(--tv-link);
  font-size: 0.875rem;
  font-weight: 700;
}

.tv-eyebrow--light {
  background: rgb(255 210 63 / 0.14);
  color: var(--tv-amber);
  border: 1px solid rgb(255 210 63 / 0.3);
}

.tv-eyebrow--dark {
  background: rgb(31 29 61 / 0.1);
  color: var(--tv-night);
}

/* Contextual links on dark sections. */
.tv-section .contextual {
  z-index: 5;
}

/* Hero ------------------------------------------------------------------- */

.tv-section--hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Fill a laptop screen but never become a wall on big monitors. */
  min-height: min(calc(100svh - var(--tv-header-h)), 46rem);
  padding-block: clamp(3rem, 6vh, 5rem);
  background: var(--tv-gradient-night);
  color: #fff;
}

/* Soft "bokeh" circles, as in the promo video. */
.tv-section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 22%, rgb(255 255 255 / 0.09) 0 7rem, transparent 7rem),
    radial-gradient(circle at 34% 88%, rgb(255 255 255 / 0.07) 0 10rem, transparent 10rem),
    radial-gradient(circle at 92% 80%, rgb(255 255 255 / 0.06) 0 12rem, transparent 12rem),
    radial-gradient(circle at 70% 6%, rgb(255 255 255 / 0.05) 0 5rem, transparent 5rem),
    linear-gradient(to top, rgb(255 82 119 / 0.28), transparent 45%);
  pointer-events: none;
}

.tv-hero__glow {
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: 8%;
  width: min(42rem, 60vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 143 46 / 0.5) 0%, rgb(255 82 119 / 0.25) 40%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.tv-hero {
  display: grid;
  gap: var(--tv-space-7);
  align-items: center;
}

@media (min-width: 56em) {
  .tv-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.tv-hero__title {
  margin-block-end: var(--tv-space-5);
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.9rem);
  font-weight: 800;
  line-height: 1.08;
  /* Room for descenders (g, y, ç) under the gradient text clip. */
  padding-block-end: 0.12em;
  background: linear-gradient(100deg, #fff 30%, #ffe9a8 70%, var(--tv-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:is(:lang(ja), :lang(zh), :lang(ko), :lang(ar), :lang(fa), :lang(th)) .tv-hero__title {
  line-height: 1.3;
}

.tv-hero__body {
  max-width: 38rem;
  font-size: var(--tv-fs-lg);
  color: #eceaff;
}

.tv-hero__body a {
  color: var(--tv-amber);
}

.tv-hero__body p:last-child {
  margin-block-end: 0;
}

.tv-section--hero .tv-button--ghost {
  color: #fff;
}

.tv-section--hero .tv-button--ghost:hover {
  background: #fff;
  color: var(--tv-night);
  border-color: #fff;
}

.tv-hero__media {
  justify-self: center;
  width: min(100%, 26rem);
}

.tv-hero__media img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 24px 40px rgb(31 29 61 / 0.45));
  transform: rotate(2deg);
  transition: transform 0.5s ease;
}

[dir="rtl"] .tv-hero__media img {
  transform: rotate(-2deg);
}

.tv-hero__media:hover img {
  transform: rotate(0) scale(1.02);
}

@media (prefers-reduced-motion: no-preference) {
  .tv-hero__media img {
    animation: tv-float 7s ease-in-out infinite;
  }

  @keyframes tv-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
  }
}

/* Hero with the promo video: give the 16:9 player the bigger column. */
@media (min-width: 56em) {
  .tv-section--has-video .tv-hero {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--tv-space-6);
  }
}

.tv-section--has-video .tv-hero__media {
  width: 100%;
}

.tv-hero__video {
  position: relative;
  padding: 6px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--tv-amber), var(--tv-sun) 45%, var(--tv-flame));
  box-shadow: 0 30px 80px rgb(31 29 61 / 0.55), 0 0 60px rgb(255 82 119 / 0.3);
}

.tv-hero__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--tv-night);
  object-fit: cover;
}

@media (max-width: 55.99em) {
  .tv-section--hero {
    min-height: 0;
  }

  .tv-hero__media {
    order: -1;
    width: min(60%, 14rem);
  }

  /* The video goes under the text on small screens, full width. */
  .tv-section--has-video .tv-hero__media {
    order: 0;
    width: 100%;
  }
}

/* Features --------------------------------------------------------------- */

.tv-section--features {
  background: var(--tv-surface-2);
}

.tv-cards {
  display: grid;
  gap: var(--tv-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.tv-card {
  position: relative;
  margin: 0;
  padding: var(--tv-space-6) var(--tv-space-5);
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tv-card::before {
  content: "";
  position: absolute;
  inset: 0 var(--tv-space-5) auto;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--tv-gradient-sun);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tv-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tv-shadow);
}

.tv-card:hover::before {
  opacity: 1;
}

.tv-card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-block-end: var(--tv-space-4);
  border-radius: 16px;
  background: var(--tv-gradient-sun);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 6px 16px rgb(255 82 119 / 0.25);
}

.tv-card__title {
  margin-block-end: var(--tv-space-3);
}

.tv-card__body {
  color: var(--tv-text-muted);
}

.tv-card__body > :last-child {
  margin-block-end: 0;
}

/* Steps ------------------------------------------------------------------ */

.tv-steps {
  display: grid;
  gap: var(--tv-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tv-step {
  position: relative;
  margin: 0;
  padding-block-start: var(--tv-space-2);
}

.tv-step__number {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-block-end: var(--tv-space-4);
  border-radius: 50%;
  background: var(--tv-night);
  color: var(--tv-amber);
  font-size: 1.25rem;
  font-weight: 800;
}

@media (min-width: 48em) {
  /* Dashed connector between steps (not after the last). */
  .tv-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--tv-space-2) + 1.5rem);
    inset-inline: 3.75rem -0.75rem;
    border-block-start: 2px dashed var(--tv-border);
  }
}

.tv-step__body {
  color: var(--tv-text-muted);
}

/* Split ------------------------------------------------------------------ */

.tv-split {
  display: grid;
  gap: var(--tv-space-7);
  align-items: center;
}

@media (min-width: 56em) {
  .tv-split {
    grid-template-columns: 1fr 1fr;
  }

  /* Alternate image side when two split sections follow each other. */
  .tv-section--split + .tv-section--split .tv-split__media {
    order: -1;
  }
}

.tv-split__media img {
  display: block;
  width: 100%;
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow);
}

/* Call to action --------------------------------------------------------- */

.tv-section--cta {
  padding-block: var(--tv-space-7);
}

.tv-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tv-space-5) var(--tv-space-7);
  padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--tv-radius-lg);
  background: var(--tv-gradient-sun);
  color: #1f1d3d;
  box-shadow: 0 20px 50px rgb(255 82 119 / 0.25);
}

.tv-cta::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  pointer-events: none;
}

.tv-cta__text {
  position: relative;
  z-index: 1;
  flex: 1 1 26rem;
}

.tv-cta__title {
  margin-block-end: var(--tv-space-3);
}

.tv-cta__body {
  font-size: var(--tv-fs-lg);
}

.tv-cta__body p:last-child {
  margin-block-end: 0;
}

.tv-cta__body a {
  color: inherit;
  font-weight: 700;
}

.tv-cta .tv-buttons {
  position: relative;
  z-index: 1;
  margin: 0;
}

.tv-cta .tv-button--primary {
  background: var(--tv-night);
  color: #fff;
  box-shadow: 0 8px 20px rgb(31 29 61 / 0.3);
}

.tv-cta .tv-button--primary:hover {
  background: #000;
  color: #fff;
}

.tv-cta .tv-button--ghost {
  color: #1f1d3d;
}

.tv-cta .tv-button--ghost:hover {
  background: #1f1d3d;
  border-color: #1f1d3d;
  color: #fff;
}

/* Text ------------------------------------------------------------------- */

.tv-section--text + .tv-section--text {
  padding-block-start: 0;
}

/* Admin hint on an empty front page. */
.tv-front-empty {
  padding-block: var(--tv-space-8);
  text-align: center;
  color: var(--tv-text-muted);
}