/* ============================================
   GRAPHITE POST: css/pages/past-editions.css
   ============================================
   Yalnız geçmiş sayılar sayfası. Ortak şeyler (token, düğme, bağlantı,
   header, footer, plate, catalog, calendar, photo) css/styles.css'te.
   Kural: TASARIM_DILI.md + Brief v3.

   Sayfa sırası: sayfa başı + dizin (yedi sayı, tek bakışta) + paragraf →
   yedi kayıt (#owl, #cat, #swallow, #seahorse, #horse, #dahlia, #snowdrop;
   en yeni üstte) → abone satırı (#final-cta).

   Bölüm id'leri DEĞİŞMEZ: main.js, bağlantı kaynağı etiketini
   (?src=past-editions-owl …) en yakın id'den üretir. #final-cta ayrıca
   yapışkan abone çubuğunu gizletir (initStickyCta).

   Tek okuma sırası: çizim (solda), yazı, fotoğraflar. Çizim hiçbir kayıtta
   sağa geçmez (eski sağ-sol zikzak gitti: sıra içerikten değil alışkanlıktan
   geliyordu); kayıtları birbirinden ayıran yalnız KENDİ içerikleri: fotoğraf
   sayısı ve yönü. Kayıtlar üç sütunlu bir ızgarada (galeri duvarıyla aynı sütun
   genişliği: çizim her yerde aynı ölçekte) iki yolla kurulur:
     .entry--beside  iki sütun, ikisi de kendi başına akar: çizim sütunu = çizim +
                     paket listesi (`.entry__side`), yanındaki iki sütun = ad/fiyat
                     + fotoğraflar (`.entry__main`). Yapışkan değil; iki sütun
                     statik görünümde de ≤ ~210px farkla biter (dikey fotoğraflı
                     sayılar: Cat, Horse).
     .entry--below   üstte çizim + yazı (yükseklikleri dengeli), fotoğraflar
                     altta tam genişlikte (yatay / karışık sayılar; Owl da:
                     dört dikey fotoğraf tek satırda, çünkü hemen altındaki
                     Cat zaten iki sütunlu `beside`: iki kayıt yan yana aynı
                     kalıpta olmasın).
   Yan yana / altta sırası içerikten gelir, sırayla değişmez; her kaydın
   boşluğu kendi id'sine bağlıdır (aşağıda). Yeni kayıt en üste eklenince:
   kendi `#slug` satırlarını ekle, bir önceki ilk kaydın ilk-kayıt üst
   boşluğunu (masaüstünde var(--s7)) ona devret.
   Fotoğraf satırı tarifleri (hepsi kendi oranında, kırpma yok, kenarlar düz):
     .entry__row            tek satır: genişlik ∝ oran, yükseklik satırda eşit.
     .entry__row--stack     bir büyük + üç küçük (yalnız hepsi AYNI orandaysa:
                            büyük 3.16 : yığın 1, yığın aralığı %6 → iki sütunun
                            yüksekliği her genişlikte birebir eşit).
   Masaüstünde satırları HTML'deki `.entry__row` kümeleri belirler (2-4 fotoğraf,
   hepsi aynı yükseklikte, satır kolonu tam doldurur: tek küçük fotoğraflı satır
   yok). Telefon / tablet (<900): fotoğraflar satırlara serilir (aşağıda): bir
   satırda 2 fotoğraf, çok geniş ya da yalnız kalacak fotoğraf TEK satır. Yeni
   ayın kaydı: bu tariflerden birini seç, fotoğrafları satırlara böl; boş hücre
   bırakma (satırlar tam genişlik doldurur). Telefon dizilişi için kaydın
   `--k` değerini seç (45% dikey çift / karışık çift, 30% yatay çift) ve tek
   başına satır isteyen fotoğrafa `entry__photo--solo` ver (DOM sırası = telefon
   sırası; satır kümeleri masaüstünde ayrı).
   Eski `.edition*` / `.editions-*` adları kullanılmıyor.
   ============================================ */

/* --------------------------------------------------------------------------
   1. Sayfa başı + dizin
   -------------------------------------------------------------------------- */
