/* Vacanze a Gallipoli — editorial coastal theme
   Primary: deep wine (#89051C evolved) | Accent: Ionian teal | Cream canvas
   Framework: Bulma (CDN). This file = brand tokens, type, hero, cards, small tweaks only. */

:root {
  --wine-900: #5e0413;
  --wine-700: #89051c;   /* original primary, preserved */
  --wine-500: #b21733;
  --teal-700: #0e6e84;
  --teal-500: #1a8fb5;   /* Ionian accent */
  --teal-300: #7fcadb;
  --sand-50:  #fbf7f0;
  --sand-100: #f4ece0;
  --sand-200: #e9dcc8;
  --ink-900:  #241a17;
  --ink-700:  #423733;
  --ink-500:  #6b5d57;
  --white:    #ffffff;
  --shadow-sm: 0 2px 10px rgba(36, 26, 23, .08);
  --shadow-md: 0 12px 34px rgba(36, 26, 23, .14);
  --radius:   14px;
  --maxw:     1180px;
  --head: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink-700);
  background: var(--sand-50);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .title, .subtitle.is-display {
  font-family: var(--head);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.content h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 1rem; color: var(--wine-700); }
.content h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 2.4rem; margin-bottom: .8rem; }
.content h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 1.6rem; color: var(--teal-700); }
.content p, .content li { color: var(--ink-700); font-size: 1.06rem; }
.content a { color: var(--wine-700); text-decoration: underline; text-underline-offset: 2px; }
.content a:hover { color: var(--teal-700); }
.content ul { margin-left: 1.1rem; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Top nav ---------- */
.vg-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 247, 240, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sand-200);
}
.vg-nav .navbar-item, .vg-nav .navbar-link {
  color: var(--ink-700); font-weight: 500;
}
.vg-nav a.navbar-item:hover, .vg-nav .navbar-link:hover {
  background: transparent; color: var(--wine-700);
}
.vg-brand-text { font-family: var(--head); font-weight: 600; font-size: 1.3rem; color: var(--wine-700) !important; letter-spacing: -0.01em; }
.vg-brand-text small { display:block; font-family: var(--body); font-weight:500; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--teal-700); }
.vg-logo-mark {
  width: 38px; height: 38px; border-radius: 10px; margin-right: .6rem;
  background: linear-gradient(135deg, var(--wine-700), var(--teal-700));
  color: #fff; font-family: var(--head); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.navbar-burger { color: var(--wine-700); }
.navbar-item.is-cta a, a.vg-cta {
  background: var(--wine-700); color: #fff !important; border-radius: 999px;
  padding: .5rem 1.15rem; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
a.vg-cta:hover { background: var(--wine-900); transform: translateY(-1px); }

/* ---------- Hero ---------- */
.vg-hero { position: relative; color: #fff; overflow: hidden; }
.vg-hero .vg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vg-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,26,23,.28) 0%, rgba(94,4,19,.55) 100%);
}
.vg-hero .vg-hero-inner {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3.5rem, 11vw, 8rem) 1.25rem;
}
.vg-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.6vw, 4rem); max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.vg-hero .vg-kicker {
  display:inline-block; font-family: var(--body); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; font-size:.72rem; color: var(--teal-300);
  background: rgba(0,0,0,.22); padding:.35rem .8rem; border-radius:999px; margin-bottom:1.1rem;
}
.vg-hero p.vg-lead { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 48ch; color: #f5ece0; margin-top: .4rem; }
.vg-hero .vg-hero-cta { margin-top: 1.8rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.vg-btn-primary { background: #fff; color: var(--wine-700); border-radius:999px; padding:.7rem 1.4rem; font-weight:600; text-decoration:none; transition: transform .15s ease; }
.vg-btn-primary:hover { transform: translateY(-2px); color: var(--wine-900); }
.vg-btn-ghost { background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:.7rem 1.4rem; font-weight:600; text-decoration:none; }
.vg-btn-ghost:hover { background: rgba(255,255,255,.22); color:#fff; }

/* compact hero for inner pages */
.vg-hero.is-compact .vg-hero-inner { padding: clamp(2.6rem, 7vw, 4.5rem) 1.25rem; }

/* ---------- Sections / layout ---------- */
.vg-section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.5rem) 1.25rem; }
.vg-section.is-narrow { max-width: 820px; }
.vg-eyebrow { color: var(--teal-700); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }

/* feature cards */
.vg-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1.4rem; }
.vg-card {
  background:#fff; border:1px solid var(--sand-200); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.vg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vg-card img { aspect-ratio: 3 / 2; object-fit: cover; width:100%; }
.vg-card .vg-card-body { padding: 1.2rem 1.3rem 1.4rem; }
.vg-card h3 { margin:.2rem 0 .5rem; color: var(--wine-700); font-size:1.25rem; }
.vg-card p { color: var(--ink-500); font-size:.98rem; margin-bottom: .9rem; }
.vg-card a.vg-cardlink { color: var(--teal-700); font-weight:600; text-decoration:none; }
.vg-card a.vg-cardlink:hover { color: var(--wine-700); }

/* inline figure inside article */
.vg-figure { margin: 1.8rem 0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.vg-figure img { width:100%; aspect-ratio: 3/2; object-fit:cover; }
.vg-figure figcaption { font-size:.85rem; color: var(--ink-500); padding:.55rem .2rem; text-align:center; }

/* article + aside split */
.vg-article-grid { display:grid; grid-template-columns: minmax(0,1fr); gap:2.4rem; }
@media (min-width: 1000px) { .vg-article-grid.has-aside { grid-template-columns: minmax(0,1fr) 300px; } }
.vg-aside { align-self:start; position:sticky; top:90px; }
.vg-aside .vg-aside-card {
  background: linear-gradient(160deg, var(--wine-700), var(--teal-700));
  color:#fff; border-radius: var(--radius); padding:1.5rem 1.4rem; box-shadow: var(--shadow-md);
}
.vg-aside .vg-aside-card h3 { color:#fff; font-size:1.2rem; }
.vg-aside .vg-aside-card p { color:#f5ece0; font-size:.96rem; }
.vg-aside .vg-aside-card a { display:inline-block; margin-top:.6rem; background:#fff; color:var(--wine-700); border-radius:999px; padding:.5rem 1.1rem; font-weight:600; text-decoration:none; }
.vg-aside .vg-quote { background:#fff; border:1px solid var(--sand-200); border-left:4px solid var(--teal-500); border-radius:10px; padding:1.1rem 1.2rem; margin-top:1.2rem; font-style:italic; color:var(--ink-700); }
.vg-aside .vg-quote cite { display:block; margin-top:.5rem; font-style:normal; font-weight:600; color:var(--teal-700); font-size:.9rem; }

/* strip / banner */
.vg-strip { background: var(--sand-100); }
.vg-strip .vg-section { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.vg-strip h2 { margin:0; color: var(--wine-700); }

/* ---------- Contact form ---------- */
.vg-form { background:#fff; border:1px solid var(--sand-200); border-radius: var(--radius); padding:1.6rem; box-shadow: var(--shadow-sm); }
.vg-form .field label { font-weight:600; color: var(--ink-900); }
.vg-form input, .vg-form select, .vg-form textarea {
  width:100%; border:1px solid var(--sand-200); border-radius:10px; padding:.7rem .9rem; font-family:var(--body); font-size:1rem; color:var(--ink-900); background:var(--sand-50);
}
.vg-form input:focus, .vg-form select:focus, .vg-form textarea:focus { outline:none; border-color: var(--teal-500); box-shadow:0 0 0 3px rgba(26,143,181,.15); }
.vg-form button { background: var(--wine-700); color:#fff; border:none; border-radius:999px; padding:.8rem 1.6rem; font-weight:600; font-size:1rem; cursor:pointer; transition: background .15s ease; }
.vg-form button:hover { background: var(--wine-900); }
.vg-form .vg-note { font-size:.85rem; color: var(--ink-500); margin-top:.8rem; }

/* ---------- Footer ---------- */
.vg-footer { background: var(--wine-900); color:#f3e7da; margin-top:3rem; }
.vg-footer .vg-section { padding-top:3rem; padding-bottom:2rem; }
.vg-footer-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:2rem; }
.vg-footer h4 { color:#fff; font-size:1.05rem; margin-bottom:.8rem; }
.vg-footer a { color:#e8d3c0; text-decoration:none; display:block; padding:.18rem 0; font-size:.95rem; }
.vg-footer a:hover { color:#fff; }
.vg-footer .vg-foot-brand p { color:#d9bfa9; font-size:.95rem; }
.vg-footer-bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:1.5rem; padding-top:1.2rem; font-size:.85rem; color:#d3b9a4; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; }

/* ---------- 404 ---------- */
.vg-404 { text-align:center; padding: clamp(4rem,12vw,8rem) 1.25rem; }
.vg-404 .vg-404-num { font-family:var(--head); font-size: clamp(4rem,16vw,9rem); color: var(--wine-700); line-height:1; }

/* utilities */
.vg-center { text-align:center; }
.vg-mt-2 { margin-top: 2rem; }
.vg-tag-teal { display:inline-block; background:var(--teal-500); color:#fff; border-radius:999px; padding:.2rem .7rem; font-size:.75rem; font-weight:600; letter-spacing:.04em; }