/* ==========================================================================
   chiragkoradia.com — responsive recomposition
   Layouts are re-composed at each step, not merely scaled down.
   Breakpoints: 1180 / 1024 / 900 / 760 / 620 / 480 / 380 + landscape phone.
   ========================================================================== */

/* ------------------------------------------------- 1180px — laptop widths */
@media (max-width: 1180px) {
  :root { --shell: 1100px; }

  .hero__grid { grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr); }
  .index-row { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) 2rem; }
  .record__row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 4.2fr) minmax(0, 4.4fr); }
}

/* ----------------------------------------------------------- 1024px — iPad */
@media (max-width: 1024px) {
  .plates { column-count: 2; }

  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme:nth-child(2) { border-right: 0; }
  .theme:nth-child(3) { padding-left: 0; }

  .bio { grid-template-columns: minmax(0, 6.8fr) minmax(0, 5.2fr); }
}

/* ------------------------------------- 900px — nav collapses, columns fold */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); }
  .hero__aside { padding-top: 0; }
  .hero__title-2 { padding-left: clamp(1rem, 6vw, 3.5rem); }
  .hero__plate { max-width: 40rem; }

  .split,
  .split--reverse,
  .split--even { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 2.5rem); }
  .split--reverse .split__aside { order: 2; }

  .about-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .about-head__plate { margin-left: 0; max-width: 24rem; }

  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio__rail { order: 2; margin-top: 1rem; }

  .chapter { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 4vw, 1.75rem); }
  .chapter__body { padding-top: 0; }

  .record__row { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .record__note { padding-top: 0.2rem; }

  .dossier__head { grid-template-columns: minmax(0, 1fr); }
  .dossier__steps { grid-template-columns: minmax(0, 1fr); border-top-width: 1px; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-left: 0; }
  .step:last-child { border-bottom: 0; padding-bottom: 0; }

  .contact-head { grid-template-columns: minmax(0, 1fr); }
  .contact-head__motif { margin-left: 0; max-width: 17rem; }
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }

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

  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }

  .invite { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .gate { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .gate__aside {
    border-right: 0;
    border-bottom: 1px solid var(--line-ink);
    min-height: 44vh;
    gap: clamp(2rem, 8vw, 3rem);
  }
  .gate__main { min-height: 56vh; }
}

/* ------------------------------------------------ 760px — single column */
@media (max-width: 760px) {
  :root { --sect-y: clamp(3.25rem, 11vw, 5rem); }

  .sect-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }

  .index-row { grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; row-gap: 0.65rem; }
  .index-row__note { grid-column: 2 / 4; }

  .themes { grid-template-columns: minmax(0, 1fr); }
  .theme { border-right: 0; padding-right: 0; padding-left: 0; }
  .theme:nth-child(2) { border-right: 0; }

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

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

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(2n) { border-right: 0; }
  .fact:nth-child(2n+1) { padding-left: 0; }
  .fact { padding-right: clamp(0.75rem, 3vw, 1.25rem); }

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

  .lightbox__foot { flex-direction: column; align-items: flex-start; }
  .lightbox__nav { align-self: flex-end; }
}

/* -------------------------------------------------- 620px — phone widths */
@media (max-width: 620px) {
  .plates { column-count: 1; }

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

  .wordmark__role { display: none; }

  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 0.55rem; }

  .about-head__plate { max-width: 100%; }
  .plate-caption { flex-direction: column; gap: 0.3rem; }
}

/* ---------------------------------------------------- 480px — small phone */
@media (max-width: 480px) {
  :root { --gut: 1.15rem; }

  .hero__title-2 { padding-left: 1rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: space-between; }

  .index-row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .index-row__arrow { display: none; }
  .index-row__note { grid-column: 2 / 3; }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { border-right: 0; padding-right: 0; padding-left: 0; }

  .btn { padding: 0.95rem 1.15rem; font-size: 0.735rem; letter-spacing: 0.13em; }

  .gate-form__input { letter-spacing: 0.2em; padding-right: 2.6rem; }
  .gate__hint { margin-top: 1.8rem; }

  .foot-social__item { width: 2.4rem; height: 2.4rem; }
}

/* ------------------------------------------------ 380px — narrow devices */
@media (max-width: 380px) {
  :root { --gut: 1rem; }

  .wordmark__mark { width: 2.1rem; height: 2.1rem; font-size: 0.82rem; }
  .wordmark__name { font-size: 0.98rem; }

  .plate { padding: 0.6rem; }
  .foot-social { gap: 0.4rem; }
  .foot-social__item { width: 2.25rem; height: 2.25rem; }
}

/* ------------------------------------------- landscape phones (short view) */
@media (max-height: 520px) and (orientation: landscape) {
  .gate { min-height: auto; }
  .gate__aside { min-height: auto; padding-block: 1.5rem; }
  .gate__main { padding-block: 2rem; }
  .mobile-nav { padding-top: 4.5rem; justify-content: flex-start; }
  .mobile-nav__link { font-size: 1.4rem; padding-block: 0.6rem; }
  .mobile-nav__foot { margin-top: 1.5rem; }
}

/* -------------------------------------------------------- large displays */
@media (min-width: 1700px) {
  :root { --shell: 1480px; --sect-y: clamp(6rem, 8vw, 11rem); }
}

/* ------------------------------------------------------------------ print */
@media print {
  .masthead, .mobile-nav, .nav-toggle, .lightbox, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .sect--ink, .site-foot { background: #fff !important; color: #000 !important; }
  .sect--ink *, .site-foot * { color: #000 !important; }
  a { text-decoration: underline; }
}