/* ==========================================================================
   Fiche Wat Phra That Doi Suthep. Chargée par cette fiche seulement, après
   place.css et story.css, dont elle reprend les chapitres, la photo annotée,
   la chronique compacte, le tableau des façons de monter et les points
   d'accès.

   Trois teintes locales, tirées du lieu :
   - le bronze doré des plaques du chedi, assombri pour porter du texte
     (numéros de la montée, dates de la chronique, appels de note, filets) :
     6,4:1 sur blanc, 5,8:1 sur la brume ;
   - l'or des plaques lui-même, pour un seul trait, sans texte : la ligne qui
     relie les seuils de la montée (3,1:1 sur blanc) ;
   - le teck des toitures, très sombre, pour le seul fond de l'ouverture sur
     grand écran (16:1 avec le blanc du titre).
   Pas de fond doré : l'or est dans les photos.
   ========================================================================== */
:root {
  --c-brick: #7A5A12;
  --c-brick-soft: #F3EEDF;
  --c-gilt: #B88A2E;
  --c-teak: #2A1D15;
}

/* --- Ouverture ---------------------------------------------------------------
   Le chedi est une photo verticale : en plein cadre sur un écran large, il
   n'en resterait qu'une bande. À partir de 768 px, la photo tient debout à
   droite, entière en largeur, et le titre se pose à gauche sur le teck des
   toitures. Sur téléphone, elle reprend tout l'écran et le texte tient dans
   le bas, sous un voile teck. La photo reste le premier élément peint (LCP) :
   même fichier, même priorité, seule sa boîte change. */
