/* ============================================================
   GET STARTUPS — Directory / Listing pages
   Shared by: startups.html · investors.html · incubators.html
              opportunities.html
   Depends on theme.css (tokens) + navbar.css + footer.css.
   ============================================================ */

:root{
  --dir-max:1320px;
  --dir-card:#ffffff;
  --dir-band:#F5FAF8;
  --dir-ring:0 1px 2px rgba(20,37,33,.04), 0 12px 28px -20px rgba(20,37,33,.30);
  --dir-ring-hover:0 2px 4px rgba(20,37,33,.05), 0 26px 46px -24px rgba(20,37,33,.38);
}

body{ background:#FBFDFC; overflow-x:hidden; }
img, svg{ max-width:100%; }
/* buttons rendered as links must not pick up the underline */
a.gs-btn{ text-decoration:none; }

.dir-shell{
  max-width:var(--dir-max);
  margin:0 auto;
  padding-inline:clamp(16px,3vw,40px);
}

/* ============================================================
   1 · PAGE HERO — breadcrumb, title, search bar, quick chips
   ============================================================ */
.dir-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:22px;
  padding:clamp(26px,4.4vw,46px) 0 clamp(28px,4.4vw,44px);
  background:linear-gradient(180deg,#F8FBFA 0%,#EFF6F3 100%);
  border-block:1px solid var(--line);
}
.dir-hero::before,
.dir-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
.dir-hero::before{
  inset-inline-start:-140px; top:-190px;
  width:420px; height:420px;
  background:radial-gradient(circle,rgba(10,164,88,.16),transparent 68%);
}
.dir-hero::after{
  inset-inline-end:-120px; bottom:-230px;
  width:460px; height:460px;
  background:radial-gradient(circle,rgba(10,164,88,.12),transparent 68%);
}

.crumbs{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600;
  color:var(--green-600);
  margin-bottom:14px;
}
.crumbs a{ color:var(--muted); text-decoration:none; transition:color .2s ease; }
.crumbs a:hover{ color:var(--green-600); }
.crumbs .sep{ color:var(--muted); opacity:.6; }

.dir-hero h1{
  margin:0 0 12px;
  font-size:clamp(26px,4.2vw,40px);
  font-weight:800;
  line-height:1.35;
  color:var(--ink);
}
.dir-hero .lede{
  margin:0 0 clamp(20px,3vw,30px);
  max-width:760px;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.9;
  color:var(--muted);
}

/* ---- search bar ---- */
.dir-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,190px) minmax(0,190px) 128px;
  gap:10px;
  padding:12px;
  background:var(--surface-strong);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 20px 44px -30px rgba(20,37,33,.42);
}
.dir-search .field{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.dir-search .field svg{
  position:absolute;
  inset-inline-start:16px;
  width:18px; height:18px;
  color:var(--green-600);
  pointer-events:none;
}
.dir-search input{
  width:100%;
  height:50px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  padding-inline:46px 14px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.dir-search input:focus{ border-color:var(--green-100); background:#F8FCFA; }
.dir-search input::placeholder{ color:#9BADA6; }

.dir-select{
  position:relative;
  min-width:0;
}
.dir-select select,
.f-select select{
  appearance:none;
  width:100%;
  height:50px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  padding-inline:16px 38px;
  cursor:pointer;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dir-select select:focus,
.f-select select:focus{
  border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(10,164,88,.12);
}
/* physical borders on purpose: an inline-relative chevron flips to
   point sideways under dir="rtl" */
.dir-select::after,
.f-select::after{
  content:"";
  position:absolute;
  inset-inline-end:16px; top:50%;
  width:8px; height:8px;
  margin-top:-6px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  pointer-events:none;
}
.dir-search .gs-btn{ height:50px; font-size:15px; border-radius:14px; }

/* ---- quick chips ---- */
.dir-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.qchip{
  height:38px;
  padding-inline:18px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s ease;
}
.qchip:hover{ border-color:var(--green-600); color:var(--green-600); transform:translateY(-1px); }
.qchip.is-on{
  background:var(--green-600);
  border-color:var(--green-600);
  color:#fff;
  box-shadow:0 12px 22px -14px rgba(10,164,88,.75);
}

/* ============================================================
   2 · LAYOUT — sidebar (start/right in RTL) + results
   ============================================================ */
.dir-layout{
  display:grid;
  grid-template-columns:296px minmax(0,1fr);
  gap:26px;
  align-items:start;
  padding-block:clamp(28px,4vw,44px) 0;
}

/* ---- sidebar ---- */
.dir-side{
  position:sticky;
  top:20px;
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px 20px;
  box-shadow:var(--dir-ring);
}
.side-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.side-head h2{ margin:0; font-size:19px; font-weight:800; color:var(--ink); }
.side-reset{
  background:none; border:none; padding:0;
  font-family:inherit; font-size:13px; font-weight:700;
  color:var(--green-600); cursor:pointer;
}
.side-reset:hover{ text-decoration:underline; }

.fgroup{ margin-bottom:20px; }
.fgroup > .flabel{
  display:block;
  margin-bottom:10px;
  font-size:14.5px;
  font-weight:800;
  color:var(--ink);
}
.f-select{ position:relative; }
.f-select select{ height:46px; font-size:13.5px; }

.f-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s ease;
}
.f-check:hover{ color:var(--ink); }
.f-check input{
  appearance:none;
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:6px;
  border:1.5px solid var(--line);
  background:#fff;
  cursor:pointer;
  position:relative;
  transition:background .18s ease, border-color .18s ease;
}
.f-check input:checked{ background:var(--green-600); border-color:var(--green-600); }
.f-check input:checked::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:5px; height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-1px) rotate(45deg);
}
.f-check input:focus-visible{ outline:2px solid var(--green-600); outline-offset:2px; }
.f-check:has(input:checked){ color:var(--ink); }

.side-actions{
  display:grid;
  gap:10px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.side-actions .gs-btn{ height:46px; font-size:14.5px; border-radius:12px; }

/* mobile filter drawer bits */
.filters-open{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:48px;
  border-radius:14px;
  margin-bottom:16px;
}
.filters-open svg{ width:17px; height:17px; }
.side-close{ display:none; }

/* ============================================================
   3 · RESULTS HEAD
   ============================================================ */
.res-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.res-head h2{ margin:0 0 4px; font-size:clamp(19px,2.4vw,24px); font-weight:800; color:var(--ink); }
.res-count{ font-size:13.5px; font-weight:600; color:var(--muted); }
.res-count b{ color:var(--green-600); }
.res-sort{ min-width:170px; }

.active-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.active-chips:empty{ display:none; }
.achip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding-inline:14px;
  border-radius:999px;
  border:1px solid rgba(10,164,88,.28);
  background:rgba(10,164,88,.10);
  color:#0B7C45;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease;
}
.achip:hover{ background:rgba(10,164,88,.18); }
.achip .x{ font-size:15px; line-height:1; opacity:.75; }

/* ============================================================
   4 · CARD GRID
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:18px;
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--dir-ring);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:cardIn .45s ease both;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--dir-ring-hover);
  border-color:rgba(10,164,88,.35);
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---- cover (incubators) ---- */
.card-cover{
  position:relative;
  height:118px;
  border-radius:13px;
  overflow:hidden;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.card-cover::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px);
  background-size:13px 13px;
  opacity:.55;
}
.card-cover::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 14%,rgba(255,255,255,.30),transparent 52%),
    linear-gradient(200deg,rgba(255,255,255,.10),rgba(0,0,0,.18));
}
.cover-ic{
  position:relative;
  z-index:1;
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.5);
}
.cover-ic svg{ width:26px; height:26px; }
.card-cover .cover-tag{
  position:absolute;
  z-index:2;
  top:10px; inset-inline-start:10px;
  height:24px;
  padding-inline:10px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#0B7C45;
  font-size:11px;
  font-weight:800;
}

