/* ============================================
   PAM Istanbul — Responsive Layer
   Fluid typography + adaptive breakpoints
   Loaded after main.css; overrides where needed.
   ============================================ */

/* ----- Fluid typography & rhythm tokens ----- */
:root {
  --fluid-hero: clamp(2.6rem, 7.5vw, 7rem);
  --fluid-h2:   clamp(2rem, 4.4vw, 4rem);
  --fluid-h3:   clamp(1.15rem, 1.5vw, 1.7rem);
  --fluid-lead: clamp(0.95rem, 1vw + 0.4rem, 1.2rem);
  --fluid-body: clamp(0.92rem, 0.6vw + 0.7rem, 1.05rem);
  --gutter:     clamp(1rem, 3vw, var(--sp-6, 3rem));
}

/* ----- Base fluid sizing ----- */
.hero__title { font-size: var(--fluid-hero); line-height: 0.95; }
.manifesto__headline,
.section__title,
.partnote__title { font-size: var(--fluid-h2); line-height: 1.05; }
.cap__title { font-size: var(--fluid-h3); }
.hero__title small,
.manifesto__paragraph,
.partnote__body,
.caps-note,
.cap__body { font-size: var(--fluid-body); line-height: 1.55; }

/* Main horizontal gutter on section padding */
.section,
.manifesto,
.partnote,
.hero,
.footer { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ============================================
   LARGE TABLET / SMALL LAPTOP (<= 1200px)
   ============================================ */
@media (max-width: 1200px) {
  .works-featured { grid-template-columns: repeat(8, 1fr); }
  .work-card--xl { grid-column: span 8; }
  .work-card--l  { grid-column: span 5; }
  .work-card--m  { grid-column: span 4; }
  .work-card--s  { grid-column: span 3; }

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

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

/* ============================================
   TABLET (<= 900px)
   ============================================ */
@media (max-width: 900px) {
  /* Status bar: trim center, keep edges */
  .status { font-size: 0.65rem; padding: 0 var(--sp-2); }
  .status__center { display: none; }

  /* Nav — keep but tighten */
  .nav { padding: 0 var(--sp-2); }
  .nav__actions { gap: var(--sp-2); }

  /* Hero grid: stack media under title, but keep media visible */
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero__media { order: -1; aspect-ratio: 16/10; }
  .hero__title small { max-width: 100%; }

  .hero__data { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* Manifesto: capabilities wrap with less gap */
  .manifesto__capabilities { gap: var(--sp-2); }
  .cap-tag { font-size: 0.7rem; padding: 0.3em 0.8em; }

  /* Works: every card full width, uniform ratio */
  .works-featured { grid-template-columns: 1fr; gap: var(--sp-4); }
  .work-card { grid-column: 1 / -1 !important; }
  .work-card--xl .work-card__media,
  .work-card--l  .work-card__media,
  .work-card--m  .work-card__media,
  .work-card--s  .work-card__media { aspect-ratio: 4 / 3; }

  /* Capabilities: single column */
  .caps-grid { grid-template-columns: 1fr; }

  /* Partner note */
  .partnote__inner { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Footer: 2 cols */
  .footer { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .footer__brand { grid-column: 1 / -1; }

  /* Section meta: stack */
  .section__meta { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* ============================================
   MOBILE (<= 600px)
   ============================================ */
@media (max-width: 600px) {
  :root {
    --fluid-hero: clamp(2.2rem, 11vw, 4rem);
    --gutter: 1rem;
  }

  /* Status bar: only corners */
  .status { font-size: 0.6rem; letter-spacing: 0.05em; }
  .status__left span:nth-child(3),
  .status__left .status__sep,
  .status__right [data-frame],
  .status__right .status__sep:first-of-type { display: none; }

  /* Nav trigger compact */
  .nav__logo span { font-size: 0.6rem; }
  .nav__direct-link { font-size: 0.65rem; }

  /* Menu overlay: single column, smaller text */
  .menu__list { gap: var(--sp-2); }
  .menu__item { font-size: clamp(1.8rem, 8vw, 3rem); }
  .menu__footer { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Hero */
  .hero { padding-top: calc(var(--status-h, 32px) + 3.5rem); }
  .hero__media { aspect-ratio: 4 / 5; }

  /* Hero data 2x2 stays, but tighter */
  .hero__data { gap: var(--sp-2); }
  .hero__data-cell { padding: var(--sp-2); }
  .hero__data-label { font-size: 0.58rem; }
  .hero__data-value { font-size: clamp(1.1rem, 4vw, 1.5rem); }

  /* Work cards: square-ish */
  .work-card--xl .work-card__media,
  .work-card--l  .work-card__media,
  .work-card--m  .work-card__media,
  .work-card--s  .work-card__media { aspect-ratio: 3 / 4; }
  .work-card__meta { padding: var(--sp-2) 0; }
  .work-card__title { font-size: 1rem; }
  .work-card__num,
  .work-card__tag { font-size: 0.65rem; }

  /* Capability card */
  .cap { padding: var(--sp-3); }

  /* Partner note */
  .partnote { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .partnote__cta { font-size: 0.8rem; }

  /* Footer fully stacked */
  .footer { grid-template-columns: 1fr; gap: var(--sp-3); padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .footer__brand { font-size: clamp(2rem, 10vw, 3.5rem); line-height: 1; }
  .footer__bottom { flex-direction: column; gap: var(--sp-1); align-items: flex-start; font-size: 0.65rem; }

  /* Partner note eyebrow smaller */
  .partnote__eyebrow { font-size: 0.65rem; }

  /* Section indices tighter */
  .section__index,
  .manifesto__index { font-size: 0.65rem; letter-spacing: 0.15em; }
}

/* ============================================
   VERY SMALL (<= 380px)
   ============================================ */
@media (max-width: 380px) {
  .status__right [data-clock] { font-size: 0.6rem; }
  .nav__lang { display: none; }
  .nav__direct-link { display: none; }
  .hero__data { grid-template-columns: 1fr; }
}

/* ============================================
   IMAGES — always fluid
   ============================================ */
img, video, svg { max-width: 100%; height: auto; }

/* Prevent horizontal scroll from ticker elements on narrow viewports */
.works-filter__track,
.dir__ticker { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.works-filter__track::-webkit-scrollbar,
.dir__ticker::-webkit-scrollbar { display: none; }

/* ============================================
   GALLERY — adaptive
   ============================================ */
@media (max-width: 900px) {
  .pa__hero { grid-template-columns: 1fr !important; gap: var(--sp-4); }
  .pa__specs { grid-template-columns: repeat(2, 1fr) !important; }
  .pa__grid { grid-template-columns: repeat(6, 1fr) !important; gap: var(--sp-2); }
  .pa__cell.wide,
  .pa__cell.wide-7,
  .pa__cell.wide-5 { grid-column: span 6 !important; }
  .pa__cell.half { grid-column: span 3 !important; }
  .pa__cell.third { grid-column: span 3 !important; }
  .pa__cell.twothirds { grid-column: span 6 !important; }
  .pa__pull { grid-column: 1 / -1 !important; font-size: clamp(1.3rem, 4vw, 2rem) !important; padding: var(--sp-4) var(--sp-2) !important; }
}
@media (max-width: 600px) {
  .pa__specs { grid-template-columns: 1fr !important; }
  .pa__grid { grid-template-columns: 1fr !important; }
  .pa__cell,
  .pa__cell.half,
  .pa__cell.third,
  .pa__cell.twothirds,
  .pa__cell.wide,
  .pa__cell.wide-5,
  .pa__cell.wide-7 { grid-column: 1 / -1 !important; }
}

/* Hero EN subline */
.hero__title-en {
  display: block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(255,255,255,0.55));
  margin-top: clamp(1rem, 2vw, 1.6rem);
  padding-top: clamp(0.7rem, 1.5vw, 1.1rem);
  border-top: 1px solid var(--line, rgba(255,255,255,0.12));
  max-width: 48ch;
}