/* =========================================================
   ENDCORE WEB 1.0 — GLOBAL UI SCALE
   Larger typography + larger cinematic Home hero
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL TYPOGRAPHY
   --------------------------------------------------------- */

html {
  font-size: 17px;
}

body,
button,
input,
select,
textarea {
  font-size: 17px;
}


/* Navigation */

.nav-button {
  font-size: 16px !important;
}

.nav-section-label {
  font-size: 13px !important;
}

.user-name,
.menu-display-name,
.menu-username {
  font-size: 15px !important;
}


/* Small / secondary UI text */

small {
  font-size: 14px !important;
}

.section-kicker,
.eyebrow,
.hero-label,
.card-label,
.section-heading span,
.admin-card span {
  font-size: 13px !important;
}


/* Home */

.hero-meta {
  font-size: 17px !important;
}

.hero-play,
.hero-details,
.secondary-action {
  font-size: 16px !important;
}

.home-row h2,
.home-section h2 {
  font-size: 25px !important;
}


/* Media cards */

.media-card strong,
.media-card-title {
  font-size: 16px !important;
}

.media-card span,
.media-card-meta {
  font-size: 14px !important;
}


/* Details */

.detail-section h2 {
  font-size: 28px !important;
}

.detail-overview {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.season-title {
  font-size: 21px !important;
}

.cast-card strong,
.episode-copy strong {
  font-size: 16px !important;
}

.cast-card span,
.episode-copy span {
  font-size: 14px !important;
}


/* Admin */

.admin-user-card-title strong {
  font-size: 19px !important;
}

.admin-user-name {
  font-size: 15px !important;
}

.admin-user-card-footer,
.admin-user-panel label,
.admin-create-user label {
  font-size: 14px !important;
}

.admin-user-state {
  font-size: 12px !important;
}

.admin-user-panel h2 {
  font-size: 20px !important;
}

.admin-user-panel h3 {
  font-size: 14px !important;
}


/* ---------------------------------------------------------
   LARGER CINEMATIC HOME BANNER
   Keep normal document flow:
   it scrolls upward naturally with the page.
   --------------------------------------------------------- */

@media (min-width: 981px) {

  .home-hero {
    position: relative !important;

    min-height: 58vh !important;

    padding-top: 112px !important;
    padding-bottom: 96px !important;
  }

  .hero-content {
    max-width:
      min(
        980px,
        calc(100vw - 340px)
      ) !important;
  }

  .hero-title,
  .hero-content h1 {
    font-size:
      clamp(
        48px,
        5.1vw,
        82px
      ) !important;
  }

  /*
   * Less overlap with the rows because the
   * banner itself now has enough cinematic height.
   */
  .home-sections {
    margin-top: -22px !important;
  }

  .home-hero::after {
    height: 220px !important;
  }
}


/* ---------------------------------------------------------
   TABLET / MOBILE
   --------------------------------------------------------- */

@media (max-width: 980px) {

  html {
    font-size: 16px;
  }

  body,
  button,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .home-hero {
    min-height: 52vh !important;
    padding-top: 96px !important;
    padding-bottom: 78px !important;
  }

  .hero-title,
  .hero-content h1 {
    font-size:
      clamp(
        40px,
        10vw,
        64px
      ) !important;
  }
}