/* ============================================================
   css/landing-prezent.css
   Landing "Prezent dla mężczyzny" — mp-theme
   Ładowany warunkowo wyłącznie na page-landing-prezent.php (mp_lp_assets).
   Zmienne kolorów/typografii pochodzą z main.css (--beige, --ink, --gold, --f-display, --f-body).
   Breakpointy zgodne z resztą motywu: 1200 / 1024 / 768 / 430px.
   ============================================================ */

.lp-wrap { max-width: var(--max-w, 1200px); margin: 0 auto; padding: 0 var(--pad-x, 100px); }
.lp-wrap--narrow { padding-left: 24px; padding-right: 24px; }

.lp-page .ew { letter-spacing: var(--lp-eyebrow-ls, .15em); }

.lp-h2 {
  font-family: var(--f-display);
  font-weight: var(--lp-heading-weight, 400);
  font-size: var(--lp-h2-size, 38px);
  line-height: var(--lp-heading-lh, 1.15);
  letter-spacing: -.02em;
  margin: 0 0 24px;
}
.lp-h3 {
  font-family: var(--f-display);
  font-weight: var(--lp-heading-weight, 400);
  font-size: var(--lp-h3-size, 24px);
  line-height: var(--lp-heading-lh, 1.15);
  margin: 0 0 10px;
}
.lp-body {
  font-family: var(--f-body);
  font-size: var(--lp-text-size, 17px);
  line-height: var(--lp-text-lh, 1.75);
  color: inherit;
}
.lp-body p { margin: 0 0 18px; }
.lp-body p:last-child { margin-bottom: 0; }
.lp-body--sm { font-size: 15px; line-height: 1.65; }
.lp-lead { font-size: 17px; line-height: 1.6; color: var(--lp-text-muted, var(--ink-muted)); margin: 0 0 32px; }

.lp-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--lp-quote-size, 26px);
  line-height: 1.45;
  color: var(--lp-quote-color, var(--gold));
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}

/* Listy: cienka linia zamiast kropki, zgodnie ze standardem projektowym marki */
.lp-list { list-style: none; margin: 32px 0 0; padding: 0; }
.lp-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--lp-border, var(--beige-border));
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
}
.lp-list li:first-child { padding-top: 0; }
.lp-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Wariant "kropka" (Globalne ustawienia → Styl list) */
.lp-list--dot { padding-left: 4px; }
.lp-list--dot li { border-bottom: 0; padding: 10px 0 10px 22px; position: relative; }
.lp-list--dot li::before {
  content: ''; position: absolute; left: 0; top: 19px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* Wariant "check" (Globalne ustawienia → Styl list) — bez kart, ikona check
   w okręgu przy każdym punkcie, cienka złota linia pod każdym punktem
   (subtelny akcent — półprzezroczyste złoto, nie pełny kolor). */
.lp-list--check { margin-top: 40px; }
.lp-list--check li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid rgba(139,105,20,.3);
  padding: 16px 0;
}
.lp-list--check li:first-child { padding-top: 0; }
.lp-list--check li:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-list__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 2px;
}
.lp-list__check svg { width: 22px; height: 22px; }
.lp-list__text { font-family: var(--f-body); font-size: 16px; line-height: 1.6; }

/* ── HERO ── */
.lp-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.lp-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.lp-hero__inner { position: relative; width: 100%; max-width: var(--max-w, 1200px); margin: 0 auto; padding: 0 var(--pad-x, 100px) 80px; }
.lp-hero__content { position: relative; }
.lp-hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--lp-h1-size, 58px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.lp-page .go { font-style: italic; color: var(--gold); }
.lp-hero__desc { font-family: var(--f-body); font-size: 18px; line-height: 1.6; opacity: .85; margin: 0 0 32px; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── PRZYCISKI ── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px;
  font-family: var(--f-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--lp-btn-radius, 0px);
  transition: background .25s var(--ease-out, ease), color .25s var(--ease-out, ease), border-color .25s var(--ease-out, ease);
}
.lp-btn--solid {
  background: var(--lp-btn-bg, var(--ink));
  color: var(--lp-btn-color, var(--beige));
  border-color: var(--lp-btn-border, var(--ink));
}
.lp-btn--solid:hover {
  background: var(--lp-btn-hover-bg, var(--ink-soft));
  color: var(--lp-btn-hover-color, var(--lp-btn-color, var(--beige)));
  border-color: var(--lp-btn-hover-border, var(--lp-btn-border, var(--ink)));
}
.lp-btn--ghost {
  background: transparent;
  color: var(--lp-btn-color, var(--ink));
  border-color: var(--lp-btn-border, var(--ink));
}
.lp-btn--ghost:hover {
  background: var(--lp-btn-hover-bg, var(--ink));
  color: var(--lp-btn-hover-color, var(--beige));
  border-color: var(--lp-btn-hover-border, var(--ink));
}

