/* Extracted from resources/views/national/_style.blade.php. */
.nat-hero{padding:18px 0 6px}
  .nat-hero h1{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:1.8rem;line-height:1.15;margin:0 0 6px}
  .nat-hero p{color:#5b6470;margin:0;max-width:60ch}
  .nat-breadcrumb{font-size:.85rem;color:#6e747c;margin:14px 0 2px}
  .nat-breadcrumb a{color:#4a525c;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#c7ccd2}
  .nat-breadcrumb a:hover{color:#0e8373;text-decoration-color:#13b29c}
  .nat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:18px 0 8px}
  .nat-card{display:block;border:1px solid var(--line,#e8e1d3);border-radius:14px;overflow:hidden;background:#fff;
    color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
  .nat-card:hover{box-shadow:0 8px 24px rgba(20,30,50,.10);transform:translateY(-2px)}
  .nat-cover{aspect-ratio:16/10;background:#eef1f5 center/cover no-repeat;position:relative;overflow:hidden}
  .nat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .nat-cover .nat-count{position:absolute;left:10px;bottom:10px;background:rgba(15,20,30,.62);color:#fff;
    font-size:.78rem;padding:3px 9px;border-radius:999px;backdrop-filter:blur(2px)}
  .nat-cover .nat-scor{position:absolute;right:10px;top:10px;background:#13b29c;color:#fff;font-weight:700;
    font-size:.8rem;padding:3px 8px;border-radius:8px}
  .nat-cover .nat-situr{position:absolute;right:10px;top:10px;background:#0f766e;color:#fff;font-weight:800;
    font-size:.68rem;letter-spacing:.04em;padding:4px 8px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
  /* "curat de noi" — cazări with our own scrape/description content (vs provider-only). Top-left of the cover. */
  /* "profil complet" — a small progress bar of the listing's data completeness (photo+desc+price+room photos).
     Dark pill for contrast on any photo; fill colour differentiates AI description (violet) vs scrape/owner (green). */
  .nat-cover .nat-curat{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
    background:rgba(15,23,42,.82);color:#fff;font-weight:700;font-size:.66rem;letter-spacing:.01em;padding:4px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .nat-cover .nat-curat .nc-track{width:38px;height:5px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
  .nat-cover .nat-curat .nc-fill{display:block;height:100%;background:#13b29c;border-radius:999px}
  .nat-cover .nat-curat-ai .nc-fill{background:#a78bfa}  /* AI description = violet (vs green = scrape/owner) */
  /* fit/potrivire badge — shown only when the list ranks by an interest (criterii); distinct from the green
     general scor so the two are never confused. */
  .nat-cover .nat-fit{position:absolute;left:10px;top:10px;background:#6b4dff;color:#fff;font-weight:700;
    font-size:.8rem;padding:3px 7px;border-radius:8px;display:inline-flex;align-items:center;gap:4px}
  .nat-cover .nat-fit i{font-style:normal;font-weight:600;font-size:.6rem;text-transform:uppercase;letter-spacing:.03em;opacity:.85}
  .nat-fiton{margin:8px 0 0;font-size:.86rem;color:#48515d}
  .nat-fiton b{color:#5a3fe0}
  .nat-fiton-dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:#6b4dff;vertical-align:-1px;margin:0 2px}
  .nat-cover-ph{background:#eef1f0 url(/img/placeholder.svg) center/cover no-repeat}
  .nat-cover-il{position:relative}
  .nat-cover-il::after{content:'ilustrație';position:absolute;right:8px;bottom:8px;background:rgba(20,26,24,.55);color:#fff;font-size:.62rem;letter-spacing:.03em;border-radius:999px;padding:2px 8px;pointer-events:none}
  .nat-pret{margin:3px 0 0;font-size:.86rem;font-weight:700;color:#0c7d6d}
  .nat-pret span{font-weight:500;color:#6e7774;font-size:.74rem}
  /* type cards (landing) — taller, label overlaid on the cover */
  .nat-type .nat-cover{aspect-ratio:4/3;display:flex;align-items:flex-end;
    box-shadow:inset 0 -70px 60px -30px rgba(10,16,28,.72)}
  .nat-type-title{position:relative;color:#fff;font-weight:800;font-size:1.22rem;padding:12px 14px;
    text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .nat-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:14px;margin:18px 0 8px}
  .nat-theme-card{grid-column:span 4;border:1px solid var(--line,#e8e1d3);border-radius:14px;background:#fff;overflow:hidden;
    min-width:0}
  .nat-theme-card.wide{grid-column:span 6}
  .nat-theme-card.dominant{grid-column:1 / -1}
  .nat-theme-card.dominant .nat-theme-hero{min-height:260px}
  .nat-theme-hero{min-height:184px;background:#eef1f5 center/cover no-repeat;position:relative;display:flex;
    flex-direction:column;justify-content:flex-end;color:#fff;text-decoration:none;
    box-shadow:inset 0 -105px 80px -32px rgba(10,16,28,.82)}
  .nat-theme-hero .nat-scor{position:absolute;right:10px;top:10px;background:#13b29c;color:#fff;font-weight:700;
    font-size:.8rem;padding:3px 8px;border-radius:8px}
  .nat-theme-copy{position:relative;color:rgba(255,255,255,.88);font-size:.86rem;line-height:1.3;
    padding:0 14px 13px;max-width:42ch;text-shadow:0 1px 9px rgba(0,0,0,.5)}
  .nat-mini-rail{display:flex;gap:9px;overflow-x:auto;padding:11px 12px 10px;scroll-snap-type:x proximity;
    scrollbar-width:thin}
  .nat-mini-place{flex:0 0 230px;display:grid;grid-template-columns:54px 1fr auto;gap:9px;align-items:center;
    min-width:0;padding:7px;border-radius:10px;background:#f6f2e9;color:inherit;text-decoration:none;scroll-snap-align:start}
  .nat-mini-place:hover{background:#eef1f5}
  .nat-mini-photo{width:54px;aspect-ratio:1;border-radius:8px;background:#e9edf3 center/cover no-repeat}
  .nat-mini-text{min-width:0}
  .nat-mini-text b{display:block;font-size:.82rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nat-mini-text small{display:block;color:#59616b;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .nat-mini-score{background:#13b29c;color:#fff;font-weight:800;font-size:.76rem;border-radius:8px;padding:3px 7px}
  .nat-theme-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 12px}
  .nat-theme-regions{display:flex;gap:6px;overflow:hidden;min-width:0}
  .nat-theme-regions a{flex:0 0 auto;font-size:.74rem;color:#48515d;text-decoration:none;background:#f2f4f7;
    border-radius:999px;padding:6px 10px} /* touch ≥24px (a11y target-size) */
  .nat-theme-more{flex:0 0 auto;font-size:.8rem;color:#098472;text-decoration:none;font-weight:700;padding:8px 6px;margin:-8px -6px} /* touch target ≥24px (Lighthouse target-size) */
  .nat-body{padding:11px 13px 13px}
  .nat-body h3{margin:0 0 2px;font-size:1.02rem;line-height:1.2}
  .nat-loc{color:#6e747c;font-size:.82rem;margin:0 0 8px}
  .nat-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0}
  .nat-chip{font-size:.74rem;padding:2px 8px;border-radius:999px;background:#f2f4f7;color:#48515d}
  .nat-chip.on{background:#e6f7f3;color:#098472}
  .nat-meta{display:flex;gap:12px;flex-wrap:wrap;color:#6b7480;font-size:.78rem;margin-top:9px}
  .nat-meta span{display:inline-flex;align-items:center;gap:4px}
  .nat-sorts{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 2px}
  .nat-sorts a{font-size:.84rem;padding:5px 12px;border-radius:999px;border:1px solid #e2e5ea;
    color:#48515d;text-decoration:none}
  .nat-sorts a.on{background:#13b29c;border-color:#13b29c;color:#fff}
  .nat-chip-count{opacity:.62;margin-left:3px}
  .nat-sortmulti{position:relative;margin-left:auto}
  .nat-sortmulti>summary{list-style:none;cursor:pointer;font-size:.84rem;padding:5px 12px;border-radius:999px;
    border:1px solid #e2e5ea;color:#48515d;background:#fff;user-select:none}
  .nat-sortmulti>summary::-webkit-details-marker{display:none}
  .nat-sortmulti>summary b{color:#1d242d}
  .nat-sortmenu{position:absolute;right:0;top:100%;z-index:20;margin-top:7px;width:230px;max-height:390px;
    overflow:auto;background:#fff;border:1px solid #e2e5ea;border-radius:12px;box-shadow:0 12px 32px rgba(20,30,50,.14);
    padding:8px}
  .nat-sorthint{font-size:.75rem;color:#6e747c;padding:2px 7px 7px}
  .nat-sortmenu label{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;font-size:.86rem;cursor:pointer}
  .nat-sortmenu label:hover{background:#f4f6f8}
  .nat-sortapply{width:100%;margin-top:7px;padding:8px;border:0;border-radius:9px;background:#13b29c;color:#fff;font-weight:700;cursor:pointer}
  .nat-pager{display:flex;justify-content:center;gap:14px;margin:22px 0 6px}
  .nat-pager a,.nat-pager span{font-size:.9rem;padding:7px 16px;border-radius:10px;border:1px solid #e2e5ea;color:#48515d;text-decoration:none}
  .nat-pager span{opacity:.4}
  /* place detail — header/gallery/caracter/sentiment all reuse shared litoral classes (phead, pscore,
     pgal2, carbento, pcard, bar, lightbox); only the map wrapper + fact chips are national-specific. */
  .nat-section{margin:22px 0}   /* map wrapper only — content sections use the shared .pcard */
  .nat-facts{display:flex;flex-wrap:wrap;gap:10px}
  .nat-fact{background:#f6f2e9;border:1px solid #eceef2;border-radius:11px;padding:9px 13px;font-size:.86rem;color:#444c57}
  .nat-fact b{color:#1d242d}
  /* two-level zone pills: pe jos / cu mașina — bento grid */
  .nat-zona-level{margin:6px 0 14px}
  .nat-zona-mode{font-size:.82rem;font-weight:600;color:#0e8373;margin:0 0 9px;letter-spacing:.01em}
  .nat-pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .nat-pill{background:#f6f2e9;border:1px solid #eceef2;border-radius:14px;padding:12px 13px;display:flex;flex-direction:column}
  .nat-pill-n{font-size:1.45rem;font-weight:700;color:#0e8373;line-height:1}
  .nat-pill-l{font-size:.8rem;font-weight:600;color:#1d242d;margin-top:3px}
  .nat-pill-top{margin-top:7px;color:#6e757f;font-size:.74rem;line-height:1.42}
  @media(max-width:560px){
    .nat-pills{grid-template-columns:1fr 1fr;gap:8px}
    .nat-pill{padding:11px 12px;border-radius:13px}
    .nat-pill-n{font-size:1.3rem}
  }
  /* discovery filter bar — chips grouped by pillar, multi-select (modern) */
  .nat-filters{display:flex;flex-direction:column;gap:9px;margin:14px 0 20px;padding:14px 16px;background:#fff;
    border:1px solid #eceef2;border-radius:16px;box-shadow:0 1px 2px rgba(20,40,40,.04)}
  .nf-group{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .nf-glabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6e757c;min-width:78px}
  .nf-chips{display:flex;flex-wrap:wrap;gap:7px}
  .nf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid #e2e5ea;
    background:#fff;color:#3a424c;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .12s,color .12s,background .12s}
  .nf-chip:hover{border-color:#13b29c;color:#0c7e6f}
  .nf-chip .nf-n{font-size:11px;color:#70757a;font-weight:600}
  .nf-chip.on{background:#13b29c;border-color:#13b29c;color:#fff}
  .nf-chip.on .nf-n{color:rgba(255,255,255,.85)}
  .nf-clear{font-size:12.5px;color:#b5562f;font-weight:600;text-decoration:none;align-self:flex-start;margin-top:2px}
  /* theme chips on cards/detail */
  .nat-teme{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0}
  .nat-teme .tt{font-size:11.5px;color:#0c7e6f;background:#eaf7f4;border:1px solid #d4ece6;padding:2px 8px;border-radius:999px}
  .nat-teme .tt.tt-soft{color:#6b7773;background:#f2f5f4;border-color:#e6ece9}  /* reframed − (liniște seara/tot anul) — neutral */
  /* ===== Listing pages: content stays at its normal width but moves LEFT; the map (fixed) fills the
     space to the right, from under the nav line to the bottom. Only the map shrinks as the viewport
     narrows; below 1302px (map would be < a 242px card) it is hidden and content re-centers as before.
     Scoped via body:has(#listMap) so it never affects the homepage or other pages. ===== */
  #listMap{display:none}
  .place-map #map{height:340px;border-radius:14px;overflow:hidden}   /* place page default: map inline at the bottom */
  /* nav matches the content column so logo/Caută don't float (listing + place pages; default centered 1060) */
  body:has(#listMap) .navin,
  body:has(.place-map) .navin{max-width:1060px;padding-inline:18px}
  @media (min-width:1302px){
    body:has(#listMap) .wrap,
    body:has(.place-map) .wrap{max-width:1060px;margin:0}        /* content moves left */
    body:has(#listMap) .navin,
    body:has(.place-map) .navin{max-width:none}                  /* logo to the page's left edge */
    /* map fills a fixed column on the right (listing: $listMap; place: .place-map) */
    body:has(#listMap) #listMap,
    body:has(.place-map) .place-map{display:block;position:fixed;top:var(--navh,55px);right:0;bottom:0;left:1060px;
      margin:0;background:#e9eef2;border-left:1px solid var(--line);z-index:5}
    #listMap .maplibregl-map,
    .place-map .maplibregl-map{width:100%;height:100%}
    .place-map #map{height:100%;border-radius:0}                 /* fill the right column (override the 340px) */
  }
  .nat-localities{margin:26px 0 8px}
  .nat-localities .sec-h{margin-bottom:10px}
  .nat-place-summary{margin:0 0 13px;color:#343d48;line-height:1.6;font-size:.96rem}
  /* contact CTAs reuse the shared litoral .pbtn classes (from layout) for a consistent look;
     .pbtn.fb.unlock lives only in the litoral place view's scoped style, so re-declare it here. */
  .pbtn.fb.unlock{width:100%;cursor:pointer;border:0}
  @media (max-width: 980px){
    .nat-theme-card,.nat-theme-card.wide{grid-column:span 6}
    .nat-theme-card.dominant{grid-column:1 / -1}
  }
  @media (max-width: 640px){
    .nat-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
    .nat-theme-card{grid-column:span 1}
    .nat-theme-card.wide{grid-column:span 2}
    .nat-theme-card.dominant{grid-column:1 / -1}
    /* Layoutul cozii (user 2026-07-05): apă+retras · CULTURĂ full · noapte+urban · BALNEAR full.
       .mfull = doar lățime (nu transformă cardul în featured cu rail). Paritate: 8 jumătăți = 4 rânduri curate. */
    .nat-theme-card.mfull{grid-column:1 / -1}
    .nat-theme-card.dominant .nat-theme-hero{min-height:190px}
    .nat-theme-hero{min-height:150px}
    .nat-theme-card:not(.wide):not(.mfull) .nat-theme-hero{min-height:132px}
    .nat-theme-card:not(.wide):not(.mfull) .nat-mini-rail{display:none}
    .nat-theme-card:not(.wide):not(.mfull) .nat-theme-regions{display:none}
    .nat-theme-card:not(.wide) .nat-theme-more{font-size:.76rem}
    .nat-type-title{font-size:1.02rem;padding:10px 11px 2px}
    .nat-theme-copy{font-size:.78rem;padding:0 11px 10px}
    .nat-mini-place{flex-basis:210px}
  }

  /* ============================================================
     HOMEPAGE — same bento, same rules; just spread across the full
     viewport instead of being capped at the 1060px .wrap, so it stops
     looking like a narrow island on wide desktops. Other pages untouched.
     ============================================================ */
  /* ============================================================
     HOMEPAGE (cozycozy-inspired): full-bleed green hero with a centered
     logo + inline autocomplete, then a horizontal carousel of theme cards.
     :has() lifts the .wrap cap only on the landing; inner sections re-center.
     ============================================================ */
  /* Desktop shows the rearranged block; mobile keeps the ORIGINAL bento (.home-mobile).
     The full-bleed cap-lift is scoped to desktop so it never touches the mobile wrap. */
  .home-desktop{display:none}
  .nat-inner{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3.5vw,40px)}
  @media (min-width:769px){
    .home-desktop{display:block}
    .home-mobile{display:none}
    .wrap:has(.home){max-width:none;padding:0 0 56px}
    .wrap:has(.home) .foot{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3.5vw,40px)}
    /* carousel section spans the full width (hero stays centered) → more cards visible */
    .home-desktop .nat-inner{max-width:none}
    /* dissolve the white nav band into the green hero on the landing: green goes to the top,
       the nav logo is hidden (it now lives centered in the hero), account controls turn white */
    body:has(.home-desktop) .nav{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:0;backdrop-filter:none}
    body:has(.home-desktop) .nav .brand{display:none}
    body:has(.home-desktop) .nav .navright,
    body:has(.home-desktop) .nav .links a{color:#fff}
  }

  /* hero */
  .home-hero{background:radial-gradient(125% 170% at 78% -25%,#22d4ba 0%,#0e7d70 47%,#053f39 100%);color:#fff}
  .hh-in{max-width:940px;margin:0 auto;padding:clamp(28px,3.1vw,52px) 20px clamp(40px,4.2vw,68px);
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
  .hh-logo{display:inline-flex;align-items:center;gap:15px;color:#fff;font-weight:800;letter-spacing:-.035em;
    line-height:1;font-size:clamp(48px,6vw,74px);margin-bottom:2px}
  .hh-logo svg{width:82px;height:82px;flex:none}
  .home-hero h1{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:#fff;
    font-size:clamp(36px,5.2vw,60px);line-height:1.04}
  /* wide enough to sit on one line on normal desktops; no nowrap → wraps gracefully when narrow */
  .hh-tag{margin:0;font-size:clamp(15px,1.6vw,19px);line-height:1.5;color:rgba(255,255,255,.92);max-width:none}
  .hh-tag i{font-style:italic}.hh-tag b{font-weight:700;color:#fff}
  /* same visual language as the carousel buttons (.nat-cbtn): 42px, 1px border, pill, white, subtle shadow */
  .hh-search{position:relative;width:100%;max-width:720px;margin-top:2px}
  .hh-search>.spk{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--teal);filter:none}
  .hh-search input{width:100%;height:42px;border:1px solid var(--line);border-radius:999px;padding:0 22px 0 46px;
    font-size:19px;color:var(--ink);background:#fff;box-shadow:0 2px 8px rgba(20,40,36,.07);outline:0}
  .hh-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
  .hh-results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border-radius:16px;text-align:left;
    box-shadow:0 22px 54px rgba(0,0,0,.28);overflow:hidden auto;max-height:62vh;z-index:25}
  .hh-results[hidden]{display:none}

  /* section header + carousel controls */
  .nat-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:clamp(32px,4.5vw,54px) 0 14px}
  .nat-sec-head .sec-h{margin:0}
  .nat-cbtns{display:flex;gap:8px;flex:none}
  .nat-cbtn{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);
    font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(20,40,36,.07)}
  .nat-cbtn:hover{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)}

  /* carousel — reuses .nat-theme-card / .nat-mini-* but laid out as a horizontal rail */
  .nat-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .nat-carousel .nat-theme-card{flex:0 0 clamp(280px,30vw,344px);scroll-snap-align:start;display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(20,40,36,.08)}
  .nat-carousel .nat-theme-hero{min-height:172px}
  .nat-carousel .nat-mini-rail{flex-direction:column;overflow:visible;gap:8px;padding:11px 12px 4px}
  .nat-carousel .nat-mini-place{flex:0 0 auto;width:100%}
  .nat-carousel .nat-theme-foot{margin-top:auto}
  @media (max-width:520px){
    .nat-carousel .nat-theme-card{flex-basis:82vw}
    .nat-cbtns{display:none}
  }