/* Bulgarian Villas — design polish layer (t_b3596514, assists t_180066b1).
   Loaded AFTER lux.css. Visual/CSS only: display typography, hero composition,
   card rhythm, colour refinement, and the 390px overflow fixes measured on
   home / /vili/ / villa / destination pages. No markup, no JS. */

/* ---------- 1. type: display settings that read expensive ---------- */
/* t_f04bc28b: this block used to re-declare --bg (#FBF9F5) and --line on top
   of lux.css (#FAF8F4 / #E7E3DB), so white cards sat on a slightly different
   warm white than the token spec — dropped here, the base tokens stand. Only
   real additions stay: one brass that passes AA as SMALL text, and the gutter
   on the spec's clamp. */
:root{
  --line-2:rgba(18,47,42,.10);
  --gutter:clamp(1.5rem,5vw,4rem);          /* spec §7: 24px @390 */
  --r-card:var(--r-md);                      /* one card radius, no 14px drift */
  --brass-ink:#8A6A3B;                       /* 4.7:1 on --bg, 5.0:1 on white */
  --shadow-onphoto:0 2px 6px rgba(6,20,17,.18),0 24px 60px rgba(6,20,17,.32);
}
body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;font-optical-sizing:auto}
/* the mobile drawer parks off-canvas to the right and inflates the document
   scroll width; `clip` on body contains it and (unlike `hidden`) leaves
   position:sticky on the header working */
body{overflow-x:clip}
h1,h2{text-wrap:balance}
.prose,.why p,.hero .sub{text-wrap:pretty}
h1{letter-spacing:-.032em;line-height:1.08}
h2{letter-spacing:-.022em;line-height:1.14}
h3{letter-spacing:-.012em;line-height:1.3}
.vprice .amt,.bcprice strong,.sbprice,.dist strong strong,.revbig strong{font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- 2. header: never a 30px overflow, word can shrink ---------- */
.hdr{flex-wrap:wrap;row-gap:.2rem}
.brand{min-width:0}
.brand .word{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr nav{margin-left:auto}
@media (max-width:820px){
  .hdr{column-gap:.6rem}
  .hdr .brand{margin-right:auto;max-width:calc(100% - 6.5rem)}
  .hdr nav{order:3;flex-basis:100%;margin-left:0;gap:1.1rem;font-size:.82rem;overflow-x:auto;scrollbar-width:none}
  .hdr nav::-webkit-scrollbar{display:none}
  .langs{margin-left:0}
}

/* ---------- 3. hero: dramatic, but the catalogue arrives sooner ---------- */
.hero{min-height:clamp(520px,72svh,700px);isolation:isolate}
.hero-bg{transform:scale(1.06);filter:saturate(1.03) contrast(1.02)}
/* top scrim for the transparent header + bottom scrim for the copy; plus a
   brass hairline at the base so the photo lands on the page instead of ending */
.hero::after{
  background:
    linear-gradient(180deg,rgba(11,30,26,.55) 0%,rgba(11,30,26,.10) 18%,rgba(11,30,26,0) 42%,rgba(11,30,26,.34) 74%,rgba(11,30,26,.62) 100%),
    radial-gradient(120% 90% at 20% 100%,rgba(11,30,26,.42) 0%,rgba(11,30,26,0) 62%);
}
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,rgba(168,131,79,.85),rgba(168,131,79,.15) 55%,transparent);
}
.heroinner{padding:var(--s9) var(--gutter) var(--s8)}
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 var(--s5);
  padding:.42rem .85rem .42rem .7rem;border-radius:var(--r-pill);
  background:rgba(11,30,26,.42);border:1px solid rgba(216,188,147,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#E8CFA9;font-size:.72rem;letter-spacing:.14em;
}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:#D8BC93;flex:none}
.hero h1{
  font-size:clamp(2.2rem,4.5vw,3.5rem);line-height:1.04;letter-spacing:-.034em;
  max-width:23ch;margin-bottom:var(--s4);text-wrap:balance;
}
.hero .sub{max-width:50ch;color:rgba(255,255,255,.92);font-size:1.02rem;line-height:1.55}
.herosearch{box-shadow:var(--shadow-onphoto);border:1px solid rgba(255,255,255,.7)}
.herosearch:hover{box-shadow:var(--shadow-onphoto),0 0 0 1px rgba(255,255,255,.9)}

