/* ==========================================================================
   shomhinduja.com — responsive layer
   Layouts are recomposed at each breakpoint, not merely scaled down.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1180px
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav__list { gap: 0.85rem; }
  .nav__link { font-size: 0.75rem; letter-spacing: 0.03em; }
}

/* --------------------------------------------------------------------------
   ≤ 1024px — navigation collapses to a drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav__toggle { display: inline-flex; }

  /* Anchored to the masthead. .masthead carries backdrop-filter, which makes
     it a containing block for fixed descendants, so absolute is the
     predictable choice here. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s var(--ease);
  }
  .nav.is-open {
    max-height: 80vh;
    overflow-y: auto;
  }
  .nav__list {
    display: block;
    padding: 0.35rem var(--pad-x) max(1.4rem, env(safe-area-inset-bottom));
  }
  .nav__list li { border-top: 1px solid var(--rule-soft); }
  .nav__list li:first-child { border-top: 0; }
  .nav__link { font-size: 0.9375rem; letter-spacing: 0.08em; padding: 1rem 0; }
  .nav__link::after { bottom: 0.6rem; width: 24px; right: auto; }

  /* Recomposition */
  .pagetop__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 3vw, 1.75rem); }
  .pagetop__lede { padding-bottom: 0; max-width: 56ch; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 2.75rem); }
  .hero__media { order: -1; max-width: 480px; }

  .split, .split--5-7, .split--7-5, .split--4-8, .split--8-4 {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 2.5rem);
  }

  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brandblock { grid-column: 1 / -1; }

  .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10 { grid-column-end: span 12; }
  .at-2, .at-3, .at-4, .at-5, .at-6, .at-7 { grid-column-start: auto; }
}

/* --------------------------------------------------------------------------
   ≤ 860px — single-column editorial flow
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .ledger__meta { padding-top: 0; }

  .detail { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }

  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule);
  }
  .panel:first-child { border-top: 0; }
  .sec--ink .panel, .sec--ink-2 .panel { border-left-color: transparent; border-top-color: var(--rule-ink); }

  .figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .figures__item { padding-right: clamp(0.7rem, 2vw, 1.1rem); }
  .figures__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figures__item:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .sec--ink .figures__item:nth-child(n+3) { border-top-color: var(--rule-ink); }

  .onward__inner { grid-template-columns: minmax(0, 1fr); }
  .onward__link {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule);
  }
  .onward__link:first-child { border-top: 0; }
  .onward__link:hover { background: transparent; }

  .footer__top { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 2.25rem); }

  .stage { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   ≤ 640px — phone
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --measure: 100%; }

  .hero { padding-block-start: clamp(1.75rem, 6vw, 2.75rem); }
  .hero__sub, .lede, .prose { max-width: 100%; }
  .hero__acts .btn { flex: 1 1 100%; justify-content: center; }

  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures__item {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule);
  }
  .figures__item:first-child { border-top: 0; }
  .sec--ink .figures__item { border-left-color: transparent; border-top-color: var(--rule-ink); }

  .plate__cap { max-width: 100%; }

  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.7rem; }

  .gate__field { flex-direction: column; }
  .gate__btn { width: 100%; }

  .social__i { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   ≤ 380px
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --pad-x: 1rem; }
  .wordmark { font-size: 0.95rem; }
  .nav__toggle { padding: 0.55rem 0.6rem; letter-spacing: 0.1em; }
  .footer__contact a { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   Wide screens
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  :root { --maxw: 1480px; }
}

/* --------------------------------------------------------------------------
   Landscape phones
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (max-height: 480px) and (orientation: landscape) {
  .nav__link { padding: 0.7rem 0; }
}

/* --------------------------------------------------------------------------
   iOS safe areas
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  .masthead__inner {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
  .sec, .hero, .pagetop, .footer, .onward {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
  .footer { padding-bottom: max(clamp(1.5rem, 3vw, 2.25rem), env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .onward, .nav__toggle, .hero__acts { display: none !important; }
  body { background: #fff; color: #000; }
  .sec--ink, .sec--ink-2, .footer { background: #fff !important; color: #000 !important; }
  a { text-decoration: underline; }
}