/* ==========================================================================
   ElevatteLife — 04. Responsive
   Designed for 320 / 375 / 390 / 414 / 768 / 1024 / 1440+ from the start.
   Nothing here "shrinks the desktop" — layouts genuinely re-flow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop (1440px+) — let the layout breathe, keep line lengths sane
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --gutter: 3rem;
  }

  .hero__body {
    max-width: 38rem;
  }

  .split {
    gap: 5rem;
  }
}

/* --------------------------------------------------------------------------
   Small desktop (<= 1180px) — tighten the navigation before it collapses
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-inner {
    gap: var(--space-4);
  }

  .nav-link {
    padding-inline: 0.6rem;
  }

  .nav-icon-link {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Tablet landscape (<= 1024px) — switch to the drawer navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 84px;
  }

  .nav-primary,
  .nav-actions .btn {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Mobile header: brand left, actions right — explicit space-between so
     hiding the desktop nav can't shift the balance. */
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .nav-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .nav-icon-link {
    display: inline-flex;
  }

  .nav-toggle {
    margin-left: 0;
  }

  .hero::before {
    inset: -10% 20% 40% -20%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-8);
    padding-bottom: var(--space-8);
  }

  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--line-invert);
  }

  .footer-brand__text {
    max-width: 34rem;
  }

  /* Drawer: a touch more presence for the brand row */
  .drawer__head {
    padding: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Tablet portrait (<= 900px) — single-column splits, two-up grids
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  html {
    scroll-padding-top: 80px;
  }

  .split,
  .split--wide-media {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }

  /* Page-specific hero splits set their own two-column template with
     higher specificity, so they must be collapsed explicitly here. */
  .services-hero .split--wide-media,
  .consultation-hero .split--wide-media,
  body.page-report .page-hero .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--media-left > .split__media {
    order: 0;
  }

  .split__body {
    max-width: none;
  }

  /* Single column: stop the founder photo stretching to full width. */
  .founder-media {
    max-width: 34rem;
  }

  .story-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .story-layout__portrait .media {
    max-width: 140px;
  }

  .hero {
    padding-block: var(--space-6) var(--space-16);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }

  .hero__body {
    max-width: none;
  }

  .hero__media {
    max-width: 640px;
  }

  .hero__note {
    margin-top: var(--space-6);
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spec-list__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-band .btn-group {
    justify-content: flex-start;
  }

  .system {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .system__node::after {
    content: "+";
    top: auto;
    right: auto;
    bottom: calc(var(--space-4) / -2 - 0.55em);
    left: 50%;
    transform: translateX(-50%);
  }

  .media-stack::after {
    inset: auto -10px -10px auto;
    width: 72px;
    height: 72px;
  }
}

/* --------------------------------------------------------------------------
   Tablet / large phone (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-y: clamp(3rem, 2rem + 5vw, 4.5rem);
    --control-h: 46px;
  }

  /* 16px+ inputs stop iOS Safari from auto-zooming when a field is focused. */
  .input,
  .select,
  .textarea {
    font-size: 1rem;
  }

  .section-head--split {
    align-items: flex-start;
  }

  .section-head--split > .section-head__text {
    max-width: none;
  }

  .grid--3,
  .grid--4,
  .grid--auto,
  .grid--auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .pillar-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
  }

  .media-stack::after {
    display: none; /* offset rule crowds small layouts */
  }

  .report-card__footer {
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Phones (<= 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --gutter: 1.25rem;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-media: 14px;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--auto,
  .grid--auto-sm {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-inner {
    min-height: 64px;
    gap: var(--space-3);
  }

  .brand__logo {
    height: 42px;
  }

  .hero {
    padding-block: var(--space-5) var(--space-12);
  }

  .btn {
    font-size: var(--fs-sm);
    padding-inline: 1.2rem;
  }

  .btn--lg {
    min-height: var(--control-h);
    padding-inline: 1.35rem;
  }

  .eyebrow::before {
    width: 16px;
  }

  /* Footer re-flows for phones: centred brand column, tap-sized rows.
     Spacing kept deliberately compact — mirrors the tightened desktop footer. */
  .site-footer {
    padding-top: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    text-align: center;
  }

  .footer-brand {
    display: grid;
    justify-items: center;
    padding-bottom: var(--space-5);
  }

  .footer-brand .brand {
    justify-content: center;
  }

  .footer-brand .brand__logo {
    height: 60px;
  }

  .footer-brand__text {
    margin-inline: auto;
  }

  .footer-col .footer-heading {
    margin-bottom: var(--space-4);
  }

  .footer-links {
    gap: 0;
  }

  .footer-links a {
    display: block;
    padding: 0.5rem 0;
  }

  .footer-contact {
    gap: 0.7rem;
  }

  .footer-contact__row {
    justify-content: center;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    padding-block: var(--space-4);
  }

  .footer-legal {
    justify-content: center;
  }

  .footer-legal span::before {
    display: none;
  }

  /* Icon-only WhatsApp bubble keeps small screens clear */
  .wa-float {
    width: 46px;
    height: 46px;
    justify-content: center;
    padding-inline: 0;
  }

  .wa-float span {
    display: none;
  }

  .media__caption {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    font-size: 0.75rem;
  }

  .media-badge {
    left: var(--space-3);
    bottom: var(--space-3);
    padding: 0.65rem 0.85rem;
  }

  .brand-moment__words {
    gap: 0.35rem 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   Small phones (<= 480px) — stack CTAs, they genuinely need the tap room
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --section-y: clamp(2.75rem, 2rem + 4vw, 3.5rem);
    --section-y-sm: clamp(2.25rem, 1.75rem + 3vw, 3rem);
  }

  .btn-group {
    gap: var(--space-3);
  }

  .btn-group > .btn {
    width: 100%;
  }

  .hero__title span + span {
    margin-top: 0.12em;
  }

  .card {
    padding: 1.25rem;
  }

  .principle {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .principle__num {
    font-size: 1.125rem;
  }

  .fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .pillar-strip__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .drawer {
    width: min(340px, 92vw);
  }

  .acc-trigger {
    gap: var(--space-4);
    font-size: 0.9375rem;
  }

  .timeline__item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }

  .timeline__item::before {
    left: 12px;
  }

  .timeline__dot {
    width: 25px;
    height: 25px;
    font-size: 0.625rem;
  }

  .notice {
    padding: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   iPhone SE / small Android (<= 390px)
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  :root {
    --gutter: 1.125rem;
    --fs-eyebrow: 0.6875rem;
  }

  .brand__logo {
    height: 38px;
  }

  .fact-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .card {
    padding: 1.125rem;
  }

  .step,
  .tile {
    padding: 1.125rem;
  }
}

/* --------------------------------------------------------------------------
   Very small / legacy (<= 360px, still used at 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root {
    --gutter: 1rem;
    --tr-caps: 0.1em;
  }

  .nav-inner {
    min-height: 62px;
  }

  .btn {
    padding-inline: 1rem;
  }

  .badge,
  .chip {
    font-size: 0.625rem;
  }

  .brand-moment__words {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Short landscape phones — stop sections eating the whole viewport
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .section,
  .hero {
    padding-block: 2rem;
  }

  .drawer__head,
  .drawer__foot {
    padding-block: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Touch devices — hover transforms feel broken, so drop them
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .btn:hover,
  .card--hoverable:hover,
  .report-card:hover,
  .wa-float:hover {
    transform: none;
  }

  .media--zoomable:hover img {
    transform: none;
  }

  .arrow-link:hover svg,
  .btn:hover .btn__icon {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   High-contrast / forced colours
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .card,
  .input,
  .select,
  .textarea,
  .system__node {
    border: 1px solid CanvasText;
  }
}