.archive-head {
  padding: var(--s5) 0 var(--s6);
}

.archive-head__title {
  margin: 0;
  line-height: 1.05;
}

.archive-head__text {
  margin-top: var(--s4);
}

.archive-head__text .lede {
  margin: 0;
  max-width: 34ch;
}

.archive-head__line {
  margin: var(--s3) 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
}

/* Dizin: yedi çizim tek sırada, hepsi aynı yükseklikte, genişlik kendi
   oranından gelir; künye altında. Kart değil: kutu, gölge, zemin yok. Künyenin
   yalnız çalışın adı italik (bağlantı); ay ve fiyat dik. */
.contents {
  margin-top: var(--s6);
}

.contents {
  container-type: inline-size;
}

/* Yedi sayı, 900px altında dört sütun: 4 + 3 (üç sütunda 3 + 3 + 1 olurdu, son
   satırda tek başına bir çizim kalırdı). Çizimin yüksekliği, en geniş oranlı
   çizimin (Owl, 0.7113) sütunu tam dolduracağı değerdir: hepsi aynı yükseklikte,
   genişlik kendi oranından. */
.contents__list {
  --gap: var(--s3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5) var(--gap);
  --h: calc((100cqw - 3 * var(--gap)) / 4 / 0.7113);
}

.contents__item {
  min-width: 0;
}

.contents__link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.contents__link:hover {
  color: var(--ink);
}

.contents__link:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 6px;
}

.contents__sheet {
  display: block;
  width: min(100%, calc(var(--h) * var(--ar)));
  aspect-ratio: var(--ar);
  box-shadow: 0 0 0 1px var(--hair);
}

.contents__sheet picture,
.contents__sheet img {
  display: block;
  width: 100%;
  height: 100%;
}

