/* ======================================================
   TripSicily · Partner Locali — UI con motivi SVG
   ====================================================== */

/* ---------- Token tema ---------- */
:root{
  --mare:#0b84c1; --agrumi:#f59e0b; --ulivo:#178f5b; --pietra:#fff3e0;
  --lava:#b91c1c; --buganvillea:#b83280; --sale:#f472b6; --cielo:#cfe8ff;
  --inchiostro:#0f172a; --muted:#5b6a82;

  --brand:var(--mare);
  --accent:var(--agrumi);
  --secondary:var(--ulivo);
  --sand:var(--pietra);
  --text:var(--inchiostro);

  --soft:#eff6ff; --card:#ffffff; --radius:18px;
  --ring:0 12px 28px rgba(2,8,23,.10);
  --ring-strong:0 20px 48px rgba(49,154,207,.18);

  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;

  --header-bg: var(--mare);
  --header-text:#ffffff;
  --header-hover: var(--agrumi);

  --footer-bg: var(--pietra);
  --footer-text: var(--inchiostro);
  --footer-link: var(--ulivo);
  --footer-link-hover: var(--agrumi);

  --banner-height:320px; --overlay-strength:0;

  /* layout */
  --gap:16px;
  --thumbH:172px;
  --radius-2: calc(var(--radius) + 8px);
  --shadow:var(--ring);
  --shadow-strong:var(--ring-strong);
  --glass: color-mix(in oklab, var(--card) 90%, #fff 10%);
  --borderSoft: color-mix(in oklab, var(--brand) 16%, #000 6%, #fff 78%);

  /* ---- SVG data-uri pronte ---- */
  /* Maiolica (mare/agrumi) */
  --svg-maiolica: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\<defs><style>\.a{fill:none;stroke:%230b84c1;stroke-width:2;opacity:.35}\.b{fill:none;stroke:%23f59e0b;stroke-width:2;opacity:.35}\</style></defs>\<rect x='10' y='10' width='100' height='100' rx='8' class='a'/>\<path d='M60 18 102 60 60 102 18 60Z' class='b'/>\<circle cx='60' cy='60' r='14' class='a'/>\<circle cx='60' cy='60' r='38' class='b'/>\</svg>");

  /* Onde (mare + cielo) */
  --svg-onde: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='160' viewBox='0 0 1440 160' preserveAspectRatio='none'>\<path d='M0,120 C240,60 480,180 720,120 C960,60 1200,180 1440,120 L1440,160 L0,160 Z' fill='%23cfe8ff'/>\<path d='M0,110 C240,50 480,170 720,110 C960,50 1200,170 1440,110 L1440,160 L0,160 Z' fill='%230b84c1' fill-opacity='.18'/>\</svg>");

  /* Limoni ripetuti (agrumi/ulivo) */
  --svg-limoni: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'>\<g transform='translate(10,10)'>\<ellipse cx='20' cy='20' rx='16' ry='12' fill='%23f59e0b' opacity='.35'/>\<path d='M18 7c3 4 6 4 9 0' stroke='%23178f5b' stroke-width='3' fill='none' opacity='.35'/>\</g>\<g transform='translate(40,40)'>\<ellipse cx='20' cy='20' rx='16' ry='12' fill='%23f59e0b' opacity='.35'/>\<path d='M18 7c3 4 6 4 9 0' stroke='%23178f5b' stroke-width='3' fill='none' opacity='.35'/>\</g>\</svg>");
}


/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html, body{
  background:
    radial-gradient(1000px 380px at 12% -8%, color-mix(in oklab, var(--brand) 6%, #fff 94%), transparent 60%),
    radial-gradient(900px 340px at 88% -10%, color-mix(in oklab, var(--accent) 10%, #fff 90%), transparent 60%),
    linear-gradient(180deg, var(--soft) 0%, #fff 38%, #fff 100%);
}

/* ---------- Layout helper ---------- */
.container{ width:min(1200px, 94vw); margin-inline:auto; padding-inline:12px }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:42px 0 56px; overflow:clip; isolation:isolate; color:var(--text);
  background:
    /* livello 1: gradiente mare → sabbia */
    linear-gradient(160deg, color-mix(in oklab, var(--cielo) 86%, #fff 14%) 0%, #fff 55%) no-repeat,
    /* livello 2: limoni sparsi */
    var(--svg-limoni) repeat;
  background-size: cover, 260px 260px;
}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background: var(--svg-maiolica) repeat;
  background-size: 180px 180px; opacity:.25; filter:saturate(1.1);
  z-index:-1;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background: var(--svg-onde) bottom center/100% 100% no-repeat;
}
.hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:end }
#heroBg{ display:none } /* sostituito da ::before/::after */
.badges{ display:flex; flex-wrap:wrap; gap:8px }

/* ---------- Chip categorie (base) ---------- */
.chip{
  background: color-mix(in oklab, var(--brand) 8%, #fff 92%);
  border-radius:999px; padding:8px 12px;
  display:inline-flex; align-items:center; gap:6px; line-height:1; user-select:none; cursor:pointer;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 20%, #000 6%, #fff 74%);
  transition: background .2s ease, box-shadow .2s ease, transform .08s ease;
}
.chip:is(:hover,.is-active){ background: color-mix(in oklab, var(--brand) 18%, #fff 82%) }
.chip:active{ transform:translateY(1px) }
.chip:focus-visible{ outline:3px solid color-mix(in oklab, var(--brand) 60%, #000 10%); outline-offset:2px }
.grid-cats{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start }

/* ---------- Macro categorie colorate + badge ---------- */
.chip.macro{ --c: var(--brand);
  position:relative; overflow:hidden;
  background: color-mix(in oklab, var(--c) 25%, #fff 75%);
  border:1px solid color-mix(in oklab, var(--c) 55%, #000 6%, #fff 40%);
  color: color-mix(in oklab, var(--c) 80%, #000 10%);
  font-weight:600; box-shadow:0 6px 14px rgba(2,8,23,.06);
  transform:translateY(0); padding:12px 18px; min-height:52px;
}
.chip.macro:hover{ background: color-mix(in oklab, var(--c) 35%, #fff 65%); transform:translateY(-1px) }
.chip.macro .e{ width:26px; height:26px; display:grid; place-items:center; border-radius:999px; background:#fff;
  box-shadow:0 1px 3px rgba(2,8,23,.08); font-size:16px; line-height:1; margin-right:8px; flex:0 0 auto }
.chip.macro .t{ white-space:nowrap; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis }
.chip.macro .count{ margin-left:10px; padding:3px 9px; border-radius:999px; font-size:13px; line-height:1; color:#fff;
  background: color-mix(in oklab, var(--c) 80%, #000 10%); box-shadow:0 1px 3px rgba(2,8,23,.10); flex:0 0 auto }

/* ---------- Barra filtro sticky ---------- */
.filter-bar.sticky-filters{
  position:sticky; top:64px; z-index:10;
  margin:14px 0; padding:8px 10px; border-radius:12px;
  background: color-mix(in oklab, #fff 94%, var(--soft) 6%);
  box-shadow: inset 0 0 0 1px var(--borderSoft), 0 8px 18px rgba(2,8,23,.06);
  backdrop-filter: blur(6px);
}

/* ---------- Province + Cards ---------- */
.prov-title{
  position:sticky; top:72px; margin:26px 0 12px; padding:8px 10px;
  display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:800; color:var(--text);
  background: color-mix(in oklab, #fff 90%, var(--soft) 10%); border:1px solid rgba(2,8,23,.06);
  border-radius:12px; backdrop-filter: blur(4px); box-shadow:var(--shadow);
}
.prov-title::before{ content:""; width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--accent), color-mix(in oklab, var(--accent) 60%, #000 8%)) }
.prov-title::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--brand) 24%, transparent) 0%, transparent 60%); opacity:.5 }

.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px; margin-block:12px }

.card-locale{
  background:linear-gradient(180deg, color-mix(in oklab, var(--glass) 94%, #fff 6%), var(--glass));
  border:1px solid var(--borderSoft); border-radius:var(--radius-2); box-shadow:var(--shadow);
  display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.card-locale .thumb{ position:relative; width:100%; height:var(--thumbH);
  background:#eaf3ff center/cover no-repeat; overflow:hidden }
.card-locale .thumb::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 34%, rgba(0,0,0,.02));
  pointer-events:none }
.card-locale .pad{ padding:12px }
.card-locale h4{ margin:0 0 6px; font-weight:800; letter-spacing:.2px; font-size:1rem }
.card-locale p{ margin:6px 0 12px; color:var(--muted); font-size:.94rem }
.card-locale .actions{ display:flex; gap:10px; padding:0 12px 14px }
.card-locale:hover{ transform:translateY(-4px); box-shadow:var(--shadow-strong);
  border-color:color-mix(in oklab, var(--brand) 28%, var(--borderSoft)) }

/* ---------- Buttons ---------- */
.btn{ --btn-bg: var(--brand); --btn-fg:#fff; --btn-ring: color-mix(in oklab, var(--brand), #000 14%);
  border:0; border-radius:999px; padding:10px 16px; cursor:pointer; white-space:nowrap;
  color:var(--btn-fg);
  background:linear-gradient(180deg, color-mix(in oklab, var(--btn-bg) 96%, #fff 4%), var(--btn-bg));
  box-shadow:0 8px 20px rgba(2,8,23,.10);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  letter-spacing:.2px }
.btn:hover{ filter:brightness(.98) }
.btn:active{ transform:translateY(1px) }
:where(a,button).btn:focus-visible{ outline:3px solid var(--btn-ring); outline-offset:2px }
.btn.ghost{ --btn-bg: color-mix(in oklab, var(--soft), #fff 14%); --btn-fg:var(--text);
  color:var(--text); background:var(--btn-bg);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, #000 6%, #fff 72%), 0 6px 16px rgba(2,8,23,.06) }
.btn.accent{ --btn-bg: var(--accent); --btn-fg:#111; box-shadow:0 8px 20px rgba(245,158,11,.24) }

/* ---------- Stelle ---------- */
.stars{ --size:18px; --gap:4px; display:inline-grid; grid-auto-flow:column; gap:var(--gap) }
.stars i{
  width:var(--size); height:var(--size); display:block;
  background:linear-gradient(#d4af37,#b8860b);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.193-5.934 5.786 1.401 8.168L12 18.896l-7.335 3.869 1.401-8.168L.132 9.211l8.2-1.193z"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.193-5.934 5.786 1.401 8.168L12 18.896l-7.335 3.869 1.401-8.168L.132 9.211l8.2-1.193z"/></svg>') no-repeat center/contain;
}
.stars i.empty{ filter:grayscale(1) opacity(.38) }
.stars i.half{ background:linear-gradient(90deg, #d4af37 50%, rgba(0,0,0,0) 50%) }

/* ---------- Drawer + Modal ---------- */
.map-drawer{
  position:fixed; right:16px; bottom:16px; z-index:2500;
  width:min(900px,92vw); height:min(70vh,720px);
  background:var(--glass); border:1px solid var(--borderSoft);
  border-radius:18px; box-shadow:var(--shadow-strong);
  backdrop-filter: blur(6px);
  overflow:hidden; transform:translateY(12px);
  opacity:0; pointer-events:none; transition:.25s ease;
}
.map-drawer[aria-hidden="false"]{ opacity:1; pointer-events:auto; transform:translateY(0) }
.map-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); background:#fafafa }
#map{ width:100%; height:calc(100% - 46px) }
.ghost-btn{ background:#eef5ff; border:0; border-radius:999px; padding:8px 12px; cursor:pointer }
.ghost-btn:hover{ background:#e6f0ff }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(2,8,23,.48); z-index:3000 }
.modal[aria-hidden="false"]{ display:grid }
.modal__dialog{
  position:relative; width:min(720px,92vw);
  background:var(--glass); border:1px solid var(--borderSoft); border-radius:18px;
  padding:20px; box-shadow:var(--shadow-strong); backdrop-filter: blur(6px)
}
.modal__close{ position:absolute; right:8px; top:8px; border:0; background:transparent; font-size:28px; cursor:pointer }
.modal h3{ margin:0 0 12px }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:8px }
.grid label{ display:flex; flex-direction:column; gap:6px; font-size:14px }
input, textarea{ border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; font:inherit }
.modal__actions{ margin-top:12px; display:flex; justify-content:flex-end; gap:8px }
.helper{ color:#5b6a82; font-size:12px }

/* ---------- Search bar ---------- */
.search-wrap{ margin:10px auto 6px }
.searchbar{
  position:relative; display:flex; align-items:center; gap:8px;
  background: color-mix(in oklab, #fff 92%, var(--soft) 8%);
  border:1px solid var(--borderSoft);
  border-radius: 999px; padding:10px 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.searchbar:focus-within{ box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 24%, #fff 76%), var(--shadow) }
.searchbar svg{ width:18px; height:18px; opacity:.6; flex:0 0 auto }
.searchbar input{ flex:1 1 auto; border:0; outline:0; background:transparent; font:inherit }
.searchbar button{ border:0; background:#eef5ff; border-radius:999px; padding:6px 10px; cursor:pointer }
.searchbar button:hover{ background:#e6f0ff }
.search-hint{ margin:.4rem 10px 0; font-size:.85rem; color:var(--muted) }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero-inner{ grid-template-columns:1fr }
  .grid-cats{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:780px){
  .grid-cats{ grid-template-columns:repeat(2,1fr) }
  .cards-grid{ grid-template-columns:1fr }
  .card-locale .thumb{ height:150px }
  .card-locale .actions{ flex-wrap:wrap }
  .btn{ width:100%; justify-content:center }
}

/* ---------- Motion-safe ---------- */
@media (prefers-reduced-motion:reduce){
  .btn, .card-locale{ transition:none }
}