/* ============================================
   GRAPHITE POST: css/pages/about.css
   ============================================
   Yalnız "About" sayfası. Ortak şeyler (token, düğme, bağlantı, header,
   footer, photo, section-title) css/styles.css'te. Kural: TASARIM_DILI.md,
   BRIEF-v3 (koku2).

   Sayfa bir mektup + onun fotoğrafları. Her satır kendi şeklini taşır;
   "solda 4 sütun foto, sağda 6 sütun yazı" ana iskeleti YOK, etiket-çizgi
   satırı YOK, bölümler arasında çizgi YOK (boşluk ayırır).

     1. #letter     Başlık + tek okuma sütunu (62ch); stüdyo portresi yanında
                    (bilgisayarda yapışkan), telefonda başlığın altında.
     2. #process    Sayfanın tek kalın şeyi: bir çizimin üç aşaması, hizalanmış tek
                    satır (aynı yükseklik, genişlik kendi oranı); sol kenarı metin
                    sütunuyla aynı. El emeğinin kanıtı.
     3. .hands      Zarfın içi: tek geniş düzlem fotoğrafı (~1.9:1), kırpma yok.
     4. .why        "Why I Created Print Club" | "Why Graphite Post": iki cevap
                    yan yana; her biri bir metin + bir fotoğraf (ikisi de 4:3,
                    ama iki ayrı genişlikte).
     5. #final-cta  Tek blok, soldan hizalı.

   Fotoğraflar kendi oranında, KIRPMASIZ. Hareket yok.

   Bölüm id'leri DEĞİŞMEZ: main.js bağlantı kaynağı etiketini (?src=about-…)
   en yakın id'den üretir; #final-cta ayrıca yapışkan çubuğu gizler.
   ============================================ */

.about {
  --measure-letter: 62ch;
  /* satırlar arası boşluk: içeriğe göre değişir, hepsi aynı 100px değil */
  --gap-after-letter: clamp(72px, 10vw, 144px);
  --gap-after-process: clamp(64px, 8vw, 112px);
  --gap-after-hands: clamp(72px, 9vw, 128px);
  --gap-after-why: clamp(72px, 9vw, 128px);
}

/* Fotoğraf: sütun genişliğini doldurur, kendi oranı */
.about .photo {
  width: 100%;
}

/* --------------------------------------------------------------------------
   1. #letter
   Telefon (taban): tek sütun. Sıra: başlık, portre, mektup.
   `.letter__text` telefonda çözülür (display: contents).
   -------------------------------------------------------------------------- */
.letter {
  padding: var(--s6) 0 0;
}

.letter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s5);
}

.letter__text {
  display: contents;
}

.letter__title {
  order: 1;
  margin: 0;
  max-width: none;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.letter__portrait {
  order: 2;
  max-width: 560px;
}

.letter__body {
  order: 3;
  max-width: var(--measure-letter);
}

.letter__body p {
  margin-bottom: 1.1em;
}

.letter__body p:last-child {
  margin-bottom: 0;
}

/* mektubun ilk cümleleri: giriş boyutunda */
.letter__body p:first-child {
  font-size: var(--fs-lede);
  line-height: 1.45;
}

@media (min-width: 900px) {
  .letter {
    padding-top: var(--s7);
  }

  .letter__grid {
    /* metin sütunu ve portre: portre sütunu biraz dar; ikisi arasında geniş nefes */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5.4fr);
    column-gap: var(--s8);
    align-items: start;
    row-gap: 0;
  }

  .letter__text {
    display: block;
  }

  .letter__title {
    margin-bottom: var(--s6);
  }

  /* metin portreden uzun: portre kaydırırken yanında kalır (boş köşe bırakmaz) */
  .letter__portrait {
    position: sticky;
    top: 96px;
    max-width: none;
    /* başlığın harf tepesiyle hizalı */
    margin-top: 0.35rem;
  }
}

