/* ═══════════════════════════════════════════════════════════════════
   Blog / "Where to Stay" event pages — shared styles
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Hero ───────────────────────────────────────────────────────── */
.detail-hero { position: relative; height: 55vh; min-height: 380px; overflow: hidden; background: var(--forest); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; }
.detail-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 4%; background: linear-gradient(to top, rgba(20,30,22,0.85) 0%, transparent 100%); z-index: 1; }
.detail-hero-content .section-label { color: rgba(255,255,255,0.6); }
.detail-hero-content h1 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 300; font-style: italic; color: var(--white); margin: 0.3rem 0 0; line-height: 1.15; }

.detail-back-bar { background: var(--cream); padding: 0.9rem 4%; border-bottom: 1px solid var(--cream-dark); }
.detail-back-bar a { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest); border-bottom: 1px solid var(--beige); padding-bottom: 0.2rem; transition: gap 0.3s, border-color 0.3s, color 0.3s; width: fit-content; }
.detail-back-bar a:hover { color: var(--terra); border-color: var(--terra); gap: 0.85rem; }

/* ─── Photo placeholders (swap for real photography) ───────────────── */
.img-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  background: repeating-linear-gradient(45deg, var(--cream-dark), var(--cream-dark) 14px, var(--cream) 14px, var(--cream) 28px);
  color: var(--grey); text-align: center; padding: 2rem;
}
.img-placeholder svg { width: 38px; height: 38px; opacity: 0.4; flex-shrink: 0; }
.img-placeholder span { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; line-height: 1.6; max-width: 320px; }
.detail-hero .img-placeholder { background-color: var(--forest); }
.detail-hero .img-placeholder span, .detail-hero .img-placeholder svg { opacity: 0.35; color: var(--cream); }
/* Sized wrapper boxes — these define the box; a nested .img-placeholder fills
   it. Keeping aspect-ratio and height:100% off the same element avoids a
   sizing conflict between the two. */
.article-img-placeholder { aspect-ratio: 16/9; margin: 0.5rem 0 2rem; border: 1px solid var(--cream-dark); overflow: hidden; }

/* ─── Body ───────────────────────────────────────────────────────── */
.detail-body { background: var(--cream); padding: 4rem 0 5rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 5rem; }
.detail-body h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--forest); font-weight: 300; margin-bottom: 1.2rem; }
.detail-body h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-style: italic; color: var(--brown-dark); font-weight: 300; margin: 2.4rem 0 1rem; }
.detail-body p { font-size: 0.95rem; line-height: 1.95; color: #555; margin-bottom: 1.2rem; }
.detail-body ul.stay-points { list-style: none; padding: 0; margin: 1.2rem 0 2rem; }
.detail-body ul.stay-points li { font-size: 0.92rem; line-height: 1.8; color: #555; padding: 0.4rem 0 0.4rem 1.4rem; position: relative; border-bottom: 1px solid var(--cream-dark); }
.detail-body ul.stay-points li:first-child { border-top: 1px solid var(--cream-dark); }
.detail-body ul.stay-points li::before { content: '—'; position: absolute; left: 0; color: var(--beige); }

.cta-row { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--cream-dark); }

.detail-sidebar { }
.sidebar-block { border: 1px solid var(--cream-dark); padding: 1.8rem; margin-bottom: 1.5rem; }
.sidebar-block h4 { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra); margin-bottom: 1rem; }
.sidebar-block p, .sidebar-block li { font-size: 0.88rem; color: #555; line-height: 1.7; }
.sidebar-block ul { list-style: none; padding: 0; }
.sidebar-block li { padding: 0.25rem 0; border-bottom: 1px solid var(--cream-dark); }
.sidebar-block li:last-child { border-bottom: none; }
.sidebar-cta { display: inline-flex; align-items: center; gap: 0.55rem; background: none; color: var(--forest); text-align: left; padding: 0 0 0.2rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid var(--beige); transition: gap 0.3s, border-color 0.3s, color 0.3s; width: fit-content; margin-bottom: 0.9rem; }
.sidebar-cta:hover { color: var(--terra); border-color: var(--terra); gap: 0.85rem; }
.sidebar-cta-block { display: flex; flex-direction: column; }

@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ─── Blog index ─────────────────────────────────────────────────── */
.blog-index-hero { background: var(--forest); padding: 7rem 0 3.5rem; text-align: center; }
.blog-index-hero .section-label { color: rgba(255,255,255,0.6); }
.blog-index-hero h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 300; font-style: italic; color: var(--white); margin: 0.4rem 0 1rem; }
.blog-index-hero p { color: rgba(255,255,255,0.65); max-width: 560px; margin: 0 auto; font-size: 0.95rem; line-height: 1.8; }

.blog-list { background: var(--cream); padding: 4rem 0 5rem; }
.blog-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.blog-card { background: var(--white); border: 1px solid var(--cream-dark); display: flex; flex-direction: column; transition: border-color 0.25s, box-shadow 0.25s; }
.blog-card:hover { border-color: var(--terra); box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-body { padding: 1.6rem 1.7rem 1.8rem; }
.blog-card-date { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terra); margin-bottom: 0.6rem; display: block; }
.blog-card h3 { font-family: var(--serif); font-size: 1.25rem; font-style: italic; font-weight: 300; color: var(--forest); margin-bottom: 0.6rem; line-height: 1.3; }
.blog-card p { font-size: 0.85rem; color: var(--grey); line-height: 1.7; margin-bottom: 1rem; }
.blog-card .distance { font-family: var(--sans); font-size: 0.72rem; color: var(--brown-dark); }

@media (max-width: 760px) {
  .blog-cards { grid-template-columns: 1fr; }
}