/* ==========================================================================
   Responsive Styles
   Mobile-first: base styles in styles.css, overrides here at breakpoints.
   Breakpoints: 480px | 768px | 1024px | 1440px
   ========================================================================== */

/* ---------- Small (480px+) ---------- */
@media (min-width: 480px) {
  /* Numbers grid: 2 columns */
  .numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Slightly larger section padding */
  /* The sections use padding that can increase */
}

/* ---------- Tablet (768px+) ---------- */
@media (min-width: 768px) {
  :root {
    --section-padding: 130px 0;
  }

  /* Navigation: links only at tablet width; the CTA joins at 1024px,
     it does not fit next to logo + 5 links below that */
  .nav__hamburger {
    display: none;
  }

  .nav__links {
    display: flex;
    gap: 24px;
  }

  /* Language switcher joins the desktop nav when the hamburger disappears */
  .nav__lang {
    display: block;
  }

  /* Numbers: 3 columns */
  .numbers__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About: two column layout */
  .about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  /* Book: two columns */
  .book__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    align-items: center;
  }

  /* Guide: two columns (form + mockup) */
  .guide__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }

  /* Community: two columns */
  .community__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  /* Content pillars side by side */
  .content-section__pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Speaking grid: 3 columns */
  .speaking__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Entrepreneurial rows: title left, copy right */
  .entrepreneurial__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
    padding: 40px 0;
  }

  /* Footer horizontal layout */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  /* Book buttons in a row */
  .book__buttons {
    flex-direction: row;
  }
}

/* ---------- Desktop (1024px+) ---------- */
@media (min-width: 1024px) {
  :root {
    --section-padding: 160px 0;
    --container-padding: 0 40px;
  }

  /* Navigation: full layout with CTA */
  .nav__links {
    gap: 32px;
  }

  .nav__cta {
    display: inline-block;
  }

  /* About section larger gap */
  .about__inner {
    grid-template-columns: 45% 55%;
    gap: 80px;
  }

  /* Book section larger gap */
  .book__inner {
    grid-template-columns: 2fr 3fr;
    gap: 80px;
  }

  /* Guide container more padding */
  .guide__container {
    padding: 80px;
    padding-left: 84px;
  }

  /* Numbers section at desktop: dividers between items */
  .numbers__grid {
    gap: 0;
  }

  .numbers__item {
    border-right: 1px solid rgba(220, 208, 192, 0.15);
  }

  /* No divider at the end of each 3-column row */
  .numbers__item:nth-child(3n),
  .numbers__item:last-child {
    border-right: none;
  }

  /* Entrepreneurial rows: more air */
  .entrepreneurial__row {
    gap: 64px;
    padding: 48px 0;
  }

  /* Course wider feature list */
  .course__features {
    max-width: 600px;
  }
}

/* ---------- Wide (1440px+) ---------- */
@media (min-width: 1440px) {
  :root {
    --container-width: 1300px;
    --section-padding: 180px 0;
  }

  /* Even more generous spacing at wide screens */
  .about__inner {
    gap: 100px;
  }

  .book__inner {
    gap: 100px;
  }

  .hero__content {
    max-width: 1000px;
  }
}

/* ---------- Mobile-specific overrides (max-width) ---------- */
/* These handle cases where mobile needs specific treatment */

@media (max-width: 767px) {
  /* Hero headline: two lines, "The Real Talk" / "on Network Marketing."
     The second line is 12.51em wide in Jorg; the calc sizes the font so it
     always fits the container (100vw minus 2x24px padding) on one line */
  .hero__headline-break {
    display: inline;
  }

  .hero__headline {
    font-size: clamp(1.25rem, calc((100vw - 48px) / 12.8), 3rem);
  }

  /* The .container already provides 24px side padding; don't double it */
  .hero__content {
    padding: 0;
  }

  /* Navigation */
  .nav__links {
    display: none;
  }

  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Stack all two-column layouts */
  .about__inner,
  .book__inner,
  .guide__inner,
  .community__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Book cover centered on mobile */
  .book__cover {
    max-width: 280px;
    margin: 0 auto;
  }

  /* Guide mockup after form on mobile */
  .guide__mockup {
    order: 2;
  }

  /* Footer stacked */
  .footer__inner {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .footer__links {
    justify-content: center;
  }

  .footer__social {
    justify-content: center;
  }

  /* Book buttons stack on small mobile */
  .book__buttons {
    flex-direction: column;
  }

  .book__btn {
    justify-content: center;
  }

  /* Content pillars stack */
  .content-section__pillars {
    grid-template-columns: 1fr;
  }

  /* Speaking grid: single column or 2 col */
  .speaking__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Section headers smaller margins */
  .section-header {
    margin-bottom: 40px;
  }

  /* Closing section less padding */
  .closing {
    padding: 80px 0;
  }

  /* Nav mobile overlay CTA */
  .nav__mobile-cta {
    margin-top: 30px;
  }

  /* Numbers grid on mobile: 2 columns. The value font is sized so the
     widest stat ("180,000+" = 3.76em in Jorg Light) always fits half the
     container: 50vw minus 24px side padding, 8px half-gap, 20px item
     padding. Otherwise the grid tracks overflow the viewport on narrow
     phones and everything shifts right. */
  .numbers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .numbers__item {
    padding: 20px 10px;
  }

  .numbers__value {
    font-size: clamp(1.5rem, calc((50vw - 52px) / 3.85), 3rem);
  }

  /* Course price slightly smaller on mobile */
  .course__price {
    font-size: 3rem;
  }
}

@media (max-width: 479px) {
  /* Very small screens */
  .hero__cta {
    width: 100%;
    text-align: center;
  }

  .guide__container {
    padding: 30px 20px;
  }

  .content-section__pillar {
    padding: 32px 24px;
  }

  .content-section__watermark {
    font-size: 7rem;
    bottom: -26px;
  }
}