/* ============================================================
   PPL Academy — Site-wide responsive layer
   Loaded LAST on every page (new/master.blade.php) so it can
   correct layouts declared in main.css and the per-page files.

   Breakpoints
     1100px  large tablet / small laptop
      980px  mobile navigation kicks in
      760px  tablet portrait -> phone
      560px  phone
      400px  small phone
   ============================================================ */

/* ── 0. Overflow + box safety ─────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, picture, video {
  max-width: 100%;
  height: auto;
}
/* Canvas and inline SVG are sized by their own rules (often absolute
   insets or script-set attributes) — only cap their width. */
svg, canvas, iframe { max-width: 100%; }

/* Long words / URLs must never push the page sideways. */
p, li, h1, h2, h3, h4, h5, h6, dd, dt, blockquote, figcaption, td, th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Rich text from the CMS can contain tables and wide media. */
.bp-post-content table,
.cd-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bp-post-content pre,
.cd-prose pre { overflow-x: auto; }
.bp-post-content img,
.bp-post-content iframe,
.cd-prose img { max-width: 100%; height: auto; }

/* ── 1. Brand marks ───────────────────────────────────────── */
/* The logo PNG carries a lot of internal whitespace, so it is drawn
   larger than its layout box and pulled back with negative margins.
   Keep that ratio (box = height - 2*margin) at every size. */
.brand-logo-link { display: block; flex-shrink: 0; }
.brand-logo {
  height: 130px;
  width: auto;
  display: block;
  margin: -45px 0;
}

.footer-logo-link {
  background: #fff;
  border-radius: 6px;
  width: 150px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footer-logo { height: 90px; width: auto; display: block; }

/* ── 2. Navigation ────────────────────────────────────────── */
/* Six uppercase links plus the logo stop fitting well before 860px,
   so the mobile menu starts at 980px instead. */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--night);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 95;
    padding: 96px 24px calc(40px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.is-open li { width: 100%; max-width: 360px; }
  .nav-links.is-open a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    min-height: 56px;
    width: 100%;
  }
  /* The drawer is always dark, whatever theme the page nav uses, so the
     per-page link colours (dark green on light pages) must not carry over. */
  body .nav-links.is-open a,
  body.new-shell .nav-links.is-open a,
  body.home-light .nav-links.is-open a {
    color: var(--cream);
    opacity: 0.92;
  }
  body .nav-links.is-open a.active,
  body.new-shell .nav-links.is-open a.active,
  body.home-light .nav-links.is-open a.active {
    color: var(--gold-warm);
    opacity: 1;
  }
  /* The desktop underline is a 100%-width bar; inside a full-width drawer
     row it reads as a divider across the screen. */
  .nav-links.is-open a::after { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 110;
    /* 44px touch target without moving the bars */
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }
  .nav-toggle span {
    width: 26px;
    height: 2px;
    background: var(--cream);
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The header keeps its own (light) background and paints above the dark
     drawer, so the bars stay dark in both states. */
  body.new-shell .nav-toggle span,
  body.new-shell .nav-toggle.is-open span { background: #0a3e34; }
}

/* Page behind the open menu must not scroll. */
html.nav-open, html.nav-open body { overflow: hidden; }

/* CRITICAL: `.nav` carries backdrop-filter, and any filter/backdrop-filter
   other than `none` makes an element the containing block for its
   position:fixed descendants. The drawer lives inside <header class="nav">,
   so `inset: 0` was resolving against the 136px-tall header instead of the
   viewport — the menu rendered as a clipped strip under the logo.
   Dropping the filter while the menu is open restores the viewport as the
   containing block. The nav background is 95% opaque, so nothing looks
   different with the blur off. */
html.nav-open .nav,
html.nav-open body.new-shell .nav,
html.nav-open body.home-light .nav,
html.nav-open .nav.is-scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 980px) {
  .nav { padding: 12px var(--pad-page); }
  .nav.is-scrolled { padding: 8px var(--pad-page); }
  .brand-logo { height: 104px; margin: -36px 0; }
}
@media (max-width: 560px) {
  .brand-logo { height: 92px; margin: -32px 0; }
}
@media (max-width: 400px) {
  .brand-logo { height: 84px; margin: -29px 0; }
}

/* ── 3. Touch input ergonomics ────────────────────────────── */
@media (hover: none) {
  /* The bespoke cursor is hidden on touch — make sure nothing that
     opted into `cursor: none` leaves a control feeling inert. */
  input, textarea, select, button, a, .cp-search, .contact-form input,
  .contact-form textarea, .lang-switch select { cursor: auto; }
  a, button, [role="button"], .hlt-chip, .path-chip, .cp-strip-btn { cursor: pointer; }
  input[type="text"], input[type="search"], input[type="email"], textarea { cursor: text; }
}