/* ── VOUCHER PREZENTOWY (tekst na górze, duże zdjęcie pod spodem,
   bez ramek/cieni/zaokrągleń — czysty <img> w dużym rozmiarze) ── */
.lp-voucher__text .lp-body { margin: 24px 0 0; }
.lp-voucher__text .lp-list { margin-top: 32px; }
/* Kontener obrazka wyłącznie ustawia szerokość i centruje — żadnego tła,
   paddingu, obramowania, cienia ani zaokrąglenia. Sam obraz ma dokładnie
   te trzy właściwości, które widać niżej, nic ponadto. */
.lp-voucher__media { width: 95%; margin: 72px auto 0; }
.lp-voucher__img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-voucher__placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  color: var(--lp-text-muted, var(--ink-muted));
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: .03em;
}

/* ── PROCES ── */
.lp-process__hdr { margin-bottom: 56px; }
.lp-process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.lp-process__item { position: relative; }
.lp-process__no {
  display: block;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 12px;
}
.lp-process__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(139,105,20,.1);
  color: var(--gold);
  margin-bottom: 16px;
}

/* ── CZY TO DLA NIEGO (karty + cytat) ──
   Kolory, promień, padding, cień i odstępy kart oraz kolumny per
   breakpoint (--lp-fit-cols-d/-t/-m) przychodzą z Customizera jako
   inline style / custom properties — tu tylko struktura layoutu. */
.lp-fit__hdr { margin-bottom: 48px; }
.lp-fit__grid {
  display: grid;
  grid-template-columns: repeat(var(--lp-fit-cols-d, 4), 1fr);
}
.lp-fit__card {
  display: flex;
  align-items: flex-start;
  text-align: left;
}
.lp-fit__card--shadow-none   { box-shadow: none; }
.lp-fit__card--shadow-soft   { box-shadow: 0 2px 14px rgba(26,26,26,.05); }
.lp-fit__card--shadow-medium { box-shadow: 0 6px 24px rgba(26,26,26,.08); }
.lp-fit__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(139,105,20,.08);
  flex-shrink: 0;
}
.lp-fit__icon-wrap svg { width: 24px; height: 24px; }
.lp-fit__text { font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: inherit; margin: 0; }

.lp-quote-card {
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--lp-border, var(--beige-border));
  border-radius: var(--lp-radius, 14px);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-quote-card__mark {
  font-family: var(--f-display);
  font-size: 48px;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}
