/* ==========================================================================
   responsive.css — breakpoint behaviour

   Order on small screens follows the reading order the user needs:
     Header → Calculator → Results → Charts → Amortisation → Guide

   Tables never break the page. They scroll inside their own container, which
   is the one place horizontal overflow is intentional.

   Range covered: 320px phones → 4K televisions, portrait and landscape, with
   mouse, trackpad and touch input.
   ========================================================================== */

/* ==========================================================================
   Very large displays — 4K monitors and televisions
   The content column keeps growing instead of stranding a narrow band in the
   middle of the screen, and everything scales up so it stays readable from a
   sofa rather than from a desk.
   ========================================================================== */
@media (min-width: 2000px) {
  :root {
    --content-max: 1760px;
    --gutter: var(--sp-7);
  }
  body { font-size: 17px; }
  .page__title { font-size: 38px; }
  .page__lede { font-size: 17.5px; }
  .stat__value { font-size: 22px; }
  .data-table { font-size: 15px; }
  .chart-holder { height: 380px; }
  .chart-holder--doughnut { height: 320px; }
}

@media (min-width: 1600px) and (max-width: 1999px) {
  :root { --content-max: 1520px; --gutter: var(--sp-6); }
  .chart-holder { height: 340px; }
}

@media (min-width: 1440px) and (max-width: 1599px) {
  :root { --content-max: 1360px; }
  .calc-layout { grid-template-columns: minmax(340px, 420px) 1fr; }
}

/* ==========================================================================
   Hero banner overlay — 760px and up
   Below this width the headline stays stacked under a short strip of the
   photo (see the base rules in style.css) — there isn't room to overlay
   this much text on the image and keep it both legible and uncramped.
   From here up, the same content sits directly on top of the photo
   instead, using its own fixed colors rather than the site's theme
   variables, since the photo's left-side fade is always light regardless
   of the light/dark toggle.
   ========================================================================== */
