/* romagnatourism.it: the one stylesheet (engine in /home/tagra/tagra/turismo). Sea teal, sun amber, coral for the actions, sand paper. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2113; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* the letters of Polish and of the other languages outside basic Latin (ą ę ł ń ś ź ż ...): loaded only by the pages that use them */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2113; }

:root {
  --sea: #0f6e7a; --sea-dark: #0b5a66; --sea-deep: #083f48; --sea-soft: #e3f1f2;
  --sun: #f2a33a; --sun-soft: #fdf1dc;
  --coral: #d9482e; --coral-dark: #b93a23;
  --ink: #17252c; --muted: #56676f; --line: #e6dfd2; --sand: #fbf7f0; --paper: #fff;
  --ok: #1f7a3d; --late: #b56a00; --bad: #c0271d;
  --radius: 14px; --shadow: 0 1px 2px rgba(23, 37, 44, .06), 0 8px 24px rgba(23, 37, 44, .07);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 1rem/1.6 var(--font); color: var(--ink); background: var(--sand); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sea-dark); text-underline-offset: 3px; }
a:hover { color: var(--coral-dark); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sea); margin-bottom: .6rem; }
.lead { font-size: 1.13rem; color: var(--muted); max-width: 62ch; }
.center .lead { margin-inline: auto; }
.section { padding: clamp(2.2rem, 5vw, 4rem) 0; }
.section-tight { padding: clamp(1.4rem, 3vw, 2.2rem) 0; }
.band { background: var(--paper); border-block: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1.4rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: .3rem 0 0; color: var(--muted); }
.link-arrow { font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " →"; }

