/* ECO VILLAGE SPAIN – light modern (no framed cards) */
:root{
  --bg:#ffffff;
  --txt:#0f1112;
  --muted:#5e666e;

  --accent:#1b7f6b;      /* eco green */
  --accent2:#c9962e;     /* sand */

  --max:1120px;
  --radius:22px;

  --soft: #f6f7f8;
  --soft2:#eef1f2;

  --dark:#0b1110;
  --dark2:#0f1716;
  
  --nav-h: 78px;
  
}

/* na větším viewportu může být header o chlup vyšší */
@media (min-width: 960px) {
  :root { --nav-h: 90px; }
}
html {
  scroll-behavior: smooth;                /* hezké plynulé skrolování */
  scroll-padding-top: calc(var(--nav-h)); /* rezervuj místo pro hlavičku */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--txt);
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(27,127,107,.12), transparent 60%),
    radial-gradient(820px 520px at 86% 0%, rgba(201,150,46,.12), transparent 55%),
    var(--bg);
  line-height:1.65;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; min-width:220px}
.brand img{width:34px; height:34px; border-radius:12px; background:#fff}
.brand .title{font-weight:820; letter-spacing:.2px}
.brand .sub{color:var(--muted); font-size:12px}

.menu{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.menu a{
  color:var(--txt); opacity:.92; font-size:14px;
  padding:8px 12px; border-radius:999px;
}
.menu a:hover{background:rgba(0,0,0,.04); text-decoration:none}
.social{display:flex; gap:6px; align-items:center; margin-left:8px}
.icon-btn{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(0,0,0,.03);
}
.icon-btn:hover{background:rgba(0,0,0,.06); text-decoration:none}
.icon{width:18px; height:18px; display:block; fill:currentColor; color:var(--txt); opacity:.85}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 16px; border-radius:999px;
  font-weight:760; border:none;
  background:rgba(0,0,0,.05);
  color:var(--txt); cursor:pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform: translateY(-1px); background:rgba(0,0,0,.08); text-decoration:none}
.btn:active{transform: translateY(0px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#156a59; color:#fff}
.btn-secondary{background:var(--accent2); color:#fff}
.btn-secondary:hover{background:#b78523; color:#fff}

/* Hero (full-bleed image like Elementor) */
.hero2{
  position:relative;
  padding: 64px 0 44px;
  overflow:hidden;
}
/* === HERO (sjednoceno – bez ::before/::after, bez duplicit) ================= */
.hero2{
  background:
    /* světlý závoj zleva */ linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 36%, rgba(255,255,255,0) 62%),
    /* jemný shora */       linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%),
    /* fotka */             var(--hero);
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center center, center top, center center;
}

.hero2 .container{position:relative; z-index:2}
.hero2-grid{display:grid; grid-template-columns: 1.3fr .7fr; gap:26px; align-items:end}

@media (max-width: 980px){ .hero2-grid{grid-template-columns:1fr; align-items:start}}
.hero2 h1{margin:0 0 10px; font-size:54px; line-height:1.06; letter-spacing:-.8px}
@media (max-width: 520px){ .hero2 h1{font-size:38px}}
.hero2 p{margin:0 0 18px; color:rgba(0,0,0,.70); font-size:16px; max-width:56ch}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:0; list-style:none}
.badges li{
  font-size:12px; color:rgba(0,0,0,.82);
  padding:7px 10px; border-radius:999px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.hero2-cta{display:flex; gap:10px; flex-wrap:wrap}
.hero2-side{
  display:flex; flex-direction:column; gap:10px;
  padding:16px 0 0;
}
.pill{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}
.pill b{display:block; margin-bottom:2px}
.pill span{color:rgba(0,0,0,.68); font-size:13px}

/* Sections */
.section{padding: 58px 0}
.section-soft{background: linear-gradient(to bottom, rgba(246,247,248,.95), rgba(246,247,248,.00))}
.section h2{margin:0 0 12px; font-size:32px; letter-spacing:-.4px}
.section .lead{margin:0 0 12px; color:var(--muted)}
.two-col{display:grid; grid-template-columns: 1.0fr 0.9fr; gap:80px; align-items:start}
@media (max-width: 980px){ .two-col{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.list{margin:0; padding:0 0 0 18px; color:var(--muted)}
.hr{height:1px; background:rgba(0,0,0,.07); margin:18px 0}

/* Full-width gallery band (inspired by Elementor full-width min-height section) */
.gallery-band{
  position:relative;
  padding: 64px 0;
  min-height: 520px;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(27,127,107,.14), transparent 60%),
    radial-gradient(900px 520px at 84% 0%, rgba(201,150,46,.14), transparent 55%),
    linear-gradient(to bottom, rgba(246,247,248,.80), rgba(255,255,255,.00));
}
.gallery-band::after{
  content:"";
  position:absolute; inset:-40px -40px -40px -40px;
  background: radial-gradient(640px 360px at 70% 20%, rgba(255,255,255,.40), transparent 60%);
  pointer-events:none;
}
.gallery-band .container{position:relative; z-index:2}
.gallery-band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.gallery-band-head p{max-width:60ch; margin:0; color:var(--muted)}
.gallery-masonry{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  grid-auto-rows: 72px;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius: 20px;
  background: rgba(0,0,0,.03);
  transform: translateZ(0);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .55s ease;
  filter:saturate(1.02);
}
.gallery-item:hover img{transform: scale(1.08)}
/* Masonry-like spans */
.gallery-item:nth-child(1){grid-column: span 7; grid-row: span 7;}
.gallery-item:nth-child(2){grid-column: span 5; grid-row: span 4;}
.gallery-item:nth-child(3){grid-column: span 5; grid-row: span 3;}
.gallery-item:nth-child(4){grid-column: span 4; grid-row: span 4;}
.gallery-item:nth-child(5){grid-column: span 4; grid-row: span 3;}
.gallery-item:nth-child(6){grid-column: span 4; grid-row: span 3;}
@media (max-width: 980px){
  .gallery-masonry{grid-template-columns: 1fr; grid-auto-rows: 220px;}
  .gallery-item{grid-column:auto !important; grid-row:auto !important;}
}

/* Facts (Glamni-like strip) */
.facts{
  padding: 58px 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.0), rgba(246,247,248,.55), rgba(255,255,255,.0));
}
.facts-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .facts-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .facts-grid{grid-template-columns:1fr} }
.fact{
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease;
}
.fact:hover{transform: translateY(-2px); background: rgba(255,255,255,.88)}
.fact .val{font-size:22px; font-weight:860; letter-spacing:-.3px}
.fact .lab{color:var(--muted); font-size:13px}

/* Map frame */
.map-frame{
  border-radius: 22px;
  overflow:hidden;
  background: rgba(0,0,0,.03);
}
.map-frame iframe{width:100%; height:360px; border:0}

/* Forms */
.form{display:grid; gap:10px; margin-top:10px}
.field{display:grid; gap:6px}
label{font-size:13px; color:var(--muted)}
input, textarea, select{
  width:100%;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: var(--txt);
  outline: none;
}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus, select:focus{
  border-color: rgba(27,127,107,.45);
  box-shadow:0 0 0 3px rgba(27,127,107,.10)
}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 760px){ .row{grid-template-columns:1fr} }
.check{display:flex; gap:10px; align-items:flex-start}
.check input{width:auto; margin-top:3px}
.small{font-size:12px; color:var(--muted)}
.notice{padding:12px 14px; border-radius:16px; background:rgba(0,0,0,.04)}
.notice.ok{background: rgba(27,127,107,.10)}
.notice.err{background: rgba(255,90,90,.10)}

