/* ==========================================================================
   EGYVACATIONS — BLOG INDEX — the filterable post grid
   assets/css/templates/blog-index.css
   Loads on top of tokens -> base -> chrome -> components -> sections.
   ========================================================================== */
/* ---------- 1. HEADER ---------- */
.evi-head{padding:var(--sp-8) 0 var(--sp-7);text-align:center}
.evi-head h1{max-width:11.988em;margin-inline:auto;font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;font-weight:var(--fw-light);letter-spacing:var(--ls-heading)}
.evi-head h1>span:where(:not([class])){font-weight:var(--fw-bold);letter-spacing:var(--ls-display)}
.evi-head h1 em{font-style:normal;color:inherit}
.evi-head .lede{max-width:var(--measure-head);margin:var(--sp-5) auto 0;font-size:var(--fs-lede);
  font-weight:var(--fw-light);color:var(--text-secondary)}
.evi-head .evt-eyebrow{justify-content:center}

.evi-search{max-width:520px;margin:var(--sp-7) auto 0;position:relative}
.evi-search .evt-control,.evi-searchbox{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-pill);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.evi-searchbox:focus-within{border-color:var(--control-border-focus);box-shadow:var(--control-focus-shadow)}
.evi-searchbox > svg{width:19px;height:19px;color:var(--ev-ocean);flex:none}
.evi-searchbox input{flex:1;min-width:0;align-self:stretch;border:0;outline:0;background:none;font:inherit;
  font-weight:var(--fw-medium)}
.evi-searchbox input::placeholder{color:var(--control-placeholder);font-weight:var(--fw-regular)}
.evi-searchbox button{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--text-muted)}
.evi-searchbox button:hover{background:var(--surface-sunken);color:var(--text-heading)}
.evi-searchbox button svg{width:13px;height:13px}
.evi-searchbox button[hidden]{display:none}

/* ---------- 2. FEATURED POST ---------- */
.evi-featured{display:grid;grid-template-columns:1.12fr 1fr;gap:0;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border-soft);background:var(--surface);margin-top:var(--sp-8);
  transition:box-shadow var(--dur-base) var(--ease)}
.evi-featured:hover{box-shadow:var(--shadow-2)}
.evi-featured__media{position:relative;overflow:hidden;background:var(--surface-sunken);min-height:330px}
.evi-featured__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.evi-featured:hover .evi-featured__media img{transform:scale(1.04)}
.evi-featured__flag{position:absolute;top:16px;left:16px;padding:6px 14px;border-radius:var(--r-sm);
  background:var(--ev-ocean);color:var(--ev-white);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:.1em}
.evi-featured__body{padding:var(--sp-8);display:flex;flex-direction:column;justify-content:center}
.evi-featured__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.evi-featured__meta .cat{padding:5px 12px;border-radius:var(--r-sm);background:var(--action);color:var(--ev-white);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.1em}
.evi-featured__meta .by{font-size:.75rem;font-weight:var(--fw-bold);letter-spacing:0;color:var(--text-muted)}
.evi-featured h2{font-size:clamp(1.4rem,2.4vw,1.95rem);font-weight:var(--fw-bold);line-height:1.2}
.evi-featured p{margin-top:14px;color:var(--text-secondary);font-weight:var(--fw-light)}
.evi-featured .readmore{display:inline-flex;align-items:center;gap:10px;margin-top:var(--sp-6);
  font-weight:var(--fw-bold);color:var(--text-heading);border-bottom:2px solid var(--ev-ocean);
  padding-bottom:5px;align-self:flex-start}
.evi-featured .readmore svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease)}
.evi-featured:hover .readmore svg{transform:translateX(5px)}
@media(max-width:900px){
  .evi-featured{grid-template-columns:1fr}
  .evi-featured__media{min-height:0;aspect-ratio:16/9}
  .evi-featured__body{padding:var(--sp-6)}
}

/* ---------- 3. FILTER BAR ---------- */
.evi-filters{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  margin-top:var(--sp-9);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border-soft)}
.evi-cats{display:flex;flex-wrap:wrap;gap:8px}
.evi-cats button{padding:9px 17px;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)}
.evi-cats button:hover{border-color:var(--ev-sky);color:var(--text-heading)}
.evi-cats button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--ev-white)}
.evi-cats button .n{opacity:.6;margin-left:6px;font-weight:var(--fw-regular)}
.evi-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)}
.evi-sort select{min-height:44px;border:0;background:none;outline:0;font:inherit;font-weight:var(--fw-semi);cursor:pointer}
.evi-count{margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--text-secondary)}
.evi-count b{color:var(--text-heading)}