@media (max-width: 980px) {
  /* iOS Safari zooms the viewport when a focused field is under 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* Comfortable hit areas. */
  .btn, .btn-light, .cf-btn, .hls-btn, .cp-strip-btn, .path-chip,
  .hlt-chip, .bp-pill, .cd-date-btn, .cp-view-btn {
    min-height: 44px;
  }
  .footer li a { display: inline-block; padding: 9px 0; }
  .footer li { margin-bottom: 2px; }

  /* The logo image is drawn far larger than its layout box (negative
     margins), so the link's real hit area was only 26px tall. Extend it
     with a pseudo-element instead of padding, which would push the whole
     header taller. */
  .brand-logo-link { position: relative; }
  .brand-logo-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    right: -8px;
    height: 46px;
    transform: translateY(-50%);
  }

  .bp-ghost-btn, .bp-cta-btn { min-height: 44px; }
}

/* Kill hover-only lift effects on touch — they stick after a tap. */
@media (hover: none) {
  .btn-primary:hover, .cat-tile-light:hover, .ml-stat-card:hover,
  .bp-card:hover, .cd-date-row:hover, .ab-val-card:hover {
    transform: none;
  }
}

/* ── 4. Rhythm: section padding + type at small widths ────── */
@media (max-width: 760px) {
  :root { --pad-page: 20px; }
  section { padding: 64px 0; }
}
@media (max-width: 480px) {
  :root { --pad-page: 16px; }
  section { padding: 52px 0; }
}

/* ── 5. Footer ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .footer { padding: 56px var(--pad-page) 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { font-size: 1.8rem; margin-bottom: 14px; }
  .footer-tag { max-width: none; font-size: 1rem; }
  .footer-bottom {
    margin-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 540px) {
  /* Keep the brand block full width, pair the three link columns. */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── 6. HOME ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Dynamic viewport units so the hero doesn't jump as mobile
     browser chrome collapses. */
  .hero-light { min-height: auto; padding: 116px var(--pad-page) 64px; }
  @supports (height: 100svh) {
    .hero-light { min-height: 82svh; }
  }
  .hero-light-pill { margin-bottom: 26px; }
  .hero-light-title { margin-bottom: 34px; }
}
@media (max-width: 600px) {
  /* The pill-shaped search bar becomes a stacked card. */
  .hero-light-search {
    border-radius: 20px;
    grid-template-columns: 40px 1fr;
    padding: 8px 10px;
  }
  .hls-btn { border-radius: 14px; }
  .hero-light-topics {
    justify-content: center;
    gap: 8px;
  }
  .hlt-lbl { width: 100%; text-align: center; margin-bottom: 4px; }
}
@media (max-width: 760px) {
  .hero-search-dropdown { max-height: 52vh; overflow-y: auto; }
  .methods { padding-left: 0; padding-right: 0; }
  .methods-title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .cat-grid-light { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .ml-title { font-size: clamp(1.9rem, 8vw, 3rem); }
  .cta-light-title { font-size: clamp(1.9rem, 8vw, 3rem); }
}
@media (max-width: 460px) {
  .cat-grid-light { grid-template-columns: 1fr; }
  .marquee-light .marquee-track { font-size: 0.9rem; }
}

/* Learning-path graph — the SVG is authored ~1400px wide. Squeezing it
   into a phone renders its labels at ~4px, so scroll it instead. */
@media (max-width: 980px) {
  .lp-graph-wrap, .path-graph-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    scrollbar-width: thin;
  }
  #path-svg {
    width: auto !important;
    height: 480px;
    min-width: 900px;
  }
  .path-empty { min-height: 260px; padding: 0 20px; }
  .path-legend { flex-wrap: wrap; gap: 12px 18px; }
  /* Hover tooltips are meaningless on touch. */
  .path-tip { display: none; }
  .lp-hero-chips { gap: 8px; }
  .lp-hero-search input { font-size: 16px; }
}
@media (max-width: 560px) {
  #path-svg { height: 420px; min-width: 760px; }
}

/* ── 7. COURSES listing ───────────────────────────────────── */
/* The desktop sidebar carries the category filter. It was hidden
   outright below 1024px, which left phones with search only.
   Below 1024px it becomes a horizontally scrollable filter rail
   pinned above the results. */