/* buttons, pills, chips */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.25rem; border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; font-family: var(--font); transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn .ico { flex: none; }
.btn-primary { background: var(--sea); color: #fff; }
.btn-primary:hover { background: var(--sea-dark); color: #fff; }
.btn-cta { background: var(--coral); color: #fff; }
.btn-cta:hover { background: var(--coral-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--sea-dark); border-color: var(--sea); }
.btn-ghost:hover { background: var(--sea-soft); color: var(--sea-deep); }
.btn-light { background: #fff; color: var(--sea-deep); }
.btn-light:hover { background: var(--sun-soft); color: var(--sea-deep); }
.btn-sm { padding: .5rem .9rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 0; }
.btn-row.center { justify-content: center; }
.pill { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; background: var(--sea-soft); color: var(--sea-deep); }
.pill-warn { background: var(--sun-soft); color: #7a4b00; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 550; }
.chip:hover { border-color: var(--sea); color: var(--sea-deep); }
.chip.is-active { background: var(--sea); border-color: var(--sea); color: #fff; }
.chip small { font-weight: 500; opacity: .7; }
button.chip { font: inherit; font-size: .92rem; font-weight: 550; cursor: pointer; }
button.chip.is-active small { opacity: .85; }

/* header */
.site-head { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.logo-text { font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.logo-text b { color: var(--sea); font-weight: 600; margin-left: .22em; }
/* two rows: logo, businesses and language above; every section of the site below, in small type (it wraps when a language is long) */
.logo { min-height: 60px; }
.site-nav { display: contents; }
.nav-links { order: 3; flex: 0 0 calc(100% + 1.1rem); display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .15rem; margin: 0 -.55rem; padding: .3rem 0 .4rem; position: relative; }
.nav-links::before { content: ""; position: absolute; left: .55rem; right: .55rem; top: 0; border-top: 1px solid var(--line); }
.site-nav a { white-space: nowrap; text-decoration: none; }
.nav-links > a { padding: .32rem .55rem; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .84rem; }
.nav-links > a:hover, .nav-links > a.is-active { background: var(--sea-soft); color: var(--sea-deep); }
/* "Per le attività": the sparkle button (3 Oct 2026, owner's pick "A, Scintilla"): warm gradient and a light that crosses it every few seconds */
.site-nav > a.nav-biz { position: relative; isolation: isolate; overflow: hidden; margin-left: auto; padding: .45rem .95rem; border-radius: 999px; color: #fff; font-weight: 650; font-size: .88rem;
  background: linear-gradient(110deg, var(--coral) 0%, #e9792f 55%, var(--sun) 100%); box-shadow: 0 4px 14px rgba(217, 72, 46, .28); }
.site-nav > a.nav-biz::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); animation: biz-shine 3.6s ease-in-out infinite; }
.site-nav > a.nav-biz:hover, .site-nav > a.nav-biz[aria-current] { color: #fff; background: linear-gradient(110deg, var(--coral-dark) 0%, var(--coral) 55%, #e9792f 100%); }
@keyframes biz-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .site-nav > a.nav-biz::after { animation: none; display: none; } }
/* "Per i territori" (3 Oct 2026, owner's order): the portal for other territories (pages/replica.php). 10 Oct 2026, owner's order: the twin of
   the sparkle button, blue gradient and the light crossing it the other way, right to left */
.site-nav > a.nav-terr { position: relative; isolation: isolate; overflow: hidden; margin-left: auto; padding: .45rem .95rem; border-radius: 999px; color: #fff; font-weight: 650; font-size: .88rem;
  background: linear-gradient(250deg, #1a5fa8 0%, #1f7cc2 55%, #3aa0dc 100%); box-shadow: 0 4px 14px rgba(26, 95, 168, .28); }
.site-nav > a.nav-terr::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(260deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(120%); animation: terr-shine 3.6s ease-in-out infinite; }
.site-nav > a.nav-terr:hover, .site-nav > a.nav-terr[aria-current] { color: #fff; background: linear-gradient(250deg, #144a85 0%, #1a5fa8 55%, #1f7cc2 100%); }
@keyframes terr-shine { 0%, 55% { transform: translateX(120%); } 85%, 100% { transform: translateX(-120%); } }
@media (prefers-reduced-motion: reduce) { .site-nav > a.nav-terr::after { animation: none; display: none; } }
.site-nav > a.nav-terr + a.nav-biz { margin-left: .5rem; }
.lang-menu { position: relative; margin-left: .6rem; }
.lang-menu summary { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 650; color: var(--ink); cursor: pointer; list-style: none; white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--sea-soft); color: var(--sea-deep); }
.lang-list { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; min-width: 17rem; padding: .45rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.lang-list a { padding: .5rem .7rem; border-radius: 9px; font-size: .92rem; font-weight: 550; text-decoration: none; color: var(--ink); }
.lang-list a:hover { background: var(--sea-soft); color: var(--sea-deep); }
.lang-list a.is-active { background: var(--ink); color: #fff; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 11px 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; margin: 4px 0; }
/* the sticky header is two or three lines tall on a desktop: anchors stop below it */
@media (min-width: 901px) { html { scroll-padding-top: 100px; } }
@media (max-width: 900px) {
  .head-row { flex-wrap: nowrap; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 60px); overflow-y: auto; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: .6rem 1.25rem 1.1rem; gap: .1rem; box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .nav-links { order: 0; flex: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .1rem; margin: 0; padding: 0; }
  .nav-links::before { display: none; }
  .nav-links > a, .site-nav > a.nav-biz { margin: 0; padding: .7rem .6rem; border-radius: 10px; font-size: 1rem; }
  .site-nav > a.nav-terr, .site-nav > a.nav-terr + a.nav-biz { margin: .4rem 0 0; padding: .7rem .6rem; border-radius: 10px; font-size: 1rem; }
  .site-nav > a.nav-terr, .site-nav > a.nav-biz { flex-shrink: 0; }
  .lang-menu { margin: .7rem 0 0; }
  .lang-menu summary { padding: .6rem .95rem; font-size: .95rem; }
  .lang-list { position: static; margin-top: .5rem; min-width: 0; box-shadow: none; }
  .lang-list a { padding: .7rem .7rem; font-size: 1rem; }
}

/* hero */
.hero { background: linear-gradient(135deg, var(--sea-deep), var(--sea) 62%, #1a8a8f); color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: var(--sand); -webkit-mask: url("/assets/img/wave.svg") bottom / 100% 100% no-repeat; mask: url("/assets/img/wave.svg") bottom / 100% 100% no-repeat; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(3.6rem, 7vw, 5.6rem); position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--sun); }
.hero .lead { color: rgba(255, 255, 255, .88); }
.hero .eyebrow { color: var(--sun); }
.hero-stats { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.hero-stats b { display: block; font-family: var(--display); font-size: 1.7rem; color: #fff; line-height: 1.1; }
.hero-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hero-photos a { display: block; border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 4 / 3; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); color: #fff; }
.hero-photos a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.hero-photos img { width: 100%; height: 100%; object-fit: cover; }
.hero-photos span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem; background: linear-gradient(transparent, rgba(8, 40, 46, .85)); font-weight: 650; font-size: .92rem; line-height: 1.25; }
.hero-photos small { display: block; font-weight: 500; opacity: .85; }
.hero-photos a:not(:first-child) span { font-size: .84rem; }
.hero-photos a:not(:first-child) span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-photos a:first-child { aspect-ratio: 16 / 9; } }
.page-head { padding: clamp(1.8rem, 4vw, 3rem) 0 0; }
.page-head h1 { margin-bottom: .35em; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: .8rem; }
.crumbs a { color: var(--muted); }

/* doors (home) */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.door { display: flex; flex-direction: column; gap: .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.door:hover { transform: translateY(-3px); border-color: var(--sea); color: var(--ink); }
.door .door-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--sea-soft); color: var(--sea-dark); display: grid; place-items: center; }
.door h3 { margin: .3rem 0 0; }
.door p { margin: 0; color: var(--muted); font-size: .96rem; }
.door .door-live { margin-top: auto; padding-top: .7rem; font-weight: 650; color: var(--sea-dark); font-size: .92rem; }
@media (max-width: 800px) { .doors { grid-template-columns: 1fr; } }

/* event cards */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.ev-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .15s; }
.ev-card:hover { transform: translateY(-3px); }
.ev-card-ph { display: block; position: relative; aspect-ratio: 3 / 2; background: var(--sea-soft); overflow: hidden; }
.ev-card-ph img { width: 100%; height: 100%; object-fit: cover; }
.ev-card-noph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--k, var(--sea)), color-mix(in srgb, var(--k, var(--sea)) 60%, #fff)); opacity: .9; }
.pill-kind { position: absolute; left: .7rem; top: .7rem; background: var(--k, var(--sea)); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ev-k-fairs { --k: #0f6e7a; } .ev-k-concerts { --k: #8a3d9e; } .ev-k-sport { --k: #2c7a35; } .ev-k-festivals { --k: #cf6a1c; } .ev-k-conferences { --k: #3a5a94; } .ev-k-tours { --k: #a8324a; } .ev-k-cribs { --k: #7a5a12; }
.ev-card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.ev-card-when { margin: 0; font-size: .85rem; font-weight: 700; color: var(--coral-dark); text-transform: capitalize; }
.ev-card-title { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.ev-card-title a { color: var(--ink); text-decoration: none; }
.ev-card-title a::after { content: ""; position: absolute; inset: 0; }
.ev-card { position: relative; }
.ev-card[hidden] { display: none; }   /* the search, date and kind filters hide cards with [hidden] (display:flex above beat it) */
.ev-card-title a:hover { color: var(--sea-dark); }
.ev-card-where { margin: 0; color: var(--muted); font-size: .92rem; }
.ev-card-flag { margin: .3rem 0 0; font-size: .78rem; font-weight: 700; color: #7a4b00; }
.ev-month { font-size: 1.35rem; margin: 2.2rem 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line); scroll-margin-top: 90px; }
.ev-tools { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.search { position: relative; flex: 1 1 260px; max-width: 420px; }
.search input { width: 100%; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--paper); }
.search input:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.ev-dates { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .4rem 0 1rem; }
.ev-dates-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.ev-dates label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.ev-dates input[type=date] { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--paper); min-width: 10.5rem; }
.ev-dates [hidden] { display: none; }
@media (max-width: 600px) {
  .ev-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
  .ev-dates-label, .ev-dates [data-date-clear] { grid-column: 1 / -1; justify-self: start; }
  .ev-dates label { flex-direction: column; align-items: stretch; gap: .25rem; font-size: .9rem; }
  .ev-dates input[type=date] { min-width: 0; width: 100%; }
}
.ev-dates input[type=date]:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.filter-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .5rem; }
.note { font-size: .9rem; color: var(--muted); margin-top: 1.6rem; }
.empty { padding: 2rem; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

/* event page */
.ev-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items: start; }
.ev-figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sea-soft); box-shadow: var(--shadow); }
.ev-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ev-figure figcaption { font-size: .78rem; color: var(--muted); padding: .45rem .8rem; background: var(--paper); }
.ev-figure figcaption a { color: var(--muted); }
.facts { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.facts li { display: grid; grid-template-columns: 26px 1fr; gap: .7rem; align-items: start; }
.facts svg { color: var(--sea); margin-top: .15rem; }
.facts b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.facts span { font-size: 1.05rem; font-weight: 550; }
.facts span.cap::first-letter { text-transform: uppercase; }
.ev-blurb { font-size: 1.12rem; }
.orig { margin: -.3rem 0 .9rem; color: var(--muted); font-size: .95rem; }
.ride { background: linear-gradient(135deg, var(--sea-deep), var(--sea)); color: #fff; border-radius: var(--radius); padding: 1.5rem; margin-top: 1.4rem; }
.ride h2, .ride h3 { color: #fff; font-size: 1.3rem; margin-bottom: .4rem; }
.ride p { margin: 0 0 1rem; color: rgba(255, 255, 255, .9); }
.ride .ride-note { font-size: .8rem; margin: .8rem 0 0; opacity: .75; }
@media (max-width: 860px) { .ev-hero { grid-template-columns: 1fr; } }
.ev-story { max-width: 46rem; }
.ev-story h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.ev-story p { line-height: 1.7; }
.ev-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.ev-gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.ev-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ev-gallery figcaption { font-size: .78rem; color: var(--muted); padding: .45rem .8rem; }
.ev-gallery figcaption a { color: var(--muted); }
.cta-band { background: var(--sun-soft); border-block: 1px solid #f1dcb4; }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cta-band h2 { margin: 0 0 .3rem; font-size: 1.5rem; }
.cta-band p { margin: 0; color: #5a4a2c; max-width: 60ch; }

/* flight board */
.fb-bar { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; margin: 1.2rem 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg a { padding: .55rem 1.1rem; text-decoration: none; font-weight: 650; color: var(--muted); font-size: .95rem; }
.seg a.is-active { background: var(--ink); color: #fff; }
.fb-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.fb-meta p { margin: 0; color: var(--muted); font-size: .9rem; }
.fb { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.fb th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: #c9d6d8; background: var(--sea-deep); padding: .7rem .9rem; font-weight: 700; }
.fb td { padding: .7rem .9rem; border-top: 1px solid var(--line); vertical-align: middle; }
.fb tr.is-done td { color: var(--muted); }
.fb-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.08rem; white-space: nowrap; }
.fb-old { text-decoration: line-through; color: var(--muted); font-weight: 500; font-size: .92rem; margin-right: .35rem; }
.fb-tmr { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fb-place strong { font-weight: 650; }
.fb-iata { font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.fb-no { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-no a { color: inherit; }
.fb-al-m { display: none; font-size: .82rem; color: var(--muted); }
.st { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: #eef1f2; color: #3f4f56; white-space: nowrap; }
.st.is-ok, .st.is-go { background: #e3f4e8; color: var(--ok); }
.st.is-now { background: var(--sun-soft); color: #7a4b00; }
.st.is-late { background: #fdeccf; color: var(--late); }
.st.is-bad { background: #fbe1de; color: var(--bad); }
.st.is-done { background: #eef1f2; color: var(--muted); }
.fb-gate { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
@media (max-width: 700px) {
  .fb th:nth-child(4), .fb td:nth-child(4) { display: none; }
  .fb-al-m { display: block; }
  .fb td, .fb th { padding: .6rem .55rem; }
  .fb-time { font-size: 1rem; }
}

/* traffic */
.map { height: min(70vh, 600px); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: #dfe9ea; box-shadow: var(--shadow); z-index: 0; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .86rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--muted)); display: inline-block; flex: none; }
.k-closed { --c: #c0271d; } .k-accident { --c: #8a1f9e; } .k-jam { --c: #e07b00; } .k-works { --c: #c79a00; } .k-lane { --c: #c79a00; } .k-danger { --c: #3a5a94; } .k-weather { --c: #3a5a94; }
.inc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.inc { display: grid; grid-template-columns: 14px 1fr auto; gap: .8rem; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.inc .dot { margin-top: .4rem; }
.inc h3 { font-family: var(--font); font-size: 1rem; font-weight: 650; margin: 0 0 .15rem; letter-spacing: 0; }
.inc p { margin: 0; font-size: .9rem; color: var(--muted); }
.inc-delay { font-weight: 700; color: var(--late); font-size: .9rem; white-space: nowrap; }
.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.8rem; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.heat-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
.heat th { font-size: .74rem; color: var(--muted); font-weight: 650; padding: .2rem .3rem; text-align: center; }
.heat th[scope=row] { text-align: left; white-space: nowrap; text-transform: capitalize; font-size: .85rem; color: var(--ink); padding-right: .6rem; }
.heat td { text-align: center; font-size: .8rem; font-weight: 650; padding: .5rem .15rem; border-radius: 6px; min-width: 34px; }
.l0 { background: #dff1e3; color: #1c5a2e; } .l1 { background: #f0f2c9; color: #5a5a10; } .l2 { background: #fde2ad; color: #7a4b00; } .l3 { background: #f8bf94; color: #7d3200; } .l4 { background: #ec8a78; color: #5e1108; }
.heat-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .82rem; color: var(--muted); margin-top: .8rem; }
.heat-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.heat-legend i { width: 18px; height: 14px; border-radius: 4px; display: inline-block; }
.road-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.road { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.road:hover { border-color: var(--sea); color: var(--ink); }
.road b { display: block; font-size: 1.02rem; }
.road small { color: var(--muted); display: block; margin: .15rem 0 .5rem; }
.road .road-t { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--sea-dark); }
.road .road-w { font-size: .82rem; color: var(--late); font-weight: 650; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin: 1.2rem 0; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.stat b { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--sea-dark); line-height: 1.15; }
.stat span { font-size: .86rem; color: var(--muted); }
.busy { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.busy li { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; align-items: center; }
.busy time { font-weight: 700; color: var(--coral-dark); text-transform: capitalize; font-size: .92rem; }
.busy a { font-weight: 650; text-decoration: none; }
.busy small { color: var(--muted); display: block; }

/* forms, prose */
.form { display: grid; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.form label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.form input, .form select, .form textarea { font: inherit; padding: .7rem .85rem; border: 1px solid #cfc7b8; border-radius: 10px; background: #fff; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .hp { position: absolute; left: -9999px; }
.form small { font-weight: 400; color: var(--muted); }
.drop { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 2px dashed #cfc7b8; border-radius: 12px; background: var(--sand); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--sea); background: var(--sea-soft); }
.drop.is-over { border-style: solid; }
.drop-img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--line); }
.drop-text { display: none; gap: .15rem; min-width: 0; }
.drop-text b { font-size: 1rem; }
.drop-text span { font-weight: 400; color: var(--muted); }
.drop-file { font-style: normal; font-weight: 600; color: var(--sea-dark); overflow-wrap: anywhere; }
.drop.is-js .drop-text { display: grid; }
.drop.is-js input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.drop-err { font-size: .9rem; }
.ai-help { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: -.35rem; }
.ai-help[hidden], .ai-help [hidden] { display: none; }
.ai-help small { flex: 1 1 15rem; }
.ai-help.is-busy .ico { animation: ai-pulse 1s ease-in-out infinite; }
.ai-undo { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--sea-dark); text-decoration: underline; cursor: pointer; }
.ai-msg { flex-basis: 100%; margin: 0; padding: .55rem .8rem; border-radius: 10px; font-size: .92rem; }
.ai-msg.is-ok { background: #e3f4e8; color: #17552b; }
.ai-msg.is-err { background: #fbe1de; color: #8a1a12; }
@keyframes ai-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ai-help.is-busy .ico { animation: none; } }
.alert { padding: .9rem 1.1rem; border-radius: 12px; font-weight: 600; }
.alert-ok { background: #e3f4e8; color: #17552b; }
.alert-err { background: #fbe1de; color: #8a1a12; }
@media (max-width: 600px) { .form .row2 { grid-template-columns: 1fr; } }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; background: var(--sea); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.steps b { display: block; font-size: 1.05rem; }
.steps span { color: var(--muted); }
.prose h2 { font-size: 1.35rem; margin-top: 1.8em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4em; }

/* footer */
.site-foot { background: var(--sea-deep); color: #c8d9db; margin-top: 3rem; padding: 2.8rem 0 1.4rem; font-size: .94rem; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { color: var(--sun); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.site-foot nav { display: grid; gap: .45rem; align-content: start; }
.site-foot h2 { font-family: var(--font); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #8fb1b5; margin: 0 0 .4rem; font-weight: 700; }
.logo-text-foot { color: #fff; font-size: 1.4rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem; }
.logo-text-foot b { color: var(--sun); }
.foot-partner { margin-top: 1rem; }
.foot-partner a { font-weight: 700; color: var(--sun); }
.foot-base { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; color: #9db9bc; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; }
.foot-base p { margin: 0; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
/* place photos (content/places.php): cover of the home, area cards, banner of an area page */
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 63, 72, .92) 0%, rgba(8, 63, 72, .72) 45%, rgba(15, 110, 122, .3) 100%); }
.hero > .ph-credit { position: absolute; right: 1rem; bottom: 50px; z-index: 2; color: rgba(255, 255, 255, .75); }
.ph-credit { font-size: .7rem; text-decoration: none; }
.ph-credit:hover { text-decoration: underline; }
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; list-style: none; margin: 0 0 1.6rem; padding: 0; }
.place-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--sea-deep), var(--sea)); box-shadow: var(--shadow); }
.place-link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.place-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.place-card:hover .place-link img { transform: scale(1.05); }
.place-link span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem .85rem; background: linear-gradient(transparent, rgba(8, 40, 46, .9)); font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.place-link small { display: block; font-family: var(--font); font-weight: 500; font-size: .84rem; opacity: .9; margin-top: .15rem; }
.place-card > .ph-credit { position: absolute; top: .45rem; right: .5rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(8, 40, 46, .55); color: rgba(255, 255, 255, .9); font-size: .62rem; max-width: calc(100% - 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-banner { margin: 1.4rem 0 0; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.area-banner img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.area-banner figcaption { font-size: .78rem; color: var(--muted); padding: .45rem .8rem; }
.area-banner .ph-credit { font-size: inherit; color: var(--muted); }
@media (max-width: 600px) { .area-banner img { aspect-ratio: 16 / 9; } .place-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .place-link span { font-size: 1rem; padding: 2rem .7rem .7rem; } .hero > .ph-credit { bottom: 46px; right: .6rem; font-size: .6rem; } }
.nl-row .btn { justify-content: center; }

/* newsletter (top of the footer) */
.newsletter { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem 3rem; align-items: start; padding-bottom: 2.2rem; margin-bottom: 2.2rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.site-foot .newsletter h2 { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: #fff; font-weight: 600; margin: 0 0 .4rem; }
.newsletter p { margin: 0; }
.nl-form { display: grid; gap: .7rem; position: relative; }
.nl-form .hp { position: absolute; left: -9999px; }
.nl-row { display: flex; gap: .6rem; }
.nl-row input { flex: 1; min-width: 0; font: inherit; padding: .75rem .9rem; border: 1px solid transparent; border-radius: 10px; background: #fff; color: var(--ink); }
.nl-row input:focus { outline: 2px solid var(--sun); outline-offset: 1px; }
.nl-consent { display: grid; grid-template-columns: auto 1fr; gap: .6rem; font-size: .84rem; line-height: 1.45; align-items: start; cursor: pointer; }
.nl-consent input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--sun); }
.site-foot .nl-consent a { text-decoration: underline; }
.nl-msg { padding: .6rem .9rem; border-radius: 10px; font-weight: 600; }
.nl-msg.is-ok { background: #e3f4e8; color: #17552b; }
.nl-msg.is-err { background: #fbe1de; color: #8a1a12; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 800px) { .newsletter { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .nl-row { flex-direction: column; } }

/* ── travel guide: places to visit, where to stay and eat, getting here (1 Oct 2026) ── */
.sight-card .sight-name { font: inherit; color: inherit; margin: 0; }
.sight-text p { margin: 0 0 .9rem; }
.sight-links { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; font-size: 1rem; font-weight: 550; }
.sub-h { font-size: 1.15rem; margin: 2rem 0 .9rem; }
.guide-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.guide-grid li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.guide-grid h3 { font-size: 1.12rem; margin: 0 0 .4rem; }
.guide-grid p { margin: 0; font-size: .97rem; color: var(--ink); }
.vn-unit { font-size: .85rem; color: var(--muted); }
.vn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .6rem; }
.vn { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .95rem; }
.vn[hidden] { display: none; }
.vn b { font-weight: 650; overflow-wrap: anywhere; }
.vn small { display: block; color: var(--muted); font-size: .84rem; margin-top: .1rem; overflow-wrap: anywhere; }
.vn-stars { color: #c98a00; font-size: .82rem; letter-spacing: .05em; white-space: nowrap; }
.vn-links { margin: 0; display: flex; gap: .4rem; flex-shrink: 0; }
.vn-links a { font-size: .82rem; font-weight: 650; text-decoration: none; padding: .32rem .7rem; border-radius: 999px; background: var(--sea-soft); color: var(--sea-deep); }
.vn-links a:hover { background: var(--sea); color: #fff; }
.town-chip[hidden] { display: none; }
.road-grid + .ev-tools { margin-top: 1.6rem; }
@media (max-width: 600px) { .vn-list { grid-template-columns: 1fr; } .vn { padding: .65rem .8rem; } }

/* paid visibility (lib/ads.php): the sponsored cards of the businesses and the personal area /area/<token> */
.ad-block { margin: 0; }
.ad-head { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.ad { display: grid; grid-template-columns: 132px 1fr; background: var(--paper); border: 1px solid var(--sun); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); max-width: 620px; }
.ad img { width: 100%; height: 100%; min-height: 132px; object-fit: cover; }
.ad-noph { grid-template-columns: 1fr; }
.ad-body { padding: .9rem 1rem; display: grid; gap: .25rem; align-content: start; min-width: 0; }
.ad-body b { font-family: var(--display); font-size: 1.12rem; line-height: 1.2; overflow-wrap: anywhere; }
.ad-body small { color: var(--muted); font-size: .85rem; }
.ad-body p { margin: .2rem 0 .5rem; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.ad-body .btn { justify-self: start; }
.ad-tag { justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a4b00; background: var(--sun-soft); border-radius: 999px; padding: .12rem .55rem; }
/* the three formats of a sponsored card: large (photo, first, full row), medium (text), small (name and link) */
.ad-large { grid-column: 1 / -1; grid-template-columns: 220px 1fr; max-width: none; }
.ad-large.ad-noph { grid-template-columns: 1fr; }
.ad-small .ad-body { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .65rem .9rem; }
.ad-small .ad-body b { font-size: 1rem; }
.ad-small .ad-body .btn { margin-left: auto; }
.ride + .ad-block, .ev-hero .ad-block { margin-top: 1.4rem; }
.ev-hero .ad-list { grid-template-columns: 1fr; }
/* the banner of a configured campaign (lib/adquote.php turAqBanner): 320x100, 728x90 or 970x250, never wider than the column */
.ad-banner { position: relative; margin: 0 auto; }
.ad-banner a, .ad-banner > img { display: block; }
.ad-banner img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line, #e6e1d6); }
.ad-banner .ad-tag { position: absolute; top: .4rem; left: .4rem; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ad-banner-wrap + .ad-block, .ad-block + .ad-banner-wrap { padding-top: 0; }
.ar-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.ar-credit { font-size: 1rem; margin: 0 0 .6rem; }
.ar-credit b { font-family: var(--display); font-size: 2.2rem; }
.ar-credit span { color: var(--muted); }
.ar-h3 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
.ar-topups { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 0; }
.ar-topups .btn { display: grid; gap: .1rem; text-align: center; line-height: 1.25; }
.ar-topups small { font-weight: 500; font-size: .75rem; opacity: .85; }
.ar-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ar-table td { padding: .45rem .3rem; border-bottom: 1px solid var(--line); }
.ar-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.ar-close { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ar-close label { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.sp { display: flex; justify-content: space-between; gap: 1.2rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); }
.sp-on { border-color: var(--sea); }
.sp h3 { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sp h3 .pill { font-family: var(--font); }
.sp p { margin: 0; color: var(--muted); font-size: .95rem; }
.sp .sp-why { color: #7a4b00; font-weight: 600; margin-top: .3rem; }
.sp .sp-stats { color: var(--ink); font-weight: 600; margin-top: .3rem; }
.sp-side { flex-shrink: 0; text-align: right; display: grid; gap: .6rem; justify-items: end; }
.sp-price { color: var(--ink) !important; }
.sp-price b { font-family: var(--display); font-size: 1.5rem; }
.sp-price s { color: var(--muted); font-size: .9rem; }
.sp-price small { display: block; color: var(--muted); font-size: .82rem; }
.sp-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.sp-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.sp-full { font-size: .85rem; font-weight: 650; color: #7a4b00; }
.sp .sp-size-now { color: var(--ink); margin-top: .3rem; }
.sp-formats { margin: 0 0 1.1rem; }
.sp-formats dl { margin: .4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.sp-formats dl > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; }
.sp-formats dt { font-weight: 700; }
.sp-formats dd { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.sp-actions .sp-sizes { flex: 1 0 100%; border: 0; margin: 0; padding: 0; display: grid; gap: .3rem; min-width: 0; }
.sp-sizes legend { padding: 0; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.sp-size { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: .45rem; align-items: baseline; text-align: left; font-size: .93rem; cursor: pointer; min-width: 15rem; }
.sp-size b { font-family: var(--display); font-size: 1.05rem; }
.sp-size s, .sp-size small { color: var(--muted); font-size: .8rem; }
.sp-size.is-off { opacity: .55; cursor: not-allowed; }
.price-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.price-table th, .price-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.price-table td small { display: block; color: var(--muted); }
.price-table .ar-num { text-align: right; }
.price-wrap { overflow-x: auto; }
.price-table td:first-child { min-width: 11rem; }
@media (max-width: 640px) {
  .ad, .ad-large { grid-template-columns: 96px 1fr; }
  .ad-noph, .ad-large.ad-noph { grid-template-columns: 1fr; }
  .sp-size { min-width: 0; }
  .sp { flex-direction: column; align-items: stretch; }
  .sp-side { text-align: left; justify-items: start; }
  .sp-actions { justify-content: flex-start; }
}
/* the boats page (/barche): cards of the excursion boats, rentals and houseboats */
.boat-grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.boat { display: flex; flex-direction: column; gap: .55rem; scroll-margin-top: 5rem; }
.boat h3 { margin: 0; }
.boat-where { font-size: .9rem; color: var(--muted); }
.boat-where b { color: var(--ink); }
.boat-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.boat-site { margin-top: auto; padding-top: .3rem; }
/* the castles page (/castelli): cards of the castles to visit and of the venues for events */
.castle-grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); margin-bottom: 2rem; }
.castle { display: flex; flex-direction: column; gap: .55rem; scroll-margin-top: 5rem; }
.castle h3 { margin: 0; }
.castle-where { font-size: .9rem; color: var(--muted); }
.castle-where b { color: var(--ink); }
.castle-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.castle-site { margin-top: auto; padding-top: .3rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.castle-area { font-size: 1.05rem; margin: 1.6rem 0 0; color: var(--sea-deep); }
.castle-also a { color: inherit; }
/* by zone with filter buttons and search (3 Oct 2026, owner: "riorganizzandola") */
.castle-filter-h { margin: 0 0 .5rem; font-weight: 700; }
.castle-list [data-cats] { margin-bottom: 1rem; }
.castle-zone { scroll-margin-top: 5rem; }
h2.castle-area { font-size: 1.4rem; margin: 2.2rem 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.castle-zone-p { margin: -.4rem 0 1rem; color: var(--muted); }
.castle-zones { margin-top: .4rem; }

/* ── luggage storages (/deposito-bagagli, 2 Oct 2026) ── */
.dot.lg-ref { background: #fff; border: 2px solid #33434a; }
.dot.lg-ref-a { background: #33434a; }
.lg-town { font-size: 1.2rem; margin-top: 1.4rem; }
.lg-town small { font-family: var(--font); font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .3rem; }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.lg { display: flex; flex-direction: column; gap: .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.lg.is-on, .lg:target { border-color: var(--sea); box-shadow: 0 0 0 2px var(--sea-soft), var(--shadow); }
.lg p { margin: 0; }
.lg h4 { font-family: var(--font); font-size: 1.05rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.lg-kind { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lg-addr { font-size: .95rem; }
.lg-hint, .lg-by { font-size: .86rem; color: var(--muted); }
.lg-dist { list-style: none; margin: .35rem 0 .2rem; padding: .55rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; font-size: .9rem; }
.lg-dist li { display: flex; align-items: flex-start; gap: .45rem; }
.lg-dist svg { color: var(--sea); flex: none; margin-top: .15rem; }
.lg .vn-links { margin-top: auto; padding-top: .5rem; }
.lg-more { margin: 1.4rem 0 0; }
@media (max-width: 600px) { .lg-list { grid-template-columns: 1fr; } }
/* bike rental shops (/noleggio-bici) */
.rent-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }
.rent { display: flex; flex-direction: column; gap: .55rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.rent[hidden] { display: none; }
.rent-head b { display: block; font-size: 1.05rem; font-weight: 650; overflow-wrap: anywhere; }
.rent-head small { display: block; color: var(--muted); font-size: .86rem; margin-top: .1rem; overflow-wrap: anywhere; }
.rent-price { margin: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .95rem; }
.rent-price b { color: var(--sea-deep); font-weight: 700; }
.rent-price .is-none { color: var(--muted); font-size: .9rem; }
.rent-kinds { margin: 0; font-size: .86rem; color: var(--muted); }
.rent-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.bch-num { display: inline-block; margin-left: .3rem; font-size: .78rem; font-weight: 600; padding: .05rem .45rem; border-radius: 6px; background: var(--sea-soft); color: var(--ink); vertical-align: middle; }
.bch-price { display: block; margin-top: .3rem; font-weight: 600; color: var(--ink); }
.bch-price a { font-weight: 400; }
.bch-nomap { display: block; margin-top: .25rem; font-style: italic; }
.vn .rent-facts { margin-top: .35rem; }
.rent-facts li { font-size: .8rem; padding: .18rem .55rem; border-radius: 999px; background: var(--sun-soft); color: var(--ink); }
.rent .vn-links { margin-top: auto; padding-top: .35rem; flex-wrap: wrap; }
.rent .vn-links a.is-book { background: var(--coral); color: #fff; }
.rent .vn-links a.is-book:hover { background: var(--coral-dark); }
@media (max-width: 600px) { .rent-list { grid-template-columns: 1fr; } }

/* guide associations and bookshops (pages guides.php, bookshops.php): the calendar rows reuse .vn, the cards .guide-grid */
.gd-list { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.gd-visit > div { min-width: 0; }
.gd-when { display: block; font-size: .8rem; font-weight: 700; color: var(--coral-dark); text-transform: capitalize; }
.gd-orgs li { display: flex; flex-direction: column; gap: .35rem; scroll-margin-top: 90px; }
.gd-orgs h3, .gd-orgs h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; font-size: 1.12rem; margin: 0; }
.gd-orgs .gd-kind { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sea-dark); }
.gd-orgs .gd-foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .88rem; color: var(--muted); }
@media (max-width: 600px) { .gd-list { grid-template-columns: 1fr; } }

/* weather (/meteo, pages/weather.php + js/weather.js; the icon set is the hub's mtSprite) */
.wx-ico { flex: none; display: inline-block; vertical-align: middle; }
.wx-stat b { display: flex; align-items: center; gap: .4rem; }
.stat .wx-stat-s { font-size: 1.25rem; text-transform: capitalize; padding: .28rem 0; }
.wx-stale { background: var(--sun-soft); border: 1px solid #f1dcb4; color: #7a4b00; border-radius: var(--radius); padding: .7rem 1rem; font-size: .93rem; }
.is-wet { color: #1d5fb8 !important; font-weight: 650; }
.wx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.wx-day:hover { border-color: var(--sea); }
.wx-day.is-active { border-color: var(--sea); box-shadow: 0 0 0 2px var(--sea); }
.wx-day-n { font-size: .8rem; font-weight: 650; text-transform: capitalize; color: var(--muted); }
.wx-day.is-active .wx-day-n { color: var(--sea-deep); }
.wx-day-t { font-size: .88rem; color: var(--muted); }
.wx-day-t b { font-size: 1.02rem; color: var(--ink); }
.wx-day-p { font-size: .76rem; color: var(--muted); }
.wx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 1rem; align-items: stretch; }
.wx-mapcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.wx-map { flex: 1; min-height: 560px; z-index: 0; background: #dfe9ea; }
.wx-map .leaflet-tile-pane { filter: grayscale(.7) contrast(.96) brightness(1.05); }
.wx-mk-wrap { overflow: visible; }
.wx-mk { position: absolute; left: 0; top: 0; transform: translate(-50%, -17px); display: flex; flex-direction: column; align-items: center; cursor: pointer; white-space: nowrap; line-height: 1.15; font-family: var(--font); }
.wx-pill { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 6px; background: #fff; color: var(--ink); border: 1px solid rgba(23, 37, 44, .14); border-radius: 999px; box-shadow: 0 3px 10px rgba(23, 37, 44, .2); }
.wx-pill > span { display: flex; }
.wx-pill b { font-size: 14px; font-weight: 700; }
.wx-pill b i { font-style: normal; font-weight: 500; font-size: 10px; color: var(--muted); }
.wx-mk em { font-style: normal; font-size: 11px; font-weight: 650; color: #33434a; margin-top: 2px; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.wx-mk.is-sel .wx-pill { border-color: var(--sea-deep); box-shadow: 0 0 0 2px var(--sea-deep), 0 5px 14px rgba(23, 37, 44, .3); }
.wx-mk.is-sel em { color: var(--sea-deep); font-weight: 750; }
.wx-mk-wrap.is-dot .wx-mk { transform: translate(-50%, -50%); }
.wx-mk-wrap.is-dot .wx-pill { width: 13px; height: 13px; padding: 0; background: var(--sea); border: 2px solid #fff; }
.wx-mk-wrap.is-dot .wx-pill > *, .wx-mk-wrap.is-dot em { display: none; }
.wx-bar { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; padding: .75rem .9rem; border-top: 1px solid var(--line); }
.wx-seg { display: inline-flex; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.wx-seg button { border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); padding: .35rem .85rem; border-radius: 999px; cursor: pointer; }
.wx-seg button.is-active { background: var(--sea); color: #fff; }
.wx-time { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 280px; }
.wx-time input[type=range] { flex: 1; min-width: 80px; accent-color: var(--sea); }
.wx-when { font-size: .88rem; min-width: 12.5rem; }
.wx-play, .wx-nowbtn { border: 1px solid var(--line); background: var(--paper); color: var(--sea-deep); font: inherit; font-size: .86rem; font-weight: 650; border-radius: 999px; padding: .38rem .8rem; cursor: pointer; }
.wx-play { min-width: 2.4rem; padding-inline: 0; }
.wx-play:hover, .wx-nowbtn:hover { border-color: var(--sea); }
.wx-play.is-on { background: var(--sea); border-color: var(--sea); color: #fff; }
.wx-side { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.2rem 1rem; }
.wx-loading { color: var(--muted); margin: 0; }
.wx-side-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.wx-side-head h3 { margin: 0; font-size: 1.45rem; }
.wx-side-head span, .wx-nowline, .wx-now-f, .wx-sunline { color: var(--muted); font-size: .86rem; }
.wx-nowline { margin: .7rem 0 0; }
.wx-now { display: flex; align-items: center; gap: .9rem; margin: .1rem 0 .9rem; }
.wx-now-t { font-family: var(--display); font-size: 3rem; font-weight: 600; line-height: 1; color: var(--sea-deep); }
.wx-now-l { font-weight: 650; margin-top: .25rem; }
.wx-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.wx-box { background: var(--sand); border-radius: 10px; padding: .55rem .7rem; }
.wx-box small { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .1rem; }
.wx-box b { font-size: .95rem; }
.wx-box b i { font-style: normal; font-weight: 500; font-size: .82rem; color: var(--muted); }
.wx-box-wide { grid-column: 1 / -1; }
.wx-dir { display: inline-flex; vertical-align: -1px; }
.wx-sub { font-size: .86rem; font-weight: 650; margin: 1.1rem 0 .5rem; }
.wx-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.wx-hr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .4rem 0 .35rem; background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.wx-hr:hover { background: var(--sand); }
.wx-hr.is-active { border-color: var(--sea); background: var(--sea-soft); }
.wx-hr small { font-size: .72rem; color: var(--muted); }
.wx-hr b { font-size: .88rem; }
.wx-hr i { font-style: normal; font-size: .7rem; color: var(--muted); }
.wx-sunline { margin: .6rem 0 0; }
.wx-sea { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.wx-sea li { background: linear-gradient(180deg, var(--sea-soft), #fff 70%); border: 1px solid #cfe4e6; border-radius: var(--radius); padding: 1rem 1.1rem; }
.wx-sea h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.wx-sea-t { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--sea-dark); line-height: 1.1; margin: 0 0 .4rem; }
.wx-sea-t small { font-family: var(--font); font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: .4rem; }
.wx-sea-l { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0; font-size: .86rem; color: var(--muted); }
.wx-sea-l b { color: var(--ink); }
.wx-calm { background: var(--sea-soft); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--sea-deep); font-weight: 600; margin: 0; }
.wx-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.wx-watch li { background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--late); border-radius: var(--radius); padding: .85rem 1rem; }
.wx-watch li.wx-l2 { border-left-color: var(--bad); }
.wx-kind { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--late); margin-bottom: .15rem; }
.wx-l2 .wx-kind { color: var(--bad); }
.wx-watch p { margin: 0; font-size: .95rem; }
.wx-watch small { display: block; color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.wx-week-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.wx-week { width: 100%; border-collapse: collapse; font-size: .92rem; }
.wx-week th, .wx-week td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.wx-week tbody tr:last-child th, .wx-week tbody tr:last-child td { border-bottom: 0; }
.wx-week thead th { font-size: .78rem; text-transform: capitalize; letter-spacing: .03em; color: var(--muted); background: var(--sand); }
.wx-week tbody th { font-weight: 650; background: var(--paper); }
.wx-week tbody tr { cursor: pointer; }
.wx-week tbody tr:hover td, .wx-week tbody tr:hover th { background: var(--sand); }
.wx-week td.is-sel { background: var(--sea-soft); }
.wx-week tr.is-sel th { box-shadow: inset 4px 0 0 var(--sea); color: var(--sea-deep); }
.wx-wk { display: flex; align-items: center; gap: .4rem; }
.wx-wk i { font-style: normal; color: var(--muted); }
.wx-wk small { display: block; font-size: .72rem; color: #1d5fb8; font-weight: 650; }
/* the weather strip of the home */
.wx-home { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.3rem; margin-top: 1.1rem; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.wx-home:hover { border-color: var(--sea); color: var(--ink); transform: translateY(-2px); }
.wx-home-now { display: flex; align-items: center; gap: .7rem; }
.wx-home-now b { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--sea-deep); line-height: 1; }
.wx-home-now span { display: flex; flex-direction: column; font-size: .86rem; color: var(--muted); line-height: 1.3; }
.wx-home-now strong { font-size: 1rem; color: var(--ink); }
.wx-home-list { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; list-style: none; flex: 1; font-size: .9rem; color: var(--muted); }
.wx-home-list li { display: inline-flex; align-items: center; gap: .25rem; }
.wx-home-list b { color: var(--ink); }
.wx-home-link { font-weight: 650; color: var(--sea-dark); white-space: nowrap; }
.wx-home-link::after { content: " →"; }
@media (max-width: 1000px) {
  .wx-grid { grid-template-columns: minmax(0, 1fr); }
  .wx-map { min-height: 460px; }
}
@media (max-width: 640px) {
  .wx-days { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .4rem; }
  .wx-day { flex: none; width: 84px; }
  .wx-map { min-height: 400px; }
  .wx-pill { height: 28px; padding: 0 7px 0 4px; gap: 2px; }
  .wx-pill svg { width: 20px; height: 20px; }
  .wx-pill b { font-size: 12.5px; }
  .wx-mk { transform: translate(-50%, -14px); }
  .wx-mk em { font-size: 10px; }
  .wx-time { flex-wrap: wrap; min-width: 0; flex-basis: 100%; }
  .wx-when { min-width: 0; flex-basis: 100%; order: 5; }
  .wx-week tbody th, .wx-week thead th:first-child { position: sticky; left: 0; z-index: 1; }
  .wx-week th, .wx-week td { padding: .5rem .6rem; }
  .wx-home-list { flex-basis: 100%; }
}

/* discos, balere and dance halls (pages/clubs.php): the cards reuse .rent, the nights .vn + .gd-when */
.club .rent-head a { color: var(--ink); text-decoration: none; }
.club .rent-head a:hover { color: var(--sea-deep); text-decoration: underline; }
.cl-text { margin: 0; font-size: .94rem; }
.cl-next { margin: 0; padding: .5rem .7rem; border-radius: 12px; background: var(--sun-soft); font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.cl-next small { font-weight: 500; color: var(--muted); }
.cl-night > div { min-width: 0; }

/* ───── the campaign configurator (/configura-campagna, pages/campaign.php, js/campaign.js) ───── */
.cq-intro-h { font-size: 1.25rem; margin-top: 1.4rem; }
.cq { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.8rem; align-items: start; }
.cq-main { display: grid; gap: 1.4rem; min-width: 0; }
.cq-step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 1.3rem 1.4rem 1.4rem; margin: 0; min-width: 0; box-shadow: var(--shadow); }
.cq-step legend { float: left; width: 100%; padding: 0; }
.cq-step legend h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: 0 0 .3rem; }
.cq-step legend + * { clear: both; }
.cq-step h3 { font-size: 1.05rem; margin: 1.4rem 0 .3rem; }
.cq-step .cq-h4 { font-size: .98rem; }
.cq-hint { color: var(--muted); font-size: .92rem; margin: 0 0 .7rem; }
.cq-note { color: var(--muted); font-size: .88rem; margin: .9rem 0 0; }
.cq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .45rem; margin-bottom: .7rem; }
.cq-list { display: grid; gap: .4rem; }
.cq-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--sand); cursor: pointer; font-size: .95rem; line-height: 1.35; }
.cq-opt:hover { border-color: var(--sea); }
.cq-opt:has(input:checked) { border-color: var(--sea); background: var(--sea-soft); }
.cq-opt input { margin-top: .2rem; accent-color: var(--sea); flex: none; }
.cq-opt small { color: var(--muted); display: block; }
.cq-opt-wide { grid-column: 1 / -1; font-weight: 650; }
.cq-inline select { font: inherit; padding: .15rem .3rem; border: 1px solid #cfc7b8; border-radius: 6px; margin: 0 .2rem; background: #fff; }
.cq-tag { display: inline !important; font-size: .72rem; padding: .05rem .4rem; border-radius: 999px; background: var(--sun-soft); color: #7a4b00; }
.cq-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cq-chip { position: relative; cursor: pointer; }
.cq-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cq-chip span { display: inline-block; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--sand); font-size: .88rem; font-weight: 550; }
.cq-chip input:checked + span { background: var(--sea); border-color: var(--sea); color: #fff; }
.cq-chip input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.cq-sub { padding: .2rem 0 .4rem 1.9rem; }
.cq-sub.is-off { opacity: .55; }
.cq-towns { margin-top: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; background: var(--sand); }
.cq-towns summary { cursor: pointer; font-weight: 600; }
.cq-search { width: 100%; margin: .7rem 0 .3rem; font: inherit; padding: .5rem .7rem; border: 1px solid #cfc7b8; border-radius: 8px; }
.cq-tz { margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .9rem; }
.cq-tz b { flex: 0 0 100%; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cq-town { white-space: nowrap; cursor: pointer; }
.cq-town input { accent-color: var(--sea); }
.cq-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cq-size { cursor: pointer; display: block; }
.cq-size input { position: absolute; opacity: 0; }
.cq-size-body { display: grid; gap: .5rem; align-content: start; height: 100%; padding: .8rem; border: 2px solid var(--line); border-radius: 12px; background: var(--sand); }
.cq-size input:checked + .cq-size-body { border-color: var(--sea); background: var(--sea-soft); }
.cq-size input:focus-visible + .cq-size-body { outline: 2px solid var(--sea); outline-offset: 2px; }
.cq-size-name { font-size: 1rem; }
.cq-size small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.cq-size-price { font-size: .9rem; color: var(--sea-deep); min-height: 1.2em; }
.cq-prev { display: block; }
.cq-card { display: grid; gap: .1rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem; font-size: .72rem; line-height: 1.3; }
.cq-card b { font-size: .8rem; }
.cq-card small, .cq-card em { color: var(--muted); font-size: .7rem; }
.cq-card u { color: var(--sea-dark); font-size: .7rem; }
.cq-photo { display: block; height: 46px; border-radius: 5px; background: linear-gradient(135deg, #9fd2d6, #f2c27a); margin-bottom: .2rem; }
.cq-card-large { border: 2px solid var(--sun); }
.cq-banner { display: grid; place-items: center; width: 100%; max-height: 90px; min-height: 26px; border-radius: 6px; background: repeating-linear-gradient(45deg, var(--sea-soft), var(--sea-soft) 8px, #fff 8px, #fff 16px); border: 1px dashed var(--sea); color: var(--sea-deep); font-size: .7rem; text-align: center; line-height: 1.1; }
.cq-banner small { font-size: .65rem; }
.cq-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 460px; }
.cq-dates label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
.cq-dates input { font: inherit; padding: .55rem .7rem; border: 1px solid #cfc7b8; border-radius: 10px; background: #fff; }
.cq-side { position: sticky; top: 110px; }
.cq-sum { background: var(--paper); border: 2px solid var(--sea); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.3rem; box-shadow: var(--shadow); max-height: calc(100vh - 130px); overflow: auto; transition: opacity .15s; }
.cq-sum.is-busy { opacity: .7; }
.cq-sum h2 { font-size: 1.25rem; margin: 0 0 .2rem; }
.cq-dl { margin: .4rem 0 .6rem; font-size: .88rem; }
.cq-dl dt { font-weight: 700; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .55rem; }
.cq-dl dd { margin: .1rem 0 0; }
.cq-errs { margin: .4rem 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.cq-errs li { background: #fbe1de; color: #8a1a12; border-radius: 8px; padding: .4rem .6rem; font-size: .85rem; font-weight: 600; }
.cq-money { border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .25rem; }
.cq-money div { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.cq-money .cq-total { font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: .35rem; margin-top: .15rem; }
.cq-money .cq-total b { color: var(--coral-dark); }
.cq-money small { color: var(--muted); font-size: .8rem; }
.cq-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.cq-actions .btn-cta { width: 100%; justify-content: center; text-align: center; }
.cq-actions [aria-disabled="true"] { opacity: .5; }
.cq-cmp { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.cq-cmp h3 { font-size: 1rem; margin: 0 0 .4rem; }
.cq-cmp ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .85rem; }
.cq-cmp small { display: block; color: var(--muted); }
.cq-linkbtn { background: none; border: 0; padding: 0; color: var(--coral-dark); font: inherit; text-decoration: underline; cursor: pointer; }
.cq-form { box-shadow: none; padding: 0; border: 0; }
.cq-js { display: none !important; }
@media (max-width: 960px) {
  .cq { grid-template-columns: 1fr; }
  .cq-side { position: sticky; bottom: 0; top: auto; order: 2; z-index: 5; }
  .cq-sum { max-height: 46vh; border-radius: var(--radius) var(--radius) 0 0; }
  .cq-sizes { grid-template-columns: 1fr; }
}
.cq-more { display: none; }
@media (max-width: 960px) {
  .cq-sum { box-shadow: 0 -6px 24px rgba(23, 37, 44, .18); padding: .8rem 1rem 1rem; }
  .cq-sum h2 { font-size: 1.05rem; }
  .cq-more { display: inline-block; background: none; border: 0; padding: 0; margin: 0 0 .4rem; color: var(--sea-dark); font: inherit; font-size: .88rem; font-weight: 650; text-decoration: underline; cursor: pointer; }
  .cq-sum:not(.is-open) > .cq-hint, .cq-sum:not(.is-open) > .cq-dl, .cq-sum:not(.is-open) > .cq-note, .cq-sum:not(.is-open) .cq-actions > :not(.btn-cta), .cq-sum:not(.is-open) > .cq-cmp, .cq-sum:not(.is-open) .cq-money small { display: none; }
  .cq-sum:not(.is-open) .cq-money div:not(.cq-total) { display: none; }
  .cq-sum.is-open { max-height: 80vh; }
  .cq-sum:not(.is-open) .cq-actions { margin-top: .5rem; }
}
.cq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; background: var(--sea-deep); color: #fff; border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.cq-cta h2 { color: #fff; font-size: 1.4rem; margin: 0 0 .3rem; }
.cq-cta p { margin: 0; color: #d5e9eb; max-width: 60ch; }
.cq-dl-area { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.1rem 1rem; }
/* the configured campaign in the personal area (pages/area.php #campagna): switch-on, live state, the banner of the campaign */
.cq-plan-go { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; }
.cq-plan-go small { color: var(--muted); flex: 1 1 18rem; }
.cq-plan-go .btn[disabled] { opacity: .45; cursor: not-allowed; }
.cq-plan-now { margin: 1rem 0 .3rem; }
.cq-plan-banner { margin-top: 1.6rem; display: grid; gap: .8rem; }
.cq-plan-banner .ar-h3, .cq-plan-banner p { margin: 0; }
.cq-plan-banner .ad-banner { margin: 0; }
@media (min-width: 961px) { .cq-side { top: 180px; } .cq-sum { max-height: calc(100vh - 200px); } }
@media (max-width: 960px) { .cq-sum:not(.is-open) .cq-money .cq-total { border-top: 0; padding-top: 0; margin-top: 0; } .cq-sum:not(.is-open) .cq-money { padding-top: .4rem; } .cq-sum:not(.is-open) h2 { margin: 0; } }

/* /divertimento: the index by section and the subcategories (3 Oct 2026, owner: "suddividi in sottocategorie") */
.fun-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 0 0 .4rem; }
.fun-index-h { min-width: 8.5rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.fun-index-h:hover { color: var(--sea-deep); }
.fun-index .chips { margin: 0; }
.fun-sub { scroll-margin-top: 5rem; }
.fun-sub-p { margin: .25rem 0 1rem; color: var(--muted); }
.fun-sec { scroll-margin-top: 5rem; }
.fun-sub .castle-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

/* the museums page (/musei): the exhibitions on now (dates on top) and the museums by zone, on the .castle cards */
.museum-dates { margin: 0; font-weight: 700; color: var(--sea-deep); font-size: .95rem; }
.museum-now { font-size: .9rem; }
.museum-now a { color: inherit; }
/* who runs the museum and the entry (owner, 3 Oct 2026: "privati e pubblici", "a pagamento e non") */
.pill-own { background: var(--sand); color: var(--ink); border: 1px solid var(--line); }
.pill-ok { background: #e4f3e8; color: var(--ok); }
.pill-fee { background: #fbe7e3; color: var(--coral-dark); }

/* free listing of a business (pages/join.php, home band #inserisci) */
.join-pages { margin: .8rem 0 1.2rem; }
.join-warn { background: #fff4e0; border: 1px solid #f0c27a; border-left: 4px solid #e08a1e; border-radius: 10px; padding: .9rem 1rem; color: #5a3b0c; }
.join-choose { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.join-choose legend { font-weight: 600; font-size: .92rem; margin-bottom: .5rem; padding: 0; }
.form .join-choose label { display: inline-flex; font-weight: 550; }
.join-choose input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.join-choose span { display: inline-block; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: .92rem; }
.join-choose input:checked + span { background: var(--sea); border-color: var(--sea); color: #fff; }
.join-choose input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.form .join-consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.form .join-consent input { width: auto; margin-top: .25rem; }

/* ── the two roads of the paid visibility (3 Oct 2026): /pubblicita, the personal area, the boosted rows (lib/ads.php road 1) ── */
/* /pubblicita, THE TWO ROADS (3 Oct 2026, layout chosen by the owner): every road keeps its colour, sea = road 1, coral = road 2 */
.adv-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.adv-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; border: 2px solid transparent; transition: transform .15s; }
.adv-card:hover { transform: translateY(-2px); color: var(--ink); }
.adv-r1 { border-color: var(--sea); } .adv-r2 { border-color: var(--coral); }
.adv-top { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.4rem; color: #fff; }
.adv-r1 .adv-top { background: linear-gradient(120deg, var(--sea-deep), var(--sea)); }
.adv-r2 .adv-top { background: linear-gradient(120deg, var(--coral-dark), #e9792f 60%, var(--sun)); }
.adv-num { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-family: var(--display); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.adv-top h3 { margin: 0; color: #fff; font-size: 1.45rem; } .adv-top small { display: block; opacity: .92; font-size: .9rem; }
.adv-body { display: flex; flex-direction: column; gap: .9rem; flex: 1; padding: 1.1rem 1.4rem 1.4rem; }
.adv-facts { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.adv-facts li { display: flex; gap: .6rem; } .adv-facts b { flex: none; min-width: 6.5rem; padding-top: .1rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
.adv-body .btn { align-self: flex-start; margin-top: auto; }
.adv-cmp-wrap { overflow-x: auto; margin-top: 1.4rem; }
.adv-cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); font-size: .95rem; }
.adv-cmp caption { caption-side: top; text-align: left; padding: 0 0 .5rem .15rem; font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.adv-cmp th, .adv-cmp td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.adv-cmp thead th { font-family: var(--display); font-size: 1.05rem; color: #fff; }
.adv-cmp thead th.c1 { background: var(--sea); } .adv-cmp thead th.c2 { background: var(--coral); }
.adv-cmp td.c1 { background: var(--sea-soft); } .adv-cmp td.c2 { background: var(--sun-soft); }
.adv-cmp th[scope=row] { width: 18%; color: var(--muted); font-weight: 600; }
.adv-cmp tbody tr:last-child > * { border-bottom: 0; }
.adv-lane { padding: 3rem 0; }
.adv-l1 { background: var(--sea-soft); border-top: 6px solid var(--sea); }
.adv-l2 { background: var(--sun-soft); border-top: 6px solid var(--coral); }
.adv-lane-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.adv-l1 .adv-num { background: var(--sea); } .adv-l2 .adv-num { background: var(--coral); }
.adv-lane-head h2 { margin: 0; } .adv-lane-head p { margin: 0; color: var(--muted); }
.adv-tag { display: inline-block; margin-bottom: .3rem; padding: .2rem .6rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.adv-l1 .adv-tag { background: var(--sea); } .adv-l2 .adv-tag { background: var(--coral); }
.adv-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start; }
.adv-steps { display: grid; gap: .9rem; margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: s; }
.adv-steps li { display: flex; gap: .8rem; counter-increment: s; }
.adv-steps li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 700; }
.adv-l1 .adv-steps li::before { background: var(--sea); } .adv-l2 .adv-steps li::before { background: var(--coral); }
.adv-steps span { display: block; color: var(--muted); font-size: .95rem; }
.adv-box { display: grid; gap: .8rem; padding: 1.3rem; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.adv-l1 .adv-box { border-top: 4px solid var(--sea); } .adv-l2 .adv-box { border-top: 4px solid var(--coral); }
.adv-box p { margin: 0; }
.adv-box table { width: 100%; border-collapse: collapse; }
.adv-box td { padding: .4rem 0; border-bottom: 1px solid var(--line); } .adv-box td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.adv-box .btn { justify-self: start; }
.adv-small { display: block; color: var(--muted); font-size: .85rem; }
.adv-common { padding-top: 3rem; }
@media (max-width: 760px) {
  .adv-pick, .adv-cols { grid-template-columns: 1fr; }
  .adv-cmp { font-size: .85rem; } .adv-cmp th, .adv-cmp td { padding: .5rem .55rem; }
  .adv-facts b { min-width: 5.5rem; }
}
.ar-roads { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ar-roads a { display: flex; flex-direction: column; gap: .15rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; text-decoration: none; color: var(--ink); }
.ar-roads a:hover { border-color: var(--sea); }
.ar-roads span { color: var(--muted); font-size: .9rem; }
@media (max-width: 600px) { .ar-roads { grid-template-columns: 1fr; } }
.ar-listing { background: var(--sea-soft); border-radius: 12px; padding: .7rem .9rem; margin: 0 0 .5rem; }
.ar-listing span { display: block; color: var(--muted); font-size: .9rem; }
.ar-search { display: flex; gap: .6rem; align-items: center; margin: .8rem 0; }
.ar-search .search { flex: 1; max-width: none; margin: 0; }
.ar-found { display: grid; gap: .4rem; margin: 0 0 .8rem; }
.ar-opt { display: flex; gap: .6rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; cursor: pointer; }
.ar-opt input { margin-top: .3rem; }
.ar-opt small { display: block; color: var(--muted); }
.ar-pkg-price { font-size: 1.1rem; font-weight: 700; color: var(--sea-deep); }
.ar-pkg-price small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.vn-top { border-color: var(--sun); background: linear-gradient(0deg, #fff, var(--sun-soft)); }
.vn-top .ad-tag { margin-right: .2rem; }
.vn-top-p { margin: .3rem 0 0; font-size: .9rem; color: var(--ink); }
.vn-top-group .ev-month { margin-top: 1.4rem; }
.ad-top .castle { border-color: var(--sun); }
.ad-top-card .ad-tag { display: inline-block; margin-bottom: .4rem; }
/* road 1: the daily cap chosen by the business (area, 3 Oct 2026) */
.ar-cap { display: grid; gap: .3rem; margin: .8rem 0; }
.ar-cap label { font-weight: 600; }
.ar-cap-row { display: flex; gap: .5rem; align-items: center; }
.ar-cap-row input { width: 7.5rem; font: inherit; padding: .5rem .75rem; border: 1px solid #cfc7b8; border-radius: 10px; background: #fff; }
.ar-cap-row input:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.ar-cap .note { margin: 0; }
.ar-cap .btn-cta { justify-self: start; margin-top: .4rem; }

/* PAESE PER PAESE (pages/towns.php) */
.tw-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.2rem 0 1.1rem; }
.tw-search .search { flex: 1 1 280px; max-width: 520px; }
.tw-miss { background: var(--sun-soft); border: 1px solid #f1dcb4; border-radius: 12px; padding: .6rem .9rem; color: #5a4a2c; max-width: 70ch; }
.tw-places { color: var(--muted); font-size: .95rem; max-width: 90ch; }
.tw-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.tw-grid li p { margin: 0 0 .5rem; }
.tw-grid li p:last-child { margin-bottom: 0; }
.tw-grid small { color: var(--muted); font-size: .86rem; }
.tw-sos { border-color: #f3b7ab !important; background: #fff6f4 !important; }
.tw-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.tw-big span { color: var(--muted); font-size: .92rem; }
.tw-big .tw-tel { font-family: var(--display); font-size: 1.55rem; font-weight: 650; }
.tw-sos .tw-big .tw-tel { color: var(--coral-dark); }
.tw-tel { font-weight: 650; text-decoration: none; white-space: nowrap; color: var(--sea-deep); }
.tw-count { color: var(--muted); font-weight: 500; font-size: .85em; }
.tw-rows { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.tw-rows li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; }
.tw-grid .tw-rows li { padding: .45rem 0; border: 0; border-top: 1px solid var(--line); }
.tw-rows b { font-weight: 650; font-size: .95rem; overflow-wrap: anywhere; }
.tw-rows small { display: block; }
.tw-acts { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; flex-shrink: 0; align-items: center; }
.tw-acts a:not(.tw-tel) { font-size: .82rem; font-weight: 650; text-decoration: none; padding: .3rem .65rem; border-radius: 999px; background: var(--sea-soft); color: var(--sea-deep); }
.tw-acts .tw-tel { font-size: .92rem; }
.tw-more summary { cursor: pointer; font-weight: 650; color: var(--sea-deep); margin: .6rem 0; font-size: .92rem; }
.tw-facts { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tw-facts em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); opacity: .8; margin-top: .2rem; }
.tw-lines p { margin: .3rem 0; max-width: 90ch; }
.tw-born { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 1.5rem; margin-bottom: 1rem; }
.tw-sec { margin-bottom: 2rem; }
.tw-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.tw-sec-head h3 { margin: 0; font-size: 1.25rem; }
.tw-sec .castle-grid { margin-bottom: .8rem; }
@media (max-width: 560px) { .tw-rows li { align-items: flex-start; flex-direction: column; } .tw-acts { justify-content: flex-start; } .tw-grid { grid-template-columns: 1fr; } }

/* ── historical monuments (/monumenti, pages/monuments.php, 3 Oct 2026): the ranking with numbered badges, gold / silver / bronze podium ── */
.mon-head .lead { max-width: 70ch; }
.mon-stats { list-style: none; margin: 1.2rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.mon-stats li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; min-width: 7.5rem; }
.mon-stats b { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; color: var(--sea-deep); }
.mon-stats span { font-size: .82rem; color: var(--muted); }
.mon-sub { color: var(--muted); margin-top: -.3rem; }
/* "Valmarecchia o Montefeltro?" under the two zones (16 Oct 2026): a closed box, three columns that stack on the phone */
.mon-diff { scroll-margin-top: 6rem; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--sea); border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.2rem; }
.mon-diff summary { cursor: pointer; padding: .8rem 1.1rem; font-weight: 700; color: var(--sea-deep); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.mon-diff summary::-webkit-details-marker { display: none; }
.mon-diff summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--sea); }
.mon-diff[open] summary::after { content: "\2212"; }
.mon-diff > p, .mon-diff-grid { margin: 0 1.1rem .9rem; }
.mon-diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.mon-diff-grid > div { background: var(--sand); border-radius: var(--radius); padding: .8rem 1rem; }
.mon-diff-grid > .mon-diff-both { background: var(--sun-soft); }
.mon-diff-grid h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.mon-diff-grid p { margin: 0; font-size: .95rem; }
.mon-diff-here { color: var(--muted); font-size: .92rem; }
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.mon-grid-top { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mon-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 6rem; transition: transform .2s; }
.mon-card:hover { transform: translateY(-3px); }
.mon-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.mon-ph { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--sea-deep), var(--sea)); overflow: hidden; }
.mon-big .mon-ph { aspect-ratio: 16 / 10; }
.mon-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.mon-card:hover .mon-ph img { transform: scale(1.05); }
.mon-rank { position: absolute; left: .7rem; top: .7rem; display: inline-grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--paper); color: var(--sea-deep); font: 700 1.05rem/1 var(--display); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.mon-r1 .mon-rank, .mon-rank.mon-r1, .mon-pin.mon-r1 { background: linear-gradient(135deg, #f7d774, #d4a017); color: #3d2c00; }
.mon-r2 .mon-rank, .mon-rank.mon-r2, .mon-pin.mon-r2 { background: linear-gradient(135deg, #eef1f4, #a9b2bb); color: #22303a; }
.mon-r3 .mon-rank, .mon-rank.mon-r3, .mon-pin.mon-r3 { background: linear-gradient(135deg, #f0b98a, #b8733a); color: #3a1f08; }
.mon-big .mon-rank { min-width: 2.9rem; height: 2.9rem; font-size: 1.35rem; }
.mon-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; flex: 1; }
.mon-name { margin: 0; font-size: 1.12rem; }
.mon-big .mon-name { font-size: 1.3rem; }
.mon-where { color: var(--muted); font-size: .86rem; }
.mon-blurb { font-size: .95rem; color: var(--ink); }
.mon-pills { margin-top: auto; padding-top: .35rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.pill-free { background: #e4f3e8; color: var(--ok); }
.mon-card > .ph-credit { position: absolute; top: .55rem; right: .5rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(8, 40, 46, .55); color: rgba(255, 255, 255, .9); font-size: .62rem; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.mon-card.no-photo .mon-ph { aspect-ratio: 4 / 1.4; }
.mon-map { height: 520px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; z-index: 0; }
.mon-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sea); color: #fff; font: 700 .8rem/1 var(--font); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .35); }
.mon-pin.mon-top { background: var(--coral); }
.mon-itins { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.mon-itin { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; scroll-margin-top: 6rem; }
.mon-itin h3 { margin-bottom: .3rem; }
.mon-itin-n { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sea); margin-bottom: .4rem; }
.mon-stops { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; flex: 1; }
.mon-stops a { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-weight: 550; }
.mon-stops a:hover { color: var(--coral-dark); }
.mon-stops small { color: var(--muted); font-weight: 400; }
.mon-dot { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sea-soft); color: var(--sea-deep); font-size: .78rem; font-weight: 700; }
.btn-small { padding: .55rem 1rem; font-size: .9rem; align-self: flex-start; }
.mon-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.mon-rank-lg { position: static; min-width: 3rem; height: 3rem; font-size: 1.5rem; box-shadow: none; border: 1px solid var(--line); }
.mon-rank-of { font-weight: 700; color: var(--muted); font-size: .9rem; margin-right: .3rem; }
.mon-fact { background: var(--sun-soft); border-left: 4px solid var(--sun); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin: 1.4rem 0; }
.mon-fact h2 { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; margin-bottom: .35rem; color: #8a5300; }
.mon-fact p { margin: 0; }
.mon-must h2 { font-size: 1.15rem; }
.mon-must ol { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .3rem; }
.mon-info { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.2rem 1rem; margin-top: 1.2rem; }
.mon-hours { font-size: .97rem !important; font-weight: 450 !important; }
.mon-phones { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.mon-phones a { white-space: nowrap; }
.mon-also { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; }
.mon-day { margin: .8rem 0 0; }
.mon-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.mon-pg { text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; }
.mon-pg small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.mon-pg b { color: var(--sea); }
.mon-pg-next { text-align: right; }
.mon-pg-all { font-weight: 650; color: var(--sea-dark); }
@media (max-width: 700px) {
  .mon-pager { grid-template-columns: 1fr 1fr; }
  .mon-pg-all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .mon-map { height: 400px; }
}

/* farm stays (pages/farms.php, 12 Oct 2026): one card per agriturismo, two photos side by side, the girasoli of the Region as small sunflowers */
.fm-zones .place-card { aspect-ratio: 3 / 2; }
.fm-other { margin-bottom: 1.2rem; }
.fm-count { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: .3rem; }
.fm-suns { display: inline-flex; gap: 1px; vertical-align: -2px; }
.ev-month .fm-suns .fm-sun { width: 20px; height: 20px; }
.fm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.fm { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.fm-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.fm-ph-1 { grid-template-columns: 1fr; }
.fm-ph a { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sea-soft); }
.fm-ph-1 a { aspect-ratio: 2 / 1; }
.fm-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.fm-ph a:hover img { transform: scale(1.04); }
.fm-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.fm-body h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.fm-where { margin: 0; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.fm-offer { margin: 0; font-size: .86rem; font-weight: 600; color: var(--sea-dark); }
.fm-text { margin: .2rem 0 0; font-size: .95rem; line-height: 1.5; }
.fm .vn-links { margin: auto 0 0; padding-top: .4rem; }
@media (max-width: 600px) { .fm-list { grid-template-columns: 1fr; } }

/* SALUTE (pages/health.php, 13 Oct 2026): the emergency box, the cards reuse .lg, the town grid reuses .tw-grid */
.hl-sos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem 1.6rem; margin: 1.2rem 0; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: #fdecea; border: 2px solid #c0271d; box-shadow: var(--shadow); }
.hl-sos h2 { margin: 0 0 .3rem; font-size: 1.3rem; color: #8f1d15; }
.hl-sos p { margin: 0 0 .5rem; }
.hl-sos-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; }
.hl-sos-num a { font-size: 3.2rem; font-weight: 800; line-height: 1; color: #c0271d; text-decoration: none; letter-spacing: .02em; }
.hl-sos-side { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; font-size: .95rem; }
.hl-sos-side .tw-tel { font-weight: 800; font-size: 1.25rem; }
.hl-search { margin-top: .4rem; }
.hl-km { color: var(--muted); font-weight: 600; white-space: nowrap; }
.hl-hours { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.hl-season { font-size: .86rem; font-weight: 600; color: var(--muted); }
.hl-season.is-on { color: #0f6e7a; }
.tw-rows small.hl-season { display: block; }
.hl-steps h3 { color: #8f1d15; }
.hl-bring ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.hl-bring li { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 .25rem; font-size: .97rem; }
.hl-costs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; margin: 1rem 0 0; }
.hl-costs > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); }
.hl-costs dt { font-weight: 700; margin: 0 0 .25rem; }
.hl-costs dd { margin: 0; font-size: .95rem; }
.hl-auth { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.hl-auth li { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid #3a5a94; border-radius: var(--radius); padding: .7rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.hl-auth .tw-tel { font-weight: 800; font-size: 1.2rem; }
.hl-auth small { color: var(--muted); }
.hl-cols { columns: 2 340px; column-gap: 1.6rem; }
.hl-cols li { break-inside: avoid; }
.tw-health { border-color: #c0271d !important; }
.lg.hl.is-on, .lg.hl:target { border-color: #c0271d; }
@media (max-width: 700px) { .hl-sos { grid-template-columns: 1fr; } .hl-sos-num a { font-size: 2.6rem; } }
/* monuments by zone (14 Oct 2026): zone colours of the map pins and of the legend, UNESCO pill, zone heading */
.mon-zone { margin-bottom: 1rem; }
.mon-zone h2 small { font-size: .55em; font-weight: 600; color: var(--muted); margin-left: .4rem; letter-spacing: .02em; }
.pill-unesco { background: #e6eefb; color: #0b3d91; }
.mon-itin-z { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .2rem; }
.mon-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .8rem 0 0; padding: 0; font-size: .88rem; }
.mon-legend li { display: flex; align-items: center; gap: .4rem; }
.mon-legend .mon-pin { width: 16px; height: 16px; border-width: 1px; box-shadow: none; }
.mon-pin.mon-z-forli-cesena { background: #0f7c8a; }
.mon-pin.mon-z-ravenna { background: #b8860b; }
.mon-pin.mon-z-rimini { background: #d9534f; }
.mon-pin.mon-z-valmarecchia { background: #b0457b; }
.mon-pin.mon-z-san-marino { background: #3b6fd6; }
.mon-pin.mon-z-bologna { background: #a3361f; }
.mon-pin.mon-z-comacchio { background: #2e8b57; }
.mon-pin.mon-z-romagna-toscana { background: #6b4c9a; }
.mon-pin.mon-z-montefeltro { background: #5a6b2a; }
.mon-pin.mon-r1, .mon-pin.mon-r2, .mon-pin.mon-r3 { color: #fff; width: 34px; height: 34px; }
.mon-pin.mon-r1 { box-shadow: 0 0 0 3px #d4a017, 0 1px 5px rgba(0, 0, 0, .35); }
.mon-pin.mon-r2 { box-shadow: 0 0 0 3px #a9b2bb, 0 1px 5px rgba(0, 0, 0, .35); }
.mon-pin.mon-r3 { box-shadow: 0 0 0 3px #b8733a, 0 1px 5px rgba(0, 0, 0, .35); }

/* "Speciale Presepi Natalizi" (14 Oct 2026, operator's order): the button next to the title of /eventi and the strip on top of every page until 6 Jan */
.head-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-bottom: .35em; }
.head-cta h1 { margin-bottom: 0; }
.btn-cribs { background: linear-gradient(110deg, #9e1b1b 0%, var(--coral) 60%, var(--sun) 100%); box-shadow: 0 4px 14px rgba(158, 27, 27, .25); }
.btn-cribs:hover { background: linear-gradient(110deg, #7f1515 0%, var(--coral-dark) 60%, #e9792f 100%); }
.cribs-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem .6rem; padding: .5rem 1rem; text-align: center; text-decoration: none;
  background: linear-gradient(90deg, #7f1515 0%, #9e1b1b 45%, var(--coral) 100%); color: #fff; font-size: .92rem; line-height: 1.3; }
.cribs-strip:hover { color: #fff; }
.cribs-strip b { font-weight: 650; }
.cribs-strip-sub { margin-left: -.6rem; font-weight: 500; }
.cribs-strip-go { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: .12rem .7rem; font-weight: 650; white-space: nowrap; }
.cribs-strip:hover .cribs-strip-go { background: rgba(255, 255, 255, .3); }
@media (max-width: 640px) { .cribs-strip { font-size: .86rem; } .cribs-strip-sub { display: none; } }

/* the castles page: the photo on top of each card (content/places.php 'c-<slug>', 14 Oct 2026), the credit over its corner */
.castle.has-photo { padding-top: 0; overflow: hidden; }
.castle-ph { position: relative; margin: 0 -1.2rem .35rem; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--sea-deep), var(--sea)); overflow: hidden; }
.castle-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.castle-ph .ph-credit { position: absolute; right: .5rem; bottom: .45rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(8, 40, 46, .55); color: rgba(255, 255, 255, .9); font-size: .62rem; max-width: calc(100% - 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Christmas cribs: the facts of a crib (pages/event.php #caratteristiche) and the intro of /eventi/presepi (14 Oct 2026) */
.ev-card-crib { margin: .3rem 0 0; font-size: .82rem; font-weight: 650; color: #7a5a12; }
.crib-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.crib-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.crib-box h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 0 0 .7rem; }
.crib-box h3 svg { color: #7a5a12; flex: none; }
.crib-box p { margin: 0 0 .6rem; line-height: 1.55; }
.crib-box p:last-child { margin-bottom: 0; }
.crib-made, .crib-arrive { grid-column: span 2; }
.crib-big { font-family: var(--display); font-size: 1.45rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.crib-small { font-size: .9rem; color: var(--muted); }
.crib-points { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crib-points li { background: var(--sand, #f6efe2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; font-size: .88rem; font-weight: 600; }
.crib-arrive dl { margin: 0 0 .8rem; display: grid; gap: .65rem; }
.crib-arrive dt { display: flex; align-items: center; gap: .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.crib-arrive dt svg { color: var(--sea); }
.crib-arrive dd { margin: .15rem 0 0; line-height: 1.5; }
.crib-box .btn-row { margin-top: .8rem; }
.cribs-intro { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem 2.5rem; margin-top: 1.6rem; }
.cribs-intro h2 { font-size: 1.3rem; margin: 0 0 .6rem; }
.cribs-intro .prose p { line-height: 1.7; }
.cribs-types { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.cribs-types dl { margin: 0; display: grid; gap: .7rem; }
.cribs-types dt { font-weight: 700; }
.cribs-types dt small { color: var(--muted); font-weight: 600; }
.cribs-types dd { margin: .1rem 0 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.cribs-tips { max-width: 46rem; }
@media (max-width: 860px) {
  .crib-made, .crib-arrive { grid-column: auto; }
  .cribs-intro { grid-template-columns: 1fr; }
}