/* ეკას ხილ-ბოსტანი — shared styles for the Georgian and English pages. */

:root{
  --green:#2f7d4f; --green-dark:#22603c; --green-soft:#eaf4ec;
  --ink:#17231b; --muted:#5b6b60; --line:#dbe6de; --bg:#fbfdfb; --card:#ffffff;
  --radius:20px; --shadow:0 1px 2px rgba(23,35,27,.05), 0 16px 34px -24px rgba(23,35,27,.4);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans Georgian", "BPG Nino Mtavruli", Sylfaen, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
.wrap{width:100%; max-width:1040px; margin:0 auto; padding:0 22px}

/* masthead: the shop's name and the language switch, nothing to press */
.masthead{padding:26px 0 0}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.brandline{display:flex; align-items:center; gap:13px; font-weight:800; font-size:1.06rem; letter-spacing:-.01em}
.langs{display:flex; gap:6px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px}
.langs a, .langs span{
  display:inline-block; padding:5px 13px; border-radius:999px; font-size:.86rem; font-weight:600;
  text-decoration:none; color:var(--muted); line-height:1.4;
}
.langs a:hover{color:var(--green-dark); background:var(--green-soft)}
.langs a:focus-visible{outline:3px solid var(--green); outline-offset:2px}
.langs [aria-current="true"]{background:var(--green); color:#fff}

/* hero */
.hero{padding:44px 0 58px}
.hero .wrap{display:grid; gap:34px; align-items:center; grid-template-columns:1fr}
@media(min-width:880px){ .hero .wrap{grid-template-columns:1.05fr .95fr; gap:52px} }
.eyebrow{display:inline-block; background:var(--green-soft); color:var(--green-dark); font-weight:600;
  font-size:.86rem; padding:7px 15px; border-radius:999px; margin-bottom:20px}
h1{font-size:clamp(2.1rem, 5.6vw, 3.3rem); line-height:1.12; margin:0 0 18px; letter-spacing:-.022em}
.lede{font-size:1.15rem; color:var(--muted); max-width:46ch; margin:0}
.hero-photo{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3.4}
.hero-photo img{width:100%; height:100%; object-fit:cover}

section{padding:56px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(1.45rem, 3.2vw, 1.95rem); margin:0 0 12px; letter-spacing:-.015em}
.sub{color:var(--muted); margin:0 0 32px; max-width:54ch}

.cards{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:760px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card-photo{aspect-ratio:4/3; background:var(--green-soft)}
.card-photo img{width:100%; height:100%; object-fit:cover}
.card-body{padding:22px 24px 26px}
.card h3{margin:0 0 8px; font-size:1.17rem}
.card p{margin:0; color:var(--muted)}

.place{max-width:560px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow)}
.panel h3{margin:0 0 14px; font-size:1.17rem}
.addr{margin:0; font-size:1.06rem}
.maplink{display:inline-block; margin-top:18px; color:var(--green-dark); font-size:.95rem}
.maplink:focus-visible{outline:3px solid var(--green); outline-offset:3px}

.closing{padding:66px 0; text-align:center}
.closing p{font-size:clamp(1.2rem, 3vw, 1.5rem); max-width:26ch; margin:0 auto; line-height:1.4; letter-spacing:-.01em}

footer{border-top:1px solid var(--line); padding:30px 0 46px; color:var(--muted); font-size:.92rem}
.foot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
footer a{color:var(--green-dark)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }