/* ==========================================================================
   hemantkhandelwal.com — Responsive layer
   Verified against 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* ---- Very large screens: keep measure comfortable ---- */
@media (min-width: 1700px) {
  :root { --shell: 1440px; }
}

/* ---- Laptop ---- */
@media (max-width: 1240px) {
  :root { --rail-w: 88px; }
  .row-item { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.2fr) 160px; }
}

/* ---- Navigation collapses ---- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__bar { gap: 16px; }
}

/* ---- Tablet landscape ---- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(24px, 4vw, 44px); }
  .profile { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .theme__body { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .masonry { columns: 2; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---- Tablet portrait / large phone landscape ---- */
@media (max-width: 900px) {
  :root { --sec-space: clamp(52px, 8vw, 80px); }

  .hero { padding-block: 32px 44px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Portrait plates centre between phone and desktop so the tablet hero
     does not leave a large empty column beside them. */
  .hero__figure { order: -1; max-width: 430px; margin-inline: auto; }
  .hero__figure .plate__frame img { max-height: 80vh; }
  .hero__role, .hero__copy { max-width: 100%; }

  .profile { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .profile__figure { position: static; max-width: 460px; margin-inline: auto; }

  .era__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .era__years { position: static; }

  .theme__body { grid-template-columns: minmax(0, 1fr); }
  .stmt__support { grid-template-columns: minmax(0, 1fr); }
  .stmt--right .stmt__big { margin-left: 0; text-align: left; max-width: 20ch; }
  .stmt--right .stmt__no { text-align: left; }

  .duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .duo > *:nth-child(2) { margin-top: 0; }

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

  .row-item {
    grid-template-columns: 44px minmax(0, 1fr) 132px;
    grid-template-areas: "idx title fig" "idx text fig";
    gap: 8px 20px;
    align-items: start;
  }
  .row-item__idx   { grid-area: idx; }
  .row-item__title { grid-area: title; }
  .row-item__text  { grid-area: text; }
  .row-item__fig   { grid-area: fig; align-self: center; }
  .row-item__fig .plate__frame img { max-height: 104px; }
}

/* ---- Rails stack: sections become single-column ---- */
@media (max-width: 760px) {
  .sec-head,
  .masthead__grid,
  .split,
  .theme__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .sec-head__idx,
  .masthead__idx { display: inline-block; padding-top: 5px; }
  .theme__idx { display: inline-block; padding-top: 8px; }

  .split__aside { position: static; margin-bottom: 8px; }

  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  .facet { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .chron__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .chron__date { padding-left: 17px; }
  .chron__item::before { top: 20px; }
  .chron__text { padding-left: 17px; }

  .quote p { max-width: 100%; }
  .quote--wide p { max-width: 100%; }

  .plate__frame img { max-height: 66vh; }
}

/* ---- Phone ---- */
@media (max-width: 620px) {
  body { font-size: 15.5px; }
  :root { --gutter: 20px; --sec-space: 48px; }

  .masonry { columns: 1; }

  .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }

  .row-item {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "idx title" "idx text" "fig fig";
    gap: 8px 14px;
  }
  .row-item__fig { margin-top: 6px; max-width: 320px; }
  .row-item__fig .plate__frame img { max-height: 200px; }

  .milestones__item { flex-basis: 200px; }

  /* Back to a full-width, left-aligned plate on phones. */
  .hero__figure, .profile__figure { max-width: 100%; margin-inline: 0; }

  .brand__role { display: none; }
  .brand__name { font-size: 15.5px; }

  .actions { gap: 10px; }
  .btn { width: 100%; justify-content: center; padding: 15px 20px; }
  .hero__actions .btn { width: auto; flex: 1 1 auto; min-width: 180px; }

  .contact-card { padding: 22px; }
  .lightbox__cap { font-size: 12.5px; }
  .masthead { padding-block: 32px 28px; }
}

/* ---- Small phone (320–414) ---- */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .d1 { font-size: clamp(2.35rem, 11vw, 3rem); }
  .contact-word { font-size: clamp(2.9rem, 17vw, 4.4rem); letter-spacing: -0.035em; }
  .brand__mark { width: 27px; height: 27px; font-size: 13px; }
  .lock-btn { padding: 7px 10px; letter-spacing: .12em; }
  .lock-btn .lock-btn__txt { display: none; }
  .nav-toggle { letter-spacing: .12em; }
  .mobile-nav__link { font-size: 1.32rem; padding: 15px 0; }
  .strip__cell { padding: 18px 16px 20px; }
  .milestones__item { flex-basis: 178px; padding: 18px 16px 22px; }
  .hero__actions .btn { width: 100%; flex: 1 1 100%; }
  .lightbox { padding: 12px; }
  .lb-btn { width: 40px; height: 40px; }
}

@media (max-width: 340px) {
  :root { --gutter: 14px; }
  .brand__name { font-size: 14.5px; }
  .nav-toggle__txt { display: none; }
  .row-item { grid-template-columns: 28px minmax(0, 1fr); }
}

/* ---- Short viewports: don't let plates eat the screen ---- */
@media (max-height: 620px) and (min-width: 901px) {
  .hero__figure .plate__frame img { max-height: 74vh; }
}

/* ---- Coarse pointers: no hover-dependent affordances ---- */
@media (hover: none) {
  .gal-item__zoom { opacity: 1; transform: none; }
  .row-item:hover { background: none; }
}

/* ---- Print ---- */
@media print {
  .site-header, .mobile-nav, .lightbox, .nav-toggle, .actions, .scroll-progress { display: none !important; }
  html.protected body { visibility: visible !important; }
  body { background: #fff; color: #000; }
  .band-ink { background: #fff !important; color: #000 !important; }
  .band-ink * { color: #000 !important; }
  a { text-decoration: underline; }
}

/* The mobile panel exists only below the navigation breakpoint */
@media (min-width: 1081px) {
  .mobile-nav { display: none !important; }
}