/* ============================================================
   LORICALY — pagine
   ============================================================ */

/* ---------- HERO (home) ---------- */
.hero { position: relative; overflow: clip;
  background: linear-gradient(180deg, transparent 48%, var(--md-background) 100%), var(--grad-brand-soft); }
.hero__blob {
  position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; z-index: 0;
  background: var(--grad-brand);
}
.hero__blob--1 { width: 420px; height: 420px; top: -120px; right: -80px; }
.hero__blob--2 { display: none; }
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(2rem,5vw,4rem);
  align-items: center; padding-block: clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem);
}
.hero h1 { margin: 1rem 0 0; color: var(--md-primary); }
.hero h1 .alt { color: var(--lime-deep); }
.hero__lead { margin: 1.25rem 0 2rem; max-width: 46ch; color: var(--md-on-surface-variant); }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero__stat strong { display: block; font: var(--type-headline-m); color: var(--md-primary); }
.hero__stat span { font: var(--type-body-s); color: var(--md-on-surface-variant); }
.hero__art {
  position: relative; border-radius: var(--shape-2xl); overflow: hidden;
  box-shadow: var(--el-4); aspect-ratio: 4/3;
}
.hero__art--photo { aspect-ratio: auto; height: clamp(380px, 42vw, 560px); box-shadow: none; }
.hero__art img, .hero__art svg { width: 100%; height: 100%; object-fit: cover; }
.hero__pill {
  position: absolute; left: 1rem; bottom: 1rem;
  background: color-mix(in srgb, var(--md-surface) 92%, transparent);
  backdrop-filter: blur(8px); border-radius: var(--shape-l);
  padding: .7rem 1rem; box-shadow: var(--el-2); display: flex; align-items: center; gap: .6rem;
}
.hero__pill .dotmark { width: 30px; height: 30px; }
@media (max-width: 860px){
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; aspect-ratio: 16/10; }
  .hero__art--photo { height: auto; aspect-ratio: 16/11; }
}

/* wave organica */
.wave-sep { line-height: 0; }
.wave-sep svg { width: 100%; height: clamp(40px,6vw,80px); }

/* ---------- search bar (Airbnb-like) ---------- */
.searchbar {
  display: flex; align-items: center; gap: .25rem; background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant); border-radius: var(--shape-full);
  box-shadow: var(--el-2); padding: .35rem .35rem .35rem 0; max-width: 760px; margin-inline: auto;
}
.searchbar__field { flex: 1; padding: .55rem 1.25rem; border-right: 1px solid var(--md-outline-variant); cursor: pointer; }
.searchbar__field:last-of-type { border-right: none; }
.searchbar__field label { display: block; font: var(--type-label-m); letter-spacing: .04em; color: var(--md-on-surface); }
.searchbar__field span, .searchbar__field input, .searchbar__field select {
  font: var(--type-body-s); color: var(--md-on-surface-variant); border: none; background: none; padding: 2px 0 0; width: 100%; }
.searchbar__btn { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--md-primary); color: #fff; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 680px){
  .searchbar { flex-wrap: wrap; border-radius: var(--shape-xl); padding: .5rem; gap: .4rem; }
  .searchbar__field { border-right: none; border-bottom: 1px solid var(--md-outline-variant); width: 100%; }
  .searchbar__field:nth-last-child(2){ border-bottom: none; }
  .searchbar__btn { width: 100%; border-radius: var(--shape-full); height: 46px; }
}

/* ---------- section header ---------- */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.sec-head h2 { margin: .5rem 0 0; }
.sec-head p { margin: .5rem 0 0; max-width: 52ch; color: var(--md-on-surface-variant); }

/* ---------- features "perché Loricaly" ---------- */
.features { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.feature { padding: 1.5rem; border-radius: var(--shape-xl); background: var(--md-surface-container-low); }
.feature__ic { width: 52px; height: 52px; border-radius: var(--shape-l); display: grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container); margin-bottom: 1rem; }
.feature__ic svg { width: 26px; height: 26px; }
.feature h3 { margin: 0 0 .35rem; font: var(--type-title-m); }
.feature p { margin: 0; font: var(--type-body-s); color: var(--md-on-surface-variant); }
@media (max-width: 900px){ .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .features { grid-template-columns: 1fr; } }