/* ---- header (profile cards) ---- */
.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.card-title{ min-width:0; }
.card-title h3{
  margin:0 0 3px;
  font-size:16px;
  font-weight:800;
  line-height:1.45;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.card-title .sub{
  font-size:12.5px;
  font-weight:700;
  color:var(--green-600);
}
.avatar{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 8px 18px -10px rgba(20,37,33,.55);
}

.card-desc{
  margin:0 0 12px;
  font-size:12.8px;
  line-height:1.85;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding-inline:11px;
  border-radius:999px;
  background:var(--green-100);
  color:#0B7C45;
  font-size:11.5px;
  font-weight:700;
  margin-bottom:12px;
  max-width:100%;
}
.pill .dot{ opacity:.55; font-style:normal; }

.card-meta{
  display:grid;
  gap:7px;
  margin-bottom:12px;
}
.card-meta .row{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.3px;
  font-weight:600;
  color:var(--muted);
}
.card-meta .row svg{ width:13px; height:13px; color:var(--green-600); flex:0 0 auto; }

.card-foot{
  margin-top:auto;
  padding-top:12px;
  border-top:1px dashed var(--line);
}
.card-foot .fact{
  font-size:12.3px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:12px;
  line-height:1.7;
}
.card-foot .fact span{ font-weight:600; color:var(--muted); }
.card-foot .gs-btn{
  width:100%;
  height:40px;
  font-size:13.5px;
  border-radius:11px;
}
/* profile cards keep the save control next to the CTA — their top-left
   corner is already taken by the avatar */
.foot-row{ display:flex; align-items:center; gap:8px; }
.foot-row .gs-btn{ flex:1 1 auto; width:auto; }
.save-btn.save-sq{
  position:static;
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:11px;
}

/* saved / bookmark */
.save-btn{
  position:absolute;
  z-index:3;
  top:14px; inset-inline-end:14px;
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
}
.save-btn svg{ width:15px; height:15px; }
.save-btn:hover{ color:var(--red); border-color:rgba(224,72,62,.4); transform:scale(1.08); }
.save-btn.is-on{ color:#fff; background:var(--red); border-color:var(--red); }
.save-btn.is-on svg{ fill:currentColor; }

/* ============================================================
   5 · OPPORTUNITY CARD
   ============================================================ */
.card.opp{
  border-inline-start:4px solid var(--acc,var(--green-600));
  padding-top:18px;
}
.opp-badge{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding-inline:12px;
  border-radius:999px;
  background:var(--acc-soft,var(--green-100));
  color:var(--acc,var(--green-600));
  font-size:11.5px;
  font-weight:800;
  margin-bottom:12px;
}
.card.opp h3{
  margin:0 0 10px;
  font-size:15.5px;
  font-weight:800;
  line-height:1.6;
  color:var(--ink);
  padding-inline-end:34px;
}
.opp-box{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--dir-band);
  padding:11px 12px;
  margin-bottom:14px;
}
.opp-org{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  padding-bottom:9px;
  border-bottom:1px dashed var(--line);
}
.opp-org .name{
  font-size:12.3px;
  font-weight:700;
  color:var(--ink);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.opp-org .name em{ font-style:normal; font-weight:600; color:var(--muted); }
.opp-org .badge-sq{
  flex:0 0 auto;
  width:24px; height:24px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--acc,var(--green-600));
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.opp-line{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-top:6px;
}
.opp-line svg{ width:13px; height:13px; color:var(--acc,var(--green-600)); flex:0 0 auto; }
.opp-line.due{ color:var(--ink); font-weight:700; }
.opp-line.due.urgent{ color:var(--red); }

.opp-actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding-inline:13px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap;
  background:var(--acc-soft,var(--green-100));
  color:var(--acc,var(--green-600));
}
.status::before{
  content:"";
  flex:0 0 auto;
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
  animation:pulseDot 2s ease-in-out infinite;
}
.status.urgent{ background:rgba(224,72,62,.12); color:#C0392F; }
.status.closed{ background:rgba(93,110,104,.14); color:var(--muted); }
.status.closed::before{ animation:none; opacity:.6; }
.opp-actions .gs-btn{
  height:38px;
  padding-inline:18px;
  font-size:13px;
  border-radius:11px;
  white-space:nowrap;
  flex:1 1 auto;
}

/* ============================================================
   6 · INLINE CTA STRIP · PAGINATION · EMPTY
   ============================================================ */
.inline-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:22px;
  padding:20px 24px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(10,164,88,.13),rgba(10,164,88,.06));
  border:1px solid rgba(10,164,88,.18);
}
.inline-cta h3{ margin:0 0 5px; font-size:16.5px; font-weight:800; color:var(--ink); }
.inline-cta p{ margin:0; font-size:13px; color:var(--muted); line-height:1.8; }
.inline-cta .gs-btn{ height:46px; padding-inline:28px; font-size:14.5px; border-radius:12px; }

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:30px 0 0;
}
.pager button{
  min-width:42px;
  height:42px;
  padding-inline:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  transition:all .2s ease;
}
.pager button:hover:not(:disabled):not(.is-on){ border-color:var(--green-600); color:var(--green-600); }
.pager button.is-on{
  background:var(--green-600);
  border-color:var(--green-600);
  color:#fff;
  box-shadow:0 12px 20px -14px rgba(10,164,88,.8);
}
.pager button:disabled{ opacity:.4; cursor:not-allowed; }
.pager .gap{ color:var(--muted); padding-inline:2px; user-select:none; }

