/* Page heading over the search filter (owner's "Filter – Design próba 1", 2026-11-03), every page with a filter on
   both sites: title + lead, a three-photo collage with slanted white gaps, and the filter as one white bar overlapping
   the collage's bottom edge. No blue/red tinted field behind it: plain white. Markup from scripts/hero-x.mjs.
   Colours via var(--blue) (blue portal, red Georgia site). Loaded after page.css, so it wins over the old card look. */

.hero{background:#fff!important}
.hero::before,.hero .hero-bg{display:none!important}
.hero .hero-in{max-width:1032px;margin:0 auto;padding:30px 16px 6px!important;text-align:center}

.hx{text-align:center}
.hero h1.hx-h{margin:0;font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.06;letter-spacing:-.035em;color:var(--navy);text-shadow:none}
.hero h1.hx-h em{font-style:normal;color:var(--blue);position:relative;display:inline-block}
.hero h1.hx-h em svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.22em;color:var(--blue);overflow:visible}
.hx-lead{max-width:640px;margin:14px auto 0;font-size:13px;font-weight:400;line-height:1.5;color:#2A3550}

.hx-col{position:relative;margin:22px auto 0;height:clamp(200px,24vw,262px);display:flex;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px rgba(11,31,75,.10)}
.hx-p{position:relative;flex:1 1 0;margin-left:-20px;overflow:hidden;background:#E9EEF5}
.hx-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-p:first-child{margin-left:0;flex-grow:1.06;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
.hx-p:nth-child(2){clip-path:polygon(26px 0,100% 0,calc(100% - 26px) 100%,0 100%)}
.hx-p:last-child{flex-grow:1.06;clip-path:polygon(26px 0,100% 0,100% 100%,0 100%)}

/* The search card: one white bar over the collage's lower edge */
.hero .search{position:relative;z-index:2;max-width:none!important;margin:-34px 36px 0!important;background:#fff!important;border-radius:18px;box-shadow:0 14px 34px rgba(11,31,75,.14);text-align:left}
.hero .search>.s-top{display:none!important}
.hero .search>.s-tabs{background:transparent!important;border-bottom:1px solid #EEF2F8!important;border-radius:18px 18px 0 0;padding:0 14px}
.hero .search>.s-tabs [role=tablist]{padding-top:8px}
.hero .search .s-tab{height:34px;padding:0 16px}
.hero .search>.s-body{background:transparent!important;border-radius:0 0 18px 18px;padding:8px 10px 10px 8px;gap:8px 10px}
.hero .s-grid{gap:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.hero .field{height:54px;border:0;border-radius:10px;padding:0 30px 0 16px;background:transparent;box-shadow:none}
.hero .field::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:#E6EBF3}
.hero .s-grid .field:nth-child(4n+1)::before{display:none}
.hero .s-grid .field:nth-child(n+5){margin-top:2px}
.hero .s-grid .field:nth-child(n+5)::after{top:56%}
.hero .field>svg,.hero .field>.flag-ge{display:none}
.hero .field small{left:16px;top:10px;font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#6B7690}
.hero .field select,.hero .field input{padding:17px 30px 0 16px;font-size:13px;font-weight:600;letter-spacing:-.025em}
.hero .field:focus-within{background:#F6F8FC;border-color:transparent;box-shadow:none}
.hero .s-btn{flex:0 0 auto;height:46px;padding:0 28px;border-radius:24px}

/* The search-type tabs (Study Programs … Visa) sit at the bottom of the card, under the fields (owner, 2026-11-03) */
.hero .search{display:flex;flex-direction:column}
.hero .search>.s-body{order:1;border-radius:18px 18px 0 0!important}
.hero .search>.s-tabs{order:2;border-bottom:0!important;border-top:1px solid #EEF2F8;border-radius:0 0 18px 18px!important;align-items:center;padding:6px 14px 8px}
.hero .search>.s-tabs [role=tablist]{padding-top:0}
.hero .search .s-tab{border-radius:9px}

/* Portal Study Programs page: its own filter form in the same bar look */
.hero.hx-page{padding-bottom:0}
.hx-page+.wrap>.filters{position:relative;z-index:2;margin:-34px 52px 0;border-radius:18px;box-shadow:0 14px 34px rgba(11,31,75,.14)}
/* BASE RULE (owner, 2026-11-03): every filter overlaps the collage as on the homepage, 34px PC / 24px ≤900px (site.js
   sets the exact margin); the collage keeps the homepage's shadow and the Study Programs filter gets the homepage card's shadow */
.hx-page+.wrap>.filters{box-shadow:0 18px 44px rgba(11,31,75,.16),0 3px 10px rgba(11,31,75,.06)!important}

@media (max-width:900px){
  .hero .search{margin:-24px 4px 0!important}
  .hero .s-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .field::before{display:none}
  .hero .s-grid .field{border-bottom:1px solid #EEF2F8;border-radius:0}
  .hero .s-btn{flex:1 1 100%;margin-top:4px}
  .hx-page+.wrap>.filters{margin:-24px 4px 0}
}
@media (max-width:600px){
  .hero .hero-in{padding-top:22px!important}
  .hx-col{height:180px;border-radius:20px}
  .hx-p:nth-child(2){display:none}
}
.hero .search .s-tab{white-space:nowrap}
/* Tabs row at the bottom: 25% taller and centred (owner, 2026-11-03) */
.hero .search>.s-tabs{justify-content:center;padding:10px 14px 10px}
.hero .search>.s-tabs [role=tablist]{flex:1 1 auto;justify-content:center}
.hero .search .s-tab{height:42px}
/* The "Scroll down for more information" note sits at the very bottom of the card, under the tabs (owner, 2026-11-03) */
.hero .search>.s-notes{order:3;display:flex;flex-direction:column}
.hero .search>.s-notes .s-soon{padding:18px 24px 20px;gap:10px 12px;line-height:1.5;border-top:1px solid #EEF2F8;background:#F8FAFD;border-radius:0 0 18px 18px}
.hero .search>.s-notes .s-soon .s-down{padding:6px 12px;border-radius:999px;background:#FDECEE}
.hero .search:is([data-mode=apartments],[data-mode=jobs],[data-mode=insurance],[data-mode=documents],[data-mode=visa])>.s-tabs{border-radius:0!important}
.hero .search .s-tab[aria-selected=true]{background:var(--blue)!important;color:#fff!important}
/* The filter card never overlaps the content below: the heading gets its own room under the card, and the card's
   shadow shows in full (owner, 2026-11-03) */
.hero{overflow:visible!important}
.hero .hero-in{padding-bottom:44px!important}
.hero .search{box-shadow:0 18px 44px rgba(11,31,75,.16),0 3px 10px rgba(11,31,75,.06)!important}
.hero .search>.s-tabs{padding:12px 14px 14px}
@media (max-width:600px){.hero .hero-in{padding-bottom:32px!important}}
@media(min-width:601px){
  .hero .search>.s-tabs{padding:12px 22px 14px!important;background:transparent!important}
  .hero .s-tabs [role=tablist]{height:auto!important;padding:0!important;align-items:center!important}
  .hero .s-tabs .s-tab{border-radius:10px!important}
  .hero .s-tabs .s-tab[aria-selected=true]::before,.hero .s-tabs .s-tab[aria-selected=true]::after{display:none!important}
}
/* Tighter bottom of the card (owner, 2026-11-03): small post button (no bigger than a tab), less space around it,
   and half the space above and below the "Scroll down" note */
.hero .search .s-post-slot,.hero .search .s-post-slot-inner,.hero .search .s-post-row,.hero .search .s-post-in{margin:0!important;padding:0!important;min-height:0!important}
.hero .search .s-post{height:34px!important;padding:0 14px 0 11px!important;margin:6px 0 0!important;gap:6px!important;font-size:12px!important;font-weight:500!important;border-radius:9px!important;box-shadow:none!important}
.hero .search .s-post svg{width:14px!important;height:14px!important}
.hero .search>.s-tabs{padding-bottom:10px!important}
.hero .search>.s-notes .s-soon{padding:9px 24px 10px!important}
/* PC: the six tabs are the same size as the post button (owner, 2026-11-03) */
@media (min-width:901px){
  .hero .search .s-tab{height:34px!important;padding:0 14px 0 11px!important;gap:6px!important;font-size:12px!important;font-weight:500!important;border-radius:9px!important}
  .hero .search .s-tab svg{width:14px!important;height:14px!important}
  .hero .search>.s-tabs{padding-top:10px!important}
  .hero .search .s-tabs [role=tablist]{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px!important}
  .hero .search .s-tab{flex:0 0 auto!important;width:auto!important}
}
/* Phones and tablets (owner, 2026-11-03): no dividing lines just before and after the Search button, a Search button 20%
   narrower and centred, 25% less space under the card */
@media (max-width:900px){
  .hero .s-grid .field:last-child,.hero .s-grid .field:nth-child(odd):nth-last-child(2){border-bottom:0!important}
  .hero .search>.s-tabs{border-top:0!important}
  .hero .s-btn{flex:0 0 80%!important;width:80%!important;margin:6px auto 0!important}
}
@media (max-width:600px){.hero .hero-in{padding-bottom:15px!important}}
/* Typeable amount fields (tuition, rent, salary, budget): the same chevron as the other fields; the browser's own
   suggestion arrow stays clickable but invisible under it */
.hero .field-amt::after{display:block}
.hero .field-amt input::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:34px;height:100%;opacity:0;cursor:pointer}
/* Portal homepage: "Your future abroad. One search away." on one line (owner, 2026-11-03) */
.hero h1.hx-h.hx-one{font-size:clamp(26px,3.7vw,46px)}
@media (min-width:761px){.hero h1.hx-h.hx-one{white-space:nowrap}}