/* ==========================================================================
   Salón pre psov LUSI — Svit
   Brand: tmavomodrá (#3A3656) + ružová (#E58AB4), doplnok mint. Teplá, hravá,
   starostlivá. Reálne fotky psíkov, kvalitné ikony (Tabler), žiadne ilustrácie.
   ========================================================================== */

:root {
  --bg:       #FBF4F5;
  --bg-2:     #F6E9EE;
  --card:     #FFFFFF;
  --ink:      #2E2B45;
  --ink-soft: #6B6685;
  --ink-faint:#9E99B2;

  --navy:      #3A3656;
  --navy-deep: #2B2842;
  --pink:      #E58AB4;
  --pink-deep: #CE6B9B;
  --pink-soft: #F4D6E4;
  --mint:      #86C7BE;

  --line:      rgba(46,43,69,.12);
  --line-soft: rgba(46,43,69,.07);

  --display: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --script: "Caveat", cursive;

  --wrap: 1180px;
  --shadow: 0 16px 34px rgba(46,43,69,.12);
  --shadow-sm: 0 8px 20px rgba(46,43,69,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg);
  font-size: 17.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

/* bits */
.eyebrow { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-deep); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; opacity: .75; }
.script { font-family: var(--script); font-weight: 700; }
.blob { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }
.ico { display: inline-grid; place-items: center; }

/* buttons */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 16px; padding: 14px 28px; border-radius: 40px;
  border: 2px solid var(--pink); background: var(--pink); color: #fff; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; transition: transform .14s, box-shadow .14s, background .15s, border-color .15s;
  box-shadow: 0 8px 18px rgba(229,138,180,.32);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(229,138,180,.4); background: var(--pink-deep); border-color: var(--pink-deep); }
.btn:active { transform: translateY(0); }
.btn .ico { margin: -2px 0; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--navy { background: var(--navy); border-color: var(--navy); box-shadow: 0 8px 18px rgba(58,54,86,.28); }
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--sm { padding: 10px 20px; font-size: 15px; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow { text-decoration: none; color: var(--pink-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow .ico { transition: transform .2s; }
.link-arrow:hover .ico { transform: translateX(4px); }

/* ============================ HEADER ============================ */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(251,244,245,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 12px 26px; max-width: var(--wrap); margin: 0 auto; }
.logo { justify-self: start; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo__mark { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--script); font-size: 32px; font-weight: 700; color: var(--pink-deep); line-height: .8; }
.logo__sub { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }

.nav { justify-self: center; display: flex; align-items: center; gap: 30px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 16px; color: var(--ink); position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--mint); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { background: var(--pink); }
.nav .nav-cta { display: none; }

.head-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.burger { display: none; }

/* ============================ HERO ============================ */
.hero { position: relative; padding: 66px 0 54px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.4vw, 84px); line-height: .98; letter-spacing: -.03em; margin-top: 18px; }
.hero h1 .em { font-family: var(--script); font-weight: 700; color: var(--pink-deep); font-size: 1.08em; letter-spacing: 0; }
.hero__lead { font-size: 19.5px; color: var(--ink-soft); max-width: 34ch; margin: 22px 0 30px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__trust { display: flex; gap: 24px; margin-top: 36px; flex-wrap: wrap; }
.hero__trust div { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.hero__trust .ico { width: 36px; height: 36px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); flex: none; }

.hero__art { position: relative; }
.hero__photo { aspect-ratio: 1/1.04; overflow: hidden; box-shadow: var(--shadow); background: var(--pink-soft); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__ring { position: absolute; inset: -14px; border: 2px dashed var(--pink); border-radius: inherit; opacity: .5; pointer-events: none; }
.hero__badge { position: absolute; background: var(--card); border-radius: 18px; padding: 11px 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; z-index: 3; }
.hero__badge .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); }
.hero__badge .em { font-family: var(--script); font-size: 22px; color: var(--pink-deep); line-height: 1; }
.hero__badge--tl { top: 4%; left: -5%; }
.hero__badge--br { bottom: 6%; right: -4%; }

.paw-deco { position: absolute; color: var(--pink); opacity: .12; pointer-events: none; }

/* ============================ SECTIONS ============================ */
section { padding: 66px 0; position: relative; }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head h2 { font-size: clamp(32px, 4.4vw, 50px); }
.sec-head p { color: var(--ink-soft); margin: 14px auto 0; }
.band { background: var(--bg-2); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy .eyebrow { color: var(--mint); }
.band-navy .sec-head p { color: rgba(255,255,255,.82); }

/* care */
.care__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.care-card { background: var(--card); border-radius: 24px; padding: 34px 28px; box-shadow: var(--shadow-sm); text-align: center; transition: transform .18s, box-shadow .18s; }
.care-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.care-card .ico-lg { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); }
.care-card h3 { font-size: 23px; margin-bottom: 8px; }
.care-card p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* services */
.svc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 960px; margin: 0 auto; }
.svc { background: var(--card); border-radius: 20px; padding: 24px 26px; box-shadow: var(--shadow-sm); display: flex; gap: 18px; align-items: flex-start; transition: transform .16s; }
.svc:hover { transform: translateY(-3px); }
.svc__ico { width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--bg-2); color: var(--pink-deep); }
.svc__body { flex: 1; }
.svc__name { font-family: var(--display); font-size: 21px; font-weight: 600; }
.svc__desc { color: var(--ink-soft); font-size: 15px; margin: 4px 0 0; }
.svc__note { text-align: center; color: var(--ink-soft); font-size: 15px; margin-top: 28px; }
.svc__note .link-arrow { font-size: 15px; }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; max-width: 940px; margin: 0 auto; }
.review { background: var(--card); border-radius: 22px; padding: 30px; box-shadow: var(--shadow-sm); }
.review__stars { display: flex; gap: 3px; color: var(--pink); margin-bottom: 14px; }
.review__stars .ico svg { fill: currentColor; }
.review p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.55; }
.review__who { display: flex; align-items: center; gap: 12px; }
.review__av { width: 40px; height: 40px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.review__name { font-weight: 700; font-size: 15px; }
.review__meta { font-size: 13px; color: var(--ink-faint); }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery--home { grid-template-columns: repeat(4, 1fr); }
.gcard { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1/1; background: var(--bg-2); box-shadow: var(--shadow-sm); }
.gcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gcard:hover img { transform: scale(1.06); }
.gcard--tall { aspect-ratio: 3/4; }
.gcard--wide { aspect-ratio: 3/2; grid-column: span 2; }

/* quote */
.quote { text-align: center; max-width: 820px; margin: 0 auto; }
.quote__mark { font-family: var(--display); font-size: 90px; line-height: .5; color: var(--pink); opacity: .4; }
.quote h2 { font-size: clamp(26px, 3.6vw, 40px); font-style: italic; font-weight: 500; line-height: 1.28; }
.quote__who { margin-top: 22px; font-family: var(--script); font-size: 26px; color: var(--pink-deep); }

/* location / contact */
.loc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.info-card { background: var(--card); border-radius: 24px; padding: 34px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 20px; }
.info-row { display: flex; gap: 16px; align-items: flex-start; }
.info-row .ico { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--pink-soft); color: var(--pink-deep); }
.info-row .k { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.info-row .v { font-weight: 500; }
.info-row .v b { font-weight: 700; }
.info-row .v a { color: var(--pink-deep); text-decoration: none; font-weight: 600; }
.info-row .v a:hover { text-decoration: underline; }
.map-frame { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-sm); border: 6px solid var(--card); }
.map-frame iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; text-align: center; border-radius: 30px; padding: 58px 30px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(28px, 4vw, 46px); }
.cta-band h2 .em { font-family: var(--script); color: var(--pink); }
.cta-band p { color: rgba(255,255,255,.88); max-width: 48ch; margin: 14px auto 26px; }
.cta-band .paw-deco { opacity: .14; color: #fff; }

/* page hero */
.page-hero { padding: 56px 0 10px; text-align: center; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-size: clamp(40px, 6vw, 74px); margin: 16px 0 0; }
.page-hero h1 .em { font-family: var(--script); color: var(--pink-deep); }
.page-hero p { color: var(--ink-soft); font-size: 19px; max-width: 56ch; margin: 18px auto 0; }

/* about */
.about__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 52px; align-items: center; }
.about__art { position: relative; }
.about__photo { border-radius: 30px; overflow: hidden; aspect-ratio: 4/4.4; box-shadow: var(--shadow); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__badge { position: absolute; bottom: -18px; right: -14px; background: var(--card); border-radius: 18px; padding: 12px 18px; box-shadow: var(--shadow); font-family: var(--script); font-size: 24px; color: var(--pink-deep); }
.about__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.about__list li { display: flex; gap: 14px; align-items: flex-start; }
.about__list .ico { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); }

