/* ============================================
   GRAPHITE POST: css/pages/gallery.css
   ============================================
   Yalnız galeri sayfası. Ortak şeyler (token, düğme, bağlantı, header, footer,
   plate, büyüteç) css/styles.css'te. Kural: TASARIM_DILI.md + Brief v3.

   Sayfa: tek bölüm, #hero > #drawings > .hang__wall. Duvar: sekiz çizim TEK
   ÖLÇEKTE (gerçek baskılar aynı kâğıt boyutunda: her çizim aynı YÜKSEKLİKTE,
   genişlik her taramanın kendi oranından gelir; kırpma yok), üç sütun.
   Masaüstünde on hücre: ilk hücrede başlık + abone satırı (başlık üstte,
   abone satırı altta, hücre çizimlerle aynı yükseklikte: ölü alan yok),
   sonraki sekizde çizimler (başlık hücresiyle birlikte üç tam satır), son
   satırı kapanış tek başına alır. Tablette (iki sütun) kapanış son çizimin
   yanındaki hücreye oturur: yarım satır yok. Çizim sayısı değişirse bu
   iki sayım yeniden yapılır (aşağıdaki tablet notuna bak).
   Eskiden dört ayrı boyut + sağ/sol kaydırma vardı ("asimetrik duvar"); gitti.
   "Inside the box" bölümü (paket fotoğrafları) kaldırıldı: aynı fotoğraflar
   past-editions.html'de zaten var; başlığı 26b9e82'de yoktu (yeniden tasarımda
   eklenmişti).

   id'ler DEĞİŞMEZ: main.js bağlantı kaynağı etiketini (?src=gallery-…) en
   yakın id'den üretir (#moon, #cta; #moon ayın koleksiyonunun adını taşır,
   her rotasyonda yeni adla değişir). #hero ve #final-cta yapışkan abone
   çubuğu içindir (initStickyCta): çubuk duvar ekrandayken ve kapanış
   ekrandayken görünmez.
   ============================================ */

.page-gallery main {
  position: relative;
  overflow-x: clip;
}

.hang {
  --ar-ref: 0.7113;               /* en geniş tarama (Owl): tek ölçeğin ölçüsü */
  padding: var(--s7) 0 var(--section);
}

/* --------------------------------------------------------------------------
   Duvar
   Her çizimin genişliği = kendi oranı / referans oran × sütun (ya da --pw):
   yükseklik = sütun / referans oran, hepsinde AYNI.
   -------------------------------------------------------------------------- */
.hang__wall {
  --pw: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(32px, 4.5vw, 64px);
  row-gap: clamp(56px, 6vw, 88px);
  align-items: start;
}

.work {
  width: calc(var(--ar) / var(--ar-ref) * var(--pw));
  min-width: 0;
  margin: 0;
}

/* Künye: çalışın adı (italik) geçmiş sayının sayfasına bağlanır. Galeri bakmak
   içindir: kartın altında fiyat ya da düğme yok, tek satır halinde alışveriş
   yalnız abone hücresinde ve kapanışta ("buy one past edition for $12.99").
   Ad biraz iri: çizim ve adı öne çıkar. */
.work .plate__caption i {
  font-size: 1.125em;
}

.work__name {
  color: var(--ink);
}

.work__name:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

/* künyenin cümleleri ortadan bölünmesin ("Graphite on / paper." olmasın) */
.nb {
  white-space: nowrap;
}

/* İlk hücre: başlık üstte, abone satırı altta (aynı hücre, satır yüksekliği
   çizim + künye + eylem kadar). */
.hang__head,
.hang__offer {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.hang__head {
  align-self: start;
}

.hang__offer {
  align-self: end;
}

/* Başlık ilk hücrede iri durur (çizim yüksekliğinin hücresinde sayfanın tek ölçek
   sıçraması); tabletten aşağı normal başlık boyutu (aşağıda). */
.hang__title {
  margin: 0;
  max-width: 7ch;
  font-size: clamp(2.75rem, 4.4vw, 4rem);
  line-height: 1.02;
}

.hang__head .lede {
  margin: var(--s4) 0 0;
}

.hang__wall > figure:first-of-type {
  grid-column: 2;
  grid-row: 1;
}

.hang__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.25;
}

.hang__price .btn {
  padding: 12px 28px;
  font-size: 1.0625rem;
}