.empty{
  grid-column:1 / -1;
  text-align:center;
  padding:56px 24px;
  border:1.5px dashed var(--line);
  border-radius:20px;
  background:var(--dir-band);
}
.empty svg{ width:52px; height:52px; color:var(--green-600); opacity:.6; margin-bottom:14px; }
.empty h3{ margin:0 0 8px; font-size:18px; font-weight:800; color:var(--ink); }
.empty p{ margin:0 0 18px; font-size:14px; color:var(--muted); }

/* ============================================================
   7 · GREEN CTA BAND
   ============================================================ */
.cta-band{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:clamp(46px,6vw,76px);
  padding:clamp(46px,6vw,78px) 0;
  background:linear-gradient(120deg,#12A85E,#0AA458 55%,#079A50);
  color:#fff;
  text-align:center;
}
.cta-band::before,
.cta-band::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);
}
.cta-band::before{ inset-inline-start:-160px; top:-170px; width:400px; height:400px; }
.cta-band::after{ inset-inline-end:-190px; bottom:-220px; width:520px; height:520px; }
.cta-band h2{
  margin:0 0 14px;
  font-size:clamp(24px,3.6vw,38px);
  font-weight:800;
  line-height:1.4;
}
.cta-band p{
  margin:0 auto 28px;
  max-width:720px;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.9;
  color:rgba(255,255,255,.92);
}
.cta-band .row{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.cta-band .gs-btn{ height:52px; padding-inline:34px; font-size:15px; border-radius:14px; }
.btn-white{ background:#fff; color:var(--green-600); }
.btn-white:hover{ background:#F2FBF6; transform:translateY(-2px); }
.btn-line{ background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,.75); }
.btn-line:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }

/* ============================================================
   8 · DETAIL MODAL
   ============================================================ */
/* scroll lock is shared by the modal and the mobile filter drawer, so it
   must live outside the drawer's media query */
body.side-lock{ overflow:hidden; }

.modal{
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(14,40,34,.55);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal-card{
  width:min(680px,100%);
  max-height:88vh;
  overflow:auto;
  background:var(--dir-card);
  border-radius:24px;
  box-shadow:0 40px 90px -40px rgba(20,37,33,.6);
  transform:translateY(18px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.modal.is-open .modal-card{ transform:none; }
.modal-top{
  position:relative;
  padding:26px 26px 20px;
  background:linear-gradient(140deg,rgba(10,164,88,.14),rgba(10,164,88,.04));
  border-bottom:1px solid var(--line);
}
.modal-top .kicker{
  font-size:12.5px;
  font-weight:800;
  color:var(--green-600);
  margin-bottom:6px;
}
.modal-top h3{ margin:0 0 8px; font-size:clamp(19px,2.6vw,25px); font-weight:800; color:var(--ink); }
.modal-top p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--muted); }
.modal-close{
  position:absolute;
  top:18px; inset-inline-end:18px;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(20,37,33,.45);
  transition:all .2s ease;
}
.modal-close:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.modal-body{ padding:22px 26px 26px; }
.modal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.mstat{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--dir-band);
  padding:12px 14px;
}
.mstat .k{ font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px; }
.mstat .v{ font-size:14px; font-weight:800; color:var(--ink); line-height:1.6; }
.modal-body h4{
  margin:0 0 10px;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}
.modal-body .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.modal-body .tags span{
  height:30px;
  padding-inline:13px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:var(--green-100);
  color:#0B7C45;
  font-size:12.5px;
  font-weight:700;
}
.modal-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.modal-actions .gs-btn{ height:46px; padding-inline:26px; font-size:14px; border-radius:12px; flex:1 1 160px; }

/* toast */
.toast{
  position:fixed;
  inset-inline:0;
  bottom:26px;
  z-index:200;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.toast span{
  background:var(--ink);
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease;
}
.toast.is-on span{ opacity:1; transform:none; }

/* ============================================================
   9 · RESPONSIVE
   ============================================================ */
@media (max-width:1120px){
  .dir-search{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .dir-search .field{ grid-column:1 / -1; }
}
@media (max-width:1020px){
  .dir-layout{ grid-template-columns:1fr; }
  .filters-open{ display:flex; }
  /* Drawer sits on the sidebar's natural side (right under RTL), so it
     anchors to inline-start. transform is physical, hence the dir split:
     LTR hides it to the left, RTL hides it to the right. */
  .dir-side{
    position:fixed;
    z-index:130;
    inset-block:0;
    inset-inline-start:0;
    width:min(340px,86vw);
    border-radius:0;
    border:none;
    border-inline-end:1px solid var(--line);
    overflow-y:auto;
    visibility:hidden;
    transform:translateX(-100%);
    transition:transform .32s cubic-bezier(.2,.8,.3,1), visibility .32s ease;
    box-shadow:0 0 60px -20px rgba(20,37,33,.5);
  }
  [dir="rtl"] .dir-side{ transform:translateX(100%); }
  .dir-side.is-open{ transform:none !important; visibility:visible; }
  .side-close{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    font-size:19px; line-height:1;
    color:var(--ink);
    cursor:pointer;
  }
  .side-scrim{
    position:fixed;
    inset:0;
    z-index:125;
    background:rgba(14,40,34,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease, visibility .28s ease;
  }
  .side-scrim.is-open{ opacity:1; visibility:visible; }
}
@media (max-width:760px){
  .dir-search{ grid-template-columns:1fr 1fr; padding:10px; gap:8px; }
  .dir-search .gs-btn{ grid-column:1 / -1; }
  .res-head{ align-items:flex-start; }
  .res-sort{ width:100%; }
  .dir-quick{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .dir-quick::-webkit-scrollbar{ display:none; }
  .qchip{ flex:0 0 auto; }
  .inline-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .inline-cta .gs-btn{ width:100%; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .dir-search{ grid-template-columns:1fr; }
  .modal{ padding:0; align-items:flex-end; }
  .modal-card{ max-height:92vh; border-radius:24px 24px 0 0; }
  .cta-band .gs-btn{ width:100%; max-width:320px; }
  .pager button{ min-width:38px; height:38px; }
}