/* Holiestetyka — runda 26.08 + 10.09: kadry, logo, H1, dźwięk, galerie, plakietki pod zdjęciem, opinie. */

/* Aliasy zmiennych z treści (Lovable) → tokeny bazy. Bez tego inputy formularza kontaktu były niewidoczne. */
:root {
  --white: var(--c-surface);
  --cream: var(--c-bg);
  --cream-2: var(--c-bg-2);
  --line: var(--c-line);
  --green: var(--c-primary);
  --ink: var(--c-text);
  --muted: var(--c-muted);
  --gold: var(--c-accent);
  --gold-soft: var(--c-accent-2);
}

/* Logo HOLIMEDICA — było ~46–58 px, nazwa firmy ginęła */
.nav__logo--img img {
  height: clamp(72px, 7.2vw, 96px);
  width: auto;
  border-radius: 10px;
}
.nav__logo-m--img img {
  height: 52px;
}

/* Nagłówki: mniejsze, bez kolizji z grafiką w tle */
.subhero h1,
.hero h1 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important;
  max-width: 22ch;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.subhero {
  min-height: clamp(440px, 60vh, 640px);
  align-items: flex-end;
}
.subhero__c {
  padding-top: 170px; /* wysokość stałego menu + margines — H1 nigdy pod logo */
}
.subhero .crumb {
  margin-bottom: 14px;
}
.subhero__ov {
  background:
    linear-gradient(180deg, rgb(var(--c-ink-rgb) / .62) 0%, rgb(var(--c-ink-rgb) / .48) 42%, rgb(var(--c-ink-rgb) / .92) 100%),
    radial-gradient(90% 80% at 25% 60%, rgb(var(--c-primary-rgb) / .35), transparent 70%);
}
.hero__ov {
  background:
    linear-gradient(180deg, rgb(var(--c-ink-rgb) / .5) 0%, rgb(var(--c-ink-rgb) / .42) 45%, rgb(var(--c-ink-rgb) / .9) 100%) !important;
}
.subhero__img,
.hero__img {
  object-fit: cover;
  object-position: center 28%;
}

/* Ścieżki na home: każda w osobnym wierszu = równo */
.hero__paths-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 60rem;
  display: grid !important;

  justify-items: center;
  gap: 8px;

  margin-inline: auto;
}
.hero__paths-row a {
  text-align: center;
  display: block;
  max-width: 42rem;
  letter-spacing: 0.1em;
  line-height: 1.45;
  white-space: normal;
}

/* Zdjęcia feat / author / combined: proporcja ze zdjęcia (--ar), zero ucinania głowy, plakietka pod zdjęciem */
.feat__photo {
  min-height: 0;
  overflow: visible;
  border-radius: 0;
}
.feat__img {
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  aspect-ratio: var(--ar, 0.8);
  max-height: 640px;
  width: 100%;
}
.feat__img .ph-img,
.author__photo .ph-img,
.cphoto .ph-img {
  position: absolute;
  inset: 0;
}
.feat__img .ph-img img,
.author__photo .ph-img img,
.cphoto .ph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.author__photo {
  min-height: 0;
  aspect-ratio: var(--ar, 0.75);
  max-height: 620px;
}
.cphoto {
  min-height: 0;
  aspect-ratio: var(--ar, 0.9);
  max-height: 560px;
}
.feat__tab {
  position: static;
  margin-top: 14px;
  max-width: 100%;
  width: 100%;
  border-radius: 14px;
  box-sizing: border-box;
}
.feat__tab span {
  white-space: normal;
}

/* Galerie przed/po: 3–4 kafle w rzędzie, jednolity kadr 4:5, cały plik widoczny (contain) */
.gallery {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  max-width: 1120px;
  margin-inline: auto;
  gap: 14px;
}
.gallery figure {
  background: var(--c-bg-2);
}
.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  background: var(--c-bg-2);
}
.gallery figcaption {
  font-size: 13px;
}

/* Reel: przycisk dźwięku (filmy talking-head mają głos) */
.reel__media {
  position: relative;
}
.reel__sound {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  border: 0;
  cursor: pointer;
  background: rgb(14 42 27 / .88);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
}
.reel__sound.is-on {
  background: #fff;
  color: var(--c-primary);
}
.reel__v {
  object-fit: cover;
  background: var(--c-primary-4);
}
.reel__v--wide {
  max-width: 420px;
}
.reel__sound[hidden] {
  display: none;
}

