/* Bulgarian Villas — destination & hub page template (t_afe0e14d).
   Loaded by the destination and hub views only (via extraHead), after
   lux.css and design-polish.css. Visual layer only: the markup these rules
   describe carries no new data. Scrim alphas are the measured .30/.47 pair
   from the homepage hero, so white text holds ~8:1 on any photo. */

.desthero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(420px,56vh,560px);
  color:#fff;background:var(--accent);
  isolation:isolate;
}
.desthero-bg{
  position:absolute;inset:0;z-index:-2;
  background-image:var(--photo);background-size:cover;background-position:center 58%;
  /* 0.72 brightness + the scrim below is what buys white text 4.5:1 on an
     average villa cover; the gradient alone topped out around 3.5:1. */
  filter:brightness(.72) saturate(1.03);
  transform:scale(1.04);
}
.desthero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* measured: the text band over the average villa cover composites to
     ~4:1 with white once the scrim is this heavy; the .30/.16 pair alone
     left the small breadcrumb line at ~3:1. */
  background:linear-gradient(180deg,
    rgba(18,47,42,.55) 0%,
    rgba(18,47,42,.20) 30%,
    rgba(18,47,42,.28) 60%,
    rgba(18,47,42,.70) 100%);
}
/* no photo in the catalogue: the forest gradient alone must still read */
.desthero.bare{background:linear-gradient(160deg,#1B423A 0%,#122F2A 70%)}

.desthero-in{
  position:relative;z-index:1;width:100%;max-width:var(--max);
  margin:0 auto;padding:var(--s8) var(--gutter) var(--s7);
}
.crumbsw{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  font-size:.8rem;letter-spacing:.04em;color:rgba(255,255,255,.92);
  margin:0 0 var(--s5);
}
.crumbsw a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.crumbsw a:hover{color:#fff;text-decoration-color:#D8BC93}
.crumbsw .sep{opacity:.6}

.desthero .kicker{color:#E5CDA7;margin:0 0 .7rem;text-shadow:0 1px 12px rgba(18,47,42,.5)}
.desthero h1{
  color:#fff;max-width:26ch;margin:0 0 var(--s4);
  font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.06;letter-spacing:-.035em;
  text-shadow:0 2px 28px rgba(18,47,42,.45);
  text-wrap:balance;
}
.destmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;
}
.destmeta > span{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .85rem;min-height:38px;border-radius:var(--r-pill);
  background:rgba(18,47,42,.42);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;
}
.destmeta .now{
  background:rgba(216,188,147,.94);border-color:transparent;color:#231609;font-weight:700;
}
.destmeta b{font-variant-numeric:tabular-nums}

/* ---------- intro: two or three lines, never a wall of copy ---------- */
.destintro{
  max-width:820px;margin:0 auto;padding-top:var(--s7);padding-bottom:var(--s2);
}
.destintro .lead{
  margin:0;font-size:1.12rem;line-height:1.65;color:var(--ink-2);
  border-left:2px solid var(--accent-2);padding-left:var(--s5);
  text-wrap:pretty;
}
.destintro .lead b{color:var(--ink);font-weight:600}

/* ---------- top villas ---------- */
.desttop{padding-top:var(--s6)}
.desttop .grid.rich{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

/* ---------- nearby chips: walk the region, not the homepage ---------- */
.destnear{padding-top:var(--s3);padding-bottom:var(--s6)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;min-height:42px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);box-shadow:var(--shadow-sm);
  font-size:.9rem;font-weight:600;color:var(--ink);
  transition:transform var(--t-hover) ease, box-shadow var(--t-hover) ease,
    border-color var(--t-hover) ease, background var(--t-hover) ease;
}
.chip:hover,.chip:focus-visible{
  transform:translateY(-2px);border-color:rgba(168,131,79,.55);
  background:#fff;box-shadow:var(--shadow-md);
}
.chipkm{font-size:.74rem;font-weight:500;letter-spacing:.03em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chiptype{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-ink);font-weight:700}

@media (max-width:640px){
  .desthero{min-height:380px}
  .desthero-in{padding:var(--s7) var(--gutter) var(--s6)}
  .desthero h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .destintro{padding-top:var(--s6)}
  .destintro .lead{font-size:1.02rem;padding-left:var(--s4)}
  .chips{gap:.4rem}
  .chip{padding:.45rem .75rem;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
  .chip,.chip:hover{transition:none;transform:none}
  .desthero-bg{transform:none}
}