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

/* ── 01. Hero ──────────────────────────────────────────────── */

/* ── 02. Intro ─────────────────────────────────────────────── */
.exa-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.exa-intro__quote { padding-right: 2rem; }
.exa-intro__body p { max-width: 56ch; margin-bottom: 1.25rem; }
.exa-intro__body p:last-child { margin-bottom: 0; }
.exa-intro__body .ewt-eyebrow { margin-top: .5rem; margin-bottom: 1.25rem; }

/* ── 02. Filter bar ────────────────────────────────────────── */
.exa-filter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--ewt-ink);
  border-bottom: 1px solid var(--ewt-border);
  padding: 20px 0;
}
.exa-filter {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.exa-filter::-webkit-scrollbar { display: none; }
.exa-filter__pill {
  flex-shrink: 0;
  font-family: var(--ewt-font-body);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ewt-muted);
  background: transparent;
  border: 1px solid var(--ewt-border);
  padding: .625rem 1.25rem;
  cursor: pointer;
  transition: border-color .2s var(--ewt-ease), color .2s var(--ewt-ease), background-color .2s var(--ewt-ease);
}
.exa-filter__pill:hover { border-color: var(--ewt-bronze); color: var(--ewt-ink-soft); }
.exa-filter__pill.is-active {
  background-color: var(--ewt-bronze);
  border-color: var(--ewt-bronze);
  color: var(--ewt-ink);
}

/* ── 04. Experiences list (image left / content right) ────── */
.exa-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.exa-card {
  background-color: var(--ewt-surface);
  display: flex;
  align-items: stretch;
}
.exa-card__img {
  display: block;
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  overflow: hidden;
}
.exa-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ewt-ease); }
.exa-card:hover .exa-card__img img { transform: scale(1.05); }
.exa-card__ph { width: 100%; height: 100%; min-height: 260px; background: linear-gradient(135deg, var(--ewt-surface-2), var(--ewt-border)); }
.exa-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,14,11,.55) 0%, transparent 55%); }
.exa-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--ewt-font-body);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ewt-ink);
  background-color: var(--ewt-bronze);
  padding: .375rem .75rem;
}
.exa-card__body {
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.exa-card__body h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.exa-card__body h3 a:hover { color: var(--ewt-bronze); }
.exa-card__desc {
  font-size: .9375rem;
  color: var(--ewt-ink-soft);
  margin-bottom: 1.5rem;
  max-width: 56ch;
}
.exa-card__meta {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ewt-border);
}
.exa-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ewt-muted);
}
.exa-card__meta-item--price { color: var(--ewt-ember); margin-left: auto; }
.exa-card__actions { display: flex; align-items: center; gap: .75rem; }
.exa-card__actions .ewt-btn { justify-content: center; }
.exa-card__wa {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ewt-border);
  color: var(--ewt-whatsapp);
  transition: border-color .2s var(--ewt-ease);
}
.exa-card__wa:hover { border-color: var(--ewt-whatsapp); }

.exa-empty {
  display: none;
  text-align: center;
  padding: 60px 0;
  color: var(--ewt-ink-soft);
}
.exa-empty a { color: var(--ewt-bronze); text-decoration: underline; }

/* ── 05. FAQ ───────────────────────────────────────────────── */
.exa-faq__head { text-align: center; margin-bottom: 2.5rem; }
.exa-faq__head .ewt-eyebrow { display: inline-block; margin-bottom: .5rem; }
.exa-faq__list { max-width: 800px; margin: 0 auto; }
.exa-faq-item { border-bottom: 1px solid var(--ewt-border); }
.exa-faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--ewt-font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ewt-ink-soft);
  cursor: pointer;
}
.exa-faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--ewt-bronze);
  transition: transform .3s var(--ewt-ease);
}
.exa-faq-item__q[aria-expanded="true"] .exa-faq-item__icon { transform: rotate(45deg); }
.exa-faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ewt-ease-out);
}
.exa-faq-item__a p {
  padding-bottom: 1.5rem;
  font-size: .9375rem;
  color: var(--ewt-ink-soft);
  max-width: 66ch;
}

/* ── 06. Bottom CTA ────────────────────────────────────────── */
.exa-cta { background-color: var(--ewt-surface); }
.exa-cta__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.exa-cta__inner h2 { margin: .75rem 0 1.25rem; }
.exa-cta__inner p { margin: 0 auto 2rem; color: var(--ewt-ink-soft); }
.exa-cta__actions { display: flex; justify-content: center; gap: 1rem; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .exa-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .exa-intro__quote { padding-right: 0; }
}

@media (max-width: 768px) {
  .exa-filter-bar { top: 0; padding: 16px 0; }
  .exa-card { flex-direction: column; }
  .exa-card__img { flex: none; max-width: none; aspect-ratio: 3/2; }
  .exa-card__body { padding: 1.75rem; }
  .exa-card__meta { flex-wrap: wrap; gap: 1rem; }
  .exa-card__actions { flex-direction: column; align-items: stretch; }
  .exa-card__wa { width: 100%; height: 44px; }
  .exa-cta__actions { flex-direction: column; }
  .exa-cta__actions .ewt-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .exa-card__img img { transition: none; }
  .exa-faq-item__icon { transition: none; }
  .exa-faq-item__a { transition: none; }
}