.hero--wat-phra-that-doi-suthep { background: var(--c-teak); }
@media (min-width: 768px) {
  .hero--wat-phra-that-doi-suthep .hero__media { left: auto; width: min(46%, 640px); }
  .hero--wat-phra-that-doi-suthep .hero__media img { object-position: 50% 6%; }
  .hero--wat-phra-that-doi-suthep.hero--shot::after {
    background: linear-gradient(90deg, var(--c-teak) 0%, var(--c-teak) 54%, rgba(42,29,21,0) calc(54% + 72px));
  }
  .hero--wat-phra-that-doi-suthep > .container { padding-right: calc(min(46%, 640px) + var(--sp-6)); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .hero--wat-phra-that-doi-suthep .place-title__name { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
}
/* Au-delà de 1400 px, la photo garde 640 px et le voile suit son bord. */
@media (min-width: 1392px) {
  .hero--wat-phra-that-doi-suthep.hero--shot::after {
    background: linear-gradient(90deg, var(--c-teak) 0%, var(--c-teak) calc(100% - 640px), rgba(42,29,21,0) calc(100% - 568px));
  }
}
@media (max-width: 767px) {
  .hero--wat-phra-that-doi-suthep .hero__media img { object-position: 50% 20%; }
  .hero--wat-phra-that-doi-suthep.hero--shot::after {
    background: linear-gradient(180deg, rgba(42,29,21,0) 0%, rgba(42,29,21,.1) 32%,
                rgba(42,29,21,.62) 50%, rgba(42,29,21,.88) 68%, rgba(42,29,21,.96) 100%);
  }
}
.hero--wat-phra-that-doi-suthep .place-title__name,
.hero--wat-phra-that-doi-suthep .place-title__tag,
.hero--wat-phra-that-doi-suthep .eyebrow { text-shadow: 0 1px 2px rgba(42,29,21,.7), 0 0 22px rgba(42,29,21,.5); }

/* Sous 1024 px, les repères pratiques remontent entre le chapô et l'avis,
   comme sur la fiche Wat Pha Lat : l'horaire et le prix se lisent dans le
   premier écran sous l'ouverture. L'avis ne contient aucun lien : l'ordre du
   focus clavier reste celui de l'écran. */
@media (max-width: 1023px) {
  .story-open__inner { display: flex; flex-direction: column; gap: 0; }
  .story-open__intro { display: contents; }
  .story-open__intro > p:not(.story-take) { max-width: 38rem; }
  .story-open__intro > .story-take,
  .story-open__intro > .story-fit { order: 2; }
  .story-open__inner > .brief { order: 1; margin: var(--sp-4) 0 var(--sp-7); }
}

/* --- La montée ------------------------------------------------------------------
   Le bloc signature. Six seuils, de la rue à la relique, reliés par un seul
   trait d'or vertical : l'escalier, en somme. Le numéro en Fraunces bronze, à
   grand corps ; sous chaque seuil, ce qui change pour le visiteur, sur un
   filet bronze. La photo à droite sur grand écran, sous le texte ailleurs. */
.ascent { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--sp-8); }
.ascent::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 27px; width: 3px;
  border-radius: 2px; background: var(--c-gilt);
}
.ascent__step { position: relative; display: grid; gap: var(--sp-5); scroll-margin-top: 140px; }
@media (min-width: 900px) {
  .ascent__step { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: var(--sp-7); align-items: start; }
  .ascent__step--text { grid-template-columns: minmax(0, 1fr); }
}
.ascent__body { position: relative; padding-left: 76px; max-width: 40rem; }
.ascent__n {
  position: absolute; left: 0; top: -6px; margin: 0;
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-bg); box-shadow: 0 0 0 3px var(--c-gilt) inset;
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 72;
  font-size: 1.7rem; line-height: 1; color: var(--c-brick); font-variant-numeric: lining-nums;
}
.chapter--white .ascent__n { background: var(--c-surface); }
.ascent__t { margin: 0 0 var(--sp-1); color: var(--c-primary); font-size: clamp(1.3rem, 2.3vw, 1.6rem); line-height: 1.2; }
.ascent__where { margin: 0 0 var(--sp-3); font-size: 15px; color: var(--c-muted); }
.ascent__body > p:not(.ascent__n):not(.ascent__where):not(.ascent__do) { margin: 0 0 var(--sp-3); font-size: 17px; line-height: 1.65; }
.ascent__do {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 2px solid var(--c-brick);
  font-size: 16px; line-height: 1.55;
}
.ascent__do strong { color: var(--c-brick); margin-right: 4px; }
.ascent__fig { margin: 0; padding-left: 76px; }
.ascent__fig--tall { max-width: calc(360px + 76px); }
@media (min-width: 900px) {
  .ascent__fig { padding-left: 0; }
  .ascent__fig--tall { max-width: 360px; justify-self: end; }
}
.ascent__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: var(--c-border); }
.ascent__fig figcaption { margin-top: var(--sp-2); font-size: 14px; line-height: 1.5; color: var(--c-muted); }
@media (max-width: 559px) {
  .ascent { gap: var(--sp-7); }
  .ascent::before { left: 21px; }
  .ascent__n { width: 44px; height: 44px; font-size: 1.35rem; top: -4px; }
  .ascent__body, .ascent__fig { padding-left: 60px; }
  .ascent__body > p:not(.ascent__n):not(.ascent__where):not(.ascent__do) { font-size: 16px; }
}

/* --- Escalier ou ascenseur : le tableau à deux colonnes ------------------------
   Le tableau commun (story.css) est écrit pour trois façons. À deux, la grille
   mobile a deux colonnes et les fiches se rangent côte à côte sur grand
   écran. L'escalier porte le trait bronze, l'ascenseur le trait gris. */
.wg--n2 thead .wg__col--stairs::before { background: var(--c-brick); }
@media (max-width: 639px) {
  .wg--n2 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .ways--n2 .ways__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Les points d'accès : la marque dit ce qu'on y trouve. Carré : la route et
   le parking ; losange : le pied de l'escalier ; rond : l'ascenseur. */
.access__pt--stairs .access__mark { border: 3px solid var(--c-brick); transform: rotate(45deg) scale(.82); border-radius: 2px; }
.access__pt--lift .access__mark { border: 3px solid var(--c-primary); border-radius: 50%; }
.access__pt--bus .access__mark { background: var(--c-primary); border-radius: 3px; }

/* --- La même façade, à quarante minutes d'écart ----------------------------------
   La paire jour / heure bleue : même cadrage (3:4, sans recadrage), les deux
   heures en tête de légende, en bronze. */
.story-pair--light .story-pair__fig figcaption strong { color: var(--c-brick); }