@media (min-width: 760px) {
  .hero-banner { position: relative; }
  .hero-banner__media {
    position: absolute; top: 0; bottom: 0;
    left: 50%; right: auto; margin-left: 0;
    transform: translateX(-50%);
    width: 100vw; z-index: 0;
  }
  .hero-banner__media img { height: 100%; object-position: center 38%; }
  .hero-banner__content {
    position: relative; z-index: 1;
    max-width: min(58%, 600px);
    padding: 5% 3.5%;
  }
  /* A soft light halo behind the overlay text, not just its base color:
     insurance for the (rare) case where wrapped content at a narrow
     overlay width pushes a line past the photo's white fade and onto a
     darker part of the image — the text stays readable either way instead
     of being legible only when it lands exactly on the fade. */
  .hero-banner__brand, .hero-banner__tagline, .hero-banner__h1-sub,
  .hero-banner__message, .hero-header__keywords {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55), 0 0 16px rgba(255, 255, 255, 0.4);
  }
  .hero-banner__brand { color: #0b1a3d; }
  .hero-banner__tagline, .hero-banner__h1-sub { color: #1b2c52; }
  .hero-banner__message { color: #3a4a6b; }
  .hero-header__keywords { color: #5a6785; }
}

/* ==========================================================================
   Small desktop / large tablet — 1100px
   ========================================================================== */
@media (max-width: 1100px) {
  .calc-layout { grid-template-columns: minmax(300px, 360px) 1fr; gap: var(--sp-4); }
  .chart-pair { gap: var(--sp-3); }
  .definition-grid { grid-template-columns: minmax(120px, 180px) 1fr; }
  .primary-nav__list a { padding: 11px var(--sp-2); }
}

/* ==========================================================================
   Tablet — 900px
   The two-column calculator becomes a single column: inputs first, then
   results, which is the order the user actually works in.
   ========================================================================== */
@media (max-width: 900px) {
  :root { --gutter: var(--sp-4); }

  .calc-layout { grid-template-columns: 1fr; }

  /* A sticky input panel makes no sense once it is full width. */
  .calc-column { position: static; }
  .card--inputs { margin-bottom: var(--sp-4); }

  .chart-pair { grid-template-columns: 1fr; }
  .scenario-grid { grid-template-columns: 1fr; }
  .radio-group { grid-template-columns: 1fr; }
  .guide-columns { grid-template-columns: 1fr; gap: var(--sp-4); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  /* The 4-column footer (minimum ~220+220+140+140px plus gaps) no longer
     fits at tablet widths without overflowing horizontally — 2 columns
     fits comfortably down to the 720px breakpoint, which narrows it
     further still. */
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .site-footer__about { grid-column: 1 / -1; max-width: none; }

  .page__title { font-size: 26px; }
  .site-main { padding: var(--sp-5) var(--gutter) var(--sp-6); }
}

/* ==========================================================================
   Mobile — 720px
   The primary navigation collapses into a hamburger drawer.
   ========================================================================== */
@media (max-width: 720px) {
  .nav-toggle { display: block; }

  .brand__tagline { display: none; }
  .brand__name { font-size: 14px; white-space: normal; line-height: 1.3; }
  .brand__mark { width: 40px; height: auto; }

  :root { --gutter: var(--sp-3); }
  .site-header__inner { padding: var(--sp-3) var(--gutter); }

  /* The drawer: hidden by default, revealed by the toggle in app.js. */
  .primary-nav {
    display: none;
    border-top: 1px solid var(--border);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav.is-open { display: block; }

  .primary-nav__list {
    flex-direction: column; gap: 0; padding: var(--sp-2) var(--gutter) var(--sp-3);
    overflow-x: visible;
  }
  .primary-nav__list a {
    padding: 13px var(--sp-2); font-size: 15px;
    border-bottom: 1px solid var(--border); border-left: 2px solid transparent;
  }
  .primary-nav__list a.is-active {
    border-bottom-color: var(--border);
    border-left-color: var(--accent);
    background: var(--accent-soft);
    padding-left: var(--sp-3);
  }

  body.is-nav-open { overflow: hidden; }

  /* The header WhatsApp CTA keeps its icon but drops the label so the header
     never wraps to a second line on a narrow phone. */
  .header-whatsapp__label { display: none; }
  .header-whatsapp { padding-left: 10px; padding-right: 10px; }

  /* Inside the drawer, a dropdown menu is just a nested, always-static list —
     never a floating popover — and is shown/hidden by the same .is-open
     class the toggle button already sets via leads.js. */
  .nav-dropdown__toggle {
    width: 100%; justify-content: space-between;
    padding: 13px var(--sp-2); font-size: 15px;
    border-bottom: 1px solid var(--border);
  }
  .nav-dropdown__menu {
    display: none; position: static; box-shadow: none; border: 0;
    background: var(--surface-2); border-radius: 0; padding: 0;
    margin: 0 0 0 var(--sp-3);
  }
  .nav-dropdown.is-open .nav-dropdown__menu { display: block; }
  .nav-dropdown__menu a { padding: 12px var(--sp-2); border-bottom: 1px solid var(--border); font-size: 14px; }

  .hero-cta-row { flex-direction: column; align-items: stretch; }

  /* Stacked field rows — two number inputs side by side get too narrow. */
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field--narrow { max-width: none; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .stat { padding: var(--sp-3); }
  .stat__value { font-size: 17px; }

  .quick-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .tip-grid { grid-template-columns: 1fr; }
  .compare-inputs { grid-template-columns: 1fr; }
  .winner-grid { grid-template-columns: 1fr 1fr; }
  .glossary-list { grid-template-columns: 1fr; }
  .list-grid--wide { grid-template-columns: 1fr; }

  .page__title { font-size: 23px; }
  .page__lede { font-size: 14.5px; }
  .site-main { padding: var(--sp-4) var(--gutter) var(--sp-6); }
  .card { padding: var(--sp-4); }
  .card--hero { padding: var(--sp-5) var(--sp-4); }

  /* Table controls stack rather than squeezing. */
  .table-controls { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .table-controls .field--inline { justify-content: space-between; }
  .table-controls .input--sm { flex: 1; min-width: 0; }
  .table-controls__actions { margin-left: 0; }
  .table-controls__actions .btn { flex: 1; }

  .action-bar .btn { flex: 1; min-width: 140px; }
  .action-bar .table-meta { flex-basis: 100%; margin-right: 0; }

  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar .field--inline { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .search-bar .field__label { margin-bottom: 0; }

  .saved-card { flex-direction: column; align-items: stretch; }
  .saved-card__actions .btn { flex: 1; }

  .definition-grid { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
  .definition-grid dd { margin-bottom: var(--sp-3); }

  .breakdown-row { flex-direction: column; gap: 2px; align-items: flex-start; }
  .breakdown-row--emphasis { margin-inline: calc(var(--sp-3) * -1); padding-inline: var(--sp-3); }

  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .site-footer__about { grid-column: 1 / -1; max-width: none; }
  .site-footer__links { justify-content: flex-start; }
  /* Each footer column is already narrow at this width (about half the
     screen) — splitting Calculators into 2 sub-columns here would squeeze
     its longer link text (e.g. "Loan Against Property") down to a couple
     of characters per line, so it reverts to one column same as the rest. */
  .site-footer__links--split { column-count: 1; }
  .site-footer__copy { white-space: normal; }

  .lead-capture { grid-template-columns: 1fr; }
  .hero-cta-row .btn { flex: 1 1 auto; }

  /* --- Ads on a phone ------------------------------------------------
     A banner, framed lightly so it reads as an ad without competing with
     the cards around it, and with enough clearance above that it can never
     be mistaken for part of the control you just used. */
  .ad-slot[data-ad-active] {
    margin: var(--sp-6) 0;
    padding: var(--sp-2);
  }
  .calc-layout + .ad-slot[data-ad-active],
  .action-bar + .ad-slot[data-ad-active] { margin-top: var(--sp-7); }


  .chart-holder { height: 260px; }
  .chart-holder--doughnut { height: 240px; }

  /* Tooltip bubbles are pinned to the viewport so they never overflow it. */
  .tooltip__bubble {
    position: fixed; left: var(--sp-3); right: var(--sp-3); bottom: auto; top: auto;
    width: auto; max-width: none; transform: none;
    margin-top: var(--sp-2);
  }

  .toast { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-4); transform: translateY(12px); max-width: none; }
  .toast.is-visible { transform: translateY(0); }

  .modal { width: 100%; }
  .modal__footer { flex-direction: column-reverse; }
  .modal__footer .btn { width: 100%; }
}

/* ==========================================================================
   Small mobile — 420px
   ========================================================================== */
@media (max-width: 420px) {
  body { font-size: 14.5px; }
  .stat-grid { grid-template-columns: 1fr; }
  .winner-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .hero__value { font-size: 30px; }
  .page__title { font-size: 21px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .split__legend { gap: var(--sp-3); }
  .scenario-list { grid-template-columns: 1fr auto; font-size: 13px; }
  .mini-stat { flex: 1 1 100%; }
}

/* ==========================================================================
   Landscape phones and short tablets
   A 400px-tall viewport cannot afford a sticky bar plus a tall hero.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: static; }   /* reclaim the sticky bar's height */
  .card--hero { padding: var(--sp-3) var(--sp-4); }
  .hero__value { font-size: 26px; }
  .chart-holder { height: 220px; }
  .chart-holder--doughnut { height: 200px; }
  .primary-nav { max-height: 70dvh; }
}

/* ==========================================================================
   Touch devices — larger hit targets
   Applies to phones, tablets, iPads, touch laptops and TV browsers driven by
   a remote pointer.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Every control clears the 44px minimum recommended for a finger. */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 44px; }
  .chip-btn { min-height: 44px; }
  .input { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming on focus */
  .input--sm { min-height: 44px; font-size: 16px; }
  .tooltip__trigger { width: 40px; height: 40px; font-size: 15px; border-radius: 50%; }

  /* The slider's transparent hit area grows to a full finger; the visible bar
     stays thin. Without this the grabbable strip is only a few pixels tall. */
  .slider { height: 44px; margin-top: var(--sp-1); }
  .slider::-webkit-slider-runnable-track { height: 6px; }
  .slider::-moz-range-track { height: 6px; }
  .slider::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .slider::-moz-range-thumb { width: 24px; height: 24px; }

  .accordion__trigger { padding: var(--sp-4) var(--sp-3); min-height: 52px; }

  /* Every nav tab is a comfortable tap target, and the strip can be swiped
     horizontally with momentum when it is wider than the screen. */
  .primary-nav__list {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .primary-nav__list::-webkit-scrollbar { display: none; }
  .primary-nav__list li { scroll-snap-align: start; }
  .primary-nav__list a { min-height: 44px; display: flex; align-items: center; }

  .theme-switch__btn { min-width: 44px; min-height: 40px; }
  .nav-toggle { width: 44px; height: 44px; }
  .list-card, .quick-card, .tip-card { min-height: 48px; }
  .modal__close { min-width: 44px; min-height: 44px; }

  /* Outbound reference links are inline text; give them a real tap area. */
  .link-list__link { min-height: 44px; padding: var(--sp-2) 0; }

  /* The radio itself is small, but the whole card is the label — enlarge the
     dot as well so it reads as touchable rather than decorative. */
  .radio-card { min-height: 56px; }
  .radio-card input { width: 22px; height: 22px; }

  /* Hover-reveal effects are meaningless without a pointer. */
  .quick-card:hover { transform: none; }
  .list-card:hover, .tip-card:hover { box-shadow: none; }

  /* Tapping a row should feel like a press, not like nothing happened. */
  .quick-card:active, .list-card:active, .tip-card:active,
  .accordion__trigger:active { background: var(--surface-3); }
}

/* ==========================================================================
   Short viewports — do not let a sticky panel eat the screen
   ========================================================================== */
@media (max-height: 700px) and (min-width: 901px) {
  .calc-column { position: static; }
}