/* ========================================
   FUTURE OF BUSINESS
   SHARED SIZING / TYPOGRAPHY SCALE

   Loaded LAST on every public page so it
   overrides the per-page stylesheets.
   One fluid size per heading level instead
   of separate desktop / tablet / phone values,
   so text scales smoothly and never gets
   oversized on large screens.
======================================== */

/* ========================================
   HEADER HEIGHT
======================================== */

:root {
  --header-height: 78px;
}

@media (max-width: 700px) {
  :root {
    --header-height: 68px;
  }
}

/* ========================================
   BASE TEXT
======================================== */

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* ========================================
   PAGE HERO TITLES (H1)
   desktop ~52px  →  phone ~30px
======================================== */

.hero-title {
  font-size: clamp(30px, 18px + 2.4vw, 54px);
  line-height: 1.08;
}

.about-page-hero-content h1,
.episodes-featured-content h1,
.favorites-hero h1,
.saved-hero h1,
.contact-hero h1 {
  font-size: clamp(28px, 16px + 2.2vw, 48px);
  line-height: 1.1;
}

/* EPISODE DETAIL TITLE */

.episode-primary-info h1,
.episode-not-found h1 {
  font-size: clamp(24px, 14px + 1.6vw, 38px);
  line-height: 1.15;
}

/* ========================================
   SECTION TITLES (H2)
   desktop ~34px  →  phone ~22px
======================================== */

.intro-content h2,
.episodes-heading h2,
.sponsors-heading h2,
.success-heading h2,
.about-page-intro-content h2,
.about-values-heading h2,
.about-what-heading h2,
.about-why-content h2,
.about-cta-content h2,
.episodes-discover-heading h2,
.reels-page-heading h1 {
  font-size: clamp(22px, 14px + 1.3vw, 36px);
  line-height: 1.15;
}

/* ========================================
   SMALL TITLES (cards / side blocks)
   desktop ~26px  →  phone ~20px
======================================== */

.featured-story-content h3,
.all-episodes-heading h3,
.episode-related-heading h2,
.favorites-empty h2,
.saved-section-heading h2,
.contact-company-heading h2,
.contact-form-heading h2,
.contact-cta-inner h2 {
  font-size: clamp(20px, 15px + 0.6vw, 26px);
  line-height: 1.2;
}

.stat-number {
  font-size: clamp(22px, 16px + 0.7vw, 27px);
}

/* ========================================
   HOME PAGE
   home/index.css has its own rules scoped to
   body.page-home, so match that scope here.
======================================== */

body.page-home .hero-title {
  font-size: clamp(30px, 18px + 2.4vw, 54px);
  line-height: 1.08;
}

body.page-home .intro-content h2,
body.page-home .episodes-heading h2,
body.page-home .sponsors-heading h2,
body.page-home .success-heading h2 {
  font-size: clamp(22px, 14px + 1.3vw, 36px);
  line-height: 1.18;
}

/* ========================================
   PHONE TYPE SCALE (<= 700px)
   One consistent set of sizes for every
   public page (Reels page excluded - it has
   its own full-screen design).

   Small label ...... 11px / 2px spacing
   Page title (H1) .. 28px (home hero 30px)
   Section (H2) ..... 22px
   Row / card (H2) .. 20px
   Card title (H3) .. 18px
   Intro text ....... 14px / 1.7
   Card text ........ 13px / 1.65

   !important is used on purpose: page
   stylesheets have many phone-specific rules
   and this file must win over all of them.
======================================== */

