/*
 * archive-ewt_safari.css — styles for archive-ewt_safari.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 archive-ewt_safari.php (see ewt_template_styles()).
 */

/* ============================================================
   archive-ewt_safari.php — scoped styles
   Prefix: sfa- (Safari Archive)

   NOTE ON .ewt-safari-card / .ewt-safari-card__excerpt:
   This is the SECOND template to need the shared card styles
   (front-page.php's Featured Safaris section is the first).
   Per the open item flagged in project notes, duplicating this
   block a second time is the signal to move it out of individual
   templates and into assets/css/main.css as the single shared
   definition — both this file and front-page.php would then drop
   their local copy and rely on the global one. Written here inline
   for now, following the established per-template pattern, pending
   your confirmation to consolidate.
   ============================================================ */

/* --- 01. Hero --- */

/* --- 02. Intro editorial --- */
.sfa-intro { background: var(--ewt-canvas); }
.sfa-intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.sfa-intro__quote-col { position: relative; }
.sfa-intro__quote {
  font-family: var(--ewt-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ewt-ink-soft);
  margin: 0 0 24px;
}
.sfa-intro__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--ewt-bronze);
}
.sfa-intro__text-col p {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ewt-ink-soft);
  margin: 0 0 20px;
}
.sfa-intro__text-col .ewt-eyebrow { margin-bottom: 16px; }

/* --- 03. Safari grid --- */
.sfa-grid-section { background: var(--ewt-surface-2); }

.sfa-admin-notice {
  background: rgba(191,140,69,.12);
  border: 1px solid var(--ewt-bronze);
  color: var(--ewt-ink-soft);
  font-size: .8125rem;
  line-height: 1.6;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  max-width: none;
}
.sfa-admin-notice code {
  background: rgba(0,0,0,.3);
  padding: .1rem .4rem;
  font-family: monospace;
  color: var(--ewt-bronze);
}

/* Shared safari card + grid — copied VERBATIM from front-page.php's
   "SAFARI CARDS" block so both templates render identically. This is
   now duplicated in two templates; move both copies to
   assets/css/main.css as the single shared definition when convenient. */
.ewt-safaris__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.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:240px;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);}

.ewt-safari-card--placeholder { opacity: 0.55; }
.sfa-grid__placeholder-note {
  margin-top: 2rem;
  font-size: .875rem;
  color: var(--ewt-muted);
  text-align: center;
}
.sfa-grid__placeholder-note a { color: var(--ewt-bronze); }

/* --- Pagination --- */
.sfa-pagination { margin-top: 64px; }
.sfa-pagination ul { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sfa-pagination a, .sfa-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  font-size: 13px;
  color: var(--ewt-muted);
  border: 1px solid var(--ewt-border);
  text-decoration: none;
}
.sfa-pagination a:hover { border-color: var(--ewt-bronze); color: var(--ewt-bronze); }
.sfa-pagination .current { color: var(--ewt-bronze); border-color: var(--ewt-bronze); }

/* --- 04. FAQ --- */
.sfa-faq { background: var(--ewt-canvas); }
.sfa-faq__head { margin-bottom: 40px; text-align: center; }
.sfa-section-title {
  font-family: var(--ewt-font-display);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: var(--ewt-ink-soft);
  margin: 8px 0 0;
}
.sfa-faq__list { max-width: 820px; margin: 0 auto; }
.sfa-faq__item { border-bottom: 1px solid var(--ewt-border); }
.sfa-faq__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 24px 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--ewt-ink-soft);
  text-align: left;
}
.sfa-faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.sfa-faq__icon::before, .sfa-faq__icon::after {
  content: ''; position: absolute; background: var(--ewt-bronze);
}
.sfa-faq__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.sfa-faq__icon::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); transition: transform 0.2s; }
.sfa-faq__toggle.is-open .sfa-faq__icon::after { transform: translateX(-50%) scaleY(0); }
.sfa-faq__answer { padding: 0 0 24px; }
.sfa-faq__answer p {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ewt-ink-soft);
  margin: 0;
  max-width: 680px;
}

/* --- 05. Bottom CTA --- */
.sfa-cta { background: linear-gradient(135deg, var(--ewt-ember), var(--ewt-bronze)); }
.sfa-cta__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.sfa-cta .ewt-eyebrow { color: var(--ewt-ink); }
.sfa-cta__heading {
  font-family: var(--ewt-font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.01em;
  color: var(--ewt-ink);
  margin: 8px 0 20px;
}
.sfa-cta__para {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(16,14,11,.8);
  margin: 0 0 32px;
}
.sfa-cta__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
/* .ewt-btn / .ewt-btn--primary are global classes defined in style.css —
   not redefined here. .ewt-btn--ghost IS overridden below: globally it's
   bronze-on-transparent, which reads fine on the dark backgrounds it's
   used against elsewhere (e.g. front-page.php's CTA), but here the
   section background is the bronze/ember gradient itself, so bronze
   text on bronze disappears. Scoped to .sfa-cta only — doesn't touch
   the global class or any other template using it. */
.sfa-cta .ewt-btn--ghost {
  color: var(--ewt-ink);
  border-color: var(--ewt-ink);
}
.sfa-cta .ewt-btn--ghost:hover {
  background-color: var(--ewt-ink);
  color: var(--ewt-bronze);
}

/* .ewt-reveal / .ewt-reveal-group are global, defined in style.css —
   not redefined here. (Note for Victor: style.css's stagger rule targets
   .ewt-reveal-group.is-visible > *, i.e. is-visible on the PARENT, but
   scroll-reveal.js adds .is-visible to entry.target directly — the
   individual child being observed, not the group wrapper. That looks
   like a pre-existing mismatch between the two files; flagging it here
   rather than silently patching either file, since neither was part of
   this task.) */

/* --- Responsive --- */
@media (max-width: 1024px) {
  .sfa-intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .ewt-safaris__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  
  .ewt-safaris__grid { grid-template-columns: 1fr; }
  .sfa-cta__actions { flex-direction: column; }
}