/*
 * single.css — styles for single.php
 * Moved out of the template in v2.3.0: it used to be an inline <style>
 * block printed AFTER the page content (unstyled flash + reflow, never cached).
 * Loaded in <head> only when WordPress renders single.php (see ewt_template_styles()).
 */

/* --- 01. Breadcrumb bar --- */
.sgl-breadcrumb { margin: 0 0 1.5rem; }
.sgl-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 8px; font-size: 11px; font-weight: 400; letter-spacing: .10em; text-transform: uppercase; color: var(--ewt-muted); }
.sgl-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--ewt-bronze); }
.sgl-breadcrumb a { color: var(--ewt-muted); text-decoration: none; }
.sgl-breadcrumb a:hover { color: var(--ewt-ember); }
.sgl-breadcrumb li[aria-current="page"] { color: var(--ewt-ember); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 02. Full-bleed hero --- */
.sgl-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(420px, 48vw, 640px); overflow: hidden; background: var(--ewt-photo-ground); }
/* Top scrim so the transparent header stays readable over bright skies */
.sgl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,11,.55) 0%, rgba(16,14,11,0) 32%); pointer-events: none; }
.sgl-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgl-hero__placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--ewt-surface-2) 0%, var(--ewt-border) 60%, var(--ewt-footer) 100%); }

/* --- 03. Title card (overlaps hero) --- */
.sgl-title-card { position: relative; z-index: 2; background: var(--ewt-surface); border: .5px solid var(--ewt-border); padding: clamp(1.5rem, 4vw, 3rem); max-width: 900px; margin-top: clamp(-60px, -7vw, -110px); margin-bottom: 2rem; }
.sgl-title-card__title { font-family: var(--ewt-font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -.02em; line-height: 1.15; color: var(--ewt-ink); margin: .75rem 0 1rem; }
.sgl-title-card__desc { font-family: var(--ewt-font-body); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--ewt-ink-soft); margin: 0 0 1.5rem; max-width: 68ch; }
.sgl-title-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .8125rem; color: var(--ewt-muted); }
.sgl-title-card__meta > *:not(:last-child)::after { content: '·'; margin-left: 1rem; color: var(--ewt-ghost); }
.sgl-title-card__author { display: inline-flex; align-items: center; gap: .5rem; }
.sgl-title-card__avatar { border-radius: 0; width: 28px; height: 28px; }

/* --- 04. Layout: content + sidebar --- */
.sgl-layout { display: grid; grid-template-columns: 7fr 3fr; gap: 3rem; align-items: start; padding-bottom: 4rem; }
.sgl-main { min-width: 0; }

/* --- Prose (h2/h3 bumped up, fluid across breakpoints) --- */
.ewt-prose { font-weight: 300; font-size: 17px; line-height: 1.85; color: var(--ewt-ink-soft); }
.ewt-prose > * + * { margin-top: 1.5em; }
.ewt-prose h2 { font-family: var(--ewt-font-display); font-weight: 400; font-size: clamp(1.75rem, 1.4vw + 1.4rem, 2.125rem); color: var(--ewt-ink); line-height: 1.3; margin-top: 2.25em; }
.ewt-prose h3 { font-family: var(--ewt-font-display); font-weight: 400; font-size: clamp(1.375rem, 1vw + 1.1rem, 1.625rem); color: var(--ewt-ink); line-height: 1.35; margin-top: 2em; }
.ewt-prose p { margin: 0; }
/* .ewt-prose links: styled sitewide in assets/css/v2.css (gold, dotted → bold + solid on hover) */
.ewt-prose ul, .ewt-prose ol { padding-left: 1.5rem; }
.ewt-prose li + li { margin-top: .5em; }
.ewt-prose img { width: 100%; height: auto; display: block; }
.ewt-prose blockquote { border-left: 2px solid var(--ewt-bronze); padding-left: 1.5rem; font-family: var(--ewt-font-display); font-size: 1.375rem; font-weight: 400; color: var(--ewt-ink); line-height: 1.5; }
.ewt-prose figcaption { font-size: .8125rem; color: var(--ewt-muted); margin-top: .5em; }
.ewt-prose hr { border: none; border-top: .5px solid var(--ewt-border); }

.sgl-tags { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 3rem; padding-top: 2rem; border-top: .5px solid var(--ewt-border); }
.sgl-tag { font-size: .75rem; color: var(--ewt-muted); text-decoration: none; }
.sgl-tag:hover { color: var(--ewt-bronze); }

/* --- Sidebar (sticky) --- */
.sgl-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2rem; }
.sgl-sidebar__block { background: var(--ewt-surface); border: .5px solid var(--ewt-border); padding: 1.5rem; }
.sgl-sidebar__heading { font-family: var(--ewt-font-display); font-size: 1.125rem; font-weight: 400; color: var(--ewt-ink); margin: 0 0 1.25rem; }