/* --------------------------------------------------------------------------
   2. #process: bir çizimin üç aşaması. Sayfanın tek kalın şeyi.
   HİZALANMIŞ SATIR (justified row): üç fotoğraf aynı YÜKSEKLİKTE; genişlikler
   kendi oranını izler (--ar = genişlik / yükseklik, flex-grow olarak; flex-basis 0,
   yani kutu = (satır − boşluklar) × oran / oranlar toplamı). Satır sütunu tam
   doldurur, boşluklar eşit, üstte delik yok (eskiden 2 : 3 : 4,5 basamak, alt
   hizalıydı; küçük fotoğrafların üstü boştu). Üçü de 3:4 olduğundan genişlikler
   eşit çıkar; bu fotoğrafların kendi oranı, zorlanmış "eşit kare" değil. Kırpma
   yok. Şerit metinle aynı konteynerin içinde: sol kenarı metin sütununun sol kenarı.
   Altyazılar tek satır (`nowrap`), her fotoğrafın hemen altında.
   -------------------------------------------------------------------------- */
.process {
  padding-top: var(--gap-after-letter);
}

/* `p:last-child { margin-bottom: 0 }` (ortak) bir sınıftan güçlü: özgüllük .process ile yükseltildi */
.process .process__text {
  max-width: var(--measure-letter);
  margin: 0 0 var(--s7);
}

.process .section-title {
  margin-bottom: var(--s4);
}

/* Bilgisayar / tablet (≥600): üç aşama tek hizalanmış satırda */
.process__steps {
  display: flex;
  align-items: flex-start;
  gap: 0 clamp(14px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.process__step figcaption {
  margin-top: var(--s3);
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Telefon (<600): üstte eskiz + katmanlar yan yana (aynı yükseklik), altında
   bitmiş çizim tam genişlikte (kendi satırında). Okuma sırası aynı: eskiz,
   katmanlar, son. */
@media (max-width: 599px) {
  .process__steps {
    flex-wrap: wrap;
    gap: var(--s6) var(--s4);
    max-width: 32rem;
  }

  .process__step--final {
    flex: 0 0 100%;
  }
}

/* --------------------------------------------------------------------------
   3. .hands: zarfın içi
   Tek geniş fotoğraf, kendi oranında (~1.9:1). Kırpma yok.
   -------------------------------------------------------------------------- */
.hands {
  margin-top: var(--gap-after-process);
}

.hands__enclosure {
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. .why: iki cevap yan yana
   Telefonda tek sütun: Print Club metni + fotoğraf, sonra Graphite Post.
   Bilgisayarda iki sütun; her bölüm kendi iki satırını (metin, fotoğraf)
   üst ızgaradan alır (subgrid): iki fotoğraf aynı çizgiden başlar.
   -------------------------------------------------------------------------- */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
  margin-top: var(--gap-after-hands);
}

.why__item {
  display: block;
}

.why__text {
  max-width: var(--measure-letter);
}

.why__text .section-title {
  margin-bottom: var(--s5);
}

.why__text p {
  margin-bottom: 1.1em;
}

.why__text p:last-child {
  margin-bottom: 0;
}

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

/* telefon / dar: yatay fotoğraf, okuma sütunundan geniş olmasın */
@media (max-width: 899px) {
  .why__photo {
    max-width: 35rem;
  }
}

@media (min-width: 900px) {
  .why {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    column-gap: var(--s8);
    row-gap: 0;
  }

  .why__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

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

/* --------------------------------------------------------------------------
   5. #final-cta, sayfanın son bloğu: soldan hizalı, okuma sütununda.
   Etiket yok, çizgi yok: bir cümle, bir koşul satırı, bir düğme.
   -------------------------------------------------------------------------- */
.closing {
  padding: var(--gap-after-why) 0 var(--section);
}

.closing__inner {
  max-width: var(--measure-letter);
}

.closing__line {
  margin: 0 0 var(--s2);
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--ink);
}

/* Koşul satırı: "Free worldwide shipping. Cancel any time. See the guarantee."
   Düz bir paragraf; ayraç yok, üç kısa cümle. */
.closing__terms {
  margin: 0 0 var(--s5);
  color: var(--ink-2);
}

/* Dokunma hedefi (telefon / tablet / dokunmatik): cümle içi bağlantılar ≥ 44px.
   Kutu büyür, aynı kadar negatif kenar boşluğu satır adımını aynı tutar:
   görünüşte değişiklik yok. (Gallery tek kelime; "See the guarantee" zaten nowrap.) */
@media (max-width: 899px), (pointer: coarse) {
  .why__text a,
  .closing__terms a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}