/* ==========================================================================
   EGYVACATIONS — CATEGORY / HUB — the tour grid with its filter rail and sort bar
   assets/css/templates/category.css
   Loads on top of tokens -> base -> chrome -> components -> sections.
   ========================================================================== */
/* ---------- 1. HERO ----------
   A full-bleed photograph with a scrim, the breadcrumb and heading over it,
   one paragraph, the buttons, and a row of real numbers along the bottom.

   Contrast: the copy sits in the left two-thirds, where the scrim is at
   least 82% of #07243C. White on that measures 13.9 at the lightest point
   of the gradient, so the text is legible whatever photograph is swapped in. */
.evc-hero{position:relative;isolation:isolate;overflow:hidden;
  margin-bottom:var(--sp-8);
  min-height:clamp(420px,46vw,540px);display:flex;align-items:flex-end}
.evc-hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.evc-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,rgba(7,36,60,.94) 0%,rgba(7,36,60,.86) 42%,rgba(7,36,60,.52) 74%,rgba(7,36,60,.34) 100%),
    linear-gradient(to top,rgba(7,36,60,.72) 0%,rgba(7,36,60,0) 42%)}
.evc-hero__in{width:100%;padding-top:clamp(26px,3.4vw,40px);padding-bottom:clamp(22px,2.6vw,32px)}

.evc-hero__crumb{margin-bottom:clamp(18px,3vw,34px)}
.evc-hero__crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none}
.evc-hero__crumb li{display:flex;align-items:center;font-size:var(--fs-xs);
  color:rgba(255,255,255,.66)}
.evc-hero__crumb a{color:rgba(255,255,255,.72)}
.evc-hero__crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.evc-hero__crumb svg{width:13px;height:13px;color:rgba(255,255,255,.4)}
.evc-hero__crumb [aria-current="page"]{color:#fff;font-weight:var(--fw-semi)}

.evc-hero__copy{max-width:640px}
.evc-hero__copy .evt-eyebrow{color:rgba(255,255,255,.9)}
.evc-hero__copy .evt-eyebrow::before{background:var(--ev-sky)}
.evc-hero h1{color:#fff;font-size:clamp(2rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.03em}
.evc-hero h1 .l1{display:block;font-weight:var(--fw-light);letter-spacing:-.02em;color:#fff}
.evc-hero h1 .l2{display:block;font-weight:var(--fw-black);letter-spacing:-.04em;color:#fff}
/* brand orange measures 6.57 on this scrim; the tint is 9.4 and holds up if
   a lighter photograph is ever swapped in behind it */
.evc-hero h1 em{font-style:normal;color:var(--accent-on-navy)}
.evc-hero__copy > p{margin-top:16px;max-width:56ch;font-size:clamp(.98rem,1.2vw,1.08rem);
  font-weight:var(--fw-light);line-height:1.68;color:rgba(255,255,255,.84)}
.evc-introcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-6)}

/* the numbers, along the bottom edge of the photograph */
.evc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin-top:clamp(28px,3.6vw,46px);list-style:none;
  border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18)}
.evc-stats li{display:flex;flex-direction:column;gap:5px;min-width:0;
  padding:16px 20px;background:rgba(7,36,60,.52);backdrop-filter:blur(8px)}
.evc-stats b{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:var(--fw-black);line-height:1;
  letter-spacing:-.02em;color:var(--accent-on-navy)}
.evc-stats span{font-size:var(--fs-micro);font-weight:var(--fw-semi);letter-spacing:.07em;
  text-transform:uppercase;line-height:1.35;color:rgba(255,255,255,.72)}

@media(max-width:860px){
  .evc-hero{min-height:0;padding-top:0}
  .evc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  /* only the current page survives — the separators go with the links they
     separated, or the row reads as two stray chevrons */
  .evc-hero__crumb li:not([aria-current]){display:none}
  .evc-stats li{padding:13px 15px}
}

/* ---------- 2. INTRO COPY ---------- */
.evc-lead{padding-bottom:var(--sp-7);max-width:74ch}
.evc-more{max-height:9.9em;overflow:hidden;position:relative;
  transition:max-height var(--dur-slow) var(--ease)}
.evc-more.is-open{max-height:60em}
.evc-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.4em;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);transition:opacity var(--dur-base) var(--ease)}
.evc-more.is-open::after{opacity:0}
.evc-moretoggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:var(--fs-sm);
  font-weight:var(--fw-bold);color:var(--text-link)}
