/* ==========================================================================
   Listing pages — Plein-Air Editions and Plein-Air Homestays
   ========================================================================== */

/* --- Featured card (an edition or a homestay) ---------------------------- */
.featured{display:grid;grid-template-columns:1.1fr 1fr;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 40px 70px -50px rgba(31,42,36,.55);transition:transform .45s var(--ease),box-shadow .45s}
.featured:hover{transform:translateY(-4px);box-shadow:0 50px 80px -50px rgba(31,42,36,.65)}
.featured-media{position:relative;min-height:420px;overflow:hidden;background:var(--alpine)}
.featured-media>img,.featured-media picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.featured:hover .featured-media>img,.featured:hover .featured-media picture img{transform:scale(1.04)}
.featured-media.ph-slot{border-radius:0}
.featured-media .badge{position:absolute;left:20px;top:20px;z-index:2}
.featured-body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column}
.featured-body .k{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);margin-bottom:14px}
.featured-body h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:12px}
.featured-body>p{color:var(--ink-3);margin-bottom:22px}
.facts-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:6px 0 26px;padding:20px 0;border-block:1px solid var(--line)}
.facts-list dt{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.facts-list dd{font:400 18px/1.25 var(--display);color:var(--alpine)}
.facts-list dd.tba{font:500 14px/1.4 var(--sans);color:var(--ink-3);font-style:italic}
.flags{display:flex;gap:8px;font-size:22px;margin-bottom:24px;flex-wrap:wrap}
.flags span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line)}
.featured-body .btn-row{margin-top:auto}

/* --- "Coming soon" card --------------------------------------------------- */
.soon{margin-top:22px;display:flex;align-items:center;gap:22px;padding:26px 30px;border-radius:12px;border:1.5px dashed rgba(31,42,36,.22);color:var(--ink-3)}
.soon .plus{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--sage-deep);font-size:26px}
.soon strong{display:block;font:400 22px/1.2 var(--display);color:var(--alpine);margin-bottom:4px}

/* --- Timeline of editions ------------------------------------------------- */
.timeline{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:24px;list-style:none;margin-top:12px;padding:0 0 10px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}
.timeline>li{scroll-snap-align:start}
/* dashed line runs from each marker to the next (works however many years there are) */
.timeline>li::after{content:"";position:absolute;left:30px;right:-24px;top:15px;height:2px;background:repeating-linear-gradient(90deg,rgba(249,248,245,.3) 0 8px,transparent 8px 14px)}
.timeline>li:last-child::after{right:0}
.timeline .tl-entry+.tl-entry{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dark)}
.timeline li.past .yr{color:var(--on-dark-2)}
.timeline li{position:relative;padding-top:48px}
.timeline li::before{content:"";position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(249,248,245,.45);background:var(--alpine)}
.timeline li.now::before{background:var(--snow);border-color:var(--snow);box-shadow:0 0 0 8px rgba(255,198,32,.18)}
.timeline .yr{font:400 40px/1 var(--display);color:var(--paper);margin-bottom:8px}
.timeline li.now .yr{color:var(--snow)}
.timeline h3{font-size:21px;color:var(--paper);margin-bottom:6px}
.timeline p{font-size:15px;color:var(--on-dark-2)}
.timeline a{color:var(--snow)}

/* --- Steps (how a homestay works) ------------------------------------------ */
.intro-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,72px)}
.intro-split h2{margin:0}
.intro-split .lead{margin:0}

@media (max-width:980px){
  .featured{grid-template-columns:1fr}
  .featured-media{min-height:280px}
  .timeline{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:8px;overflow:visible}
  .timeline>li::after{display:none}
  .timeline::before{content:"";position:absolute}
  .timeline::before{left:11px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,rgba(249,248,245,.3) 0 8px,transparent 8px 14px)}
  .timeline li{padding:0 0 28px 48px}
  .intro-split{grid-template-columns:1fr;gap:16px}
}
@media (max-width:560px){
  .facts-list{grid-template-columns:1fr}
  .featured-body .btn-row .btn{flex:1 1 100%}
  .soon{flex-direction:column;align-items:flex-start}
}

