/* ================================
   MOBILE OPTIMISATION
   Shared overrides loaded after page-specific styles.
================================ */

html {
  scroll-padding-top: 92px;
}

/* Prevent long strings, URLs and labels from forcing horizontal overflow. */
p,
li,
td,
th,
a,
button {
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 78px;
  }

  /* Slightly tighter sticky header on smaller screens. */
  .nav-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  header .logo img {
    height: 46px;
    width: auto;
  }

  /* Keep an opened mobile menu usable even on short landscape screens. */
  header.mobile-menu-open nav {
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-left {
    padding-top: 8px;
  }

  .nav-left a,
  .dropdown a,
  .mega-links a,
  .mega-cta {
    min-height: 44px;
  }

  /* Keep the mobile menu from becoming wider than the viewport. */
  .dropdown,
  .has-mega .dropdown {
    max-width: 100%;
  }

  /* Hero areas should not consume most of the first screen on a phone. */
  .hero {
    padding: 68px 0;
  }

  .hero > .container {
    gap: 30px;
  }

  .hero-grid {
    gap: 30px;
  }

  .hero-image-wrapper,
  .hero-video-wrapper,
  .hero-image-placeholder {
    max-width: 100%;
  }

  /* Fluid headings avoid abrupt jumps between device widths. */
  h1 {
    font-size: clamp(30px, 8.5vw, 42px);
    line-height: 1.12;
  }

  section h2,
  .resources-heading {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.2;
  }

  /* Justification creates distracting rivers of whitespace on narrow lines. */
  .justify-copy,
  .hero-left p,
  .hero-card p,
  .policy-content p,
  .sustainability-content p,
  .resources-heading,
  .resources-intro,
  .resource-card p {
    text-align: left;
  }

  /* Let translated/typewriter headings use a second line instead of truncating. */
  #welcomeTitle,
  .typewriter-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .typewriter {
    display: block;
    max-width: 100%;
  }

  /* Mobile touch targets. */
  .cta-btn,
  .book-button,
  .download-btn,
  .amazon-links a,
  .carousel-btn {
    min-height: 44px;
  }

  .cta-btn,
  .book-button,
  .download-btn,
  .amazon-links a {
    white-space: normal;
    text-align: center;
  }

  /* Reduce desktop-scale section whitespace while preserving page hierarchy. */
  .problems-solutions,
  .find-book,
  .sustainability-section,
  .policy-section,
  .resources,
  .activities-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Cards read better with slightly tighter padding on phones/tablets. */
  .hero-card-body,
  .card-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 600px) {
  .container {
    width: 92%;
  }

  .hero {
    padding: 58px 0;
  }

  .hero-left p,
  .hero p,
  .section-intro {
    font-size: 16px;
    line-height: 1.68;
  }

  .hero-cta {
    margin-top: 20px;
    gap: 10px;
  }

  .hero-cta .cta-btn,
  .card-actions .cta-btn,
  .card-actions .book-button {
    width: 100%;
  }

  /* Sustainability: keep logos useful without making a very long five-row strip. */
  .sdg-grid {
    gap: 12px;
  }

  .forest-stat {
    padding: 18px 14px;
  }

  /* ================================
     STORIES: PROBLEM/SOLUTION CARDS
  ================================ */
  .ps-table-wrap {
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .ps-table,
  .ps-table tbody,
  .ps-table tr,
  .ps-table td {
    display: block;
    width: 100%;
  }

  .ps-table {
    min-width: 0;
    background: transparent;
  }

  .ps-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ps-table tbody tr {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  }

  .ps-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .ps-table td {
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.6;
  }

  .ps-table td + td {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .ps-table td::before {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #767676;
  }

  .ps-table td:first-child::before {
    content: "Situation";
  }

  .ps-table td:nth-child(2)::before {
    content: "Problem";
  }

  /* ================================
     STORIES: BOOK ROWS -> CARDS
  ================================ */
  .book-grid {
    gap: 16px;
    margin-top: 22px;
  }

  .book-grid .book-table-wrap {
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .book-grid .book-table,
  .book-grid .book-table tbody {
    display: block;
    width: 100%;
    background: transparent;
  }

  .book-grid .book-table tbody tr {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0 16px;
    width: 100%;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  }

  .book-grid .book-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .book-grid .book-table td,
  .book-grid .book-table td:nth-child(1),
  .book-grid .book-table td:nth-child(3) {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .book-grid .book-table td:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .book-grid .book-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .book-grid .book-table td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 16px;
  }

  .book-logo {
    width: 76px;
    height: 76px;
  }

  .book-title {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.3;
  }

  .book-desc {
    font-size: 14px;
    line-height: 1.55;
  }

  .amazon-links {
    gap: 8px;
  }

  .amazon-links a {
    padding: 11px 12px;
  }

  /* Resource cards and activity cards need less dead space in a single column. */
  .resources-grid,
  .book-cards {
    gap: 20px;
  }
}

@media (max-width: 380px) {
  .container {
    width: 94%;
  }

  h1 {
    font-size: clamp(28px, 9.5vw, 36px);
  }

  .book-grid .book-table tbody tr {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 12px;
    padding: 15px;
  }

  .book-logo {
    width: 64px;
    height: 64px;
  }
}