/* ============================================================
   Experts Business First — "Explore More Flights" destination index.
   Used on money, hub, flight and static pages via footernav.blade.php.
   Scoped to .ebf-explore only.
   ============================================================ */

.ebf-explore{
  --ex-navy:#14202B;
  --ex-accent:#C4400E;
  --ex-ink:#14202B;
  --ex-soft:#4A6173;
  --ex-line:#DDE7EF;
  --ex-paper:#fff;
  --ex-haze:#F4F8FC;
  padding:clamp(2.75rem,5.2vw,4.5rem) 0;
  background:var(--ex-haze);
}

.ebf-explore__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.ebf-explore__intro{min-width:0}
.ebf-explore__kicker{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 .7rem;font-size:.72rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase;color:var(--ex-accent)}
.ebf-explore__kicker::before{content:"";width:34px;height:1px;background:currentColor}
/* 1.45rem, not 2.6rem. This is the site-wide footer directory and it was
   rendering at 41.6px - the largest h2 on every page type, a third bigger than
   the FAQ heading and half as big again as every content heading. The least
   important band on the page was shouting loudest. */
.ebf-explore h2{margin:0;font-size:clamp(1.25rem,2vw,1.45rem);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ex-ink)}
.ebf-explore__lead{margin:.6rem 0 0;font-size:.98rem;line-height:1.6;color:var(--ex-soft);max-width:52ch}

.ebf-explore__search{position:relative;display:flex;align-items:center;flex:0 1 320px;min-width:min(100%,260px)}
.ebf-explore__search svg{position:absolute;left:1rem;width:18px;height:18px;color:var(--ex-soft);pointer-events:none}
.ebf-explore__search input{
  width:100%;min-height:50px;padding:.75rem 1rem .75rem 2.9rem;
  border:1.5px solid var(--ex-line);border-radius:999px;background:var(--ex-paper);
  font-family:inherit;font-size:.94rem;color:var(--ex-ink);
  transition:border-color .2s,box-shadow .2s;
}
.ebf-explore__search input::placeholder{color:#94A8B8}
.ebf-explore__search input:focus{outline:none;border-color:var(--ex-accent);box-shadow:0 0 0 3px rgba(240,83,28,.15)}

/* --------------------------------------------------- filters ---- */
.ebf-explore__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.4rem}
.ebf-explore__pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .95rem;border-radius:999px;
  border:1.5px solid var(--ex-line);background:var(--ex-paper);
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--ex-soft);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.ebf-explore__pill span{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .32rem;
  border-radius:999px;background:var(--ex-haze);color:var(--ex-soft);
  font-size:.72rem;font-weight:700;transition:background .2s,color .2s;
}
.ebf-explore__pill:hover{border-color:rgba(240,83,28,.4);color:var(--ex-ink)}
.ebf-explore__pill.is-on{background:var(--ex-navy);border-color:var(--ex-navy);color:#fff}
.ebf-explore__pill.is-on span{background:rgba(255,255,255,.16);color:#fff}
.ebf-explore__pill:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}

/* ----------------------------------------------------- groups ---- */
.ebf-explore__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;align-items:start}
.ebf-explore__group{
  border:1px solid var(--ex-line);border-radius:18px;background:var(--ex-paper);
  padding:1.15rem 1.15rem 1rem;
}
.ebf-explore__group[hidden]{display:none}
.ebf-explore__region{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin:0 0 .55rem;padding-bottom:.6rem;border-bottom:1px solid var(--ex-line);
  font-size:.95rem;font-weight:650;letter-spacing:-.01em;color:var(--ex-ink);
}
.ebf-explore__region em{
  font-style:normal;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 .35rem;
  border-radius:999px;background:rgba(240,83,28,.1);color:var(--ex-accent);font-size:.72rem;font-weight:700;
}

.ebf-explore__list{list-style:none;margin:0;padding:0}
.ebf-explore__list li[hidden]{display:none}
.ebf-explore__list a{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.6rem;
  padding:.55rem .5rem;margin:0 -.5rem;border-radius:10px;
  text-decoration:none;color:var(--ex-ink);
  transition:background .18s,color .18s;
}
.ebf-explore__list a:hover{background:var(--ex-haze)}
.ebf-explore__list a:focus-visible{outline:2px solid var(--ex-accent);outline-offset:-2px}
.ebf-explore__city{font-size:.92rem;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ebf-explore__fare{font-size:.86rem;font-weight:700;color:var(--ex-accent);white-space:nowrap}
.ebf-explore__fare--ask{color:var(--ex-soft);font-weight:600}
.ebf-explore__go{
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  color:var(--ex-soft);opacity:0;transform:translateX(-3px);
  transition:opacity .18s,transform .18s,color .18s;
}
.ebf-explore__go svg{width:13px;height:13px}
.ebf-explore__list a:hover .ebf-explore__go{opacity:1;transform:none;color:var(--ex-accent)}

.ebf-explore__empty{margin:1.25rem 0 0;color:var(--ex-soft);font-size:.95rem}
.ebf-explore__note{margin:1.25rem 0 0;font-size:.78rem;color:var(--ex-soft)}

@media (max-width:640px){
  .ebf-explore__head{flex-direction:column;align-items:stretch}
  .ebf-explore__search{flex-basis:auto}
  .ebf-explore__search input{font-size:16px}
  .ebf-explore__grid{grid-template-columns:1fr}
  .ebf-explore__filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-1rem;padding-inline:1rem}
  .ebf-explore__filters::-webkit-scrollbar{display:none}
  .ebf-explore__pill{flex:0 0 auto}
  .ebf-explore__go{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ebf-explore__pill,.ebf-explore__list a,.ebf-explore__go,.ebf-explore__search input{transition:none}
}

/* The filter row bleeds to the screen edge with margin-inline:-1rem so chips
   can scroll flush to the edge. Its .container parent has 12px of padding, not
   16px, so 4px escaped on each side and every money, hub and airline page
   scrolled sideways by 4px.
   
   Clipping the section contains the bleed whatever the container's padding
   happens to be at a given breakpoint. overflow-x:clip rather than hidden:
   clip does not create a scroll container, so it cannot break a sticky child
   or swallow the row's own horizontal scrolling. */
.ebf-explore{overflow-x:clip}