/* ==========================================================================
   zubarecka.sk — MDDr. Zuzana Paulovčáková
   Farby a typografia prevzaté 1:1 z drgabalec.sk
   ========================================================================== */

:root{
  /* Presná paleta drgabalec.sk */
  --navy:   #28528D;
  --sky:    #B1C6DD;
  --rose:   #CC3366;
  --dark:   #080808;
  --grey:   #F7F7F7;
  --text:   #333333;
  --white:  #FFFFFF;

  --ff: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(20px, 5vw, 48px);
  --maxw: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
  --header-h: 84px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.7;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
::selection{background:var(--sky);color:var(--navy)}

h1,h2{font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

.wrap{width:min(100% - (var(--pad) * 2),var(--maxw));margin-inline:auto}

/* --- Tlačidlá ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 34px;border-radius:15px;
  background:var(--navy);color:#fff;
  font-weight:600;font-size:.95rem;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 14px 30px -16px rgba(40,82,141,.9);
}
.btn:hover{background:var(--rose);transform:translateY(-3px);box-shadow:0 20px 38px -16px rgba(204,51,102,.7)}
.btn svg{width:17px;height:17px;flex:none}
.btn--white{background:#fff;color:var(--navy);box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.btn--white:hover{background:var(--rose);color:#fff}

.tel{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:.95rem;color:var(--navy);
  transition:color .3s;
}
.tel:hover{color:var(--rose)}
.tel svg{width:16px;height:16px;flex:none}

/* --- Hlavička ------------------------------------------------------------ */
.header{
  position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:1px solid rgba(40,82,141,.12);
  transition:box-shadow .35s;
}
.header.is-stuck{box-shadow:0 8px 26px -22px rgba(0,0,0,.6)}
.header__in{height:var(--header-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:16px;flex:none}
.brand img{width:clamp(150px,17vw,210px)}
.brand__who{
  padding-left:16px;border-left:1px solid rgba(40,82,141,.22);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--navy);line-height:1.4;max-width:130px;
}
.header__act{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px)}
.hero::before{
  content:"";position:absolute;right:0;top:0;bottom:0;width:46%;
  background:var(--sky);z-index:0;
}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,72px);align-items:center}

.kicker{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rose);margin-bottom:18px;
}
.hero h1{margin-bottom:20px}
.claim{
  font-size:clamp(1.2rem,2.1vw,1.7rem);font-weight:600;line-height:1.35;
  color:var(--navy);max-width:16ch;
}
.claim b{color:var(--rose);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:clamp(28px,3.4vw,40px)}

.hero__photo{
  position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;
  background:var(--grey);
  box-shadow:0 40px 70px -40px rgba(8,8,8,.55);
}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:52% 15%}

/* --- Pás s fotkami ------------------------------------------------------- */
.strip{padding-block:clamp(48px,6vw,86px);background:var(--grey)}
.strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.shot{overflow:hidden;border-radius:20px;aspect-ratio:4/3;background:var(--sky)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.shot:hover img{transform:scale(1.06)}

/* --- Výzva --------------------------------------------------------------- */
.cta{background:var(--navy);color:#fff;padding-block:clamp(56px,7vw,100px);text-align:center}
.cta h2{color:#fff;margin-bottom:16px}
.cta p{color:rgba(255,255,255,.82);max-width:46ch;margin:0 auto}
.cta__btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px}

/* --- Pätička ------------------------------------------------------------- */
.footer{background:var(--dark);color:rgba(255,255,255,.62);padding-block:clamp(44px,5vw,64px) 26px;font-size:.9rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px 40px;align-items:start}
.footer img{width:200px;margin-bottom:16px}
.footer a:hover{color:var(--sky)}
.footer h3{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:700}
.footer li + li{margin-top:8px}
.footer__bot{
  margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:.78rem;color:rgba(255,255,255,.42);
}

/* --- Animácie ------------------------------------------------------------ */
[data-up]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-up].is-in{opacity:1;transform:none}

/* --- Responzivita -------------------------------------------------------- */
@media (max-width:900px){
  :root{--header-h:72px}
  .hero::before{left:0;right:0;width:auto;top:auto;height:52%;bottom:0}
  .hero__in{grid-template-columns:1fr;gap:38px}
  .hero__photo{max-width:420px;margin-inline:auto;width:100%}
  .brand__who{display:none}
  .header__act .tel{display:none}
  .strip__grid{grid-template-columns:1fr 1fr}
  .strip__grid .shot:last-child{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .brand img{width:140px}
  .btn{padding:15px 24px;font-size:.9rem}
  .strip__grid{grid-template-columns:1fr}
  .strip__grid .shot:last-child{display:block}
  .footer__grid{grid-template-columns:1fr;gap:28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-up]{opacity:1!important;transform:none!important}
}