.contents__label {
  display: block;
  margin-top: var(--s3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.contents__title {
  display: block;
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hair-strong);
}

.contents__link:hover .contents__title {
  text-decoration-color: var(--ink);
}

.contents__month,
.contents__label .price {
  display: block;
}

/* telefonda dört sütun (sütun ≈ 78px): ad ve ay küçülür, ay iki satıra kırılabilir */
@media (max-width: 599px) {
  .contents__title {
    font-size: 0.9375rem;
  }

  .contents__label {
    font-size: 0.8125rem;
  }
}

.archive-head .calendar {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 900px) {
  .archive-head {
    padding: var(--s7) 0 var(--s8);
  }

  .contents {
    margin-top: var(--s7);
  }

  .contents__list {
    display: flex;
    align-items: flex-start;
    gap: var(--s5);
  }

  /* flex-grow ∝ oran: genişlik oranla, yükseklik hepsinde eşit */
  .contents__item {
    flex: var(--ar) 1 0;
  }

  .contents__sheet {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. Kayıtlar: her sayı bir katalog girişi (burası dükkân: fiyat ve düğme
      açık durur; galeri sayfası bakmak içindir)

   Telefon (≤599): tek sütun. Sıra: ad, çizim (genişliğin %78'i, en çok 340px,
   hep solda), künye TEK satırda, fiyat + düğme, paket listesi, fotoğraflar;
   büyüteç çizimin yanında (yalnız simge, adı aria-label'da).
   Tablet (600-899): çizim ve ad/fiyat/düğme yan yana; gerisi altta.
   Masaüstü (≥900): üç sütunlu ızgara, aşağıdaki iki kalıp.
   Fotoğraflar telefon ve tablette satırlara serilir: her fotoğraf kendi
   oranında (kırpma yok), satırdaki fotoğrafların yüksekliği eşit, kenarlar
   düz. Bir satıra kaç fotoğraf sığacağını sayfanın her kaydı kendi `--k`
   değeriyle (temel genişlik = oran × k) ve `entry__photo--solo` (tek başına
   tam satır) ile belirler: her kaydın kendi dizilişi ve boşluğu var.
   -------------------------------------------------------------------------- */
.entry {
  padding: var(--pt, var(--s6)) 0 var(--pb, var(--s6));
}

.entry__grid {
  display: grid;
  grid-template-columns: minmax(0, min(44%, 280px)) minmax(0, 1fr);
  grid-template-areas:
    "plate head"
    "details details"
    "photos photos";
  column-gap: var(--s4);
  align-items: start;
}

/* `.entry__side` (çizim + paket listesi) ve `.entry__main` (ad/fiyat + fotoğraflar)
   yalnız masaüstündeki `beside` kayıtlarda iki sütun olur; öteki yerlerde
   kutuları yoktur (çocukları doğrudan ızgaranın hücresi). */
.entry__side,
.entry__main {
  display: contents;
}

.entry__plate {
  grid-area: plate;
  margin: 0;
}

.entry__head {
  grid-area: head;
  min-width: 0;
}

.entry__details {
  grid-area: details;
  min-width: 0;
  max-width: 36rem;
  margin-top: var(--s6);
}

.entry__photos {
  grid-area: photos;
}

.entry__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.15;
}

.entry__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
}

.entry__price {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.entry__buy .btn {
  padding: 10px 18px;
}

.entry__desc {
  margin: 0;
}

/* "What's included", "Our guarantee": dik, ikincil renk (italik değil). İlk
   başlığın üstünde ayrıca boşluk yok: kendi kutusunun (.entry__details)
   margin-top'u zaten ayırıyor (iki kat boşluk ölü alandı). */
.entry__sub {
  margin: var(--s5) 0 var(--s2);
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-2);
}

.entry__details > .entry__sub:first-child {
  margin-top: 0;
}

.entry__list li {
  padding: 2px 0;
}

/* Güvence tek satır: sayfa başında, giriş paragrafının altında; koşulların
   kendisi policies.html'de (kayıtların içinde tekrarlanmaz). Çizgi yok:
   boşluk ayırır. */
.entry__note {
  margin: 0;
}

.archive-head .entry__note {
  margin-top: var(--s6);
}

/* Fotoğraflar (telefon / tablet): satırlara serilir, her biri kendi oranında.
   Satırlar `display: contents` ile düzleşir; satır sonlarını temel genişlik
   verir: flex-basis = oran × --k (yüzde, kaydın kendi değeri), flex-grow = oran
   × 100 (toplamı 1'den büyük olmalı, yoksa satır boşluğu doldurmaz);
   böylece bir satırdaki fotoğrafların genişliği oranla orantılı, yüksekliği
   EŞİT olur ve satır kenardan kenara dolar. `--solo`: tek başına satır. */
.entry__photos {
  --k: 45%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s6) 0 0;
  padding: 0;
}

.entry__row,
.entry__stack {
  display: contents;
}

.entry__photo {
  flex: calc(var(--ar) * 100) 1 var(--bas, calc(var(--ar) * var(--k)));
  min-width: 0;
  margin: 0;
}

.entry__photo img {
  width: 100%;
  height: auto;
}

/* Telefon + tablet: her kaydın kendi dizilişi ve kendi boşluğu. Bir satırda en
   çok 2 fotoğraf (üç dikey fotoğraf telefonda ~110px genişlikte kalırdı).
   TELEFON (≤599), `entry__photo--solo` yalnız burada tek satır yapar (tablette
   tam genişlikte tek fotoğraf 530-940px yüksek olurdu; orada çiftler);
   `entry__photo--solo-xs` yalnız ≤430'da (dikey fotoğraf, daha geniş ekranda çok
   uzar):
   owl       iki + iki (dikey dört; masaüstünde tek satır)
   cat       iki + iki (dikey dört)
   swallow   yatay tek, iki dikey, kareye yakın tek
   seahorse  yatay tek, yatay tek, iki yatay yan yana
   horse     iki, el tutan fotoğraf tek, iki (dikey beş)
   dahlia    üç çift (dikey + yatay, iki dikey, iki dikey)
   snowdrop  iki + iki (dört yatay; sekiz fotoğraftan dördü başka sayfalarda
             da geçtiği için çıktı: her fotoğraf yalnız bir sayfada)
   TABLET (600-899): owl 2+2, cat 2+2, swallow 2+2, seahorse 2+2, horse 3+2,
   dahlia 2+2+2, snowdrop 2+2. */
@media (max-width: 899px) {
  #owl      { --pt: 40px; --pb: 56px; }
  #cat      { --pt: 40px; --pb: 56px; }
  #swallow  { --pt: 56px; --pb: 40px; }
  #seahorse { --pt: 48px; --pb: 64px; }
  #horse    { --pt: 64px; --pb: 48px; }
  #dahlia   { --pt: 40px; --pb: 56px; }
  #snowdrop { --pt: 56px; --pb: 48px; }

  #owl .entry__photos,
  #cat .entry__photos,
  #swallow .entry__photos,
  #dahlia .entry__photos { --k: 45%; }

  #seahorse .entry__photos,
  #snowdrop .entry__photos { --k: 30%; }

  #horse .entry__photos { --k: 33%; }     /* tablet: 3 + 2; telefonda aşağıda 2 + 1 + 2 */
}

/* Telefon: ad çizimin üstünde, künye çizimin altında tek satır */
@media (max-width: 599px) {
  .entry__photo--solo {
    --bas: 100%;
  }

  .entry__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "plate"
      "buy"
      "details"
      "photos";
  }

  .entry__head {
    display: contents;
  }

  .entry__title {
    grid-area: title;
  }

  .entry__buy {
    grid-area: buy;
  }

  .entry__plate {
    margin-top: var(--s4);
  }

  /* çizim: sütunun %78'i (en çok 340px), tek ölçek: genişlik = kendi oranı /
     en geniş oran × bu pay → yükseklik her çizimde aynı. Büyüteç camı
     dokunmatikte yok; kırpma yolu kapalı. */
  .entry__plate .plate__sheet {
    position: static;
    width: calc(var(--ar) / 0.7113 * min(78%, 340px));
    clip-path: none;
  }

  /* "Look closer" künyenin ALTINDA, soldan hizalı, yazılı, 44px yüksek
     (yan yana sığmıyor). Çizim kutusu static olduğu için düğmenin yerleşim
     kutusu figür; künyenin altındaki 40px'lik pay ona ayrılır. */
  .entry__plate {
    position: relative;
  }

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

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

/* Dar telefon (≤430): Horse'un el tutan fotoğrafı tek satır (dikey; daha geniş
   ekranda tam genişlikte 520px'i aşardı, orada 3 + 2). */
@media (max-width: 430px) {
  #horse .entry__photos { --k: 45%; }

  .entry__photo--solo-xs {
    --bas: 100%;
  }
}

@media (min-width: 900px) {
  .entry {
    padding: var(--pt, var(--section)) 0 var(--pb, var(--section));
  }

  /* üç sütun: galeri duvarıyla AYNI sütun genişliği, yani aynı çizim ölçeği
     (çizimin genişliği = kendi oranı / en geniş oran × sütun: yükseklik her
     çizimde aynı). */
  .entry__grid {
    --ar-ref: 0.7113;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(32px, 4.5vw, 64px);
    align-items: start;
  }

  .entry__plate {
    width: calc(var(--ar) / var(--ar-ref) * 100%);
  }

  .entry__head,
  .entry__details {
    max-width: 36rem;
  }

  .entry__details {
    margin-top: var(--s6);
  }

  .entry__buy {
    margin-top: var(--s5);
  }

  /* çizim üstte (yazıyla yan yana), fotoğraflar altta tam genişlikte */
  .entry--below .entry__grid {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "plate head head"
      "plate details details"
      "photos photos photos";
  }

  /* yan yana (dikey fotoğraflı sayılar: Cat, Horse): iki sütun, ikisi de kendi
     başına akar. Çizim sütununda çizim + paket listesi, öteki sütunda ad/fiyat
     + fotoğraflar. Yapışkan değil: sayfa ilk yüklendiğinde de, yazdırıldığında
     da iki sütun yaklaşık aynı yükseklikte biter. */
  .entry--beside .entry__grid {
    grid-template-rows: none;
    grid-template-areas: "side main main";
  }

  .entry--beside .entry__side,
  .entry--beside .entry__main {
    display: block;
    min-width: 0;
  }

  .entry--beside .entry__side {
    grid-area: side;
  }

  .entry--beside .entry__main {
    grid-area: main;
  }

  .entry--beside .entry__head {
    max-width: none;
  }

  .entry--beside .entry__details {
    max-width: none;
    margin-top: var(--s6);
  }

  /* fotoğraflar: satırlar bölüm genişliğini doldurur, kenarlar düz */
  .entry__photos {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--s4);
    margin: var(--s7) 0 0;
  }

  .entry--beside .entry__photos {
    margin-top: var(--s6);
  }

  .entry__row {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
  }

  .entry__stack {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
  }

  .entry__photo {
    flex: var(--ar) 1 0%;
    width: auto;
    min-width: 0;
  }

  /* bir büyük + üç küçük (hepsi 4:3). Büyük 3.16 : yığın 1; yığın içinde
     alt alta fotoğraflar arası = yığın genişliğinin %6'sı. Büyüğün yüksekliği
     = 0.75 × 3.16 × yığın = 2.37 × yığın; yığın = 3 × 0.75 + 2 × 0.06 = 2.37 ×
     yığın: iki sütun her genişlikte aynı yükseklikte. */
  .entry__photo--big {
    flex: 3.16 1 0%;
  }

  .entry__stack .entry__photo {
    width: 100%;
  }

  .entry__stack .entry__photo + .entry__photo {
    margin-top: 6%;
  }

  /* kayıtlar arası boşluk içeriğe göre: kayıt ne kadar çok fotoğraf taşıyorsa
     arkasından o kadar boşluk (her aralık = alttaki + üstteki: 112-136px;
     eskiden 176-216px'ti, ölü alandı) */
  #owl      { --pt: var(--s7);  --pb: 72px; }   /* dikey dört, tek satır (ilk kayıt: sayfa başından sonra) */
  #cat      { --pt: 40px;       --pb: 96px; }   /* dikey dört, yan yana     */
  #swallow  { --pt: 40px;       --pb: 72px; }   /* tek yatay satır          */
  #seahorse { --pt: 40px;       --pb: 88px; }   /* bir büyük + üç küçük     */
  #horse    { --pt: 40px;       --pb: 96px; }   /* dikey beş, yan yana      */
  #dahlia   { --pt: 40px;       --pb: 80px; }   /* iki satır, üçer          */
  #snowdrop { --pt: 40px;       --pb: 96px; }   /* dört fotoğraf, iki satır (2 + 2) */
}