/* Sidebar tours: compact override of the shared safari-card partial */
.sgl-sidebar__tours .ewt-safari-card { background: transparent; border-bottom: .5px solid var(--ewt-border); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.sgl-sidebar__tours .ewt-safari-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sgl-sidebar__tours .ewt-safari-card__image-wrap { aspect-ratio: 16/10; }
.sgl-sidebar__tours .ewt-safari-card__body { padding: .875rem 0 0; }
.sgl-sidebar__tours .ewt-safari-card__title { font-size: 1rem; margin-bottom: .375rem; }
.sgl-sidebar__tours .ewt-safari-card__excerpt { font-size: .75rem; -webkit-line-clamp: 2; margin-bottom: .625rem; }
.sgl-sidebar__tours .ewt-safari-card__meta { margin-bottom: .625rem; padding-bottom: .625rem; }
.sgl-sidebar__tours .ewt-safari-card__cta { font-size: .625rem; }
.sgl-sidebar__tours .ewt-safari-card__tags { display: none; }

/* Sidebar CTA block */
.sgl-sidebar__cta .sgl-sidebar__heading { margin-top: .5rem; }
.sgl-sidebar__cta-para { font-size: .875rem; line-height: 1.6; color: var(--ewt-ink-soft); margin: 0 0 1.25rem; }
.sgl-sidebar__cta .ewt-btn { width: 100%; justify-content: center; }

/* Sidebar related-articles compact list */
.sgl-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.sgl-related-list__item { display: flex; gap: .875rem; }
.sgl-related-list__img { flex-shrink: 0; display: block; width: 72px; height: 72px; overflow: hidden; }
.sgl-related-list__img img { width: 100%; height: 100%; object-fit: cover; }
.sgl-related-list__no-img { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ewt-surface-2), var(--ewt-border)); }
.sgl-related-list__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sgl-related-list__title { font-family: var(--ewt-font-display); font-size: .875rem; font-weight: 400; color: var(--ewt-ink-soft); line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sgl-related-list__title:hover { color: var(--ewt-bronze); }
.sgl-related-list__date { font-size: .6875rem; color: var(--ewt-muted); margin-top: .375rem; }

/* --- 05. Bottom CTA --- */
.sgl-cta { background: linear-gradient(135deg, var(--ewt-ember), var(--ewt-bronze)); }
.sgl-cta__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.sgl-cta .ewt-eyebrow { color: var(--ewt-ink); }
.sgl-cta__heading { font-family: var(--ewt-font-display); font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.01em; color: var(--ewt-ink); margin: 8px 0 16px; }
.sgl-cta__para { font-weight: 400; font-size: 15px; line-height: 1.6; color: rgba(16,14,11,.8); margin: 0 0 1.75rem; }
.sgl-cta__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.sgl-cta .ewt-btn--ghost { color: var(--ewt-ink); border-color: var(--ewt-ink); }
.sgl-cta .ewt-btn--ghost:hover { background-color: var(--ewt-ink); color: var(--ewt-bronze); }

/* --- Shared safari-card base (required by the sidebar tours block) --- */
.ewt-safari-card { background: var(--ewt-surface); overflow: hidden; }
.ewt-safari-card__image-wrap { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ewt-safari-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ewt-ease); }
.ewt-safari-card:hover .ewt-safari-card__image-wrap img { transform: scale(1.04); }
.ewt-safari-card__no-img { width: 100%; height: 100%; min-height: 160px; background: linear-gradient(135deg, var(--ewt-surface-2), var(--ewt-border)); }
.ewt-safari-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,14,11,.7) 0%, transparent 60%); }
.ewt-safari-card__body { padding: 1.5rem; }
.ewt-safari-card__tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ewt-safari-card__tag { font-size: .6rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ewt-bronze); border: .5px solid var(--ewt-ember); padding: .2rem .6rem; }
.ewt-safari-card__title { font-family: var(--ewt-font-display); font-size: 1.25rem; font-weight: 400; color: var(--ewt-ink-soft); line-height: 1.25; margin-bottom: .5rem; }
.ewt-safari-card__title a:hover { color: var(--ewt-bronze); }
.ewt-safari-card__excerpt { font-size: .8125rem; font-weight: 300; line-height: 1.6; color: var(--ewt-ink-soft); margin-bottom: 1rem; max-width: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ewt-safari-card__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: .5px solid var(--ewt-border); }
.ewt-safari-card__duration { font-size: .75rem; color: var(--ewt-muted); }
.ewt-safari-card__price { font-size: .8125rem; font-weight: 300; color: var(--ewt-ember); }
.ewt-safari-card__price span { font-size: .6rem; color: var(--ewt-ghost); margin-left: .2rem; }
.ewt-safari-card__cta { display: inline-flex; align-items: center; gap: .375rem; font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ewt-bronze); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .sgl-layout { grid-template-columns: 1fr; }
  .sgl-sidebar { position: static; }
}
@media (max-width: 640px) {
  .sgl-hero { height: clamp(320px, 80vw, 440px); }
  .sgl-title-card { padding: 1.25rem; margin-top: -40px; }
}