/* ---------- 4. GRID ---------- */
.evi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-5)}
@media(max-width:980px){.evi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.evi-grid{grid-template-columns:1fr}}
.evi-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)}
.evi-none h3{font-size:1.2rem;margin-bottom:8px}
.evi-none p{color:var(--text-secondary);margin-bottom:18px}
.evi-more{display:flex;justify-content:center;margin-top:var(--sp-7)}
.evi-card__date{font-size:var(--fs-micro);color:var(--text-muted)}

/* ---------- 5. TOPIC HUBS ---------- */
.evi-hubs{background:var(--surface-sunken);padding:var(--sp-10) 0;margin-top:var(--sp-10)}
.evi-hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
.evi-hub{display:block;padding:var(--sp-6);border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--border-soft);transition:transform var(--dur-base) var(--ease),
  box-shadow var(--dur-base) var(--ease)}
.evi-hub:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.evi-hub .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--action);display:grid;
  place-items:center;color:var(--ev-white);margin-bottom:16px}
.evi-hub .ic svg{width:21px;height:21px}
.evi-hub h3{font-size:1.02rem;font-weight:var(--fw-bold)}
.evi-hub p{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:8px;line-height:1.6}
.evi-hub .n{display:inline-block;margin-top:14px;font-size:.75rem;font-weight:var(--fw-bold);
  letter-spacing:0;color:var(--text-link)}
@media(max-width:900px){.evi-hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.evi-hubgrid{grid-template-columns:1fr}}

/* ---------- 6. CLOSING BAND ---------- */


/* ---------- hubs pass 2026-10-20: server-printed cards + pager ---------- */
.evi-grid .evb-post[hidden],.evi-none[hidden],.evi-pager[hidden]{display:none}
.evi-grid .evb-post__meta{flex-wrap:wrap}
.evi-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:var(--sp-7)}
.evi-pager a,.evi-pager span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border-radius:var(--r-md);font-weight:var(--fw-semi);color:var(--text-heading)}
.evi-pager a{border:1px solid var(--border)}
.evi-pager a:hover{border-color:var(--ev-navy)}
.evi-pager [aria-current="page"]{background:var(--ev-navy);color:var(--ev-white)}
.evi-pager .evi-pager__step{padding:0 18px}
.evi-pager span.evi-pager__step{color:var(--text-muted)}
.evi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.evi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.evi-grid{grid-template-columns:minmax(0,1fr)}}
.evi-grid .evb-post__media img{max-width:100%;height:100%}

/* "Load more" of the author and category lists (egy_ev_pager()) */
.evi-more{display:flex;justify-content:center;margin-top:var(--sp-7)}
.evi-more .ev-btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* Blog category page (category.php): tinted header band, category chips, the newest article as a wide card */
.evi-head--cat{margin-bottom:var(--sp-6);padding:var(--sp-8) 0 var(--sp-7);background:var(--surface-sunken);border-bottom:1px solid var(--border-soft)}
.evi-head--cat .evt-eyebrow{display:flex;margin-bottom:var(--sp-3)}
.evi-head--cat h1{color:var(--text-heading)}
.evi-catnav{margin-top:var(--sp-6)}
.evi-catnav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.evi-catnav a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-heading);text-decoration:none;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.evi-catnav a:hover{border-color:var(--ev-navy)}
.evi-catnav a span{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--surface-sunken);font-size:var(--fs-micro);color:var(--text)}
.evi-catnav a[aria-current="page"]{background:var(--ev-navy);border-color:var(--ev-navy);color:#fff}
.evi-catnav a[aria-current="page"] span{background:rgba(255,255,255,.18);color:#fff}
@media(min-width:901px){
  .evx-col--blog .evb-posts > .evb-post:first-child{grid-column:1/-1;flex-direction:row}
  .evx-col--blog .evb-posts > .evb-post:first-child .evb-post__media{flex:0 0 58%;aspect-ratio:16/9}
  .evx-col--blog .evb-posts > .evb-post:first-child .evb-post__body{justify-content:center;padding:clamp(24px,3vw,44px)}
  .evx-col--blog .evb-posts > .evb-post:first-child h3{font-size:clamp(1.3rem,2vw,1.75rem)}
  .evx-col--blog .evb-posts > .evb-post:first-child p{font-size:var(--fs-base)}
}