@media (max-width: 1024px) {
  /* Not sticky: body/.cp-page/.cp-body all set overflow-x:hidden, which makes
     them scroll containers and confines `position: sticky` to a box that never
     scrolls. Unpicking that would risk reintroducing horizontal overflow, so
     the rail simply sits above the results. */
  .cp-sidebar {
    display: block;
    position: static;
    margin: 0 calc(var(--pad-page) * -1) 16px;
    padding: 10px var(--pad-page);
    background: #F0F4F2;
    border-bottom: 1.5px solid #E0EBEA;
  }
  .cp-sidebar-inner {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .cp-sidebar-inner::-webkit-scrollbar { display: none; }

  .cp-fgroup {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 100px;
    flex: 0 0 auto;
    max-width: none;
  }
  .cp-fgroup-label { white-space: nowrap; margin: 0 4px 0 6px; }

  .cp-lvl-nav {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow: visible;
  }
  .cp-lvl-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    min-height: 40px;
    border-radius: 100px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid #E0EBEA;
  }
  .cp-lvl-btn.active { border-color: #14695A; }

  .cp-reset-btn { flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 40px; }
  #cp-active-tags { flex: 0 0 auto; margin-bottom: 0 !important; }

  /* Block, not a 1-column grid: as a grid item the rail's containing block
     is its own row, so `position: sticky` had no room to travel and it
     scrolled away with the page. */
  .cp-body-inner { display: block; }
}
@media (max-width: 768px) {
  .cp-hero { padding: 108px var(--pad-page) 44px; }
  .cp-hero-deco { display: none; }
  .cp-hero::after { display: none; }
  .cp-search { font-size: 16px; }
  .cp-search-kbd { display: none; }
  .cp-toolbar { flex-wrap: wrap; gap: 10px; }
}

/* ── 8. COURSE DETAIL ─────────────────────────────────────── */
@media (max-width: 1100px) {
  /* The enquiry card is the primary conversion point — keep it
     reachable rather than stranded at the bottom. */
  .cd-side-card { width: 100%; }
}
@media (max-width: 760px) {
  .cd-layout { padding: 0 var(--pad-page); }
  .cd-hero { padding-top: 104px; }
  /* Delivery + schedule tab strips: auto-fit at 180px drops to a single
     column on a phone, which buries the panels. Let two fit instead. */
  .cd-sched-nav, .cd-tab-nav {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }
  .cd-stab, .cd-tab { padding: 14px 8px; font-size: 0.78rem; text-align: center; }
  .cd-date-btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .cd-spanel { padding: 22px 16px; }
}

/* Modals + exit popup — a tall card must scroll rather than get clipped
   off the top and bottom of a short phone viewport. */
@media (max-width: 760px), (max-height: 700px) {
  .cd-modal, .cd-exit {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .cd-modal-card, .cd-exit-card { margin: auto 0; }
}
@media (max-width: 560px) {
  .cd-modal-card { padding: 30px 20px 26px; }
  .cd-exit-card { padding: 32px 20px 26px; }
  .cd-exit-actions { flex-direction: column; align-items: stretch; }
  .cd-exit-actions > * { width: 100%; justify-content: center; }
}

/* ── 9. BLOG ──────────────────────────────────────────────── */
/* Scoped to the blog bodies: bespoke.css shares the `bp-` prefix
   (.bp-body, .bp-hero, .bp-pill) and must not be caught by these. */
@media (max-width: 760px) {
  body.blog-body .bp-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 calc(var(--pad-page) * -1) 20px;
    padding: 0 var(--pad-page);
  }
  body.blog-body .bp-filters::-webkit-scrollbar { display: none; }
  body.blog-body .bp-pill { flex: 0 0 auto; white-space: nowrap; }
  body.blog-post-body .bp-post-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  body.blog-post-body .bp-post-body {
    padding-left: var(--pad-page);
    padding-right: var(--pad-page);
  }
  body.blog-post-body .bp-post-meta { flex-wrap: wrap; gap: 4px 8px; justify-content: center; }
}

/* ── 10. CONTACT ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .contact-page { padding: 104px var(--pad-page) 64px; }
  .contact-inner { gap: 40px; }
  .contact-h1 { margin-bottom: 24px; }
  .cf-btn { width: 100%; }
}

/* ── 11. ABOUT ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ab-hero { padding-top: 104px; }
  .ab-steps { flex-direction: column; }
  .ab-step-arrow { transform: rotate(90deg); margin: 8px auto; }
  .ab-hero-cta { flex-wrap: wrap; gap: 12px; }
  .ab-card-stack { transform: none; }
}

/* ── 12. BESPOKE ──────────────────────────────────────────── */
/* Layout in bespoke.blade.php is largely inline; the markup now carries
   these classes so the columns can actually collapse. */
@media (max-width: 900px) {
  .bsp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .bsp-grid-2 { grid-template-columns: 1fr !important; gap: 48px !important; }
  .bsp-chat { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .bsp-grid-3 { grid-template-columns: 1fr !important; }
  .bsp-grid-2 { gap: 36px !important; }
  .bsp-mini-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  body.bp-body .bp-hero-actions { flex-wrap: wrap; gap: 12px; }
  body.bp-body .bp-hero-chips { flex-wrap: wrap; }
  body.bp-body .bp-quote-text { font-size: clamp(1.2rem, 5.5vw, 1.8rem); }
}

/* ── 13. THANK YOU ────────────────────────────────────────── */
@media (max-width: 560px) {
  .ty-ctas { flex-direction: column; align-items: stretch; margin-top: 36px; }
  .ty-ctas > * { width: 100%; justify-content: center; }
}

/* ── 14. Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .cat-reveal, .method-reveal, .stat-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}