.evc-moretoggle svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease)}
.evc-moretoggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- 3. SUB-CATEGORY CARDS ---------- */
.evc-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
.evc-sub{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;min-height:250px;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.evc-sub:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.evc-sub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
.evc-sub:hover img{transform:scale(1.05)}
.evc-sub::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,51,82,.92) 0%,rgba(12,51,82,.42) 52%,rgba(12,51,82,.1) 100%)}
.evc-sub__body{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.evc-sub__body h3{color:#fff;font-size:1.25rem;font-weight:var(--fw-bold)}
.evc-sub__body p{font-size:var(--fs-xs);color:rgba(255,255,255,.8);margin-top:7px;font-weight:var(--fw-light);
  line-height:1.55}
.evc-sub__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.evc-sub__foot .go{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);
  font-weight:var(--fw-bold);color:#fff}
.evc-sub__foot .go svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease)}
.evc-sub:hover .go svg{transform:translateX(5px)}
.evc-sub__foot .n{font-size:.75rem;color:rgba(255,255,255,.62)}
@media(max-width:900px){.evc-subs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.evc-subs{grid-template-columns:1fr}}

.evc-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.evc-quick a{padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease)}
.evc-quick a:hover{border-color:var(--accent);color:var(--text-heading);background:var(--accent-wash)}

/* ---------- 3. FILTER BAR + GRID ---------- */
.evc-filters{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  margin-top:var(--sp-7);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border-soft)}
.evc-chips{display:flex;flex-wrap:wrap;gap:8px}
.evc-chips button{padding:9px 18px;border:1.5px solid var(--border);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease)}
.evc-chips button:hover{border-color:var(--ev-sky);color:var(--text-heading)}
.evc-chips button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:#fff}
.evc-sort{display:flex;align-items:center;gap:9px;border:1.5px solid var(--border);border-radius:var(--r-pill);
  padding:9px 18px;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-heading)}
.evc-sort select{border:0;background:none;outline:0;font:inherit;font-weight:var(--fw-semi);cursor:pointer}
.evc-count{margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--text-secondary)}
.evc-count b{color:var(--text-heading)}
.evc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-5)}
@media(max-width:1040px){.evc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.evc-grid{grid-template-columns:1fr}}
.evc-none{grid-column:1/-1;text-align:center;padding:var(--sp-10) var(--sp-6);
  border:1.5px dashed var(--border);border-radius:var(--r-lg)}
.evc-none h3{font-size:1.2rem;margin-bottom:8px}
.evc-none p{color:var(--text-secondary)}
.evc-loadmore{display:flex;justify-content:center;margin-top:var(--sp-7)}

/* ---------- 4. OPERATOR STRIP ---------- */
.evc-operator{background:var(--surface-sunken);padding:var(--sp-10) 0;margin-top:var(--sp-10)}
.evc-opgrid{display:grid;grid-template-columns:1fr .9fr;gap:var(--sp-9);align-items:center}
.evc-opmedia{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/11}
.evc-opmedia img{width:100%;height:100%;object-fit:cover}
.evc-opstats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
.evc-opstats div{padding:16px 18px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--border-soft)}
.evc-opstats b{display:block;font-size:1.6rem;font-weight:var(--fw-black);color:var(--text-heading);
  letter-spacing:var(--ls-heading);line-height:1}
.evc-opstats span{display:block;margin-top:5px;font-size:.68rem;font-weight:var(--fw-bold);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--text-muted)}
@media(max-width:900px){.evc-opgrid{grid-template-columns:1fr;gap:var(--sp-7)}}

/* ---------- 5. TOPIC-TABBED FAQ ---------- */
/* The tabbed FAQ that lived here is gone: questions use the site-wide
   prose + accordion component (sections.css §19/§25). */


/* ---------- 6. CLOSING BAND ---------- */
.evc-band{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  padding:var(--sp-9) var(--sp-8);margin:var(--sp-10) 0}
.evc-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.evc-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(17,72,115,.95),rgba(4,120,179,.74) 62%,rgba(32,158,218,.44))}
.evc-band__in{max-width:620px;color:#fff}
.evc-band h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.3rem)}
.evc-band h2 .l1{display:block;font-weight:var(--fw-light)}
.evc-band h2 .l2{display:block;font-weight:var(--fw-bold)}
.evc-band p{margin-top:16px;color:var(--text-on-inverse-secondary);font-weight:var(--fw-light)}
.evc-band .evt-eyebrow{color:#fff}
.evc-band .evt-eyebrow::before{background:var(--accent)}
.evc-band .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-6)}
.evc-band .ev-btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(6px)}
.evc-band .ev-btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}