.lp-quote-card__divider { width: 1px; align-self: stretch; background: var(--lp-border, var(--beige-border)); flex-shrink: 0; }
.lp-quote-card__text {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ── GALERIA ── */
.lp-gallery__hdr { margin-bottom: 48px; }
.lp-gallery__grid { display: grid; }
.lp-gallery__item { margin: 0; position: relative; overflow: hidden; border-radius: var(--lp-radius, 14px); background: var(--beige-dark); }
.lp-gallery__photo { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 3 / 4; transition: transform .7s var(--ease-out, ease); }
.lp-gallery__item:hover .lp-gallery__photo { transform: scale(1.03); }
.lp-gallery__trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lp-gallery__trigger:focus-visible, .lp-btn:focus-visible, .faq__btn:focus-visible, .lp-lightbox button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.lp-gallery__caption { font-size: 13px; color: var(--lp-text-muted, var(--ink-muted)); margin-top: 8px; }
.lp-gallery__more { margin-top: 40px; text-align: center; }

/* ── LIGHTBOX ── */
.lp-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(26,26,26,.94);
  display: none; align-items: center; justify-content: center;
}
.lp-lightbox.is-open { display: flex; }
.lp-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lp-lightbox__close, .lp-lightbox__prev, .lp-lightbox__next {
  position: absolute; background: none; border: 0; color: var(--beige);
  font-size: 32px; line-height: 1; cursor: pointer; padding: 12px;
}
.lp-lightbox__close { top: 16px; right: 16px; }
.lp-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lp-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ── OPINIE ── */
.lp-reviews__hdr { margin-bottom: 48px; }
.lp-reviews__grid { display: grid; gap: 24px; }
.lp-reviews__slider { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.lp-reviews__slider .lp-review-card { scroll-snap-align: start; flex: 0 0 340px; }
.lp-review-card {
  background: var(--white);
  border: 1px solid var(--lp-border, var(--beige-border));
  border-radius: var(--lp-radius, 14px);
  padding: 32px;
  box-shadow: 0 2px 20px rgba(26,26,26,.06);
}
.lp-review-card--featured { background: var(--ink); color: var(--beige); border-color: var(--ink); }
.lp-review-card__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; font-size: 15px; }
.lp-review-card__text { font-family: var(--f-display); font-style: italic; font-size: 18px; line-height: 1.5; margin: 0 0 20px; }
.lp-review-card__author { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.lp-review-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lp-review-card__city { display: block; color: var(--lp-text-muted, var(--ink-muted)); font-size: 13px; }
.lp-review-card--featured .lp-review-card__city { color: rgba(245,240,232,.6); }

/* ── FAQ (reużywa klas .faq__* i JS z main.js) ── */
.lp-faq__hdr { margin-bottom: 40px; }
/* .faq__item / .faq__btn / .faq__ans itd. mają już pełny styl i JS w main.css / main.js — nie duplikujemy */

/* ── CTA ── */
.lp-cta__buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 32px; }

/* ── ANIMACJE ── */
@media (prefers-reduced-motion: reduce) {
  .rv, .lp-gallery__photo, .lp-btn { transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   RESPONSYWNOŚĆ — 1200 / 1024 / 768 / 430 (zgodnie z main.css)
   ============================================================ */
@media (max-width: 1200px) {
  .lp-process__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .lp-wrap { padding: 0 60px; }
  .lp-hero__inner { padding: 0 60px 64px; }
  .lp-hero__title { font-size: clamp(38px, 6vw, 52px); }
  .lp-fit__grid { grid-template-columns: repeat(var(--lp-fit-cols-t, 2), 1fr); }
  .lp-gallery__grid[data-cols-t="1"] { grid-template-columns: 1fr !important; }
  .lp-gallery__grid[data-cols-t="2"] { grid-template-columns: repeat(2,1fr) !important; }
  .lp-gallery__grid[data-cols-t="3"] { grid-template-columns: repeat(3,1fr) !important; }
}

@media (max-width: 768px) {
  .lp-wrap { padding: 0 24px; }
  .lp-hero__inner { padding: 0 24px 48px; }
  .lp-voucher__media { margin-top: 56px; width: 100%; }
  .lp-process__list { grid-template-columns: 1fr; gap: 36px; }
  .lp-fit__grid { grid-template-columns: repeat(var(--lp-fit-cols-m, 1), 1fr); }
  .lp-reviews__grid { grid-template-columns: 1fr !important; }
  .lp-cta__buttons { flex-direction: column; align-items: stretch; }
  .lp-cta__buttons .lp-btn { width: 100%; }
  .lp-gallery__grid[data-cols-m="1"] { grid-template-columns: 1fr !important; }
  .lp-gallery__grid[data-cols-m="2"] { grid-template-columns: repeat(2,1fr) !important; }
  .lp-quote-card { flex-direction: column; text-align: center; padding: 28px 24px; }
  .lp-quote-card__divider { width: 40px; height: 1px; align-self: center; }
}

@media (max-width: 430px) {
  .lp-hero__cta { flex-direction: column; align-items: stretch; }
  .lp-hero__cta .lp-btn { width: 100%; }
  .lp-h2 { font-size: clamp(28px, 8vw, 34px); }
}