.hang__note {
  max-width: 28rem;
  margin: var(--s3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Kapanış: duvarın son hücresi, çizimlerin üst çizgisine hizalı */
.hang__close {
  min-width: 0;
}

.hang__close .section-title {
  margin: 0;
  max-width: 16ch;
}

.close__lead {
  margin: var(--s4) 0 0;
  max-width: 30ch;
  font-size: var(--fs-lede);
  line-height: 1.45;
}

.close__action {
  margin: var(--s5) 0 0;
}

.close__action .btn {
  padding: 12px 24px;
  font-size: 1rem;
}

.close__alt {
  margin: var(--s4) 0 0;
}

.close__body .note {
  margin: var(--s3) 0 0;
}

/* --------------------------------------------------------------------------
   Tablet: iki sütun. Başlık bir satır tam genişlik; güncel çizim ile abone
   satırı yan yana (bir çizim ve satın alma bilgisi); sonra çizimler ikişer;
   kapanış, sekizinci çizimin yanındaki boş hücreye oturur (sekiz çizim
   ve kapanış on hücre, beş tam satır: boş hücre yok). Çizim sayısı çift
   olursa kapanış tam genişlikte kendi satırını ister (grid-column: 1 / -1).
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .hang {
    padding-top: var(--s5);
  }

  .hang__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s6);
    row-gap: clamp(48px, 7vw, 72px);
  }

  .hang__head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hang__title {
    max-width: none;
    font-size: var(--fs-h1);
    line-height: var(--lh-head);
  }

  .hang__wall > figure:first-of-type {
    grid-column: 1;
    grid-row: 2;
  }

  .hang__offer {
    grid-column: 2;
    grid-row: 2;
  }

  .hang__close .section-title {
    max-width: 22ch;
  }
}

/* Dokunma hedefi (telefon / tablet / dokunmatik): kapanıştaki düz bağlantı ve
   künyedeki ad ≥44px (negatif kenar boşluğu satır yüksekliğini değiştirmez) */
@media (max-width: 899px), (pointer: coarse) {
  .close__alt a {
    display: inline-block;
    padding-block: 11px;     /* satır 27px + 22 = 49px */
  }

  .work__name {
    display: inline-block;
    padding: 12px 11px;      /* künye satırı ≈21px + 24 = 45px; "Cat" ≈23px + 22 = 45px */
    margin: -12px -11px;
  }
}

/* --------------------------------------------------------------------------
   Telefon: tek sütun, tek ölçek. Çizimin genişliği ekran yüksekliğine göre
   (alt sınır 180px, üst sınır 440px; sekiz çizimde de AYNI yükseklik): güncel çizim +
   künye + "Look closer" satırı + "Sign me up" satırı, taze ziyaretçide
   ekranın dibindeki çerez bandının ÜSTÜNDE kalsın. Hesap: 360px = site
   başlığı (98) + başlık bloğu ve boşluk (≈96) + künye (≈54) + "Look closer"
   satırı (40) + abone satırı (≈60) + pay; çerez bandı için ayrıca --cookie-h
   (bant ≈64px, 320'de ≈77px; 80 pay, sabit: bant kapanınca çizim boyutu ve
   düzen kaymasın). 360×740'ta çizim ≈213px, 390×844'te ≈287px geniş,
   "Sign me up" bandın ≈30px üstünde. 375×667 gibi kısa ekranda alt sınır
   (180px) devreye girer, "Sign me up" bandın hemen üstünde kalır.
   Şekil: figür sütun genişliğinde, çizim (.plate__sheet) kendi genişliğinde;
   künye çizimin altında TÜM genişlikte, "Look closer" (yazılı, 44px yüksek)
   künyenin altında soldan hizalı. Büyüteç camı dokunmatikte yok (main.js ince
   işaretçiyi ayırır), bu yüzden kırpma yolu burada kapalı.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .hang {
    padding-top: var(--s3);
  }

  .hang__wall {
    --cookie-h: 80px;               /* çerez bandı payı (bant ≈64px, 320'de ≈77px; küçük pay) */
    --pw: min(100%, max(180px, min(440px, calc((100svh - var(--cookie-h) - 360px) * var(--ar-ref)))));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
  }

  /* Başlık bloğu kısa: ad bir satır, alt başlık bir satır (16px, 320'de de
     sığar). Dikey pay çizime kalsın. */
  .hang__title {
    line-height: 1.1;
  }

  .hang__head .lede {
    max-width: none;
    margin-top: var(--s2);
    font-size: 1rem;
    line-height: 1.5;
  }

  .work {
    position: relative;
    width: 100%;
    margin-top: 64px;
  }

  /* çizim kutusu static: "Look closer" düğmesinin yerleşim kutusu figür olur
     ve düğme künyenin ALTINDA, soldan hizalı durur (yazılı, 44px yüksek;
     künyeyle yan yana sığmıyor). Künyenin altındaki 40px'lik pay ona ayrılır. */
  .work .plate__sheet {
    position: static;
    width: calc(var(--ar) / var(--ar-ref) * var(--pw));
    clip-path: none;
  }

  .work .plate__caption {
    padding: 0 0 40px;
    text-wrap: pretty;
  }

  .work .originals__loupe-btn {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    margin: 0;
  }

  .hang__wall > figure:first-of-type {
    margin-top: var(--s4);
  }

  .hang__offer {
    margin-top: var(--s3);
  }

  .hang__price {
    font-size: 1.375rem;
  }

  .hang__price .btn {
    padding: 10px 24px;
  }

  .hang__close {
    margin-top: 72px;
  }

  .close__action .btn {
    padding: 12px 20px;
  }
}

/* Kısa telefon ekranı (320×568 gibi): çizim ve abone satırı aynı ekrana
   sığmaz (çizim 200px'den küçülmesin). Abone satırı çizimin ÜSTÜNE çıkar:
   eylem çerez bandının üstünde kalır, çizim hemen altında başlar. Yalnız
   sıra değişir; sözler aynı. */
@media (max-width: 599px) and (max-height: 640px) {
  .hang__head { order: 0; }
  .hang__offer { order: 1; margin-top: var(--s4); }
  .hang__wall > figure:first-of-type { order: 2; margin-top: var(--s5); }
  .work { order: 3; }
  .hang__close { order: 4; }
}