/* =========================
   Base Theme (Alpenblick)
   ========================= */

/* Tokens */
:root{
  --bg:#ffffff;
  --bg-soft:#f8fafc;             /* slate-50 */
  --ink:#0f172a;                 /* slate-900 */
  --muted:#64748b;               /* slate-500/600 */
  --ring:rgba(218,41,28,.20);    /* Swiss red focus ring */
  --border:#e2e8f0;              /* slate-200 */
  --card:#ffffff;
  --brand:#DA291C;               /* Swiss red (Pantone 485C approx) */
  --radius-lg:1.25rem;           /* ~rounded-2xl */
  --shadow:0 10px 25px rgba(2,6,23,.08), 0 2px 6px rgba(2,6,23,.06);
}

/* Reset-ish */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:linear-gradient(to bottom,#f1f5f9,var(--bg),#f1f5f9);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

/* Layout utilities */
.container{ max-width:1120px; margin:0 auto; padding:0 1rem }
.grid{ display:grid; gap:1rem }
.grid-2{ grid-template-columns:1fr }
.grid-3{ grid-template-columns:1fr }
@media (min-width:1024px){ .grid-2{ grid-template-columns:1fr 1fr } }
@media (min-width:640px){ .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

.section{ padding:3rem 0 }
@media (min-width:1024px){ .section{ padding:4rem 0 } }

/* Account for fixed header height */
body{ padding-top:64px }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card .header{ padding:1rem 1.25rem; border-bottom:1px solid var(--border) }
.card .body{ padding:1rem 1.25rem }

/* Type & badges */
.title-2{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; color:var(--brand) }
.title-2 a{ color:inherit }

/* Global heading + bold color to Swiss red */
h1,h2,h3,h4,h5,h6{ color:var(--brand) }
strong,b{ color:var(--brand) }
.muted{ color:#475569 }
.badge{
  display:inline-flex; align-items:center; font-weight:600;
  border-radius:999px; padding:.35rem .7rem; font-size:.8rem;
}
.badge-solid{ background:var(--brand); color:#fff }
.badge-secondary{ background:var(--border); color:var(--ink) }
.badge-outline{ border:1px solid var(--border); color:var(--ink); background:#fff }

/* Badge row utility (handles wrap + spacing across breakpoints) */
.badge-row{ display:flex; flex-wrap:wrap; gap:.5rem }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:.75rem;
  border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:600;
  cursor:pointer; box-shadow:0 4px 12px rgba(2,6,23,.15);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(2,6,23,.18) }
.btn:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px var(--ring) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn-outline{ background:#fff; color:var(--ink); border-color:var(--border) }

/* =========================
   Header (sticky + menus)
   ========================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--brand);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:background-color .25s ease, box-shadow .25s ease;
}
.scrolled .site-header{ background:var(--brand); box-shadow:0 2px 6px rgba(0,0,0,.25) }

  .header-row{
    min-height:64px;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.8rem;
  }
  .header-actions{ display:flex; align-items:center; gap:.5rem }
  .lang-picker{ display:flex; align-items:center; gap:.4rem }
  .lang-picker select{ height:36px; padding:.2rem .5rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.4); font:inherit; background:transparent; color:#fff }
  .lang-picker label, .lang-picker .muted{ color:rgba(255,255,255,.9) }
  .lang-links{ display:flex; align-items:center; gap:.35rem }
  .lang-links .sep{ opacity:.7; color:currentColor }
  .site-header .lang-link{ color:#fff; opacity:.85 }
  .site-header .lang-link:hover{ opacity:1 }
  .site-header .lang-link.active{ opacity:1; font-weight:700; text-decoration:underline; text-underline-offset:3px }
  @media (max-width:768px){ .lang-picker label{ display:none } }
  .lang-picker-inline{ display:none }

.brand{ display:flex; align-items:center; gap:.75rem }
.brand-mark{
  width:36px; height:36px; border-radius:.9rem; display:grid; place-items:center;
  background:white; color:#fff; box-shadow:var(--shadow);
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; border-radius:1rem }
.brand-text .brand-name{ font-weight:700; line-height:1; color:#fff }
.brand-text .brand-sub{ font-size:.85rem; color:rgba(255,255,255,.85) }

/* Primary nav */
/* Always visible on all screens */
nav.primary{ display:flex; gap:1.1rem; font-size:.95rem; align-items:center; color:#fff }

.site-header nav.primary > a,
.site-header .menu-trigger{
  display:inline-flex; align-items:center; height:40px; padding:0 .25rem; line-height:1;
  background:transparent; border:0;  cursor:pointer; color:#fff;
}

   /* Header CTA always pill + readable */
    .site-header a.btn{
      height:40px; padding:0 1rem; border-radius:9999px;
      background:transparent; color:#fff; border-color:rgba(255,255,255,.85);
    }

    /* Mobile hamburger (hidden on desktop) */
    .mobile-nav-toggle{
      display:none; /* shown at <= 768px */
      width:40px; height:40px;
      border:1px solid rgba(255,255,255,.5); border-radius:.75rem;
      background:transparent; color:#fff;
      align-items:center; justify-content:center;
      position:relative; cursor:pointer;
      transition:box-shadow .15s ease, transform .15s ease;
    }
    .mobile-nav-toggle:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px var(--ring) }
    .mobile-nav-toggle .icon-bars,
    .mobile-nav-toggle .icon-close{ position:absolute; inset:0; display:grid; place-items:center; transition:transform .18s ease, opacity .18s ease }
    .mobile-nav-toggle .icon-bars{ opacity:1; transform:scale(1) rotate(0) }
    .mobile-nav-toggle .icon-close{ opacity:0; transform:scale(.8) rotate(-90deg); font-size:1.25rem; font-weight:700; line-height:1 }
    .mobile-nav-toggle[aria-expanded="true"] .icon-bars{ opacity:0; transform:scale(.8) rotate(90deg) }
    .mobile-nav-toggle[aria-expanded="true"] .icon-close{ opacity:1; transform:scale(1) rotate(0) }
    .mobile-nav-toggle .icon-bars::before{
      content:''; display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
      box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    }

    /* Dropdowns */
    .menu-group{ position:relative }
    .menu-trigger{ font:inherit; color:inherit }
    .menu-panel{
      position:absolute; top:calc(100% + 8px); left:0; z-index:2000;
      display:none; min-width:220px; padding:.4rem;
      background:#fff; border:1px solid var(--border); border-radius:.75rem; box-shadow:var(--shadow);
      color:var(--ink);
    }
    .menu-panel a{ display:block; padding:.5rem .6rem; border-radius:.5rem; color:var(--ink) }
    .menu-panel a:hover{ background:var(--bg-soft) }

/* No hover open — only via JS click */

/* Trigger indicator: arrow morphs to X */
.menu-trigger .indicator{ display:inline-grid; width:1.1em; height:1.1em; margin-left:.35rem; position:relative }
.menu-trigger .indicator .arrow,
.menu-trigger .indicator .close{
  position:absolute; inset:0; display:grid; place-items:center; transition:transform .18s ease, opacity .18s ease; font-weight:700;
}
.menu-trigger .indicator .arrow{ opacity:1; transform:rotate(0deg) scale(1) }
.menu-trigger .indicator .close{ opacity:0; transform:rotate(-90deg) scale(.8) }
.menu-trigger[aria-expanded="true"] .indicator .arrow{ opacity:0; transform:rotate(90deg) scale(.8) }
    .menu-trigger[aria-expanded="true"] .indicator .close{ opacity:1; transform:rotate(0deg) scale(1) }

    /* ── Mobile nav behavior ───────────────────────────── */
    @media (max-width: 768px){
      /* show hamburger */
      .mobile-nav-toggle{ display:inline-flex }

      /* turn primary nav into an overlay panel */
      .site-header nav.primary{
        display:none; /* hidden by default; toggled via .nav-open on body */
        position:fixed; left:0; right:0; top:64px; z-index:1200; /* header min-height */
        flex-direction:column; gap:.25rem;
        align-items:stretch; /* avoid centering items in column */
        padding: .75rem 1rem 1rem;
        background:#fff; color:var(--ink); border-bottom:1px solid var(--border); box-shadow:var(--shadow);
      }
      body.nav-open .site-header nav.primary{ display:flex }

      /* larger tap targets */
      .site-header nav.primary > a,
      .site-header .menu-trigger{
        height:auto; padding:.6rem .25rem; width:100%; text-align:left; color:var(--ink);
      }

      /* dropdown panels become inline sections */
      .menu-group{ width:100% }
      .menu-panel{
        position:static; display:none; padding:.25rem 0 .35rem; margin:0; min-width:unset;
        border:0; border-radius:0; box-shadow:none;
      }
      .menu-panel a{ padding:.4rem 0 .4rem .75rem }

      /* language picker visibility/move on mobile */
      .header-actions .lang-picker{ display:none }
      .site-header nav.primary .lang-picker-inline{
        display:flex; align-items:center; gap:.5rem; margin-top:.25rem;
        padding-top:.25rem; border-top:1px solid var(--border);
      }
      .site-header nav.primary .lang-picker-inline select{ width:100%; color:var(--ink); border-color:var(--border); background:#fff }
      .site-header nav.primary .lang-picker-inline .muted{ color:var(--ink) }
      .site-header nav.primary .lang-picker-inline .lang-link{ color:var(--ink); opacity:.85 }
      .site-header nav.primary .lang-picker-inline .lang-link:hover{ opacity:1 }
      .site-header nav.primary .lang-picker-inline .lang-link.active{ opacity:1; font-weight:700; text-decoration:underline; text-underline-offset:3px }
    }

/* =========================
   Footer
   ========================= */
footer{ background:#000; color:#fff; border-top:1px solid rgba(255,255,255,.12) }
.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:2rem 1rem;
}
.tag-row{ display:flex; gap:.5rem; flex-wrap:wrap }

/* Professional footer grid */
.footer-pro{
  display:grid; gap:1.25rem; padding:2rem 1rem; border-bottom:1px solid rgba(255,255,255,.12);
  grid-template-columns: 1fr 1fr;
}
@media (min-width:640px){ .footer-pro{ grid-template-columns: repeat(3,1fr) } }
@media (min-width:1024px){ .footer-pro{ grid-template-columns: repeat(5,1fr) } }
.footer-col{ display:flex; flex-direction:column; gap:.45rem }
.footer-title{ font-weight:800; font-size:1rem; letter-spacing:-.01em; color:var(--brand) }
footer .footer-col a{ color:#e5e7eb }
footer .footer-col a:hover{ color:#ffffff }
footer .badge-outline{ border-color:rgba(255,255,255,.35); color:#ffffff; background:transparent }

/* =========================
   Hero (image version)
   ========================= */
.hero h1{ font-size:2rem; font-weight:800; letter-spacing:-.02em; margin:0 }
@media (min-width:640px){ .hero h1{ font-size:2.5rem } }
@media (min-width:1024px){ .hero h1{ font-size:3rem } }
.hero p{ color:#475569; font-size:1.1rem; margin:.75rem 0 0 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem }
.hero-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.25rem; text-align:center;
}
.metric dt{ color:#64748b; font-size:.9rem; margin:0 }
.metric dd{ font-weight:700; margin:0 }

.hero-image{
  position:relative; border-radius:1.5rem; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;
}
.hero-image .pin{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(255,255,255,.85); padding:.35rem .6rem; border-radius:999px; font-size:.75rem;
  display:inline-flex; align-items:center; gap:.35rem; box-shadow:var(--shadow);
}
.img-cover{ width:100%; height:100%; object-fit:cover }

/* =========================
   Gallery
   ========================= */
.gallery{ display:grid; gap:1rem; grid-template-columns:1fr }
@media (min-width:640px){ .gallery{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .gallery{ grid-template-columns:repeat(3,1fr) } }
.gallery button{
  border:0; padding:0; background:transparent; cursor:pointer;
  border-radius:1rem; overflow:hidden; position:relative; box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.gallery button:hover{ transform:scale(1.01) }
.gallery img{ height:16rem; width:100%; object-fit:cover }
.gallery .fade{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.4),transparent 50%); pointer-events:none }

/* =========================
   Amenities
   ========================= */
.amenities{ display:grid; gap:.75rem; grid-template-columns:1fr }
@media (min-width:640px){ .amenities{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .amenities{ grid-template-columns:repeat(4,1fr) } }
.amenity{
  display:flex; align-items:center; gap:.8rem;
  border:1px solid var(--border); border-radius:1rem; background:#fff; padding:.8rem 1rem; box-shadow:var(--shadow);
}
.amenity .icon{
  display:grid; place-items:center; width:40px; height:40px; border-radius:.9rem; background:var(--brand); color:#fff;
}

/* =========================
   Map
   ========================= */
.mapbox{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:1rem }
.mapbox iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }

/* =========================
   Modal (lightbox)
   ========================= */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:1rem }
.modal.open{ display:flex }
.modal-dialog{ max-width:960px; width:100%; border-radius:1rem; overflow:hidden; background:#000 }
.modal-dialog img{ width:100%; height:auto; display:block }
.modal-close{
  position:absolute; top:1rem; right:1rem; border:0; background:rgba(255,255,255,.9);
  border-radius:999px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
}

/* =========================
   Forms (shared)
   ========================= */
form{ display:grid; gap:1rem }
form .field{ display:flex; flex-direction:column; gap:.4rem }
form label{ font-size:.9rem; font-weight:600; color:#334155 }
form input, form textarea, form select{
  width:100%; border:1px solid var(--border); border-radius:.75rem; padding:.7rem .9rem; font:inherit;
  background:#fff; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;
}
form input:focus, form textarea:focus, form select:focus{
  outline:2px solid transparent; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}
form textarea{ resize:vertical; min-height:120px; line-height:1.5 }
.contact-footer{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.5rem;
}
.contact-footer .small{ font-size:.85rem; color:#64748b }