/* ---------- 4. cards: photo-dominant, quiet metadata, clear price ---------- */
.grid{gap:var(--s6) var(--s5);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid.rich{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.grid > *{min-width:0}
.grid.rich .vmedia{aspect-ratio:4/3}
.vcard{gap:0}
/* image is a 4:3 well inside a clipped card: only the top corners round, or
   the bottom of the photo gets a second, inner radius (t_f04bc28b) */
.vmedia{border-radius:var(--r-md) var(--r-md) 0 0;outline:1px solid rgba(18,47,42,.06);outline-offset:-1px}
.vcard:hover .vmedia,.vcard:focus-visible .vmedia{outline-color:rgba(18,47,42,.16)}
.vmedia img{will-change:transform}
.vcard:hover .vmedia img{transform:scale(1.055)}
.vmedia::after{
  content:"";position:absolute;inset:auto 0 0 0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,30,26,0),rgba(11,30,26,.30));
  opacity:0;transition:opacity var(--t-hover) ease;
}
.vcard:hover .vmedia::after{opacity:1}
/* rating moves to the right so it never sits under the booking-mode pill */
.rate{top:12px;right:12px;left:auto;font-size:.8rem;padding:5px 9px}
.rate .star{font-size:.78rem}
.vbody{padding-top:var(--s3)}
.vtop{align-items:start}
.vcard h3{
  font-size:1.02rem;line-height:1.35;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;
}
.vloc{font-size:.82rem;color:var(--ink-3);margin-top:.15rem}
.vattrs{font-size:.82rem;color:var(--ink-2);margin-top:.2rem}
.vattrs:empty,.vloc:empty{display:none}
.vdist{font-size:.8rem;margin-top:.3rem}
.vprice{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line);display:flex;align-items:baseline;gap:.3rem}
.vprice .from{order:0;font-size:.78rem;text-transform:lowercase}
.vprice .amt{font-size:1.18rem}
.vprice .unit{order:3;font-size:.78rem}
.vcard .vview{bottom:var(--s3);right:var(--s3);opacity:.92;font-size:.7rem}
.pill-inst,.pill-inq{font-size:.72rem;letter-spacing:.02em;padding:.26rem .58rem}
.pill.tiny{font-size:.7rem}

/* ---------- 5. section heads + trust ---------- */
.sechead{padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.sechead h2{font-size:clamp(1.35rem,2.6vw,1.85rem)}
.more,.mlink{color:var(--brass-ink)}   /* 4.7:1 small brass text on --bg */
.more:hover,.mlink:hover{color:var(--ink)}
.block h2::after{width:36px;height:3px}
/* destination mosaics: photo labels need a scrim, not just a text-shadow */
.mosaic .main::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,30,26,0),rgba(11,30,26,.66));
}
.mname,.mcount{z-index:2}
.mlink{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem 0;font-weight:700}
.trustrow{gap:var(--s6) var(--s7)}
.trustrow div{position:relative;padding-left:1.6rem}
.trustrow div::before{
  content:"";position:absolute;left:0;top:.45rem;width:8px;height:8px;border-radius:2px;
  background:var(--accent-2);transform:rotate(45deg);
}
.trustrow strong{font-size:.96rem;letter-spacing:-.01em}