/* Opinie: gwiazdki + źródło */
.tst__stars {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.tst__stars i {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: var(--c-accent);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tst__src {
  margin-top: 6px;
  color: var(--c-muted);
  font-size: 14.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tst__src b {
  color: var(--c-primary);
  font-family: var(--font-display);
}
.tst__src a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tst__card .tst__stars {
  margin-bottom: 12px;
}
.tst__card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  margin-bottom: 14px;
}
.tst__card h3 {
  margin-bottom: 4px;
}
.tst__meta {
  display: block;
  font-size: 12.5px;
  color: var(--c-muted);
}

.subhero .btn,
.subhero .btn--gold,
.subhero .btn--outline,
.subhero .btn--outline.on-dark {
  background: #fff;
  color: var(--c-primary);
  border: 0;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.55);
}

@media (max-width: 700px) {
  .crumb { display: none; }
  .subhero__frame,
  .hero__frame { display: none; }
  .subhero .container,
  .hero__c { padding-inline: 22px; }
  .subhero h1,
  .hero h1 {
    font-size: clamp(1.55rem, 6.6vw, 1.95rem) !important;
    max-width: 100%;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    line-height: 1.14;
  }
  .subhero__lead,
  .hero__lead {
    font-size: 16px;
    line-height: 1.55;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .subhero .container {
    max-width: 100%;
    box-sizing: border-box;
  }
  .subhero__cta {
    flex-direction: column;
    gap: 10px;
  }
  .subhero__cta .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: 14px 12px;
    font-size: 13px;
    letter-spacing: .08em;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    box-sizing: border-box;
  }
  .subhero,
  .hero { overflow-x: hidden; }
  .subhero { min-height: 0; }
  .subhero__c { padding-top: 118px; padding-bottom: 34px; }
  .hero__c { padding-top: 110px; }
  .hero__paths {
    margin: 0 12px 18px;
    padding: 14px 4px 10px;
  }
  .hero__paths-row a {
    font-size: 11px;
    letter-spacing: .08em;
  }
  .author__photo { max-height: 520px; }
  .feat__img { max-height: 520px; }
  .cphoto { max-height: 440px; }
  .gallery { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .gallery figcaption { font-size: 11.5px; padding: 8px 9px; }
  .tst__src { font-size: 13.5px; }
  .nav__logo-m--img img { height: 48px; }
}

@media (max-width: 420px) {
  .gallery { grid-template-columns: 1fr 1fr !important; }
}

/* Home hero: treść zaczyna się pod stałym menu, nie jest centrowana (H1 wjeżdżał pod logo) */
.hero__c {
  justify-content: flex-start;
  padding-top: clamp(180px, 15vw, 220px);
  padding-bottom: 36px;
}
@media (max-width: 700px) {
  .hero__c { padding-top: 120px; }
  .hero__paths-row { grid-template-columns: 1fr; max-width: 100%; }
}

/* ===== QA mobile 10.09 ===== */

/* Menu mobilne: na iPhone SE (667 px) ostatnie pozycje wychodziły poza ekran i nie dało się przewinąć */
.mobile {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile nav {
  padding-bottom: 28px;
}
/* „Specjalizacje" to nagłówek grupy (href="#"), nie link — nie udawaj klikalnego */
.mobile .menu-item-has-children > a[href="#"] {
  pointer-events: none;
  cursor: default;
  opacity: .58;
  font-size: 11px;
  letter-spacing: .3em;
}
.mobile .menu-item-has-children > a[href="#"]::after { content: none; }

/* Baner cookie (CookieYes) zasłaniał 46–62% ekranu telefonu */
.cky-consent-container.cky-box-bottom-left {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.cky-consent-container .cky-consent-bar {
  padding: 12px 16px 14px !important;
  border-radius: 0 !important;
}
.cky-title { font-size: 14.5px !important; margin-bottom: 4px !important; }
.cky-notice-des, .cky-notice-des p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.cky-notice-des {
  max-height: 26vh;
  overflow-y: auto;
}
.cky-notice-btn-wrapper { margin-top: 10px !important; gap: 8px !important; }
.cky-btn { padding: 9px 12px !important; font-size: 12.5px !important; }

@media (min-width: 900px) {
  .cky-consent-container.cky-box-bottom-left {
    left: 22px !important;
    right: auto !important;
    bottom: 22px !important;
    width: 430px !important;
    max-width: 430px !important;
  }
  .cky-consent-container .cky-consent-bar { border-radius: 14px !important; }
  .cky-notice-des { max-height: none; }
}

/* ===== QA mobile 10.09 — poprawka 2 ===== */

/* nav miał flex:1 + justify:center, więc przycinał listę zamiast rozpychać .mobile.
   margin:auto 0 centruje, gdy jest miejsce, a gdy go brak — kontener się przewija. */
.mobile nav {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  margin: auto 0 !important;
}

@media (max-width: 899px) {
  /* Baner cookie: przyciski jeden pod drugim robiły 383 px (57% ekranu iPhone SE) */
  .cky-consent-container .cky-consent-bar { padding: 10px 14px 12px !important; }
  .cky-title { font-size: 13.5px !important; margin-bottom: 3px !important; }
  .cky-notice-des,
  .cky-notice-des p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .cky-notice-des {
    max-height: 4.6em !important;
    overflow-y: auto !important;
  }
  .cky-notice-btn-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 30% !important;
    min-width: 0 !important;
    padding: 9px 6px !important;
    font-size: 11.5px !important;
    white-space: normal !important;
  }
  /* Nagłówek podstrony: treść od góry pod menu. Przy align-items:flex-end
     długi H1 (dno miednicy) wychodził górą poza sekcję i wjeżdżał pod menu. */
  .subhero {
    align-items: flex-start !important;
    padding-top: 104px !important;
    box-sizing: border-box;
  }
  .subhero__c { padding-top: 0 !important; padding-bottom: 30px !important; }
}

/* ===== QA mobile 10.09 — poprawka 3 ===== */

/* Notka pod galerią nachodziła na podpis ostatniego kafla (onkologia) */
.galeria-note,
.gallery + p,
p.galeria-note {
  margin-top: 16px;
  clear: both;
}

/* Samanta 22.08: „czcionki za małe na tel". 11 px → 12 px na telefonie. */
@media (max-width: 899px) {
  .hero__paths-row a,
  .hero__paths-h,
  .filar__tag,
  .tag,
  .gallery figcaption b,
  .feat__tab span,
  .node__t,
  .eyebrow {
    font-size: 12px !important;
    letter-spacing: .16em !important;
  }
  .gallery figcaption { font-size: 12.5px !important; }
}

/* Hero na home: 7 ścieżek + CTA nie mieściły się w 100svh (16 px ucięte) */
@media (max-width: 899px) {
  .hero { min-height: auto !important; }
  .hero__paths { padding-bottom: 26px; }
}

/* Onkologia: kadr pionowy na telefonie ucinał postać — przesuwam punkt kadrowania na sylwetkę */
body.page-id-11 .subhero__img { object-position: 25% 30% !important; }