:root{
  --bg:#f7f6f4; --paper:#fff; --ink:#1b1b1b; --muted:#6c6c6c;
  --brand:#0D2B1E; --brand-2:#174936; --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px; --container:1100px;
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background:var(--bg)}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:auto; padding:0 20px}
.mt{margin-top:28px}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid #e6e6e6;
  background:#fff; font-weight:700; cursor:pointer
}
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn.wa{ background:#25D366; border-color:#25D366; color:#fff; }
.btn.wa:hover{ filter:brightness(.95); }
.btn.ghost{
  align-self:flex-start; padding:.6rem .9rem; border-radius:12px;
  border:1px solid rgba(0,0,0,.15); background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn.ghost:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); }

/* ========== TOPBAR + HEADER ========== */
.topbar{
  height:38px; display:flex; align-items:center; justify-content:center;
  padding:0 14px; background:#0d2b1e; color:#e9e9e9; border-bottom:1px solid rgba(255,255,255,.12)
}
.topbar .inner{width:100%; max-width:var(--container); display:flex; align-items:center; justify-content:space-between}
.topbar .note{font-size:13px; opacity:.9}
.lang{display:flex; gap:10px; font-weight:600}
.lang a{color:#e9e9e9; opacity:.8}
.lang a.active{opacity:1; text-decoration:underline}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(255,255,255,.7); border-bottom:1px solid #eee
}
@supports not ((backdrop-filter: saturate(140%) blur(8px)) or (-webkit-backdrop-filter: saturate(140%) blur(8px))){
  header{
    background:#ffffffee; /* чуть более плотный фон для браузеров без blur */
  }
}