/* ============================ FOOTER ============================ */
.site-foot { background: var(--navy-deep); color: #fff; padding: 60px 0 28px; margin-top: 30px; }
.site-foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.site-foot .logo__name { color: var(--pink); }
.site-foot .logo__sub { color: rgba(255,255,255,.7); }
.site-foot p { color: rgba(255,255,255,.68); font-size: 15px; max-width: 32ch; }
.site-foot h4 { font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--mint); margin-bottom: 16px; font-weight: 700; font-family: var(--sans); }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-foot a { color: rgba(255,255,255,.85); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.site-foot a:hover { color: var(--pink); }
.site-foot__bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.5); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 940px) {
  .hero__grid, .about__grid, .loc__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { max-width: 440px; margin: 0 auto; }
  .care__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .svc-list, .reviews { grid-template-columns: 1fr; }
  .gallery, .gallery--home { grid-template-columns: repeat(2, 1fr); }
  .gcard--wide { grid-column: span 2; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .site-head__row { position: relative; grid-template-columns: auto 1fr; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; justify-self: stretch;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: var(--bg); border-bottom: 2px solid var(--navy); padding: 12px 26px 16px; box-shadow: 0 18px 34px rgba(46,43,69,.18);
  }
  .nav.open a { width: 100%; padding: 12px 0; font-size: 19px; border-bottom: 1px dashed var(--line-soft); }
  .nav.open a:last-child { border-bottom: 0; }
  .nav.open a::after { display: none; }
  .nav.open a[aria-current="page"] { color: var(--pink-deep); }
  .nav.open .nav-cta { display: inline-flex; justify-content: center; margin-top: 12px; }
  .head-actions { justify-self: end; }
  .head-actions .btn { display: none; }
  .burger { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--navy); border-radius: 50%; background: var(--card); cursor: pointer; color: var(--navy); -webkit-text-fill-color: var(--navy); }
  section { padding: 48px 0; }
  .hero { padding: 34px 0 30px; }
  .hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .hero__lead { font-size: 17.5px; max-width: none; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__badge--tl { left: 2%; } .hero__badge--br { right: 2%; }
  .gallery, .gallery--home { grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { padding: 40px 22px; border-radius: 22px; }
  .about__badge { right: 0; }
}