/* ---------- split (immagine + testo) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split__art { border-radius: var(--shape-2xl); overflow: hidden; box-shadow: none; aspect-ratio: 5/4; }
.split__art img, .split__art svg { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split__art { aspect-ratio: 16/10; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad-dark); color: #EAF6F1; border-radius: var(--shape-2xl); padding: clamp(2.5rem,5vw,4rem); text-align: center; }
.cta-band h2 { color: #fff; margin: 0 0 .75rem; }
.cta-band p { margin: 0 auto 2rem; max-width: 50ch; color: #BFE0D5; }

/* ============================================================
   PAGINA CAMERA
   ============================================================ */
.room-head { padding-top: 1.5rem; }
.room-head h1 { margin: .6rem 0 .4rem; }
.gallery__more.btn { position: absolute; }

.room-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; margin-top: 2.5rem; }
@media (max-width: 980px){ .room-grid { grid-template-columns: 1fr; } }

.highlight { display: flex; gap: 1rem; padding: 1rem 0; align-items: flex-start; }
.highlight svg { width: 26px; height: 26px; color: var(--md-primary); flex-shrink: 0; margin-top: 2px; }

.bed-card { padding: 1.25rem; max-width: 240px; }
.bed-card__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--md-primary); margin-bottom: .6rem; }
.bed-card__icon svg { width: 30px; height: 30px; }

.room-block { padding-block: 1.75rem; border-top: 1px solid var(--md-outline-variant); }
.room-block h2 { margin: 0 0 1.25rem; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(8,24,20,.92);
  display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-med);
}
.lightbox.open { opacity: 1; }
.lb-img { max-width: 92vw; max-height: 84vh; border-radius: var(--shape-m); box-shadow: var(--el-4); }
.lightbox .icon-btn { color: #fff; background: rgba(255,255,255,.12); position: absolute; }
.lightbox .icon-btn:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 1.25rem; right: 1.25rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev { left: 1.25rem; } .lb-next { right: 1.25rem; }
.lb-count { position: absolute; bottom: 1.5rem; color: #fff; font: var(--type-label-l); background: rgba(255,255,255,.14); padding: .35rem .9rem; border-radius: var(--shape-full); }
@media (max-width:560px){ .lb-nav{ top:auto; bottom:1.5rem; transform:none; } .lb-prev{left:1rem} .lb-next{right:1rem} .lb-count{bottom:5rem} }

/* ============================================================
   PAGINA ESPERIENZE
   ============================================================ */
.exp-hero { position: relative; overflow: clip; }
.exp-hero__art { position: absolute; inset: 0; z-index: 0; }
.exp-hero__art svg { width: 100%; height: 100%; object-fit: cover; }
.exp-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,54,46,.15), rgba(8,54,46,.55)); z-index: 1; }
.exp-hero__inner { position: relative; z-index: 2; padding-block: clamp(4rem,10vw,8rem); color: #fff; max-width: 620px; }
.exp-hero__inner h1 { color: #fff; margin: 1rem 0 1rem; }
.exp-hero__inner p { color: #EAF6F1; max-width: 46ch; }
.exp-hero .eyebrow { color: var(--lime); }
.exp-hero .eyebrow::before { background: var(--lime); }

.exp-filters { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
.exp-filters::-webkit-scrollbar { display: none; }

.exp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 900px){ .exp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .exp-grid { grid-template-columns: 1fr; } }
.exp-card { display: flex; flex-direction: column; }
.exp-card__art {
  aspect-ratio: 16/10; display: grid; place-items: center;
  background: var(--grad-brand); position: relative;
}
.exp-card__art::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 60%); }
.exp-card__art svg { width: 64px; height: 64px; color: #fff; opacity: .95; position: relative; z-index: 1; }
.exp-card .card__body { flex: 1; display: flex; flex-direction: column; }

/* info pratiche esperienze */
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.info-card { padding: 1.5rem; border-radius: var(--shape-xl); border: 1px solid var(--md-outline-variant); }
.info-card svg { width: 28px; height: 28px; color: var(--md-primary); margin-bottom: .75rem; }
.info-card h3 { margin: 0 0 .35rem; font: var(--type-title-m); }
.info-card p { margin: 0; font: var(--type-body-s); color: var(--md-on-surface-variant); }
@media (max-width: 760px){ .info-grid { grid-template-columns: 1fr; } }

/* mappa contatti */
.contact-card { display: grid; gap: .9rem; }
.contact-row { display: flex; align-items: center; gap: .85rem; }
.contact-row svg { width: 22px; height: 22px; color: var(--md-primary); flex-shrink: 0; }