.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:14px}
.logo{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(145deg,var(--brand),#123c2c);
  display:grid; place-items:center; color:#fff; font-weight:700; box-shadow:var(--shadow)
}
.brand h1{font-family:"Cormorant Garamond",serif; font-weight:700; letter-spacing:.2px; font-size:22px; margin:0}
nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
nav a{display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:10px 12px; border-radius:12px}
nav a:hover{background:#f0f0f0}
nav a.cta{background:var(--brand); color:#fff; border-radius:14px; padding:12px 16px; box-shadow:var(--shadow)}
nav a.cta:hover{background:var(--brand-2)}
nav a.wa{background:#25D366; color:#fff; border-radius:14px; padding:12px 16px; box-shadow:var(--shadow)}
nav a.wa:hover{ background:#21be5a; }
@media (max-width:640px){ nav ul{display:none} }

/* ========== HERO ========== */
/* фон по умолчанию; можно переопределять так: .page-hero[data-hero="whatsapp"]{ --hero-img:url('...'); } */
.page-hero{ --hero-img:url('/voyages-de-l-auteur/assets/img/bg-vineyard.jpg'); }
.page-hero{
  position:relative; min-height:44vh; display:grid; align-items:center; isolation:isolate; background:#0d2b1e;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--hero-img); background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:brightness(.72); pointer-events:none;
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(90% 70% at 80% 20%, rgba(201,184,134,.22), transparent),
             linear-gradient(to bottom, rgba(13,43,30,.50), rgba(13,43,30,.25));
}
.page-hero .container{position:relative; z-index:1}
.title{font-family:"Cormorant Garamond",serif; font-size:42px; line-height:1.06; color:#fff; margin:0 0 12px}
.lead{color:#f7f7f7; max-width:720px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
@media (max-width:640px){ .title{font-size:34px} }
.page-hero.plain{ min-height:36vh }
.page-hero.plain .title,
.page-hero.plain .lead,
.page-hero.plain .actions{ display:none }

/* если используется разметка .hero .inner на отдельных страницах */
.hero .inner{ min-height:48vh !important; }
@media (max-width:1000px){
  .hero .inner{ min-height:auto !important; padding:28px 0 30px !important; }
}

/* ========== GRID & CARDS ========== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--paper); border:1px solid #eee; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%;
}
.cover{ height:220px; background:#ddd; position:relative; overflow:hidden; }
.cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Минимизируем CLS: фиксируем соотношение сторон */
.cover{ aspect-ratio: 16/9; }  /* на десктопе */
@media (max-width:640px){
  .cover{ aspect-ratio: 3/2; } /* на мобилке */
}

.badge{
  position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94);
  border:1px solid #eee; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px
}
.card .body{ padding:16px; flex:1; display:flex; flex-direction:column; }
.card h3{margin:0 0 8px; font-size:20px}
.meta{display:flex; gap:12px; color:var(--muted); font-size:13px}
.card .body p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card .foot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-top:1px solid #f0f0f0; position:relative; z-index:10;
}
/* Доработка: безопасная растянутая ссылка */
.card.link{ position:relative; }
.card.link > a.stretched{
  position:absolute;
  top:0; left:0; right:0; bottom:64px;
  z-index:5;
  border-radius:inherit;
  text-indent:-9999px;
  pointer-events:auto; /* добавлено: ссылка кликабельна только на контенте */
}
.card .foot{
  position:relative;
  z-index:10; /* футер всегда поверх */
}


/* ========== GALLERY MOSAIC ========== */
.gallery-mosaic{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; grid-auto-rows:220px; margin-top:24px;
}
.gallery-mosaic .card:first-child{ grid-column:auto !important; grid-row:auto !important; }
.gallery-mosaic .cover{ height:100% !important }
.gallery-mosaic .cover img{ width:100%; height:100% !important; object-fit:cover; display:block }
@media (max-width:900px){
  .gallery-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px }
}

/* ========== WINES ========== */
.section-title{font-family:"Cormorant Garamond",serif; font-size:32px; margin:0 0 10px}
.section-sub{color:var(--muted); margin:0}
.wines{display:grid; grid-template-columns:1fr; gap:12px; margin:24px 0}
.wines .wine{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;
  padding:16px; border-radius:16px; background:var(--paper); border:1px solid #eee; box-shadow:var(--shadow)
}
.wines .wine > div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start; }
.wines .wine > div .thumb{
  --size:96px; width:var(--size); height:var(--size); object-fit:contain; background:#fff; padding:8px;
  border:1px solid #e8e8e8; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.06); margin:0; justify-self:center;
}
.wines .wine > div h4, .wines .wine > div .meta, .wines .wine > div .notes{ grid-column:2 }
.wine h4{margin:0 0 6px; font-size:18px; line-height:1.2}
.wine .meta{display:inline-flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #e8e8e8; border-radius:999px; background:#fff; font-weight:600; font-size:12px }
.wine .notes{margin-top:8px}
.badge-oak{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid #e4d7b6; background:#E9DFC5 }
@media (max-width:1000px){ .wines .wine{ grid-template-columns:1fr; } }


/* ========== SPECIALS ==========
   Пример локального фона героя: добавь data-hero="whatsapp" на блок .page-hero */
.page-hero[data-hero="whatsapp"]{ --hero-img:url('/voyages-de-l-auteur/assets/wines/92ec5741551c5ee20e7804a7ff133dc4.jpg?v=1'); }

/* ========== TOURS / WHY compact cards ========== */
#tours .card .cover{ height:200px; aspect-ratio:auto; }
#tours .card .body{ padding:12px 14px; }
#tours .card h3{ font-size:18px; margin:0 0 6px; }
#tours .meta span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tours .card .foot{ padding:12px 14px; }
@media (max-width:640px){ #tours .card .cover{ height:160px; } }

#why .card .cover{ height:180px; aspect-ratio:auto; }
#why .card .body{ padding:12px 14px; }
#why .card h3{ font-size:18px; margin:0 0 6px; }
#why .card p{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#why .card.link > a.stretched{ bottom:64px; }
@media (max-width:640px){ #why .card .cover{ height:150px; } }

/* ========== CONTACT CARD IN HERO (единый блок) ========== */
#contactCard{
  background:#fff !important; border:1px solid #eee !important; border-radius:16px !important;
  padding:14px 16px !important; box-shadow:0 8px 22px rgba(0,0,0,.08) !important;
}
#contactCard, #contactCard *, #contactCard p, #contactCard label, #contactCard strong{ color:#1b1b1b !important; }
#contactCard input, #contactCard textarea, #contactCard select{
  color:#1b1b1b !important; background:#fff !important; border:1px solid #e6e6e6 !important;
}
#contactCard input::placeholder, #contactCard textarea::placeholder{ color:#878e8a !important; }
#contactCard .btn{ padding:10px 12px !important; font-size:14px !important; border-radius:10px !important; }
#contactCard .btn.primary{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }
#contactCard .btn.primary:hover{ background:var(--brand-2) !important; }

/* ========== REVIEWS (общие) ========== */
.reviews{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.review{padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}
.review .who{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.review .who .avatar{width:36px;height:36px;border-radius:50%;background:#eae9e3;background-size:cover;background-position:center;display:grid;place-items:center;color:#fff;font-weight:600}
.review-form{margin-top:16px;padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff}
.review-form h4{margin:0 0 12px;font-size:18px}
.rf-row{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.rf-row label{font-size:13px;color:var(--muted,#6b7b73)}
.review-form input[type="text"], .review-form textarea{
  width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;font:inherit
}
.review-form textarea{resize:vertical}
.file-drop{border:1.5px dashed rgba(0,0,0,.2);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;background:#f9f9f6}
.file-drop .btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:#fff;cursor:pointer}
.file-drop .hint{font-size:12px;color:var(--muted,#6b7b73);margin-left:8px}
.file-drop .preview{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid rgba(0,0,0,.1)}
.rf-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rf-consent{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted,#6b7b73)}
.btn-primary{background:var(--brand,#0D2B1E);color:#fff;border-color:transparent}
.rf-msg{margin:6px 0 0;font-size:13px;color:var(--muted,#6b7b73)}

/* ========== ABOUT (упрощённый) ========== */
#about .portrait{ display:none !important; }
#about .about{ display:grid; grid-template-columns:1fr; gap:18px; max-width:920px; margin-inline:auto; }
#about .section-title{ text-align:center; margin:0 0 12px; }
#about p[data-i18n="about.text"]{ font-size:15px; line-height:1.6; color:var(--ink,#0b1b14); margin:4px 0 8px; }
#about .reviews{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:12px; }
@media (max-width:640px){ #about .reviews{ grid-template-columns:1fr; } }
#about .review{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px 14px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
#about .who{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
#about .who .avatar{ width:36px; height:36px; border-radius:50%; background:#eae9e3; background-size:cover; background-position:center; display:grid; place-items:center; color:#fff; font-weight:600; font-size:12px; }
#about .review p{ margin:0; }
#about .review-form{ margin-top:16px; padding:16px; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff; }
#about .review-form h4{ margin:0 0 10px; font-size:18px; }
#about .rf-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
#about .rf-row label{ font-size:13px; color:var(--muted,#6b7b73); }
#about .review-form input[type="text"], #about .review-form textarea, #about .review-form select{
  width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; background:#fff; font:inherit;
}
#about .review-form textarea{ resize:vertical; min-height:96px; }
#about .review-form input:focus-visible, #about .review-form textarea:focus-visible, #about .review-form select:focus-visible,
#about .btn:focus-visible, #about .file-drop:focus-visible{ outline:2px solid var(--accent,#C9B886); outline-offset:2px; }
#about .file-drop{ border:1.5px dashed rgba(0,0,0,.2); border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; background:#f9f9f6; }
#about .file-drop.drag{ border-color:var(--accent,#C9B886); background:#fff; }
#about .file-drop .hint{ font-size:12px; color:var(--muted,#6b7b73); margin-left:8px; }
#about .file-drop .preview{ width:64px; height:64px; border-radius:12px; object-fit:cover; border:1px solid rgba(0,0,0,.1); }
#about .btn{ padding:8px 12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; background:#fff; cursor:pointer; }
#about .btn:hover{ filter:brightness(.98); }
#about .btn-primary{ background:var(--brand,#0D2B1E); color:#fff; border-color:transparent; }
#about .btn-outline.btn-wa{ border-color:#25D36644; }
#about .btn-outline.btn-tg{ border-color:#2AABEE44; }
#about .rf-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#about .rf-consent{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted,#6b7b73); }
#about .rf-share{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; }
#about .rf-msg{ margin:6px 0 0; font-size:13px; color:var(--muted,#6b7b73); }

/* ========== ADMIN GATING ========== */
.admin-only{ display:none !important; }
html[data-admin="1"] .admin-only[data-display="flex"]{ display:flex !important; }
html[data-admin="1"] .admin-only[data-display="block"]{ display:block !important; }
html[data-admin="1"] .admin-only[data-display="inline-block"]{ display:inline-block !important; }
html[data-admin="1"] .admin-only:not([data-display]){ display:block !important; }

/* ========== MISC ========== */
footer.container{ color:var(--muted); }
.why{ padding-block:2rem; }

/* универсальная адаптивная сетка (если нужна отдельная) */
.grid.cards{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:600px){ .grid.cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid.cards{ grid-template-columns:repeat(3,1fr); } }
/* === BOOK: компактная карточка формы === */
#book{ padding: 32px 0 56px; }
#book .card{
  max-width: 720px;           /* ширина карточки */
  margin: 0 auto;             /* центрируем */
  padding: 20px 20px;
  border-radius: 18px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
#book .section-title{ font-size: 28px; margin: 0 0 6px; }
#book .section-sub{ margin: 0 0 14px; color: var(--muted); }

#book .fields{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 колонки на десктопе */
  gap: 12px;
}
#book .fields .full{ grid-column: 1 / -1; } /* элементы на всю ширину */

#book label{ font-weight: 700; font-size: 13px; color: var(--ink); }
#book input, #book textarea, #book select{
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background: #fff;
  font: inherit;
  color: var(--ink);
}
#book textarea{ min-height: 110px; height: auto; resize: vertical; }

/* ряд с подписью "Куда отправить" — аккуратная сетка */
#book .form-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
}
#book .form-actions{
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
#book .btn{ padding: 10px 12px; border-radius: 12px; }
#book .btn.primary{ background: var(--brand); color: #fff; border-color: var(--brand); }
#book .btn.primary:hover{ filter: brightness(.96); }

/* мобильная адаптация */
@media (max-width: 640px){
  #book .card{ max-width: 100%; padding: 16px; }
  #book .fields{ grid-template-columns: 1fr; }
  #book .form-row{ grid-template-columns: 1fr; gap: 6px; }
}

/* --- Соцсети в шапке и кнопки-иконки --- */
.social{display:flex; align-items:center; gap:12px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid #e6e6e6; border-radius:999px; background:#fff; box-shadow:var(--shadow)}
.icon-btn:hover{background:#f5f5f5}
.icon{width:20px; height:20px; display:block}
.icon path, .icon circle{fill:currentColor}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); border:0}
.topbar .social .icon-btn{border-color:rgba(255,255,255,.25); background:transparent; color:#e9e9e9}
.topbar .social .icon-btn:hover{background:rgba(255,255,255,.08)}
.hero .contact-card .btn.icon-btn{border-color:#e6e6e6; background:#fff}

/* FAB: плавающие кнопки WA/TG */
.chat-fab{position:fixed; right:16px; z-index:9999; border:0; padding:14px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.18); cursor:pointer; background:#fff; display:grid; place-items:center}
.chat-fab svg{width:22px; height:22px; display:block}
.chat-fab.wa{bottom:76px}
.chat-fab.tg{bottom:26px}
/* ... здесь твои существующие стили ... */

/* === MOBILE FIX (без бургера) === */
@media (max-width: 640px){
  /* переопределяем скрытие меню */
  header .nav nav ul{
    display:flex !important;
    gap:10px;
    margin:0;
    padding:8px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    scrollbar-width:none;
  }
  header .nav nav ul::-webkit-scrollbar{ display:none; }
  header .nav nav li{ flex:0 0 auto; }
  header .nav nav a{
    padding:8px 10px;
    border-radius:10px;
    border:1px solid #e6e6e6;
    background:#fff;
    font-weight:600;
  }

  header .nav{
    height:64px;
    align-items:center;
    gap:10px;
  }

  .logo{ width:40px; height:40px; }
  .brand h1{ font-size:18px; }
  .brand small{ font-size:11px; }

  .container{ padding:0 14px; }

  .hero h2{ font-size:30px; line-height:1.12; }
  .hero p{ font-size:15px; }
}