/* Footer (Glamni-like: dark, multi-column) */
.footer2{
  background: linear-gradient(to bottom, var(--dark2), var(--dark));
  color: rgba(255,255,255,.86);
  padding: 56px 0 28px;
  margin-top: 20px;
}
.footer2 a{color: rgba(255,255,255,.86)}
.footer2 a:hover{color:#fff; text-decoration:none}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .footer-grid{grid-template-columns:1fr} }
.footer-title{font-weight:860; letter-spacing:.2px; margin:0 0 10px; color:#fff}
.footer2 p{margin:0 0 10px; color: rgba(255,255,255,.68)}
.footer-list{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.footer-bottom{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
.footer-social{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.footer-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px; border-radius:999px;
  background: rgba(255,255,255,.08);
}
.footer-chip:hover{background: rgba(255,255,255,.14)}
.footer-chip .icon{color:#fff; opacity:.92}

/* WhatsApp floating */
.wa-fab{
  position:fixed; right:18px; bottom:18px;
  z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background: #25D366;
  box-shadow: 0 14px 38px rgba(0,0,0,.14);
  color: #fff;
  font-weight:820;
  transition: transform .18s ease;
}
.wa-fab:hover{transform: translateY(-2px); text-decoration:none; background: #075E54;}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .7s cubic-bezier(0.4, 0, 0.2, 1), transform .7s cubic-bezier(0.4, 0, 0.2, 1); -webkit-font-smoothing: antialiased}
.reveal.is-visible{opacity:1; transform: translateY(0); transition-delay: 0s}


/* Lang switch in header */
.langswitch{display:flex; gap:6px; align-items:center; margin-left:8px}
.langswitch .lang{
  font-size:12px; padding:6px 8px !important;;
  border-radius:999px; border:1px solid var(--line);
  color:var(--txt); opacity:.85;
}
.langswitch .lang:hover{background:rgba(17,19,21,.04); text-decoration:none}
.langswitch .lang.is-active{border-color: rgba(27,127,107,.35); background: rgba(27,127,107,.10); color:var(--accent); opacity:1}

/* Remove framed cards in sections */
.card.plain{border:none; box-shadow:none; background:transparent}
.card.plain .notice{background: rgba(17,19,21,.02)}

/* Capsule section */
.capsule{padding-top:8px}
.capsule-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; align-items:start}
@media (max-width: 920px){ .capsule-grid{grid-template-columns:1fr;}}
.video-wrap{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.8);
  box-shadow: var(--shadow);
}
.video-wrap video{display:block; width:100%; height:auto; max-height:520px; background:#000}
.video-wrap.placeholder img{display:block; width:100%; height:100%; object-fit:cover; min-height:320px}
.specs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 520px){ .specs-grid{grid-template-columns:1fr;}}
.spec{
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(17,19,21,.02);
}
.spec-val{font-weight:800; letter-spacing:-.2px}
.spec-lbl{color:var(--muted); font-size:12px; margin-top:2px}
.capsule-features{margin:14px 0 0; padding:0 0 0 18px; color:var(--muted)}
.capsule-features li{margin:6px 0}

/* Location image */
.loc-image img{width:100%; border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow); display:block}

/* Footer2 extras */
.footer-brand{font-weight:850; font-size:16px; letter-spacing:.2px}
.footer-about{margin:10px 0 0; color: rgba(255,255,255,.72)}
.footer-title{font-weight:800; margin-bottom:10px}
.footer-links2{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-links2 a{opacity:.9}
.footer-contact{color: rgba(255,255,255,.75); display:grid; gap:6px}
.footer-social{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.pill:hover{background: rgba(255,255,255,.10); text-decoration:none}
.footer-note{margin:12px 0 0; color: rgba(255,255,255,.62); font-size:13px}
.footer-bottom{margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12)}
.footer2 .muted{color: rgba(255,255,255,.60)}


/* == Programátor: overrides 2026-01-26 == */

/* 1) Skrytí odkazu na admin v top navigaci (bez zásahu do PHP šablony) */
.menu a[href^="/admin"],
.menu a[href^="/admin654sv666srg"] { display:none !important; }

/* 2) Jemná modernizace typografie a spacingu + lepší responsivita */
:root{
  --fs-base: clamp(15px, 1.5vw, 16px);
  --fs-h1: clamp(28px, 5vw, 48px);
  --fs-h2: clamp(22px, 3.8vw, 34px);
}
body{ font-size: var(--fs-base); }
h1{ font-size: var(--fs-h1); line-height:1.15; }
h2{ font-size: var(--fs-h2); line-height:1.18; }

/* 3) Mobilní úpravy headeru a menu */
@media (max-width: 760px){
  .topbar{ padding: 10px 0; }
  .brand .title{ font-size: 16px; }
  .menu{ gap: 2px; }
  .menu a{ padding:7px 10px; font-size:13px; }
  .hero{ padding-top: 18px; }
  .container{ padding: 0 14px; }
}

/* 4) Obrázky a galerie – jistota responsivity */
img, video{ max-width:100%; height:auto; }
.gallery img{ width:100%; height:auto; display:block; }

/* 5) Drobné vylepšení kontrastu tlačítek */
.btn-primary{ box-shadow: 0 4px 10px rgba(27,127,107,.25); }
.btn-primary:hover{ transform: translateY(-1px); }
.btn{ transition: transform .15s ease, box-shadow .15s ease; }

/* Universal sections */
.cards-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){ .cards-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 620px){ .cards-grid{grid-template-columns:1fr;} }

.faq-list{display:grid; gap:10px; margin-top:12px;}
.faq-item{
  border:1px solid rgba(0,0,0,.1);
  border-radius:14px;
  background: rgba(255,255,255,.72);
  padding:12px 14px;
}
.faq-item summary{cursor:pointer; font-weight:700;}
.faq-item .muted{margin-top:8px;}

/* Pricing cards - product style */
.pricing-modern{
  --pricing-bg:#e9f0fb;
  --pricing-border:#7ea1ff;
  --pricing-primary:#3164eb;
  --pricing-accent:#45b8f5;
  --pricing-text:#233e6b;
}
.pricing-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
@media (max-width: 1100px){ .pricing-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 720px){ .pricing-grid{grid-template-columns:1fr;} }

.pricing-card{
  border:1px solid var(--pricing-border);
  border-radius:14px;
  background:var(--pricing-bg);
  color:var(--pricing-text);
  overflow:hidden;
}
.pricing-inner{padding:22px 20px 18px;}
.pricing-card h3{
  margin:6px 0 8px;
  text-align:center;
  color:#25457a;
  font-size:52px;
  line-height:1.08;
  letter-spacing:-.6px;
}
.pricing-desc{
  margin:0 auto 14px;
  max-width:36ch;
  text-align:center;
  color:#2e4f80;
}
.pricing-old-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:8px;
}
.pricing-old{
  text-decoration:line-through;
  font-weight:800;
  font-size:18px;
}
.pricing-discount{
  display:inline-flex;
  padding:6px 14px;
  border-radius:999px;
  font-weight:800;
  color:#fff;
  background:var(--pricing-accent);
}
.pricing-price{
  text-align:center;
  font-size:44px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.4px;
  color:#233f6f;
  margin-top:4px;
}
.pricing-note{
  text-align:center;
  margin-top:6px;
  color:#355889;
}
.pricing-coupon{
  margin-top:12px;
  text-align:center;
  font-size:34px;
  color:#2e56d8;
  font-weight:800;
}
.pricing-coupon b{color:var(--pricing-accent);}
.pricing-cta-wrap{margin-top:14px; text-align:center;}
.pricing-btn{
  display:inline-flex;
  width:100%;
  justify-content:center;
  align-items:center;
  padding:12px 16px;
  border-radius:16px;
  border:2px solid var(--pricing-primary);
  color:var(--pricing-primary);
  font-weight:900;
  letter-spacing:.3px;
  background:transparent;
}
.pricing-btn:hover{text-decoration:none; transform:translateY(-1px);}
.pricing-renew{
  margin-top:8px;
  color:#355889;
  text-align:center;
}
.pricing-features{
  margin:14px 0 0;
  padding-left:20px;
  display:grid;
  gap:6px;
  color:#2f4f80;
}
.pricing-features li{line-height:1.42;}

.pricing-card.is-featured{box-shadow:0 14px 32px rgba(35,77,150,.22);}
.pricing-card.is-featured .pricing-badge{
  background:var(--pricing-primary);
  color:#fff;
  font-weight:800;
  text-align:center;
  padding:10px 12px;
}
.pricing-card.is-featured .pricing-btn{
  background:var(--pricing-primary);
  color:#fff;
}

/* Safari compatibility overrides */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
}
.nav{
  position:-webkit-sticky;
  -webkit-backdrop-filter: blur(12px);
}
.hero2{
  background-color:#fff;
}
.badges li,
.pill,
.fact{
  -webkit-backdrop-filter: blur(10px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav,
  .badges li,
  .pill,
  .fact{
    background:rgba(255,255,255,.96);
  }
}