/* --------------------------------------------------------------------------
   3. #final-cta, sayfanın son satırı: bir katalog satırı, ortalı blok değil
   -------------------------------------------------------------------------- */
.closing {
  padding: 0 0 var(--s7);
}

.closing__title {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.closing .catalog__action .btn {
  padding: 12px 28px;
}

/* --------------------------------------------------------------------------
   Dokunma hedefi (telefon / tablet / dokunmatik): ≥ 44px
   "See the guarantee": bağlantı sayfa başındaki tek satırlık güvence notu.
   Satır içi kutunun dikey dolgusu yerleşimi
   etkilemez; dolgu tam piksel (kesirli değer metni 1px oynatabiliyor). Kutu =
   yazı tipinin içerik alanı (≈1,23em) + 2 × dolgu.
   -------------------------------------------------------------------------- */
@media (max-width: 899px), (pointer: coarse) {
  .archive-head .entry__note > a {
    padding-block: 14px;     /* içerik alanı 17 + 28 = 45px (14px yazı) */
    position: relative;
  }

  /* klavye odak halkası yazının hemen çevresinde kalsın (inset = dolgu) */
  .archive-head .entry__note > a:focus-visible {
    outline: none;
  }

  .archive-head .entry__note > a:focus-visible::after {
    content: "";
    position: absolute;
    inset: 14px 0;
    outline: 2px solid var(--link);
    outline-offset: 3px;
  }
}