/* ---------- 6. results / layout grids: kill min-content push ---------- */
.results{grid-template-columns:250px minmax(0,1fr);min-width:0}
.filters{min-width:0}
.layout2{grid-template-columns:minmax(0,1fr) 380px}
.searchhead{padding:var(--s5) 0}
.searchhead .herosearch{box-shadow:var(--shadow-sm);border-color:var(--line)}
.searchhead .herosearch:hover{box-shadow:var(--shadow-md)}
.searchhead h1{font-size:clamp(1.7rem,2.8vw,2.15rem);letter-spacing:-.03em}
.sortbar{padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.mosaic,.mosaics,.tile,.mtile{min-width:0}

/* ---------- 7. villa page ---------- */
.gallery2{border-radius:var(--r-lg);overflow:hidden}
.villahead h1{letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.bookcard{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.bcprice strong{letter-spacing:-.03em}
.dist{border-radius:var(--r-card)}

/* ---------- 8. footer ---------- */
.ftr{padding-top:var(--s8)}
.ftrtrust strong{letter-spacing:-.005em}
.ftr a{transition:color var(--t-micro) ease}

/* ---------- 9. responsive: compact hero form, no full-screen form ---------- */
@media (max-width:860px){
  .results{grid-template-columns:minmax(0,1fr)}
  .layout2{grid-template-columns:minmax(0,1fr)}
  /* lux.css drops the mobile gutter to a fixed 1rem while the header and the
     hero keep var(--gutter) — one column, one inset (t_f04bc28b) */
  .wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
  /* filters become three swipeable chip rows instead of a 950px column */
  .filters{display:flex;flex-direction:column;gap:.4rem;border:0;padding:0 0 .5rem;margin-bottom:.4rem}
  .fgroup{display:flex;flex-direction:row;align-items:center;gap:.35rem;overflow-x:auto;padding:0 0 .2rem;scrollbar-width:none}
  .fgroup::-webkit-scrollbar{display:none}
  .fgroup h4{margin:0;flex:0 0 4.6rem;font-size:.64rem;letter-spacing:.06em}
  .fchk{
    flex:0 0 auto;white-space:nowrap;gap:.3rem;min-height:36px;
    border:1px solid var(--line);border-radius:var(--r-pill);
    padding:.3rem .65rem;background:var(--card);font-size:.82rem;
  }
  .fchk input{width:14px;height:14px;margin:0}
  .fchk em{margin-left:.25rem}
  .filters .btn.wide{margin-top:.5rem}
  .filters .reset{text-align:left}
  .hero{min-height:auto}
  .heroinner{padding:var(--s7) var(--gutter) var(--s6)}
  .hero h1{font-size:clamp(1.9rem,5.4vw,2.6rem);max-width:20ch;margin-bottom:.55rem}
  .hero .sub{
    font-size:.95rem;line-height:1.5;margin-bottom:var(--s5);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .kicker{margin-bottom:var(--s3)}
  .herosearch label:nth-of-type(5){display:none}
  .herosearch{
    grid-template-columns:1fr 1fr;gap:.5rem;padding:.55rem;
    border-radius:var(--r-lg);background:rgba(255,255,255,.97);
  }
  .herosearch label+label{padding-left:0;border-left:0}
  .herosearch label:nth-of-type(1){grid-column:1;grid-row:1}
  .herosearch label:nth-of-type(2){grid-column:1;grid-row:2}
  .herosearch label:nth-of-type(3){grid-column:2;grid-row:2}
  .herosearch label:nth-of-type(4){grid-column:2;grid-row:1}
  .herosearch button{grid-column:1/-1;grid-row:3;border-radius:var(--r-pill);margin-top:.1rem;min-height:46px}
  .herosearch label{background:var(--bg);border-radius:var(--r-sm);padding:.34rem .6rem;border:1px solid var(--line)}
  .herosearch label::after{top:1.6rem;right:.7rem}
  .herosearch select,.herosearch input{font-size:1rem}
}
@media (max-width:640px){
  .heroinner{padding:var(--s6) var(--gutter) var(--s6)}
  .hero h1{font-size:clamp(1.85rem,7.6vw,2.4rem);max-width:100%}
  .hero .sub{font-size:.94rem}
  .kicker{font-size:.66rem;letter-spacing:.11em}
  .herosearch button{min-height:46px}
  .vcard h3{font-size:1.02rem}
}
@media (max-width:420px){
  .trustrow{padding:var(--s5) var(--gutter)}
}

/* ---------- 10. states ---------- */
.vcard:focus-visible{outline:none}
.vcard:focus-visible .vmedia{outline:2px solid var(--accent-2);outline-offset:2px}
.tile:focus-visible,.mtile:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .hero-bg,.vmedia img,.mtile img{transform:none!important}
}

/* ---------- 11. homepage mosaic layout + search pagination (t_2c3ef7b8) ----------
   Layout rules lost when lux.css was rewritten on 8a19d17: the mosaics grid,
   the mside strip, photo aspect ratios and the 24-per-page pager. Kept here
   (loaded last) so they win regardless of layer order. */
.mosaics{display:grid;gap:var(--s7);margin-top:var(--s5)}
.mosaic{display:grid;gap:var(--s2);grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto}
.mosaic .main{grid-row:1/3}
.mtile{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--accent-soft);box-shadow:var(--shadow-sm);transition:box-shadow var(--t-hover,240ms) ease}
.mtile:hover,.mtile:focus-visible{box-shadow:var(--shadow-md)}
.mtile img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-zoom,300ms) ease-out}
.mtile:hover img{transform:scale(1.04)}
.mosaic .main{aspect-ratio:4/3}
.mside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);grid-column:2}
.mside .mtile{aspect-ratio:3/2}
.mname{position:absolute;left:var(--s3);bottom:calc(var(--s3) + 1.1rem);font-size:1.15rem;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(18,47,42,.7)}
.mcount{position:absolute;left:var(--s3);bottom:var(--s3);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(18,47,42,.7);opacity:.92}

.pager{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
}
.pgnum,.pgbtn,.pgell{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.4rem;height:2.4rem;padding:0 .6rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;
}
.pgnum{border:1px solid var(--line);color:var(--ink-2);background:var(--card);transition:border-color 150ms ease,color 150ms ease}
.pgnum:hover{border-color:var(--ink-3);color:var(--ink)}
.pgnum.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pgbtn{color:var(--ink-2);border:1px solid transparent}
.pgbtn:hover{color:var(--ink)}
.pgell{color:var(--ink-3)}
.pginfo{margin-top:var(--s2);text-align:center;font-size:.82rem}

@media (max-width:860px){
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .mosaic .main{grid-row:auto}
  .mside{grid-column:1}
}
@media (max-width:560px){
  .mside{grid-template-columns:1fr 1fr}
  .mside .mtile:nth-child(3){display:none}
}