/* Homepage compaction (t_cfea9e55).
   Loaded on "/" only, after the global layers, so the homepage can be short
   without touching the shared card/grid rules the search page depends on.

   1) "Vile recomandate": two rows of four instead of four rows of eighteen.
   2) "Destinații": a 2x6 photo wall instead of six 560px photo mosaics.
   3) Sticky mini search: revealed by assets/mini-search.js past the hero. */

/* ---------- 1. featured grid: 8 cards, 2 rows ---------- */
.grid.rich.hgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}
.hgrid .vcard{min-width:0}
.hgrid .vmedia{aspect-ratio:4/3}
.hgrid .vcard h3{font-size:1rem;line-height:1.25}
/* the per-week arithmetic and a second attribute line are what make a card
   tall; one line of attributes is enough for a teaser */
.hgrid .vattrs{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid.rich.hgrid .vweek{display:none}

/* Anything too narrow for four honest columns (tablet and phone) gets the same
   answer: two rows that scroll sideways, never four stacked rows. */
@media (max-width:1024px){
  .grid.rich.hgrid{
    grid-template-columns:unset;
    grid-template-rows:repeat(2,auto);grid-auto-flow:column;
    grid-auto-columns:min(46vw,250px);
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:.35rem;scrollbar-width:none;
  }
  .hgrid::-webkit-scrollbar{display:none}
  .hgrid .vcard{scroll-snap-align:start}
}
@media (max-width:640px){
  .grid.rich.hgrid{grid-auto-columns:min(72vw,270px)}
  /* the distance chip can wait for the villa page on a phone */
  .hgrid .vdist{display:none}
  .hgrid .vbody{padding-block:.6rem}
}

/* ---------- 2. destination wall: 2 rows x 6 photo tiles ---------- */
.destwall{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  margin-top:var(--s4);
}
.dwall{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-md);background:var(--accent-soft);
  aspect-ratio:4/3;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t-hover,240ms) ease,transform var(--t-hover,240ms) ease;
}
.dwall img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-zoom,300ms) ease-out}
.dwall::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,24,21,0) 38%,rgba(9,24,21,.72) 100%);
}
.dwall:hover,.dwall:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dwall:hover img{transform:scale(1.05)}
.dwall .dwname,.dwall .dwcount{
  position:absolute;left:.6rem;right:.6rem;z-index:1;color:#fff;
  text-shadow:0 1px 2px rgba(6,20,17,.35);
}
.dwall .dwname{top:auto;bottom:1.5rem;font-weight:650;font-size:.9rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwall .dwcount{bottom:.55rem;font-size:.74rem;opacity:.9}
.dwall:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

@media (max-width:1024px){
  .destwall{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* only the first eight survive the narrower viewport */
  .destwall .dwall:nth-child(n+9){display:none}
}
@media (max-width:640px){
  .destwall{
    grid-template-columns:none;
    grid-template-rows:repeat(2,auto);grid-auto-flow:column;
    grid-auto-columns:min(44vw,180px);
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:.35rem;scrollbar-width:none;
  }
  .destwall::-webkit-scrollbar{display:none}
  .destwall .dwall{scroll-snap-align:start;aspect-ratio:1/1}
  .destwall .dwall:nth-child(n+9){display:block}
  .destwall .dwname{font-size:.82rem}
}

/* ---------- 3. sticky mini search ---------- */
.ministicky{
  position:fixed;left:0;right:0;top:var(--hdr-h,68px);z-index:44;
  display:flex;justify-content:center;padding:.55rem var(--gutter);
  background:rgba(250,248,244,.96);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(18,47,42,.07);
  transform:translateY(-130%);opacity:0;pointer-events:none;
  transition:transform 240ms cubic-bezier(.2,.7,.2,1),opacity 180ms ease;
}
.ministicky[data-hidden="0"]{transform:none;opacity:1;pointer-events:auto}
.minisearch{
  display:flex;align-items:flex-end;gap:.5rem;width:min(100%,960px);
}
.minisearch .msf{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 0}
.minisearch .msf > span{
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650;
}
.minisearch select,.minisearch input{
  width:100%;min-width:0;height:2.4rem;padding:0 .55rem;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:#fff;color:var(--ink);font:inherit;font-size:.9rem;
}
.minisearch .msf-dest{flex:1.4 1 0}
.minisearch .msf-guests{flex:.55 1 0}
.minisearch button{
  flex:none;height:2.4rem;padding:0 1.1rem;border:0;border-radius:var(--r-ctl);
  background:var(--accent);color:#fff;font:inherit;font-size:.9rem;font-weight:650;
  cursor:pointer;
}
.minisearch button:hover{background:var(--accent-2)}

@media (max-width:760px){
  .minisearch{gap:.35rem}
  /* the labels eat the width on a phone; the placeholders and input types say
     the same thing */
  .minisearch .msf > span{display:none}
  .minisearch .msf-guests{display:none}   /* guests follow the dates on /vili/ anyway */
  .minisearch button{padding:0 .8rem}
}

@media (prefers-reduced-motion:reduce){
  .ministicky{transition:none}
  .dwall,.dwall img{transition:none}
}