/* Flag row on the featured edition card: round flags with a sheen */
.flags span{position:relative;overflow:hidden;padding:0;border:0;box-shadow:0 6px 14px -8px rgba(31,42,36,.55),inset 0 0 0 1px rgba(31,42,36,.1)}
.flags span svg{display:block;width:100%;height:100%}
.flags span::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,rgba(255,255,255,.35),rgba(255,255,255,0) 35%,rgba(0,0,0,.12) 60%,rgba(255,255,255,.18) 80%,rgba(0,0,0,.1))}
.flags span:first-child{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--terracotta)}

/* Homestay card: the homestay's own logo on its photo */
.featured-media>img.card-logo{position:absolute;inset:auto auto 20px 20px;width:96px;height:auto;object-fit:contain;z-index:2;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));transform:none!important}
.featured-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%);pointer-events:none;z-index:1}

/* Homestays hero: pastel painting — shade only behind the text, keep the sky clear */
.hs-film{background:linear-gradient(90deg,rgba(18,24,20,.62) 0%,rgba(18,24,20,.38) 38%,rgba(18,24,20,0) 66%),linear-gradient(0deg,rgba(18,24,20,.45) 0%,rgba(18,24,20,0) 40%)}
@media (max-width:720px){.hs-film{background:linear-gradient(0deg,rgba(18,24,20,.78) 0%,rgba(18,24,20,.35) 55%,rgba(18,24,20,0) 85%)}}
.hs-film~.wrap h1,.hs-film~.wrap .phero-sub{text-shadow:0 2px 18px rgba(0,0,0,.35)}

/* ==========================================================================
   Editions hero — the title hangs on the blank gallery wall
   Image 2400×1412 (ratio .5883). The box is the image's width; if the
   screen is short, top/bottom are trimmed (62% from the top), and the
   wall position follows with the same maths, so the text stays on the wall.
   Wall in the photo: x 21%–78%, y 31.5%–93.5%.
   ========================================================================== */
.ed-hero{--ih:58.83vw;--h:min(var(--ih),max(92svh,620px));--off:calc((var(--ih) - var(--h)) * .62);
  position:relative;height:var(--h);overflow:hidden;background:#F2EEE8;color:var(--ink)}
.ed-hero-img img{position:absolute;left:0;top:calc(-1 * var(--off));width:100%;height:var(--ih);object-fit:cover}
.ed-top{position:relative;z-index:2;padding-top:calc(var(--header-h) + 20px)}
.ed-hero .crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:13px;color:var(--ink-3)}
.ed-hero .crumbs a{color:var(--ink-2);text-decoration:none}
.ed-hero .crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.ed-wall{position:absolute;z-index:1;left:21%;width:57%;top:calc(var(--ih) * .315 - var(--off));height:calc(var(--ih) * .62);display:grid;place-items:center;text-align:center;padding:0 4%}
.ed-wall-text{max-width:640px}
.ed-wall .eyebrow{justify-content:center;color:var(--terracotta)}
.ed-wall .eyebrow::before{background:var(--terracotta)}
.ed-hero h1{font-size:clamp(40px,5.6vw,96px);line-height:1;color:var(--alpine);margin:14px 0 18px}
.ed-sub{font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:var(--ink-2);max-width:44ch;margin:0 auto}
.ed-wall-text::after{content:"";display:block;width:56px;height:2px;margin:22px auto 0;background:var(--snow-deep)}  /* like a label rule */
@media (max-width:720px){
  /* phone crop (1000×1300): the wall fills the width, lower 62% of the picture */
  .ed-hero{--ih:130vw;--h:var(--ih);--off:0px}
  .ed-wall{left:0;width:100%;top:calc(var(--ih) * .33);height:calc(var(--ih) * .6);padding:0 22px}
  .ed-hero h1{font-size:clamp(38px,12vw,58px)}
}