@media (max-width: 700px) {

  /* SMALL LABELS ABOVE TITLES */

  body:not(.reels-body) .section-kicker,
  body:not(.reels-body) .section-label,
  body:not(.reels-body) .contact-kicker,
  body:not(.reels-body) .saved-kicker,
  body:not(.reels-body) .episodes-featured-label,
  body:not(.reels-body) .hero-eyebrow {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
  }

  /* PAGE TITLES */

  body:not(.reels-body) main h1,
  body:not(.reels-body) .about-page-hero-content h1,
  body:not(.reels-body) .contact-hero h1,
  body:not(.reels-body) .saved-hero h1,
  body:not(.reels-body) .favorites-hero h1 {
    font-size: 28px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.5px !important;
  }

  body.page-home .hero-title,
  body:not(.reels-body) .hero-title {
    font-size: 30px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.6px !important;
  }

  body:not(.reels-body) .episodes-featured .episodes-featured-content h1 {
    font-size: 26px !important;
  }

  /* SECTION TITLES */

  body:not(.reels-body) .intro-content h2,
  body:not(.reels-body) .episodes-heading h2,
  body:not(.reels-body) .sponsors-heading h2,
  body:not(.reels-body) .success-heading h2,
  body:not(.reels-body) .episodes-discover-heading h2,
  body:not(.reels-body) .about-page-intro-content h2,
  body:not(.reels-body) .about-values-heading h2,
  body:not(.reels-body) .about-what-heading h2,
  body:not(.reels-body) .about-why-content h2,
  body:not(.reels-body) .about-cta-content h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
  }

  /* home "About Future of Business" strip */
  body.page-home .about-program-content h2 {
    font-size: 18px !important;
    letter-spacing: -0.2px !important;
  }

  /* ROW / CARD BLOCK TITLES */

  body:not(.reels-body) .streaming-row-heading h3,
  body:not(.reels-body) .all-episodes-heading h3,
  body:not(.reels-body) .contact-company-heading h2,
  body:not(.reels-body) .contact-form-heading h2,
  body:not(.reels-body) .contact-cta-inner h2,
  body:not(.reels-body) #savedSectionTitle,
  body:not(.reels-body) #savedEmptyTitle,
  body:not(.reels-body) .saved-section-heading h2,
  body:not(.reels-body) .favorites-empty h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
  }

  /* CARD TITLES (always smaller than the section title) */

  body:not(.reels-body) .about-value-card h3,
  body:not(.reels-body) .about-what-card h3,
  body:not(.reels-body) .featured-story-content h3,
  body:not(.reels-body) .episodes-no-results h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

  /* INTRO / DESCRIPTION TEXT */

  body:not(.reels-body) .hero-description,
  body:not(.reels-body) .intro-description,
  body:not(.reels-body) .sponsors-heading p,
  body:not(.reels-body) .success-heading > p,
  body:not(.reels-body) .about-program-content p,
  body:not(.reels-body) .about-page-hero-content p,
  body:not(.reels-body) .about-page-intro-content > p,
  body:not(.reels-body) .about-what-heading p,
  body:not(.reels-body) .about-why-content > p,
  body:not(.reels-body) .about-cta-content p,
  body:not(.reels-body) .contact-hero-content > p,
  body:not(.reels-body) .contact-company-heading p,
  body:not(.reels-body) .contact-form-heading p,
  body:not(.reels-body) .saved-container > p,
  body:not(.reels-body) .saved-empty p,
  body:not(.reels-body) .episodes-no-results p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
  }

  /* featured episode keeps a compact 2-line text */
  body:not(.reels-body) .episodes-featured .episodes-featured-content > p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* CARD TEXT */

  body:not(.reels-body) .about-value-card p,
  body:not(.reels-body) .about-what-card p,
  body:not(.reels-body) .about-why-point p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
}


/* ========================================
   EPISODE CARDS (all sizes)
   Text never cut mid-word: long text ends
   with "…" instead.
======================================== */

.streaming-card-content .streaming-category {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streaming-card-content h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.streaming-card-content .streaming-card-meta {
  overflow: hidden;
  min-width: 0;
}

/* guest name shrinks with "…", year / views stay whole */
.streaming-card-meta > span:not(.streaming-meta-dot) {
  flex-shrink: 0;
  white-space: nowrap;
}

.streaming-card-meta > span:first-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ========================================
   EPISODE CARDS - PHONE (<= 700px)
======================================== */

@media (max-width: 700px) {

  /* "All Episodes": 2 cards per row instead of 3 */
  body:not(.reels-body) .all-episodes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important;
  }

  /* Rows (Latest / Most Watched): 2 cards + a peek of the next */
  body:not(.reels-body) .streaming-slider {
    gap: 12px !important;
  }

  body:not(.reels-body) .streaming-slider .streaming-card {
    flex: 0 0 calc((100% - 12px) / 2.15) !important;
  }

  /* Card text block: natural height, same for every card */
  body:not(.reels-body) .streaming-card-content {
    height: auto !important;
    padding: 9px 2px 0 !important;
    overflow: visible !important;
  }

  /* Category: small and quiet */
  body:not(.reels-body) .streaming-category {
    height: auto !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.8px !important;
    font-weight: 600 !important;
    opacity: 0.85;
  }

  /* Title: 2 lines, fixed height so cards line up */
  body:not(.reels-body) .streaming-card-content h4 {
    height: auto !important;
    min-height: calc(13px * 1.35 * 2);
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
  }

  /* Guest • year • views: one tidy line */
  body:not(.reels-body) .streaming-card-meta {
    height: auto !important;
    margin-top: 5px !important;
    gap: 5px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* Hide the year on phone (guest • year • views)
     so the guest name has room: guest • views */
  body:not(.reels-body) .streaming-card-meta > span:nth-child(2),
  body:not(.reels-body) .streaming-card-meta > span:nth-child(3) {
    display: none !important;
  }

  /* Smaller gaps between sections */
  body:not(.reels-body) .streaming-row + .streaming-row {
    margin-top: 30px !important;
  }

  body:not(.reels-body) .streaming-slider {
    padding-bottom: 10px !important;
  }

  body:not(.reels-body) .all-episodes-section {
    margin-top: 34px !important;
  }

  body:not(.reels-body) .streaming-row-heading {
    margin-bottom: 12px !important;
  }
}


/* ========================================
   BOTTOM NAV (phone / tablet, not Reels)
   Solid background so page text does not
   show through it, and room at the bottom
   so it never covers the last content.
======================================== */

@media (max-width: 1050px) {
  body:not(.reels-body) .mobile-bottom-nav {
    background: #050a12 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body:not(.reels-body) {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}


/* ========================================
   PHONE: keep long titles from overflowing
======================================== */

@media (max-width: 700px) {
  .hero-title,
  .about-page-hero-content h1,
  .episodes-featured-content h1,
  .favorites-hero h1,
  .saved-hero h1,
  .contact-hero h1,
  .episode-primary-info h1 {
    letter-spacing: -0.5px;
    overflow-wrap: break-word;
  }
}