/*!
Theme Name: Bradosna
Theme URI: https://bradosna.pl/
Author: Not Sorry Collective
Author URI: https://ntsr.pl/
Description: Motyw salonu bielizny i brafittingu Bradosna - port statycznego layoutu (bradosna_html) na WordPressa.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bradosna
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Bradosna is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> SPIS TRESCI:
----------------------------------------------------------------
# Lenis                   (port css/vendor/lenis.css)
# Design tokens           (port css/tokens.css)
# Typografia              (port css/typography.css)
# Globals                 (port css/globals.css)
# Layout                  (port css/layout.css)
# Komponenty              (port css/components.css)
# Motion                  (port css/motion.css)
# Strona glowna           (port css/home.css)
# Strona glowna - interakcje (port css/home-interactions.css)
# Uslugi                  (port css/services.css)
# Uslugi - zaproszenie    (port css/service-invite.css)
# O nas                   (port css/about.css)
# O nas - sekcje          (port css/about-sections.css)
# Blog                    (port css/blog.css)
# Bon podarunkowy         (port css/gift-card.css)
# Bon - checkout          (port css/gift-checkout.css)
# Kontakt                 (port css/contact.css)
# Lightbox                (port css/lightbox.css)
# Responsive              (port css/responsive.css)
# Responsive - strona glowna     (port css/home-responsive.css)
# Responsive - uslugi            (port css/services-responsive.css)
# Responsive - o nas             (port css/about-responsive.css)
# Responsive - o nas, sekcje     (port css/about-sections-responsive.css)
# Responsive - blog              (port css/blog-responsive.css)
# Responsive - bon podarunkowy   (port css/gift-card-responsive.css)
# Responsive - kontakt           (port css/contact-responsive.css)
# Blog - dodatki WordPressa (tresc z Gutenberga + paginacja)
# Strona tekstowa         (page.php: regulamin, polityki, poza prototypem)
# Contact Form 7          (dopasowanie markupu wtyczki do designu)
# Okruszki                (pasek pod naglowkiem, poza prototypem)
# WordPress core          (klasy wymagane przez WP: a11y, wyrownania,
                           podpisy, galerie, pasek administratora)

UWAGA 1: motyw celowo trzyma CALY arkusz w tym jednym pliku - nie dodawaj
kolejnych plikow .css. Nowe reguly dopisuj na koncu wlasciwego bloku
powyzej bloku "# WordPress core".

UWAGA 2: kolejnosc blokow odwzorowuje jeden do jednego liste @import
z bradosna_html/css/main.css i ma znaczenie - bloki "Responsive" musza
zostac na koncu, bo nadpisuja reguly z blokow nieresponsywnych.
Nie przestawiaj sekcji.

UWAGA 3: sciezki url() zostaly przepisane wzgledem katalogu motywu:
../fonts/         -> assets/fonts/
../client-assets/ -> assets/img/
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Lenis  (zrodlo: css/vendor/lenis.css)
--------------------------------------------------------------*/

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/*--------------------------------------------------------------
# Design tokens  (zrodlo: css/tokens.css)
--------------------------------------------------------------*/

:root {
  --color-paper: #f3ede3;
  --color-milk: #fcfaf5;
  --color-ink: oklch(41.21% 0.075 255.52);
  --color-graphite: #655d56;
  --color-brand-pink: oklch(73.98% 0.1627 11.11);
  --color-raspberry: oklch(55.22% 0.2139 8.4);
  --color-raspberry-strong: oklch(51.77% 0.204 3.39);
  --color-navy: #1a3b69;
  --color-navy-deep: color-mix(in srgb, #1a3b69 90%, black);
  --color-coral: #f18096;
  --color-border: oklch(41.21% 0.075 255.52 / 0.18);
  --color-on-accent: #fcfaf5;
  --color-warning: #8b632f;
  --color-error: #a33c48;
  --color-focus: var(--color-raspberry-strong);
  --shadow-overlay: 0 20px 60px rgba(55, 42, 38, 0.16);

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-36: 9rem;

  --radius-control: 4px;
  --radius-modal: 8px;
  --radius-media: 8px;
  --content-max: 1320px;
  --gutter: clamp(2rem, 5vw, 4.5rem);
  --grid-columns: 12;
  --grid-gap: 1.5rem;
  /* Logo (9.5rem szerokosci, proporcja 1.707) ma 89px wysokosci, wiec pasek
     musi byc od niego wyzszy. Mobile nadpisuje to na 4rem. */
  --header-height: 6rem;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/*--------------------------------------------------------------
# Typografia  (zrodlo: css/typography.css)
--------------------------------------------------------------*/

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/Newsreader-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/Newsreader-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/Newsreader-italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/Newsreader-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-synthesis: none;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 500;
}

h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6.2vw, 6.25rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.25rem, 4.2vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  line-height: 1.08;
}

.lead {
  max-width: 64ch;
  font-size: 1.25rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.eyebrow {
  margin-block-end: var(--space-4);
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.editorial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.18;
}

em,
i,
cite {
  font-style: normal;
}

/*--------------------------------------------------------------
# Globals  (zrodlo: css/globals.css)
--------------------------------------------------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-paper);
  color-scheme: light;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 20rem;
  min-height: 100vh;
  background: var(--color-paper);
  overflow-x: clip;
}

body.menu-is-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  font-size: max(1rem, 16px);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

main img {
  border-radius: var(--radius-media);
  outline: 1px solid rgb(0 0 0 / 0.1);
  outline-offset: -1px;
}

::selection {
  background: var(--color-raspberry);
  color: var(--color-on-accent);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

#main-content:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset: var(--space-3) auto auto var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-milk);
  font-size: 0.875rem;
  font-weight: 650;
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/*--------------------------------------------------------------
# Layout  (zrodlo: css/layout.css)
--------------------------------------------------------------*/

.page-shell {
  width: min(calc(100% - (2 * var(--gutter))), var(--content-max));
  margin-inline: auto;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: var(--color-paper);
  transition:
    height 220ms var(--ease-out),
    background-color 180ms ease,
    border-color 180ms ease;
}

.site-header[data-scrolled="true"] {
  height: 5.5rem;
  border-color: var(--color-border);
  background: rgba(243, 237, 227, 0.96);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1fr) auto auto;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  width: 9.5rem;
  min-height: 44px;
}

.site-header__logo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 220ms var(--ease-out);
  transform-origin: left center;
}

/* 7.8rem / 9.5rem — wizualne zmniejszenie bez animowania layoutu */
.site-header[data-scrolled="true"] .site-header__logo img {
  transform: scale(0.8235);
}

.desktop-navigation ul,
.site-footer nav,
.mobile-navigation__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.desktop-navigation ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.25vw, 1.5rem);
}

.desktop-navigation a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.015em;
  text-decoration: none;
  transition: color 140ms ease;
  white-space: nowrap;
}

.desktop-navigation a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: var(--color-raspberry);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
}

.desktop-navigation a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header .site-header__menu-button {
  display: none;
}

.section-intro {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.section-intro h2 {
  grid-column: 1 / 7;
}

.section-intro__description {
  grid-column: 3 / 9;
}

.site-footer {
  background: var(--color-milk);
}

.site-footer__details {
  display: grid;
  padding-block: var(--space-16);
  grid-template-columns: 4fr 4fr 4fr;
  align-items: start;
  gap: calc(2 * var(--grid-gap));
}

.site-footer__brand {
  padding-block-start: var(--space-2);
}

.site-footer__statement {
  max-width: 31ch;
  margin: 0;
}

.site-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-block-start: var(--space-8);
}

.site-footer__column {
  padding-block-start: var(--space-2);
}

.site-footer__column .site-footer__heading {
  margin-block: var(--space-3) var(--space-6);
  /* h2 -> p (SEO: jedna kolumna nie moze byc naglowkiem strony); font-family
     trzyma dawny wyglad naglowka h1-h3 (patrz regula "h1, h2, h3" wyzej),
     bo .eyebrow font-family nie ustawia. */
  font-family: var(--font-display);
}

.site-footer__location address {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-style: normal;
}

.site-footer__location address strong {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.12;
}

.site-footer__location address span:not(.sr-only) {
  color: var(--color-graphite);
  font-size: 0.875rem;
}

.site-footer__location address a,
.site-footer__contact-links a,
.site-footer__legal a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.site-footer__location address a {
  width: fit-content;
}

.site-footer__location address a svg {
  transition: transform 240ms var(--ease-out);
}

.site-footer__contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__contact-links a:first-child {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
}

.site-footer__hours-label {
  padding-block-start: var(--space-8);
  margin-block-end: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.opening-hours {
  max-width: 20rem;
  margin: 0;
}

.opening-hours div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.opening-hours div:last-child {
  border-bottom: 0;
}

.opening-hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.site-footer__location address strong svg {
  display: inline-block;
  margin-inline-start: var(--space-2);
  vertical-align: baseline;
}

.site-footer__legal {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* align-items: center to swiadome odstepstwo od statycznego eksportu:
   drugi <span> niesie <a> z min-height: 44px (cel dotykowy), wiec przy
   domyslnym `stretch` nota "(c) rok" rozciagala sie na te 44px i lezala
   przy gornej krawedzi zamiast w jednej linii z podpisem wykonawcy. */
.site-footer__legal-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-footer__legal a {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__location address a:hover,
  .site-footer__contact-links a:hover,
  .site-footer__legal a:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }

  .site-footer__location address a:hover svg {
    transform: translate(0.2rem, -0.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__location address a,
  .site-footer__contact-links a,
  .site-footer__legal a,
  .site-footer__location address a svg {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Komponenty  (zrodlo: css/components.css)
--------------------------------------------------------------*/

.booking-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 180ms ease,
    color 180ms ease;
}

.booking-link:active,
.icon-button:active {
  transform: translateY(1px);
}

.booking-link--primary {
  padding: var(--space-3) var(--space-6);
  background: var(--color-raspberry);
  color: var(--color-on-accent);
}

.booking-link--text,
.text-link {
  position: relative;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 650;
}

.button-outline {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--color-raspberry);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.button-outline:focus-visible {
  outline: 2px solid var(--color-raspberry-strong);
  outline-offset: 2px;
}

.button-outline:active {
  transform: translateY(1px);
}

.icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  place-items: center;
  transition:
    transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 180ms ease;
}

.mobile-navigation {
  position: fixed;
  z-index: 50;
  inset: 0;
}

.mobile-navigation__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-ink) 26%, transparent);
  cursor: pointer;
}

.mobile-navigation__drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(100%, 28rem);
  height: 100dvh;
  padding: var(--space-4) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--radius-modal) 0 0 var(--radius-modal);
  background: var(--color-milk);
  box-shadow: var(--shadow-overlay);
  animation: drawer-enter 280ms var(--ease-out) both;
}

@keyframes drawer-enter {
  from {
    opacity: 0.96;
    transform: translateX(2rem);
  }
}

.mobile-navigation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.mobile-navigation__head .eyebrow {
  margin: 0;
}

.mobile-navigation__list {
  padding-block: var(--space-4);
}

.mobile-navigation__link {
  display: grid;
  min-height: 56px;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.08;
  text-decoration: none;
}

.mobile-navigation__link > span {
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
}

.mobile-navigation__link[aria-current="page"] {
  color: var(--color-raspberry);
}

.mobile-navigation__booking {
  width: 100%;
  margin-block-start: auto;
}

.mobile-booking-bar {
  position: fixed;
  z-index: 25;
  right: var(--space-4);
  /* Pasek plywa nad krawedzia, wiec safe-area idzie w odsuniecie, nie w
     padding - inaczej na iOS box rosnie o home indicator, gdy paski Safari
     sa schowane (env() = 0 przy widocznych paskach, ~34px przy schowanych),
     a cala nadwyzka ladowala pod przyciskiem. */
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  left: var(--space-4);
  display: none;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-modal);
  background: var(--color-milk);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + var(--space-6)));
  transition:
    opacity 180ms ease,
    transform 260ms var(--ease-out);
}

.mobile-booking-bar .booking-link {
  width: 100%;
}

.mobile-booking-bar[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .booking-link--primary:hover {
    background: var(--color-raspberry-strong);
  }

  .booking-link--text:hover,
  .text-link:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }

  .button-outline:hover {
    background: var(--color-raspberry);
    color: var(--color-on-accent);
  }

  .desktop-navigation a:hover {
    color: var(--color-raspberry);
  }

  .icon-button:hover {
    background: color-mix(in srgb, var(--color-raspberry) 8%, var(--color-milk));
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-link,
  .icon-button,
  .button-outline {
    transition-property: background-color, color, opacity, border-color;
    transition-duration: 120ms;
    transition-timing-function: ease;
  }

  .site-header {
    transition-property: background-color, border-color, color, opacity;
    transition-duration: 120ms;
    transition-timing-function: ease;
  }

  .booking-link:active,
  .icon-button:active,
  .button-outline:active,
  .mobile-booking-bar,
  .mobile-booking-bar[data-visible="true"],
  .mobile-navigation__drawer,
  .skip-link,
  .skip-link:focus {
    transform: none;
  }

  .mobile-booking-bar {
    transition: opacity 120ms ease;
  }

  .booking-link--text,
  .text-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }

  .desktop-navigation a::after {
    display: none;
    transition: none;
    transform: none;
  }

  .desktop-navigation a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.55em;
  }

  .skip-link {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .skip-link:focus {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-navigation__drawer {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Motion  (zrodlo: css/motion.css)
--------------------------------------------------------------*/

html.motion-ready [data-reveal][data-reveal-state="ready"] {
  opacity: 0;
}

html.motion-ready [data-reveal="copy"][data-reveal-state="ready"],
html.motion-ready [data-reveal="item"][data-reveal-state="ready"] {
  transform: translateY(1rem);
}

html.motion-ready [data-reveal="copy"],
html.motion-ready [data-reveal="item"] {
  transition:
    opacity 520ms ease,
    transform 640ms var(--ease-out);
}

html.motion-ready [data-reveal="media"] {
  overflow: hidden;
  transition:
    clip-path 900ms var(--ease-out),
    opacity 320ms ease;
}

html.motion-ready [data-reveal="media"][data-reveal-state="ready"] {
  clip-path: inset(0 0 14% 0);
}

html.motion-ready [data-reveal="media"] > img,
html.motion-ready [data-reveal="media"] > button > img {
  transition: transform 1100ms var(--ease-out);
}

html.motion-ready [data-reveal="media"][data-reveal-state="ready"] > img,
html.motion-ready [data-reveal="media"][data-reveal-state="ready"] > button > img {
  transform: scale(1.035);
}

html.motion-ready [data-reveal][data-reveal-state="visible"] {
  opacity: 1;
  transform: translateY(0);
}

html.motion-ready [data-reveal="media"][data-reveal-state="visible"] {
  clip-path: inset(0);
}

html.motion-ready [data-reveal="media"][data-reveal-state="visible"] > img,
html.motion-ready [data-reveal="media"][data-reveal-state="visible"] > button > img {
  transform: scale(1);
}

html.motion-ready [data-reveal-index="1"] {
  transition-delay: 56ms;
}

html.motion-ready [data-reveal-index="2"] {
  transition-delay: 112ms;
}

html.motion-ready [data-reveal-index="3"] {
  transition-delay: 168ms;
}

html.motion-ready [data-reveal-index="4"] {
  transition-delay: 224ms;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal] > img,
  html.motion-ready [data-reveal] > button > img {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: opacity 120ms ease;
    transition-delay: 0ms;
  }
}

/*--------------------------------------------------------------
# Strona glowna  (zrodlo: css/home.css)
--------------------------------------------------------------*/

.section-space {
  padding-block: clamp(7rem, 10vw, 9rem);
}

.home-page section {
  position: relative;
}

.home-hero {
  overflow: clip;
  border-bottom: 1px solid var(--color-border);
}

.home-hero__grid {
  position: relative;
  grid-template-rows: auto auto;
  align-items: start;
  padding-block: 0 var(--space-16);
}

.home-hero__photo {
  grid-column: 4 / 13;
  grid-row: 1;
  width: calc(
    100% + max(var(--gutter), calc((100vw - var(--content-max)) / 2))
  );
  max-width: none;
  aspect-ratio: 24 / 17;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media) 0 0 var(--radius-media);
  background: var(--color-milk);
}

.home-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-hero__title-plate {
  position: relative;
  z-index: 1;
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: end;
  padding: clamp(var(--space-8), 3vw, var(--space-12)) var(--space-12) var(--space-8) 0;
  border-radius: 0 var(--radius-media) 0 0;
  background: var(--color-paper);
}

.home-hero__title-plate::before,
.home-hero__title-plate::after {
  position: absolute;
  width: var(--radius-media);
  height: var(--radius-media);
  background: radial-gradient(
    circle var(--radius-media) at 100% 0,
    transparent calc(100% - 1px),
    var(--color-paper) 100%
  );
  content: "";
  pointer-events: none;
}

.home-hero__title-plate::before {
  top: calc(-1 * var(--radius-media));
  left: calc(50% + var(--grid-gap) / 2);
}

.home-hero__title-plate::after {
  right: calc(-1 * var(--radius-media));
  bottom: 0;
}

.home-hero__title-plate h1 {
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  line-height: 1.04;
}

.home-hero__title-plate .lead {
  max-width: 48ch;
  margin-block-end: var(--space-8);
}

.home-hero__actions {
  display: none;
}

.home-hero__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding-block-start: var(--space-4);
  color: var(--color-graphite);
  font-size: 1rem;
}

.home-hero__rail::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--color-raspberry);
  content: "";
  transform-origin: left;
  animation: home-rail-draw 720ms var(--ease-out) 260ms both;
}

@keyframes home-rail-draw {
  from {
    transform: scaleX(0);
  }
}

.home-hero__rail-label,
.home-hero__rail dl,
.home-hero__rail address {
  margin: 0;
}

.home-hero__rail-label {
  margin-block-end: var(--space-2);
  color: var(--color-raspberry);
  font-size: 1rem;
  font-weight: 650;
}

.home-hero__rail dl div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
}

.home-hero__rail dd {
  margin: 0;
  color: var(--color-raspberry);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.home-hero__rail address {
  max-width: 20ch;
  font-style: normal;
}

.home-hero__phone {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.home-hero__phone span {
  text-decoration: inherit;
}

.home-hero__phone svg {
  transition: color 140ms ease;
}

.home-team__photo {
  grid-column: 1 / 8;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.home-team__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

.home-team__copy {
  z-index: 1;
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: center;
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  background: var(--color-milk);
  border-top: 1px solid var(--color-raspberry);
}

.home-team__copy h2,
.home-team__copy .lead {
  margin-block-end: var(--space-6);
}

.home-team__members {
  display: flex;
  flex-direction: column;
  margin-block-end: var(--space-6);
}

.home-team__member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.home-team__member:last-child {
  border-bottom: 0;
}

.home-team__member a {
  color: var(--color-ink);
  font-weight: 650;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-underline-offset: 0.2em;
  transition: color 180ms ease;
}

.home-team__member-role {
  color: var(--color-graphite);
  font-size: 0.8125rem;
}

@media (hover: hover) and (pointer: fine) {
  .home-team__member a:hover {
    color: var(--color-raspberry);
  }

  .home-hero__phone:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }
}

.review-collection {
  background: var(--color-milk);
}

.review-collection__inner {
  display: block;
}

.review-collection header {
  display: grid;
  margin-block-end: clamp(var(--space-12), 7vw, var(--space-24));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: var(--grid-gap);
}

.review-collection header .eyebrow {
  grid-column: 1 / 4;
}

.review-collection header h2 {
  grid-column: 4 / 11;
  margin: 0;
  color: var(--color-raspberry);
}

.review-collection__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.review-collection__list > li {
  border-top: 1px solid color-mix(in srgb, var(--color-raspberry) 45%, transparent);
}

.review-collection__list figure {
  display: grid;
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
  margin: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gap);
}

.review-collection__category {
  grid-column: 1 / 3;
  margin: 0;
  color: var(--color-raspberry);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-collection blockquote {
  max-width: 34ch;
  margin: 0;
  grid-column: 3 / 10;
  font-size: clamp(1.65rem, 2.7vw, 2.85rem);
  line-height: 1.14;
}

.review-collection figcaption {
  display: flex;
  grid-column: 10 / 13;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-graphite);
}

.review-collection__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.review-collection figcaption strong {
  color: var(--color-ink);
  font-weight: 650;
}

.review-collection__meta a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.review-collection__toggle {
  position: relative;
  display: flex;
  min-height: 44px;
  padding: 0;
  margin: var(--space-8) 0 0 auto;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-underline-offset: 0.34em;
  cursor: pointer;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.review-collection__empty {
  max-width: 54ch;
  margin: 0;
  color: var(--color-graphite);
}

@media (hover: hover) and (pointer: fine) {
  .review-collection__meta a:hover,
  .review-collection__toggle:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }
}

.home-gift__copy {
  grid-column: 1 / 8;
  align-self: center;
  padding-inline-end: var(--space-16);
}

.home-gift__copy h2,
.home-gift__copy .lead {
  margin-block-end: var(--space-6);
}

.home-gift__photo {
  position: relative;
  grid-column: 8 / 13;
  margin: 0;
}

.home-gift__photo::before {
  position: absolute;
  z-index: -1;
  inset: -0.75rem 0.75rem 0.75rem -0.75rem;
  border: 3px double var(--color-raspberry);
  content: "";
}

.home-gift__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__rail::before {
    animation: none;
    transform: none;
  }

  .home-hero__phone svg {
    transition: none;
    transform: none;
  }

  .review-collection__meta a,
  .review-collection__toggle {
    transition: none;
  }

  .home-team__member a {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Strona glowna - interakcje  (zrodlo: css/home-interactions.css)
--------------------------------------------------------------*/

.service-pillars {
  overflow: clip;
  background: var(--color-milk);
}

.service-pillars__intro {
  max-width: 65rem;
  margin-block-end: clamp(var(--space-12), 8vw, var(--space-24));
  text-align: center;
}

.service-pillars__intro h2 {
  max-width: none;
  margin-block-end: 0;
  margin-inline: auto;
  color: var(--color-raspberry);
  font-size: clamp(2rem, 4.2vw, 4.5rem);
  white-space: nowrap;
}

.service-pillars__intro .lead {
  max-width: 50ch;
  margin: var(--space-4) auto 0;
}

.service-pillars__media {
  margin-block: 0 clamp(var(--space-16), 10vw, var(--space-24));
}

.service-pillars__media-mask,
.service-pillars__media-countermask {
  height: 100%;
  overflow: hidden;
}

.service-pillars__media-mask {
  aspect-ratio: 16 / 8.7;
  border-radius: var(--radius-media);
  background: var(--color-paper);
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 560ms ease-out,
    transform 1100ms cubic-bezier(0.19, 1, 0.22, 1);
}

.service-pillars__media-countermask {
  transform: scale(1.064);
  transition: transform 1100ms cubic-bezier(0.19, 1, 0.22, 1);
}

.service-pillars[data-revealed="true"] .service-pillars__media-mask,
.service-pillars[data-revealed="true"] .service-pillars__media-countermask {
  opacity: 1;
  transform: scale(1);
}

.service-pillars__media-parallax,
.service-pillars__media-parallax img {
  width: 100%;
  height: 100%;
}

.service-pillars__media-parallax {
  transform: scale(1.055);
  transform-origin: center;
}

.service-pillars__media-parallax img {
  display: block;
  object-fit: cover;
  object-position: center 43%;
}

.service-pillars__grid {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(var(--space-8), 5.5vw, var(--space-16)) var(--grid-gap);
  list-style: none;
}

.service-pillars__grid > li {
  opacity: 0;
  transform: translateY(0.875rem);
  transition:
    opacity 340ms var(--ease-out),
    transform 380ms var(--ease-out);
}

.service-pillars[data-revealed="true"] .service-pillars__grid > li {
  opacity: 1;
  transform: translateY(0);
}

.service-pillars[data-revealed="true"] .service-pillars__grid > li:nth-child(2) {
  transition-delay: 100ms;
}

.service-pillars[data-revealed="true"] .service-pillars__grid > li:nth-child(3) {
  transition-delay: 200ms;
}

.service-pillars[data-revealed="true"] .service-pillars__grid > li:nth-child(4) {
  transition-delay: 300ms;
}

.service-pillars__grid > li:nth-child(1) {
  grid-column: 1 / 7;
}

.service-pillars__grid > li:nth-child(2) {
  grid-column: 7 / 13;
}

.service-pillars__grid > li:nth-child(3) {
  grid-column: 1 / 7;
}

.service-pillars__grid > li:nth-child(4) {
  grid-column: 7 / 13;
}

.service-pillars__grid article {
  display: grid;
  grid-template-columns: clamp(3rem, 4vw, 4rem) 1fr;
  column-gap: var(--space-6);
}

.service-pillars__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  width: clamp(3rem, 4vw, 4rem);
  height: clamp(3rem, 4vw, 4rem);
  color: var(--color-ink);
}

.service-pillars__grid h3,
.service-pillars__grid article > p,
.service-pillars__grid article > ul {
  grid-column: 2;
}

.service-pillars__grid h3 {
  margin-block-end: var(--space-4);
  font-size: clamp(1.8rem, 3.1vw, 3.35rem);
  line-height: 1;
}

.service-pillars__grid article > p {
  max-width: 48ch;
  color: var(--color-graphite);
}

.service-pillars__grid article > ul {
  display: flex;
  padding: 0;
  margin: var(--space-6) 0 0;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  list-style: none;
}

@supports (animation-timeline: view()) {
  @media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .service-pillars__media-parallax {
      animation: service-pillars-parallax linear both;
      animation-range: entry -10% exit 110%;
      animation-timeline: view();
    }
  }
}

@keyframes service-pillars-parallax {
  from {
    transform: translateY(-2.5%) scale(1.055);
  }

  to {
    transform: translateY(2.5%) scale(1.055);
  }
}

.visit-process .section-intro {
  margin-block-end: var(--space-16);
}

.visit-process .section-intro__description {
  grid-column: 1 / 7;
  max-width: 64ch;
}

.visit-process {
  background: var(--color-paper);
}

.visit-process__composition {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--grid-gap);
  align-items: start;
}

.visit-process__media-rail {
  min-width: 0;
  align-self: stretch;
  container-type: inline-size;
}

.visit-process__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.visit-process--scrollytelling .visit-process__photo {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  top: max(
    calc(var(--header-height) + var(--space-6)),
    calc(50dvh - 42.857cqw + 2.6875rem)
  );
}

.visit-process__photo img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - var(--header-height) - var(--space-12));
  aspect-ratio: 7 / 6;
  object-fit: cover;
  animation: visit-image-enter 440ms var(--ease-out) both;
}

@keyframes visit-image-enter {
  from {
    opacity: 0;
    transform: scale(1.012);
  }
}

.visit-process__steps {
  position: relative;
  padding: 0 0 0 var(--space-8);
  margin: 0;
  list-style: none;
}

.visit-process--scrollytelling .visit-process__steps {
  padding-block-end: clamp(var(--space-16), 16vh, var(--space-24));
}

.visit-process__steps::before {
  position: absolute;
  top: 1.375rem;
  bottom: 1.375rem;
  left: 0.5rem;
  width: 1px;
  background: var(--color-raspberry);
  content: "";
  transform-origin: top;
}

.visit-process__step {
  position: relative;
  display: flex;
  min-height: auto;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  opacity: 1;
  transition: opacity 180ms ease;
}

.visit-process--scrollytelling .visit-process__step {
  min-height: clamp(22rem, 62vh, 36rem);
  opacity: 0.46;
}

.visit-process__step:last-child {
  border-bottom: 0;
}

.visit-process__step button::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -1.75rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-raspberry);
  background: var(--color-paper);
  content: "";
  transform: translateY(-50%);
  transition: background-color 180ms ease;
}

.visit-process__step[data-active="true"] button::before {
  background: var(--color-raspberry);
}

.visit-process--scrollytelling .visit-process__step[data-active="true"] {
  opacity: 1;
}

.visit-process__step button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 4.75rem;
  padding: var(--space-3) 0;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.visit-process__number {
  color: var(--color-graphite);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.visit-process__name {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.08;
}

.visit-process__step p {
  padding: 0 0 var(--space-6) calc(3rem + var(--space-3));
  margin: 0;
  color: var(--color-graphite);
  opacity: 0.72;
}

.safety-panel {
  background: color-mix(in srgb, var(--color-raspberry) 4%, var(--color-milk));
}

.safety-panel__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(2 * var(--grid-gap));
}

.safety-panel__heading {
  align-self: start;
}

.safety-panel__heading h2 {
  margin-block-end: var(--space-6);
}

.safety-panel__heading > p:not(.eyebrow) {
  max-width: 38ch;
  margin-block-end: var(--space-6);
}

.safety-panel__questions {
  overflow: hidden;
  border-top: 3px double var(--color-ink);
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.safety-panel details {
  border-bottom: 1px solid var(--color-border);
}

.safety-panel summary {
  min-height: 4.5rem;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
}

.safety-panel details p {
  max-width: 54ch;
  padding: 0 var(--space-6) var(--space-6);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .service-pillars__media-mask,
  .service-pillars__media-countermask,
  .service-pillars__grid > li,
  .visit-process__step,
  .visit-process__step button::before {
    transition-duration: 120ms;
    transition-delay: 0ms !important;
    transform: none;
  }

  .service-pillars__media-parallax {
    animation: none;
    transform: none;
  }

  .visit-process__photo img {
    animation: none;
    transform: none;
  }
}

/*--------------------------------------------------------------
# Uslugi  (zrodlo: css/services.css)
--------------------------------------------------------------*/

.services-hero,
.service-detail-hero,
.brafitting-hero {
  border-bottom: 1px solid var(--color-border);
}

.services-hero__grid,
.service-detail-hero__grid,
.brafitting-hero__grid {
  position: relative;
  grid-template-rows: minmax(18rem, 1fr) auto;
  padding-block: var(--space-8) var(--space-12);
}

.services-hero__grid > *,
.service-detail-hero__grid > *,
.brafitting-hero__grid > * {
  min-width: 0;
}

.services-hero figure,
.service-detail-hero figure,
.brafitting-hero figure {
  grid-column: 4 / 13;
  grid-row: 1 / 3;
  height: clamp(34rem, 49vw, 44rem);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.services-hero figure {
  grid-column-start: 5;
}

.services-hero figure img,
.service-detail-hero figure img,
.brafitting-hero figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-hero figure img {
  object-position: 50% 54%;
}

.service-detail-hero figure img,
.brafitting-hero figure img {
  object-position: 50% 42%;
}

.services-hero__title-plate,
.service-detail-hero__title-plate,
.brafitting-hero__title-plate {
  position: relative;
  z-index: 1;
  grid-column: 1 / 9;
  grid-row: 2;
  align-self: end;
  padding: var(--space-8) var(--space-12) 0 0;
  border-radius: 0 var(--radius-media) 0 0;
  background: var(--color-paper);
}

.services-hero__title-plate::before,
.service-detail-hero__title-plate::before,
.brafitting-hero__title-plate::before {
  position: absolute;
  top: calc(-1 * var(--radius-media));
  width: var(--radius-media);
  height: var(--radius-media);
  background: radial-gradient(
    circle var(--radius-media) at 100% 0,
    transparent calc(100% - 1px),
    var(--color-paper) 100%
  );
  content: "";
  pointer-events: none;
}

.services-hero__title-plate::before {
  left: calc(50% + var(--grid-gap) / 2);
}

.service-detail-hero__title-plate::before,
.brafitting-hero__title-plate::before {
  left: calc(37.5% + 0.375 * var(--grid-gap));
}

.services-hero__title-plate h1,
.service-detail-hero__title-plate h1,
.brafitting-hero__title-plate h1 {
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  line-height: 0.98;
}

.services-hero__title-plate .lead,
.service-detail-hero__title-plate .lead,
.brafitting-hero__title-plate .lead {
  max-width: 48ch;
  margin-block-end: 0;
}

/* CTA siedzi w plycie tytulu, zaraz pod leadem. */
.service-detail-hero__action {
  margin-block-start: var(--space-8);
}

.services-catalog__intro,
.brafitting-chapters__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-block-end: var(--space-16);
}

.services-catalog__intro .eyebrow,
.brafitting-chapters__intro .eyebrow {
  grid-column: 1 / 4;
}

.services-catalog__intro h2,
.brafitting-chapters__intro h2 {
  grid-column: 4 / 11;
  margin: 0;
}

.services-catalog__intro {
  justify-items: center;
  text-align: center;
}

.services-catalog__intro .eyebrow,
.services-catalog__intro h2 {
  grid-column: 1 / -1;
}

.service-index__grid {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-12), 6vw, var(--space-24)) calc(2 * var(--grid-gap));
  list-style: none;
}

.service-index__grid article {
  display: grid;
  min-height: 100%;
  grid-template-columns: 4rem 1fr;
  align-content: start;
  gap: 0 var(--space-4);
}

.service-index__icon {
  grid-column: 1;
  grid-row: 1 / 5;
  width: 4rem;
  height: 4rem;
  margin-block-start: -0.75rem;
  color: var(--color-ink);
}

.service-index__icon path,
.brafitting-chapters__icon path {
  stroke: currentColor;
  stroke-width: 6;
}

.service-index__grid .eyebrow,
.service-index__grid h2,
.service-index__grid article > p:not(.eyebrow),
.service-index__grid .button-outline {
  grid-column: 2;
}

.service-index__grid .eyebrow {
  margin-block-end: var(--space-4);
}

.service-index__grid h2 {
  max-width: 13ch;
  margin-block-end: var(--space-4);
  color: var(--color-ink);
  font-size: clamp(1.9rem, 2.7vw, 2.85rem);
  line-height: 1.02;
}

.service-index__grid article > p:not(.eyebrow) {
  max-width: 38ch;
  margin-block-end: var(--space-6);
  color: var(--color-graphite);
}

.service-index__grid .button-outline {
  align-self: end;
  justify-self: start;
  margin-block-start: auto;
}

.service-index__empty {
  padding-block: var(--space-12);
  border-block: 1px solid var(--color-border);
}

.services-reasons {
  background: var(--color-milk);
}

.services-reasons__grid {
  align-items: start;
}

.services-reasons__grid > header {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
  grid-column: 1 / 6;
}

.services-reasons__grid > header h2 {
  max-width: 10ch;
  margin-block: var(--space-3) var(--space-6);
  color: var(--color-raspberry);
}

.services-reasons__grid > header .lead {
  max-width: 38ch;
  margin: 0;
}

.services-reasons__list {
  grid-column: 7 / 13;
  padding: 0;
  margin: 0;
  list-style: none;
}

.services-reasons__list li {
  display: grid;
  padding-block: var(--space-6);
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.services-reasons__list li:first-child {
  border-top-color: var(--color-raspberry);
}

.services-reasons__list li > span {
  padding-block-start: 0.35rem;
  color: var(--color-raspberry);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
}

.services-reasons__list h3 {
  margin-block-end: var(--space-3);
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
}

.services-reasons__list p {
  max-width: 52ch;
  margin: 0;
  color: var(--color-graphite);
}

.services-visit__grid {
  align-items: stretch;
}

.services-visit__copy {
  display: flex;
  grid-column: 1 / 7;
  padding-inline-end: clamp(var(--space-6), 4vw, var(--space-12));
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--space-12), 6vw, var(--space-24));
}

.services-visit__booking {
  padding: 0;
}

.services-visit__booking h2 {
  max-width: 12ch;
  margin-block: var(--space-3) var(--space-6);
  color: var(--color-raspberry);
}

.services-visit__booking > p:not(.eyebrow) {
  max-width: 48ch;
  margin-block-end: var(--space-8);
}

.services-visit__walk-in {
  max-width: 34rem;
  padding: 0;
}

.services-visit__walk-in h3 {
  margin-block: var(--space-3) var(--space-4);
}

.services-visit__walk-in > :last-child {
  margin: 0;
}

.services-visit__media {
  grid-column: 7 / 13;
  min-height: clamp(32rem, 42vw, 42rem);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.services-visit__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}

.service-facts {
  background: var(--color-milk);
}

.service-facts__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.service-facts__col--left {
  grid-column: 1 / 6;
}

.service-facts__col--right {
  grid-column: 7 / 13;
}

.service-facts__audience {
  align-self: start;
  padding: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--color-brand-pink) 10%, var(--color-milk));
}

.service-facts__audience h2,
.service-facts__scope h2,
.service-facts__prices h2,
.service-preparation h2 {
  margin-block-end: var(--space-6);
}

.service-facts__need {
  margin-block-end: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  font-style: normal;
  line-height: 1.18;
}

.service-facts__audience > p:last-child {
  margin-block-end: 0;
}

.service-facts__scope ol,
.brafitting-chapters ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.service-facts__scope li {
  display: grid;
  padding-block: var(--space-4);
  grid-template-columns: 3rem 1fr;
  align-items: start;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.service-facts__scope li > span {
  color: var(--color-raspberry);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
}

.service-facts__scope li p {
  margin: 0;
}

.service-facts__prices {
  align-self: start;
  padding: var(--space-6);
  overflow: hidden;
  border-top: 1px solid var(--color-raspberry);
  border-radius: var(--radius-media);
  background: var(--color-paper);
}

.service-facts__prices dl {
  margin: 0;
}

.service-facts__prices dl > div {
  display: grid;
  padding-block: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.service-facts__prices dt {
  color: var(--color-graphite);
}

.service-facts__prices dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-facts__price-note {
  margin: var(--space-4) 0 0;
  color: var(--color-graphite);
  font-size: 0.75rem;
  line-height: 1.55;
}

.service-preparation h2 {
  max-width: 8ch;
  color: var(--color-raspberry);
}

.service-preparation__content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.service-preparation__content li {
  position: relative;
  max-width: 65ch;
  padding: var(--space-4) 0 var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border);
}

.service-preparation__content li::before {
  position: absolute;
  top: 1.65rem;
  left: 0;
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--color-brand-pink);
  border-radius: 50%;
  content: "";
}

.service-preparation__notice {
  max-width: 65ch;
  padding: var(--space-6);
  margin: var(--space-8) 0 0;
  overflow: hidden;
  border: 1px solid var(--color-raspberry);
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--color-brand-pink) 8%, var(--color-paper));
}

.brafitting-faq {
  background: var(--color-paper);
}

.brafitting-faq__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(2 * var(--grid-gap));
}

.brafitting-faq__grid > header {
  align-self: start;
  padding-block-end: var(--space-8);
}

.brafitting-faq__grid > header h2 {
  margin-block-end: var(--space-6);
}

.faq-accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.faq-accordion__item h3 {
  margin: 0;
}

.faq-accordion__item button {
  display: grid;
  width: 100%;
  min-height: 4.75rem;
  padding: var(--space-4) 0;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    color 180ms ease,
    opacity 150ms ease;
}

.faq-accordion__state {
  display: grid;
  width: 44px;
  height: 44px;
  color: var(--color-graphite);
  place-items: center;
  transition:
    color 140ms ease,
    transform 220ms var(--ease-out);
}

.faq-accordion__item button[aria-expanded="true"],
.faq-accordion__item button[aria-expanded="true"] .faq-accordion__state,
.faq-accordion__item button:focus-visible,
.faq-accordion__item button:focus-visible .faq-accordion__state {
  color: var(--color-raspberry);
}

.faq-accordion__item button:active {
  opacity: 0.72;
}

.faq-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 320ms var(--ease-out),
    opacity 180ms ease;
}

.faq-accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-accordion__panel p {
  max-width: 58ch;
  padding: 0 var(--space-8) var(--space-6) 0;
  margin: 0;
}

/* FAQ i linki na karcie uslugi/katalogu /uslugi (te same klasy .faq-accordion*
   co na Brafittingu) - patrz template-service.php, template-services.php. */
.service-faq {
  background: var(--color-paper);
}

.service-faq__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(2 * var(--grid-gap));
}

.service-faq__grid > header {
  align-self: start;
}

.service-faq__links {
  max-width: 65ch;
  margin-block-start: var(--space-12);
}

.service-faq__links a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.brafitting-chapters ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.brafitting-chapters li {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-8);
}

.brafitting-chapters__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 4rem;
  height: 4rem;
  margin-block-start: -0.625rem;
  color: var(--color-ink);
}

.brafitting-chapters li h3,
.brafitting-chapters li p {
  grid-column: 2;
}

.brafitting-chapters li h3 {
  margin: 0;
}

.brafitting-chapters li p {
  margin: 0;
}

.not-found-page__inner {
  display: flex;
  min-height: 62vh;
  padding-block: var(--space-24) var(--space-36);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
}

.not-found-page h1,
.not-found-page .lead {
  margin-block-end: var(--space-6);
}

@media (hover: hover) and (pointer: fine) {
  .service-index .text-link:hover,
  .faq-accordion__item button:hover,
  .faq-accordion__item button:hover .faq-accordion__state {
    color: var(--color-raspberry);
  }

  .service-faq__links a:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }
}

/*--------------------------------------------------------------
# Uslugi - zaproszenie  (zrodlo: css/service-invite.css)
--------------------------------------------------------------*/

.service-invite {
  background: var(--color-paper);
}

.service-invite__grid {
  align-items: start;
}

.service-invite__copy {
  grid-column: 1 / 7;
}

.service-invite__copy h2 {
  max-width: 14ch;
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
}

.service-invite__copy > p {
  max-width: 58ch;
  margin: 0 0 var(--space-8);
}

.service-invite__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-8);
  align-items: start;
  padding-block: var(--space-6);
  margin-block-end: var(--space-8);
  border-block: 1px solid var(--color-border);
}

/* Godziny jako tabelka: dni w jednej kolumnie, godziny w drugiej,
   wiersz pod wierszem (subgrid trzyma kolumny rowno we wszystkich wierszach). */
.service-invite__hours {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--space-2) var(--space-8);
  margin: 0;
}

.service-invite__hours div {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
}

.service-invite__hours dt {
  color: var(--color-graphite);
  font-size: 0.8125rem;
}

.service-invite__hours dd {
  margin: 0;
  color: var(--color-raspberry);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.service-invite__address {
  margin: 0;
  color: var(--color-graphite);
  font-style: normal;
  text-align: right;
}

.service-invite__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  flex-wrap: wrap;
}

.service-invite__map {
  grid-column: 7 / 13;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.service-invite__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 79.9375rem) {
  .service-invite__copy {
    grid-column: 1 / 4;
  }

  .service-invite__map {
    grid-column: 4 / 9;
  }
}

@media (max-width: 47.9375rem) {
  .service-invite__copy,
  .service-invite__map {
    grid-column: 1 / -1;
  }

  .service-invite__rail {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .service-invite__address {
    text-align: left;
  }

  .service-invite__map {
    aspect-ratio: auto;
    height: 18.75rem;
    margin-block-start: var(--space-12);
  }

  .service-invite__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .service-invite__actions .booking-link,
  .service-invite__actions .text-link {
    width: 100%;
  }

  .service-invite__actions .text-link {
    justify-content: flex-start;
  }
}

/*--------------------------------------------------------------
# O nas  (zrodlo: css/about.css)
--------------------------------------------------------------*/

.about-hero {
  padding-block: var(--space-16) var(--space-24);
}

.about-hero__grid {
  position: relative;
  align-items: stretch;
}

.about-hero__photo {
  grid-column: 1 / 7;
  grid-row: 1;
  min-height: clamp(24rem, 36vw, 34rem);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.about-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

.about-hero__title-plate {
  z-index: 1;
  display: flex;
  grid-column: 7 / 13;
  grid-row: 1;
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.about-hero__title-plate h1 {
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  line-height: 1.04;
}

.about-hero__title-plate .lead {
  max-width: 48ch;
  margin: 0;
}

.about-origin__grid {
  align-items: start;
}

.about-origin header {
  grid-column: 1 / 6;
  padding-block-end: var(--space-8);
}

.about-origin__stats {
  margin-block-start: var(--space-8);
}

.about-origin__stats-heading {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 650;
}

.stats-ledger {
  margin: 0;
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.stats-ledger__row {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.stats-ledger__row:first-child {
  padding-block-start: 0;
  border-top: 0;
}

.stats-ledger__value {
  margin: 0;
  color: var(--color-raspberry);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.2vw, 3rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stats-ledger__label {
  margin: var(--space-2) 0 0;
  color: var(--color-graphite);
  font-size: 0.875rem;
  line-height: 1.5;
}

.about-origin__story {
  grid-column: 7 / 13;
  padding-block-start: var(--space-16);
}

.about-origin__story .editorial-quote,
.about-origin__story .lead {
  margin-block-end: var(--space-6);
}

.about-origin__story > :last-child {
  margin-block-end: 0;
}

.about-detail-copy {
  max-width: 58ch;
  margin-block-start: var(--space-6);
  color: var(--color-graphite);
  font-size: 0.9375rem;
}

.about-team {
  background: var(--color-milk);
}

.about-team__intro {
  padding-block-end: var(--space-16);
}

.about-team__intro h2 {
  grid-column: 1 / 8;
  padding-block-end: var(--space-8);
  border-bottom: 1px solid var(--color-raspberry);
}

.about-team__members {
  display: grid;
  gap: var(--space-24);
}

.about-member {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
}

.about-member:nth-child(even) {
  grid-template-columns: 5fr 7fr;
}

.about-member figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.about-member figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%;
}

.about-member__copy {
  position: relative;
  margin-inline-start: calc(-1 * var(--space-12));
  padding: var(--space-12);
  border-top: 1px solid var(--color-raspberry);
  background: var(--color-paper);
}

.about-member:nth-child(even) figure {
  grid-column: 2;
}

.about-member:nth-child(even) .about-member__copy {
  grid-column: 1;
  grid-row: 1;
  margin-inline: 0 calc(-1 * var(--space-12));
}

.about-member__copy h3,
.about-member__copy > :last-child {
  margin-block-end: 0;
}

.about-member__copy h3 {
  margin-block-end: var(--space-6);
}

.about-gallery-section__intro {
  align-items: end;
  padding-block-end: var(--space-16);
}

.about-gallery-section__intro h2 {
  grid-column: 1 / 6;
  margin: 0;
  color: var(--color-raspberry);
}

.about-gallery-section__intro > :last-child {
  grid-column: 7 / 13;
  align-self: end;
  margin: 0;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-16) var(--grid-gap);
}

.gallery__item {
  margin: 0;
}

.gallery__item:nth-child(1) {
  grid-column: 1 / -1;
}

.gallery__item:nth-child(2) {
  grid-column: 1 / 4;
}

.gallery__item:nth-child(3) {
  grid-column: 4 / 7;
}

.gallery__item:nth-child(4) {
  grid-column: 7 / 10;
}

.gallery__item:nth-child(5) {
  grid-column: 10 / 13;
}

.gallery__item button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-media);
  background: var(--color-milk);
  cursor: zoom-in;
}

.gallery__item figcaption {
  max-width: 42ch;
  padding-block-start: var(--space-3);
  color: var(--color-graphite);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.gallery__item button::after {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  content: "";
  pointer-events: none;
  transition: border-color 180ms ease;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 220ms var(--ease-out);
}

.gallery__item:first-child img {
  aspect-ratio: 16 / 7;
}

.about-charity {
  background: var(--color-milk);
}

.about-charity__grid {
  align-items: start;
}

.about-charity__photo {
  grid-column: 7 / 13;
  grid-row: 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-paper);
}

.about-charity__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-charity__copy {
  grid-column: 1 / 7;
  grid-row: 1;
  padding-block-start: var(--space-8);
  padding-inline-end: var(--space-8);
  border-top: 1px solid var(--color-raspberry);
}

.about-charity__copy h2 {
  margin-block: var(--space-4) var(--space-6);
}

.about-charity__copy p {
  margin-block-end: var(--space-4);
}

.talk-tabs {
  margin-block: var(--space-8);
}

.talk-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
}

.talk-tabs__list button {
  position: relative;
  min-height: 52px;
  padding: var(--space-3) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-graphite);
  font: 650 0.875rem/1.2 var(--font-body);
  cursor: pointer;
  transition: color 180ms ease;
}

.talk-tabs__list button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-raspberry);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms var(--ease-out);
}

.talk-tabs__list button[aria-selected="true"] {
  color: var(--color-raspberry);
}

.talk-tabs__list button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.talk-tabs__panel {
  padding-block: var(--space-6) 0;
  outline: none;
}

.talk-tabs__panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--space-2);
}

.talk-tabs__panel h3 {
  margin-block: var(--space-2) var(--space-3);
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

.talk-tabs__price {
  color: var(--color-raspberry);
  font-weight: 650;
}

.about-charity__copy .text-link {
  margin-block-start: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .talk-tabs__list button:hover {
    color: var(--color-raspberry);
  }

  .gallery__item button:hover::after {
    border-color: var(--color-raspberry);
  }

  .gallery__item button:hover img {
    transform: scale(1.015);
  }
}

.gallery__item button:focus-visible::after {
  border-color: var(--color-raspberry);
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item button::after,
  .gallery__item img,
  .talk-tabs__list button,
  .talk-tabs__list button::after {
    transition: none;
  }

  .gallery__item button:hover img {
    transform: none;
  }
}

/*--------------------------------------------------------------
# O nas - sekcje  (zrodlo: css/about-sections.css)
--------------------------------------------------------------*/

.about-social {
  background: var(--color-milk);
}

.about-social__intro {
  grid-column: 1 / -1;
  padding-block-end: var(--space-12);
  text-align: center;
}

.about-social__intro h2 {
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.about-social__intro .lead {
  margin-inline: auto;
  max-width: 36ch;
  text-wrap: balance;
}

.about-social__list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

.about-social__list li {
  margin: 0;
}

.about-social__embed {
  display: block;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-paper);
}

.about-social__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-social__embed:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.about-social__caption {
  display: block;
  max-width: 32ch;
  margin: var(--space-3) 0 0;
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.about-social__reel-link {
  display: inline-block;
  margin-block-start: var(--space-2);
  color: var(--color-raspberry);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-social__reel-link:hover,
.about-social__reel-link:focus-visible {
  color: var(--color-raspberry-strong);
}

.about-social__cta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

.visit-invite {
  background: var(--color-paper);
}

.visit-invite__grid {
  align-items: start;
  border-top: 1px solid var(--color-raspberry);
}

.visit-invite__copy {
  grid-column: 1 / 7;
  padding-block-start: var(--space-8);
}

.visit-invite__heading {
  max-width: 14ch;
  margin: 0 0 var(--space-6);
  font-size: clamp(2.75rem, 5.4vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.visit-invite__text {
  max-width: 40ch;
  margin: 0 0 var(--space-6);
  color: var(--color-graphite);
}

.visit-invite__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-end: var(--space-8);
}

.visit-invite__meta {
  padding-block-start: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-graphite);
  font-size: 0.875rem;
}

.visit-invite__hours {
  margin: 0 0 var(--space-3);
}

.visit-invite__hours div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
}

.visit-invite__hours div + div {
  margin-block-start: var(--space-1);
}

.visit-invite__hours dt,
.visit-invite__hours dd {
  margin: 0;
}

.visit-invite__hours dd {
  color: var(--color-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.visit-invite__address {
  max-width: 22ch;
  margin: 0;
  font-style: normal;
}

.visit-invite__map {
  grid-column: 7 / 13;
  margin: var(--space-8) 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.visit-invite__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Blok "Zespol" (css/team-roster.css, lista .about-team__roster pod
 * sylwetkami na O nas) usuniety 2026-09-16 razem z sekcja - zespol to trzy
 * osoby z pola "Sylwetki".
 */

/*--------------------------------------------------------------
# Blog  (zrodlo: css/blog.css)
--------------------------------------------------------------*/

.blog-hero__grid {
  padding-block: var(--space-24) var(--space-16);
  align-items: end;
}

.blog-hero__heading {
  grid-column: 1 / 8;
}

.blog-hero__aside {
  grid-column: 8 / 13;
}

.blog-hero h1 {
  margin: var(--space-4) 0 0;
  color: var(--color-raspberry);
  line-height: 1.04;
}

.blog-hero .lead {
  margin: 0;
}

.article-ledger {
  padding-block-start: var(--space-4);
}

.article-row {
  position: relative;
  display: grid;
  padding-block: var(--space-12);
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.article-row:first-child {
  border-top: 0;
}

.article-row__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.article-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .article-row__media:hover img {
    transform: scale(1.03);
  }

}

@media (prefers-reduced-motion: reduce) {
  .article-row__media img {
    transition: none;
  }

  .article-row__media:hover img {
    transform: none;
  }
}

.article-row .eyebrow {
  margin-block-end: var(--space-3);
  color: var(--color-raspberry);
}

.article-row__title {
  margin: 0 0 var(--space-3);
}

.article-row__link {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.article-row__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.article-row__dek {
  max-width: 54ch;
  margin: 0 0 var(--space-4);
  color: var(--color-graphite);
}

.article-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Przycisk "Czytaj dalej" musi stac NAD nakladka .article-row__link::after,
   ktora rozciaga link z tytulu na caly kafelek. Bez tego wskaznik zawsze
   trafialby w nakladke: przycisk nie dostawalby wlasnego :hover, a klikniecie
   liczyloby sie jako klikniecie w tytul. `width: fit-content` pilnuje, zeby
   nad nakladke wychodzil sam przycisk, a nie caly wiersz akapitu. */
.article-row__more {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: var(--space-6) 0 0;
}

.article-header {
  padding-block: var(--space-24) var(--space-16);
}

.article-header__back {
  margin-block-end: var(--space-8);
}

.article-header h1 {
  max-width: 20ch;
  margin: 0 0 var(--space-6);
  color: var(--color-raspberry);
  line-height: 1.04;
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  color: var(--color-graphite);
  font-size: 0.8125rem;
  font-weight: 500;
}

.article-header__meta time {
  font-variant-numeric: tabular-nums;
}

.article-status-note {
  display: grid;
  max-width: 62ch;
  margin-block-start: var(--space-8);
  gap: var(--space-2);
}

.article-status-note strong {
  color: var(--color-raspberry);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-status-note p {
  margin: 0;
  color: var(--color-graphite);
}

.article-header__meta-link {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

/* Zdjecie glowne wpisu - kadr i zaokraglenie jak w kazdym innym bloku media
   w motywie (.services-hero figure, .article-row__media). */
.article-figure {
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.article-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bez tego zdjecie mialoby nad soba 4rem, a pod soba 6rem. */
.article-figure + .article-reading {
  padding-block-start: var(--space-16);
}

.article-reading {
  display: grid;
  padding-block: var(--space-24) var(--space-36);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gap);
  border-bottom: 1px solid var(--color-border);
}

.article-reading__body {
  grid-column: 5 / 11;
  max-width: 66ch;
}

.article-reading__opening {
  margin-block-end: var(--space-16);
}

.article-reading__body section {
  padding-block-start: var(--space-8);
  margin-block-start: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.article-reading__body section h2 {
  margin-block-end: var(--space-6);
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  line-height: 1.03;
}

.article-reading__body section p {
  max-width: 64ch;
}

.article-related {
  padding: var(--space-6) 0;
  margin-block: var(--space-16);
  border-block: 1px solid var(--color-raspberry);
}

.article-related > p:not(.eyebrow) {
  margin-block-end: var(--space-4);
}

@media (hover: hover) and (pointer: fine) {
  .article-row__link:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }

  .article-header__meta-link:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }
}

.article-row__link:focus-visible {
  z-index: 1;
  color: var(--color-raspberry);
  text-decoration-color: currentColor;
}

.article-row__link:focus-visible::after {
  outline: 2px solid var(--color-raspberry-strong);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .article-row__link,
  .article-header__meta-link {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Bon podarunkowy  (zrodlo: css/gift-card.css)
--------------------------------------------------------------*/

.gift-card-hero {
  overflow: clip;
  border-bottom: 1px solid var(--color-border);
}

.gift-card-hero__grid {
  position: relative;
  min-height: 42rem;
  padding-block: var(--space-8) var(--space-12);
  grid-template-rows: 1fr auto;
}

.gift-card-hero figure {
  grid-column: 4 / 13;
  grid-row: 1 / 3;
  width: calc(
    100% + max(var(--gutter), calc((100vw - var(--content-max)) / 2))
  );
  max-width: none;
  min-height: 38rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media) 0 0 var(--radius-media);
  background: var(--color-milk);
}

.gift-card-hero figure img {
  width: 100%;
  height: 100%;
  min-height: 38rem;
  object-fit: cover;
}

.gift-card-hero__title-plate {
  position: relative;
  z-index: 1;
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: end;
  padding: var(--space-8) var(--space-12) var(--space-8) 0;
  border-radius: 0 var(--radius-media) 0 0;
  background: var(--color-paper);
}

.gift-card-hero__title-plate::before,
.gift-card-hero__title-plate::after {
  position: absolute;
  width: var(--radius-media);
  height: var(--radius-media);
  background: radial-gradient(
    circle var(--radius-media) at 100% 0,
    transparent calc(100% - 1px),
    var(--color-paper) 100%
  );
  content: "";
  pointer-events: none;
}

.gift-card-hero__title-plate::before {
  top: calc(-1 * var(--radius-media));
  left: calc(50% + var(--grid-gap) / 2);
}

.gift-card-hero__title-plate::after {
  right: calc(-1 * var(--radius-media));
  bottom: 0;
}

.gift-card-hero__title-plate h1 {
  max-width: 9ch;
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: 1.02;
}

.gift-card-hero__title-plate .lead {
  max-width: 46ch;
  margin: 0;
}

.gift-card-builder {
  border-bottom: 1px solid var(--color-border);
}

/* .gift-configurator-live to konfigurator bonu w motywie. NIE dostaje klasy
   .gift-configurator celowo: assets/js/site.js niesie modul gift-card.js
   z prototypu, ktory wiaze sie z `.gift-configurator` i po wyslaniu
   przechodzi na "podsumowanie/index.html" - adres, ktorego pod WordPressem
   nie ma. Bez tej klasy modul wychodzi wczesnie, a podglad na zywo i wysylka
   ida z assets/js/gift-form.js. To jedyne trzy reguly w projekcie, ktore
   potrzebowaly przodka .gift-configurator (tu i dwie ponizej, w blokach
   responsywnych); reszta stylowania siedzi na klasach .gift-configurator__*,
   ktore nakladamy bez zmian. */
.gift-configurator,
.gift-configurator-live {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gap);
}

/* Komunikat calego formularza jest bezposrednim dzieckiem siatki (wstawia go
   gift-form.js po naglowku, a bez JavaScriptu szablon w tym samym miejscu),
   wiec bez wlasnej kolumny auto-placement wpychalby go w luke miedzy pola
   a podglad. */
.gift-configurator__intro,
.gift-configurator__fields,
.gift-configurator-live > .form-error-summary {
  grid-column: 1 / 6;
}

.gift-configurator__intro {
  padding-block-end: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.gift-configurator__intro h2 {
  max-width: 10ch;
  margin-block-end: var(--space-6);
}

.gift-configurator__intro > p:last-child {
  max-width: 54ch;
  margin: 0;
}

.gift-configurator__preview {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  grid-column: 7 / 13;
  grid-row: 1 / span 2;
}

/* Gift preview — the bon as a printed, physical object */

.gift-preview__frame {
  padding: 6px;
  border: 1px solid var(--color-ink);
  background: var(--color-milk);
  box-shadow: 0 16px 40px rgba(55, 42, 38, 0.12);
  transition: box-shadow 180ms ease;
}

.gift-preview__inner {
  container-type: size;
  display: grid;
  aspect-ratio: 2.12 / 1;
  min-height: 13.5rem;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-5, 1.25rem) clamp(2.5rem, 10cqw, 5.5rem);
  border: 1px solid var(--color-raspberry);
  background-color: var(--color-navy);
  /* Dolny scrim gruntuje stopkę tam, gdzie botaniczna rama wchodzi pod tekst */
  background-image:
    linear-gradient(
      to top,
      rgba(26, 59, 105, 0.92) 0%,
      rgba(26, 59, 105, 0.6) 12%,
      rgba(26, 59, 105, 0.25) 22%,
      transparent 34%
    ),
    url("assets/img/bon/bon-front-clean.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover, 145% auto;
  transition: border-color 180ms ease;
}

.gift-preview[data-theme="koral"] .gift-preview__inner {
  padding: var(--space-6) clamp(2.5rem, 10cqw, 5.5rem);
  border-color: var(--color-navy);
  background-color: var(--color-coral);
  background-image:
    linear-gradient(
      to top,
      rgba(241, 128, 150, 0.9) 0%,
      rgba(241, 128, 150, 0.55) 12%,
      rgba(241, 128, 150, 0.2) 22%,
      transparent 34%
    ),
    linear-gradient(
      to bottom,
      rgba(241, 128, 150, 0.85) 0%,
      rgba(241, 128, 150, 0.45) 14%,
      transparent 30%
    ),
    url("assets/img/bon/bon-back-clean.png");
  background-size: cover, cover, cover;
}

.gift-preview__head {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.gift-preview__logo {
  display: block;
  width: auto;
  height: clamp(3.5rem, 22cqh, 6rem);
  /* Logo to grafika na tle bonu, nie fotografia — bez hairline'u i radiusa */
  border-radius: 0;
  outline: none;
}

.gift-preview__logo--koral {
  width: clamp(3.75rem, 21cqh, 4.75rem);
  height: auto;
  /* The two-tone logo's raspberry ribbon and initial disappear against the
     coral card, so it is recoloured to a single navy silhouette here. */
  filter: brightness(0) invert(19%) sepia(46%) saturate(1811%) hue-rotate(185deg) brightness(95%) contrast(93%);
}

.gift-preview__kicker {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.gift-preview__main {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
}

.gift-preview__occasion {
  margin: 0;
  color: var(--color-milk);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.gift-preview[data-theme="koral"] .gift-preview__occasion {
  color: var(--color-navy-deep);
}

.gift-preview__for {
  max-width: 22ch;
  margin: 0;
  color: var(--color-milk);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.85rem);
  font-weight: 500;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.gift-preview[data-theme="koral"] .gift-preview__for {
  color: var(--color-navy-deep);
}

.gift-preview__amount {
  margin: 0;
  color: var(--color-coral);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.gift-preview[data-theme="koral"] .gift-preview__amount {
  color: var(--color-navy);
}

.gift-preview__foot {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-top: 1px solid rgba(252, 250, 245, 0.25);
  color: rgba(252, 250, 245, 0.75);
  text-align: center;
}

.gift-preview[data-theme="koral"] .gift-preview__foot {
  border-top-color: rgba(26, 59, 105, 0.24);
  color: var(--color-navy-deep);
}

.gift-preview__message {
  max-width: 34ch;
  margin: 0;
  color: rgba(252, 250, 245, 0.82);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gift-preview[data-theme="koral"] .gift-preview__message {
  color: var(--color-navy);
}

.gift-preview__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  font-size: 0.75rem;
}

.gift-preview__sender,
.gift-preview__meta time {
  margin: 0;
  overflow-wrap: anywhere;
}

.gift-configurator__fields {
  padding-block-start: var(--space-8);
}

.form-error-summary {
  display: flex;
  padding: var(--space-4);
  margin-block-end: var(--space-8);
  flex-direction: column;
  gap: var(--space-1);
  border-left: 3px solid var(--color-error);
  background: var(--color-milk);
}

.form-error-summary span {
  color: var(--color-graphite);
  font-size: 0.75rem;
}

/* Chapters — one structural line + a caps-label per group, calm spacing within */

.gift-chapter {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.gift-chapter:first-of-type {
  padding-block-start: 0;
  border-top: 0;
}

.gift-chapter__label {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.gift-chapter .form-field {
  padding-block: var(--space-6);
}

.gift-chapter .form-field:first-child {
  padding-block-start: 0;
}

.gift-chapter .form-field:last-child {
  padding-block-end: 0;
}

.form-field label,
.gift-amounts legend,
.gift-themes legend,
.gift-occasion legend {
  display: block;
  margin-block-end: var(--space-3);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
}

.form-field label span {
  color: var(--color-graphite);
  font-weight: 500;
}

.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.gift-meta-fields__note {
  margin: var(--space-2) 0 0;
  color: var(--color-graphite);
  font-size: 0.75rem;
}

.form-field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.form-field__label-row > span {
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.form-field__error {
  margin: var(--space-2) 0 0;
  color: var(--color-error);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Amounts — a rectangular 2×N grid of large fields, plus a full-width custom row */

.gift-amounts {
  padding: 0;
  margin: 0;
  border: 0;
}

.gift-amounts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.gift-amounts__option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.gift-amounts__option input {
  position: absolute;
  opacity: 0;
}

.gift-amounts__option > span {
  display: flex;
  min-height: 72px;
  padding: var(--space-4);
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-milk);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.gift-amounts__marker {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border: 1px solid var(--color-ink);
}

.gift-amounts__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  font-weight: 500;
  line-height: 1;
}

.gift-amounts__option--custom .gift-amounts__value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
}

.gift-amounts__badge {
  margin-inline-start: auto;
  color: var(--color-raspberry);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gift-amounts__option input:checked + span {
  border-color: var(--color-raspberry);
  background: color-mix(in srgb, var(--color-raspberry) 6%, var(--color-milk));
}

.gift-amounts__option input:checked + span .gift-amounts__marker {
  border-color: var(--color-raspberry);
  background: var(--color-raspberry);
}

.gift-amounts__option input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.gift-amounts__custom {
  margin-block-start: var(--space-3);
}

.gift-amounts__custom-field {
  padding-block: var(--space-4) 0;
}

/* Occasion — an open, wrapping list of text options */

.gift-occasion {
  padding: 0;
  margin: 0 0 var(--space-6);
  border: 0;
}

.gift-occasion__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.gift-occasion__list label {
  position: relative;
  display: block;
  min-height: 44px;
  cursor: pointer;
}

.gift-occasion__list input {
  position: absolute;
  opacity: 0;
}

.gift-occasion__list span {
  display: inline-flex;
  height: 44px;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--color-graphite);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: color 160ms ease, border-color 160ms ease;
}

.gift-occasion__list input:checked + span {
  border-color: var(--color-raspberry);
  color: var(--color-ink);
}

.gift-occasion__list input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Theme — two miniature landscape swatches of the bon object */

.gift-themes {
  padding: 0;
  margin: 0;
  border: 0;
}

.gift-themes__list {
  display: flex;
  gap: var(--space-4);
}

.gift-themes__option {
  position: relative;
  display: block;
  cursor: pointer;
}

.gift-themes__option input {
  position: absolute;
  opacity: 0;
}

.gift-themes__option > span {
  display: flex;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.gift-themes__swatch {
  width: 2.75rem;
  height: 1.6rem;
  flex: 0 0 auto;
  border: 1px solid var(--color-ink);
  background-color: var(--color-navy);
  background-image: url("assets/img/bon/bon-front-clean.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.gift-themes__label {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
}

.gift-themes__option[data-swatch-theme="koral"] .gift-themes__swatch {
  background-color: var(--color-coral);
  background-image: url("assets/img/bon/bon-back-clean.png");
}

.gift-themes__option input:checked + span {
  border-color: var(--color-raspberry);
  background: color-mix(in srgb, var(--color-raspberry) 6%, var(--color-milk));
}

.gift-themes__option input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.gift-configurator__action {
  display: flex;
  padding-block: var(--space-6) var(--space-4);
  margin-block-start: var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.gift-configurator__action > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gift-configurator__action span {
  color: var(--color-graphite);
  font-size: 0.75rem;
}

.gift-configurator__action strong {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
}

.gift-configurator__submit {
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-raspberry);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    transform 150ms ease;
}

.gift-configurator__submit:active {
  transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  .gift-amounts__option:hover > span,
  .gift-themes__option:hover > span {
    border-color: var(--color-raspberry);
  }

  .gift-occasion__list label:hover span {
    color: var(--color-ink);
  }

  .gift-configurator__submit:hover {
    background: var(--color-raspberry-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-preview__frame,
  .gift-preview__inner,
  .gift-amounts__option > span,
  .gift-themes__option > span,
  .gift-occasion__list span,
  .gift-configurator__submit {
    transition-property: background-color, color, border-color, opacity;
    transition-duration: 120ms;
    transition-timing-function: ease;
  }

  .gift-configurator__submit:active {
    transform: none;
  }
}

/* Zgoda na regulamin bonow. Pozycza gotowy control z bloku "Bon - checkout"
   (prototyp pytal o nia dopiero na stronie podsumowania, ktorej motyw nie ma),
   ale wewnatrz rozdzialu konfiguratora nie potrzebuje juz wlasnej kreski -
   .gift-chapter rysuje swoja u gory. */
.gift-chapter .gift-checkout-form__terms {
  padding-block: var(--space-6) 0;
  border-bottom: 0;
}

/* Odpis zamowienia w panelu po powrocie z bramki ING Pay (stany "Platnosc
   przyjeta" i "Platnosc w toku" w template-gift.php). */
.gift-summary {
  display: grid;
  max-width: 40rem;
  padding-block-start: var(--space-6);
  margin-block: var(--space-8) 0;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.gift-summary dt {
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.gift-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Pasek trybu testowego ING Pay (sandbox) nad naglowkiem konfiguratora -
   widzi go kazdy, zeby nikt nie wzial testowego bonu za prawdziwy. Siedzi
   w .gift-configurator__intro, a nie jako dziecko siatki formularza, bo
   gift-form.js zdejmuje pierwszy .form-error-summary przy kazdej wysylce. */
.gift-configurator__test-mode {
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
  border-left: 3px solid var(--color-raspberry);
  background: var(--color-milk);
  font-size: 0.875rem;
  font-weight: 650;
}

/* Notka o ING Pay pod zgoda na regulamin bonow. */
.gift-chapter .gift-configurator__payment-note {
  margin-block-start: var(--space-4);
}

/*--------------------------------------------------------------
# Bon - checkout  (zrodlo: css/gift-checkout.css)
--------------------------------------------------------------*/

.gift-checkout-hero {
  overflow: clip;
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-hero__grid {
  position: relative;
  min-height: 32rem;
  padding-block: var(--space-8) var(--space-12);
  grid-template-rows: 1fr auto;
}

.gift-checkout-hero figure {
  grid-column: 5 / 13;
  grid-row: 1 / 3;
  width: calc(
    100% + max(var(--gutter), calc((100vw - var(--content-max)) / 2))
  );
  max-width: none;
  min-height: 29rem;
  margin: 0;
  background: var(--color-milk);
}

.gift-checkout-hero img {
  width: 100%;
  height: 100%;
  min-height: 29rem;
  object-fit: cover;
}

.gift-checkout-hero__plate {
  z-index: 1;
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: end;
  padding: var(--space-8) var(--space-10, 2.5rem) var(--space-8) 0;
  background: var(--color-paper);
}

.gift-checkout-hero__plate h1 {
  max-width: 9ch;
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: 1.02;
}

.gift-checkout-hero__plate .lead {
  max-width: 45ch;
  margin: 0;
}

.gift-checkout-workspace {
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-workspace__grid {
  align-items: start;
}

.gift-checkout-workspace__form {
  grid-column: 1 / 8;
}

.gift-checkout-summary {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  grid-column: 9 / 13;
}

.gift-checkout-summary h2,
.gift-checkout-form__heading h2 {
  margin-block-end: var(--space-6);
  font-size: clamp(1.9rem, 2.8vw, 3rem);
}

.gift-checkout-summary__preview {
  margin-block-end: var(--space-8);
}

.gift-checkout-summary .gift-preview__inner {
  min-height: 0;
}

.gift-checkout-summary__list,
.gift-success-details dl {
  margin: 0 0 var(--space-6);
}

.gift-checkout-summary__list > div,
.gift-success-details dl > div {
  display: grid;
  padding-block: var(--space-4);
  grid-template-columns: minmax(5rem, 0.7fr) 1.3fr;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-summary__list > div:last-child,
.gift-success-details dl > div:last-child {
  border-bottom: 0;
}

.gift-checkout-summary__list dt,
.gift-success-details dt {
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gift-checkout-summary__list dd,
.gift-success-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.gift-checkout-form__heading {
  padding-block-end: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-form__heading > p:last-child {
  max-width: 52ch;
  margin: 0;
}

.gift-checkout-form__demo-note {
  padding: var(--space-4) 0 0;
  margin: var(--space-8) 0 0;
  border-top: 1px solid var(--color-raspberry);
  color: var(--color-graphite);
  font-size: 0.8125rem;
}

.gift-checkout-form__demo-note strong {
  color: var(--color-ink);
}

.gift-checkout-form__delivery {
  display: grid;
  padding: var(--space-4) 0;
  margin-block-end: var(--space-6);
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  border-block: 1px solid var(--color-border);
}

.gift-checkout-form__delivery span {
  grid-column: 1 / -1;
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.gift-checkout-form__delivery strong {
  overflow-wrap: anywhere;
}

.gift-checkout-form__delivery .text-link {
  align-self: center;
  justify-self: end;
}

.gift-checkout-form .form-error-summary {
  margin-block: var(--space-6) 0;
}

.gift-checkout-form__submission-error {
  padding: var(--space-4);
  margin-block-start: var(--space-6);
  border-left: 3px solid var(--color-error);
  background: var(--color-milk);
  color: var(--color-error);
  font-weight: 600;
}

.gift-checkout-form__payment {
  padding: var(--space-8) 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-form__payment legend {
  margin-block-end: var(--space-2);
  font-size: 0.875rem;
  font-weight: 650;
}

.gift-checkout-form__payment > p:first-of-type {
  margin: 0 0 var(--space-4);
  color: var(--color-graphite);
  font-size: 0.75rem;
}

.gift-checkout-form__payment label {
  position: relative;
  display: block;
  cursor: pointer;
}

.gift-checkout-form__payment input {
  position: absolute;
  opacity: 0;
}

.gift-checkout-form__payment label > span {
  display: flex;
  min-height: 58px;
  padding: var(--space-3) 0 var(--space-3) 1.75rem;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  transition: color 160ms ease;
}

.gift-checkout-form__payment label:last-child > span {
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-form__payment label > span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-ink);
  content: "";
  transform: translateY(-50%);
}

.gift-checkout-form__payment input:checked + span::before {
  border-color: var(--color-raspberry);
  background: var(--color-raspberry);
}

.gift-checkout-form__payment input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.gift-checkout-form__terms {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-form__terms label {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.gift-checkout-form__terms input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-raspberry);
}

.gift-checkout-form__terms a {
  text-underline-offset: 0.2em;
}

.gift-checkout-form__submit,
.gift-success-actions__primary {
  display: inline-flex;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-raspberry);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, transform 150ms ease;
}

.gift-checkout-form__submit {
  margin-block-start: var(--space-8);
}

.gift-checkout-form__submit:disabled {
  background: var(--color-graphite);
  cursor: wait;
}

.gift-checkout-form__submit:active,
.gift-success-actions__primary:active {
  transform: translateY(1px);
}

.gift-checkout-empty,
.gift-success-empty {
  border-bottom: 1px solid var(--color-border);
}

.gift-checkout-empty__inner,
.gift-success-empty__inner {
  display: flex;
  min-height: 62vh;
  padding-block: var(--space-24) var(--space-36);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.gift-checkout-empty h1,
.gift-success-empty h1 {
  max-width: 12ch;
  margin-block-end: var(--space-8);
}

.gift-checkout-empty .lead,
.gift-success-empty .lead {
  max-width: 52ch;
}

.gift-success-hero {
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-raspberry) 4%, var(--color-milk));
}

.gift-success-hero__inner {
  position: relative;
  padding-inline-start: clamp(var(--space-6), 6vw, var(--space-24));
}

.gift-success-hero__inner::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--color-raspberry);
  content: "";
}

.gift-success-hero h1 {
  max-width: 12ch;
  margin-block-end: var(--space-8);
  color: var(--color-raspberry);
}

.gift-success-hero .lead {
  max-width: 52ch;
}

.gift-success-reference {
  display: flex;
  width: fit-content;
  padding-block-start: var(--space-6);
  margin-block-start: var(--space-8);
  flex-direction: column;
  gap: var(--space-2);
  border-top: 3px double var(--color-ink);
}

.gift-success-reference span {
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gift-success-reference strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.35rem);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.gift-success-details {
  border-bottom: 1px solid var(--color-border);
}

.gift-success-details__grid > div {
  grid-column: 1 / 7;
}

.gift-success-details__grid > aside {
  grid-column: 8 / 13;
  padding: var(--space-8);
  border: 3px double var(--color-raspberry);
  background: var(--color-milk);
}

.gift-success-details h2 {
  margin-block-end: var(--space-8);
}

.gift-success-details__grid > aside h2 {
  font-size: clamp(1.9rem, 2.8vw, 3rem);
}

.gift-success-actions {
  display: flex;
  margin-block-start: var(--space-8);
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

:is(.gift-checkout-page, .gift-checkout-empty, .gift-success-page, .gift-success-empty) .text-link {
  color: var(--color-ink);
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

:is(.gift-checkout-page, .gift-checkout-empty, .gift-success-page, .gift-success-empty) .text-link:focus-visible {
  color: var(--color-raspberry);
}

@media (max-width: 79.9375rem) {
  .gift-checkout-hero__grid,
  .gift-checkout-workspace__grid,
  .gift-success-details__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .gift-checkout-hero figure { grid-column: 3 / 9; }
  .gift-checkout-hero__plate { grid-column: 1 / 6; }
  .gift-checkout-workspace__form { grid-column: 1 / 5; }
  .gift-checkout-summary { grid-column: 5 / 9; }
  .gift-success-details__grid > div { grid-column: 1 / 5; }
  .gift-success-details__grid > aside { grid-column: 5 / 9; }
}

@media (max-width: 47.9375rem) {
  .gift-checkout-hero__grid {
    min-height: 0;
    padding-block: 0 var(--space-8);
    grid-template-rows: auto auto;
  }

  .gift-checkout-hero figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }

  .gift-checkout-hero img {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .gift-checkout-hero__plate {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: var(--space-6) 0 0;
    margin-block-start: calc(-1 * var(--space-8));
  }

  .gift-checkout-workspace__grid,
  .gift-success-details__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .gift-checkout-summary {
    position: static;
    order: -1;
    width: 100%;
  }

  .gift-checkout-workspace__form,
  .gift-success-details__grid > div,
  .gift-success-details__grid > aside {
    width: 100%;
  }

  .gift-success-hero {
    padding-block: var(--space-16);
  }

  .gift-success-details__grid > aside {
    padding: var(--space-6);
  }

  .gift-checkout-form__submit {
    width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .gift-checkout-form__payment label:hover > span {
    color: var(--color-raspberry);
  }

  .gift-checkout-form__submit:not(:disabled):hover,
  .gift-success-actions__primary:hover {
    background: var(--color-raspberry-strong);
  }

  :is(.gift-checkout-page, .gift-checkout-empty, .gift-success-page, .gift-success-empty) .text-link:hover {
    color: var(--color-raspberry);
  }

}

@media (prefers-reduced-motion: reduce) {
  .gift-checkout-form__submit,
  .gift-success-actions__primary,
  :is(.gift-checkout-page, .gift-checkout-empty, .gift-success-page, .gift-success-empty) .text-link {
    transition-property: background-color, color, opacity;
    transition-duration: 120ms;
    transition-timing-function: ease;
  }

  .gift-checkout-form__submit:active,
  .gift-success-actions__primary:active {
    transform: none;
  }

}

/*--------------------------------------------------------------
# Kontakt  (zrodlo: css/contact.css)
--------------------------------------------------------------*/

.contact-hero {
  overflow: clip;
  border-bottom: 1px solid var(--color-border);
}

.contact-hero__grid {
  position: relative;
  min-height: 35rem;
  padding-block: var(--space-8) var(--space-12);
  grid-template-rows: 1fr auto;
}

.contact-hero figure {
  grid-column: 4 / 13;
  grid-row: 1 / 3;
  width: calc(
    100% + max(var(--gutter), calc((100vw - var(--content-max)) / 2))
  );
  max-width: none;
  min-height: 32rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media) 0 0 var(--radius-media);
  background: var(--color-milk);
}

.contact-hero img {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  object-position: 50% 54%;
}

.contact-hero__plate {
  position: relative;
  z-index: 1;
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: end;
  padding: var(--space-8) var(--space-12) var(--space-8) 0;
  border-radius: 0 var(--radius-media) 0 0;
  background: var(--color-paper);
}

.contact-hero__plate::before,
.contact-hero__plate::after {
  position: absolute;
  width: var(--radius-media);
  height: var(--radius-media);
  background: radial-gradient(
    circle var(--radius-media) at 100% 0,
    transparent calc(100% - 1px),
    var(--color-paper) 100%
  );
  content: "";
  pointer-events: none;
}

.contact-hero__plate::before {
  top: calc(-1 * var(--radius-media));
  left: calc(50% + var(--grid-gap) / 2);
}

.contact-hero__plate::after {
  right: calc(-1 * var(--radius-media));
  bottom: 0;
}

.contact-hero__plate h1 {
  max-width: 9ch;
  margin-block-end: var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: 1.02;
}

.contact-hero__plate .lead {
  max-width: 48ch;
  margin: 0;
}

.contact-workspace {
  border-bottom: 1px solid var(--color-border);
}

.contact-workspace__grid {
  align-items: start;
}

.contact-workspace__grid.editorial-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.contact-workspace__form {
  grid-column: 1;
}

.contact-workspace__location {
  grid-column: 2;
}

.contact-form__heading {
  padding-block-end: var(--space-8);
}

.contact-form__heading h2,
.contact-form__success h2,
.location-panel h2 {
  margin-block-end: var(--space-6);
  font-size: clamp(1.9rem, 3vw, 3.25rem);
}

.contact-form__heading > p:last-child {
  max-width: 53ch;
  margin: 0;
}

/* .contact-form-cf7 to formularz wygenerowany przez Contact Form 7.
   NIE dostaje klasy .contact-form celowo: assets/js/site.js niesie modul
   contact-form.js z prototypu, ktory wiaze sie z `.contact-form`, robi
   preventDefault() i podmienia formularz na demonstracyjny panel sukcesu -
   czyli zablokowalby prawdziwa wysylke. Bez tej klasy modul wychodzi
   wczesnie (querySelector zwraca null) i nie wchodzi CF7 w droge.
   To jedyne dwie reguly w projekcie, ktore potrzebowaly przodka
   .contact-form; cala reszta stylowania siedzi na klasach BEM
   (.contact-form__*), ktore nakladamy wprost na markup CF7. */
.contact-form .form-error-summary,
.contact-form-cf7 .form-error-summary {
  margin-block: var(--space-6) 0;
}

.contact-form .form-field,
.contact-form-cf7 .form-field {
  margin-block-end: var(--space-8);
}

.form-field__hint {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  color: var(--color-graphite);
  font-size: 0.75rem;
}

.contact-form__privacy {
  padding-block: var(--space-8);
}

.contact-form__privacy label {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.contact-form__privacy input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-raspberry);
}

.contact-form__privacy a {
  text-underline-offset: 0.2em;
}

.contact-form__submit,
.contact-form__primary-action,
.legal-placeholder__primary {
  display: inline-flex;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-raspberry);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, transform 150ms ease;
}

.contact-form__submit {
  display: flex;
  width: fit-content;
  margin-block-start: var(--space-8);
  margin-inline-start: auto;
}

.contact-form__submit:disabled {
  background: color-mix(in srgb, var(--color-raspberry) 45%, var(--color-milk));
  cursor: not-allowed;
}

.contact-form__submit:disabled:active {
  transform: none;
}

.contact-form__submit:active,
.contact-form__primary-action:active,
.legal-placeholder__primary:active {
  transform: translateY(1px);
}

.contact-form__success {
  padding: var(--space-12);
  border: 3px double var(--color-raspberry);
  background: var(--color-milk);
}

.contact-form__success .lead {
  max-width: 46ch;
}

.contact-form__success-actions,
.legal-placeholder__actions {
  display: flex;
  margin-block-start: var(--space-8);
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.location-panel {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.location-panel__map {
  position: relative;
  min-height: 17rem;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-milk);
}

.location-panel__map iframe {
  display: block;
  width: 100%;
  min-height: 17rem;
  border: 0;
}

.location-panel__details {
  padding: var(--space-8);
}

.location-panel__reach {
  display: flex;
  margin-block-end: var(--space-6);
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.location-panel address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-style: normal;
}

.location-panel__socials {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.location-panel__socials a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.location-panel__socials svg {
  flex: 0 0 auto;
}

.location-panel__address {
  margin-block-end: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.2;
}

.location-panel address a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-underline-offset: 0.25em;
}

.location-panel__hours {
  margin: 0 0 var(--space-6);
}

.location-panel__hours div {
  display: flex;
  padding-block: var(--space-3);
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.location-panel__hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.location-panel address a,
.contact-form__success .text-link,
.legal-placeholder__actions .text-link,
.not-found-page .text-link {
  position: relative;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.location-panel address a:focus-visible,
.contact-form__privacy a:focus-visible,
.contact-form__success .text-link:focus-visible,
.legal-placeholder__actions .text-link:focus-visible,
.not-found-page .text-link:focus-visible {
  color: var(--color-raspberry);
}

.contact-form__privacy a {
  color: var(--color-ink);
  text-decoration-color: var(--color-raspberry);
  transition: color 180ms ease;
}

.legal-placeholder {
  min-height: calc(100vh - var(--header-height));
  padding-block: var(--space-8) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.legal-placeholder__grid {
  align-items: center;
}

.legal-placeholder figure {
  grid-column: 1 / 8;
  min-height: 34rem;
  margin: 0;
  overflow: hidden;
  background: var(--color-milk);
}

.legal-placeholder figure img {
  width: 100%;
  height: 100%;
  min-height: 34rem;
  object-fit: cover;
}

.legal-placeholder__plate {
  z-index: 1;
  grid-column: 7 / 13;
  padding: var(--space-12);
  margin-inline-start: calc(-1 * var(--space-12));
  border-top: 3px double var(--color-raspberry);
  background: var(--color-milk);
}

.legal-placeholder__plate h1 {
  max-width: 10ch;
  margin-block-end: var(--space-8);
  color: var(--color-raspberry);
}

.legal-placeholder__plate > p:not(.eyebrow) {
  max-width: 50ch;
}

.not-found-page__inner {
  display: grid;
  min-height: 62vh;
  padding-block: var(--space-24) var(--space-36);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.not-found-page__copy {
  grid-column: 3 / 10;
  padding-inline-start: clamp(var(--space-6), 4vw, var(--space-12));
  border-left: 1px solid var(--color-raspberry);
}

.not-found-page h1 {
  max-width: 11ch;
  color: var(--color-raspberry);
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__submit:hover,
  .contact-form__primary-action:hover,
  .legal-placeholder__primary:hover {
    background: var(--color-raspberry-strong);
  }

  .location-panel address a:hover,
  .contact-form__privacy a:hover,
  .contact-form__success .text-link:hover,
  .legal-placeholder__actions .text-link:hover,
  .not-found-page .text-link:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form__submit,
  .contact-form__primary-action,
  .legal-placeholder__primary,
  .location-panel address a,
  .contact-form__privacy a,
  .contact-form__success .text-link,
  .legal-placeholder__actions .text-link,
  .not-found-page .text-link {
    transition-property: background-color, color, opacity;
    transition-duration: 120ms;
    transition-timing-function: ease;
  }

  .contact-form__submit:active,
  .contact-form__primary-action:active,
  .legal-placeholder__primary:active {
    transform: none;
  }

  .location-panel address a {
    text-decoration: underline;
    text-decoration-color: var(--color-raspberry);
    text-underline-offset: 0.3em;
  }

}

/*--------------------------------------------------------------
# Lightbox  (zrodlo: css/lightbox.css)
--------------------------------------------------------------*/

.lightbox {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  padding: var(--space-6);
  place-items: center;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(35, 58, 89, 0.72);
  cursor: zoom-out;
}

.lightbox__dialog {
  position: relative;
  display: grid;
  width: min(72rem, calc(100vw - 3rem));
  max-height: calc(100dvh - 3rem);
  padding: var(--space-4);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(252, 250, 245, 0.38);
  border-radius: var(--radius-modal);
  background: var(--color-milk);
  box-shadow: var(--shadow-overlay);
  animation: lightbox-enter 280ms var(--ease-out) both;
}

@keyframes lightbox-enter {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.985);
  }
}

.lightbox__header,
.lightbox__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.lightbox__header {
  min-height: 52px;
  padding: 0 var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.lightbox__header h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lightbox__close,
.lightbox__controls button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
}

.lightbox__close {
  gap: var(--space-2);
  padding-inline: var(--space-4);
}

.lightbox__close span,
.lightbox__controls button span {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.lightbox__figure {
  display: grid;
  min-height: 0;
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
}

.lightbox__figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius-control);
  object-fit: contain;
  animation: lightbox-image-enter 180ms ease both;
}

.lightbox__figure figcaption {
  width: min(100%, 62ch);
  padding: var(--space-3) var(--space-2) 0;
  color: var(--color-graphite);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: center;
}

@keyframes lightbox-image-enter {
  from {
    opacity: 0;
  }
}

.lightbox__controls {
  min-height: 52px;
  padding: var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.lightbox__controls p {
  margin: 0;
  color: var(--color-graphite);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: 0.09em;
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover,
  .lightbox__controls button:hover {
    background: color-mix(in srgb, var(--color-raspberry) 8%, var(--color-milk));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__dialog {
    transform: none;
  }

  .lightbox__dialog,
  .lightbox__figure img {
    animation: lightbox-reduced-enter 120ms ease both;
  }

  @keyframes lightbox-reduced-enter {
    from {
      opacity: 0;
    }
  }
}

/*--------------------------------------------------------------
# Responsive  (zrodlo: css/responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  :root {
    --gutter: 2rem;
    --grid-columns: 8;
    --grid-gap: 1.25rem;
  }

  .desktop-navigation,
  .site-header__booking {
    display: none;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .site-header .site-header__menu-button {
    display: inline-grid;
  }

  .site-footer__details {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --gutter: 1.25rem;
    --grid-columns: 4;
    --grid-gap: 1rem;
    --header-height: 4rem;
  }

  .site-header[data-scrolled="true"] {
    height: 4.75rem;
  }

  /* 6rem (not 7.5rem, like layout.css's 8.5rem desktop value) — at the
     logo's ~1.71:1 intrinsic ratio, 7.5rem renders ~70px tall and overflows
     the 4rem (64px) mobile header; 6rem keeps it inside with margin while
     staying above the 44px tap-target floor set on .site-header__logo above. */
  .site-header__logo {
    width: 6rem;
  }

  /* 4.8rem / 6rem — jak w layout.css, transform zamiast width */
  .site-header[data-scrolled="true"] .site-header__logo img {
    transform: scale(0.8);
  }

  h1 {
    max-width: 11ch;
    font-size: clamp(2.9rem, 13vw, 3.25rem);
  }

  .lead {
    font-size: 1.125rem;
  }

  .section-intro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .section-intro h2,
  .section-intro__description {
    grid-column: 1 / -1;
  }

  .site-footer__details {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: var(--space-12);
  }

  .site-footer__cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .site-footer__cta-actions .booking-link,
  .site-footer__cta-actions .text-link {
    width: 100%;
  }

  .site-footer__legal {
    min-height: auto;
    padding-block: var(--space-6);
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__legal nav {
    gap: var(--space-2) var(--space-6);
  }

  .mobile-booking-bar {
    display: block;
  }
}

@media (max-width: 25rem) {
  .mobile-navigation__drawer {
    padding-inline: var(--space-4);
  }

  .mobile-navigation__link {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# Responsive - strona glowna  (zrodlo: css/home-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .home-hero__photo {
    grid-column: 3 / 9;
  }

  .home-hero__title-plate {
    grid-column: 1 / 6;
  }

  .home-hero__rail {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-pillars__grid > li:nth-child(1),
  .service-pillars__grid > li:nth-child(3) {
    grid-column: 1 / 7;
  }

  .service-pillars__grid > li:nth-child(2),
  .service-pillars__grid > li:nth-child(4) {
    grid-column: 7 / 13;
  }

  .visit-process__composition {
    grid-template-columns: 3fr 5fr;
  }

  .visit-process__step p {
    padding-inline-start: 0;
  }

  .home-team__photo {
    grid-column: 1 / 6;
  }

  .home-team__copy {
    grid-column: 5 / 9;
    padding: var(--space-8);
  }

  .home-gift__copy {
    grid-column: 1 / 5;
    padding-inline-end: var(--space-8);
  }

  .home-gift__photo {
    grid-column: 5 / 9;
  }

}

@media (max-width: 47.9375rem) {
  .section-space {
    padding-block: clamp(4.5rem, 20vw, 6rem);
  }

  .home-hero__grid {
    grid-template-rows: repeat(3, auto);
    padding-block: 0 var(--space-8);
  }

  .home-hero__photo {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-media);
  }

  .home-hero__photo img {
    object-position: center;
  }

  .home-hero__title-plate {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: var(--space-6) 0 0;
    margin-block-start: calc(-1 * var(--space-8));
  }

  .home-hero__title-plate h1 {
    margin-block-end: var(--space-4);
  }

  .home-hero__title-plate .lead {
    margin-block-end: var(--space-4);
  }

  .home-hero__rail {
    grid-template-columns: 1fr 1fr;
  }

  .home-hero__actions {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
    padding-block-start: var(--space-6);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .home-hero__actions .booking-link {
    width: 100%;
  }

  .visit-process .section-intro {
    margin-block-end: var(--space-12);
  }

  .service-pillars__intro {
    text-align: left;
  }

  .service-pillars__intro h2,
  .service-pillars__intro .lead {
    margin-inline: 0;
  }

  .service-pillars__media {
    padding-inline: 0;
  }

  .service-pillars__media-mask {
    aspect-ratio: 4 / 3;
    transform: scale(0.96);
  }

  .service-pillars__media-countermask {
    transform: scale(1.042);
  }

  .service-pillars__media-parallax,
  .service-pillars__media-parallax img {
    transform: none;
  }

  .service-pillars__grid {
    display: block;
  }

  .service-pillars__grid > li + li {
    margin-block-start: var(--space-8);
  }

  .service-pillars__grid article {
    grid-template-columns: clamp(2.5rem, 10vw, 3rem) 1fr;
    column-gap: var(--space-4);
  }

  .service-pillars__icon {
    width: clamp(2.5rem, 10vw, 3rem);
    height: clamp(2.5rem, 10vw, 3rem);
  }

  .service-pillars__grid h3 {
    font-size: clamp(1.8rem, 10vw, 2.75rem);
  }

  .visit-process__composition {
    display: flex;
    flex-direction: column;
  }

  .visit-process__media-rail {
    order: -1;
    margin-block-end: var(--space-8);
  }

  .visit-process--scrollytelling .visit-process__photo {
    position: relative;
    top: auto;
    transform: none;
  }

  .visit-process__photo img {
    max-height: none;
    aspect-ratio: 16 / 11;
  }

  .visit-process__steps {
    padding-inline-start: var(--space-6);
  }

  .visit-process--scrollytelling .visit-process__steps {
    padding-block-end: 0;
  }

  .visit-process__steps::before {
    left: 0.25rem;
  }

  .visit-process__step button::before {
    left: -1.5rem;
  }

  .visit-process--scrollytelling .visit-process__step {
    min-height: auto;
    opacity: 1;
  }

  .visit-process__step p {
    padding: 0 0 var(--space-6);
  }

  .safety-panel__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .safety-panel summary {
    padding-inline: var(--space-4);
    font-size: 1.3rem;
  }

  .safety-panel details p {
    padding-inline: var(--space-4);
  }

  .home-team__photo,
  .home-team__copy,
  .home-gift__copy,
  .home-gift__photo {
    grid-column: 1 / -1;
  }

  .home-team__photo {
    grid-row: 1;
  }

  .home-team__copy {
    grid-row: 2;
  }

  .home-team__photo img {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .home-team__copy {
    padding: var(--space-6);
    margin-block-start: calc(-1 * var(--space-6));
  }

  .review-collection header {
    display: block;
  }

  .review-collection header h2 {
    max-width: 12ch;
  }

  .review-collection__list figure {
    display: block;
    padding-block: var(--space-8);
  }

  .review-collection__category,
  .review-collection blockquote {
    margin-block-end: var(--space-6);
  }

  .review-collection blockquote {
    font-size: clamp(1.65rem, 8vw, 2.3rem);
  }

  .review-collection__toggle {
    margin-inline: 0;
  }

  .home-gift__copy {
    padding-inline-end: 0;
  }

  .home-gift__photo {
    margin: var(--space-12) 0 0 var(--space-3);
  }

  .home-gift__photo img {
    aspect-ratio: 16 / 11;
  }

}

@media (max-width: 25rem) {
  .home-hero__rail {
    grid-template-columns: 1fr;
  }

  .home-team__member {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

@media (max-width: 47.9375rem) {
  .home-hero__title-plate::before,
  .home-hero__title-plate::after {
    content: none;
  }
}

/*--------------------------------------------------------------
# Responsive - uslugi  (zrodlo: css/services-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .services-hero figure,
  .service-detail-hero figure,
  .brafitting-hero figure {
    grid-column: 3 / 9;
  }

  .services-hero__title-plate,
  .service-detail-hero__title-plate,
  .brafitting-hero__title-plate {
    grid-column: 1 / 7;
  }

  .services-catalog__intro,
  .brafitting-chapters__intro {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .service-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brafitting-chapters ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .services-catalog__intro .eyebrow,
  .brafitting-chapters__intro .eyebrow {
    grid-column: 1 / 3;
  }

  .services-catalog__intro h2,
  .brafitting-chapters__intro h2 {
    grid-column: 3 / 9;
  }

  .services-catalog__intro .eyebrow,
  .services-catalog__intro h2 {
    grid-column: 1 / -1;
  }

  .service-facts__col--left {
    grid-column: 1 / 4;
  }

  .service-facts__col--right {
    grid-column: 4 / 9;
  }

  .services-reasons__grid > header {
    grid-column: 1 / 4;
  }

  .services-reasons__list {
    grid-column: 4 / 9;
  }

  .services-visit__copy {
    grid-column: 1 / 5;
  }

  .services-visit__media {
    grid-column: 5 / 9;
  }

}

@media (max-width: 47.9375rem) {
  .services-hero__grid,
  .service-detail-hero__grid,
  .brafitting-hero__grid {
    display: grid;
    grid-template-rows: repeat(3, auto);
    padding-block: 0 var(--space-8);
  }

  .services-hero figure,
  .service-detail-hero figure,
  .brafitting-hero figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .services-hero__title-plate,
  .service-detail-hero__title-plate,
  .brafitting-hero__title-plate {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: var(--space-6) 0 0;
    margin-block-start: calc(-1 * var(--space-8));
  }

  .services-hero__title-plate h1,
  .service-detail-hero__title-plate h1,
  .brafitting-hero__title-plate h1 {
    margin-block-end: var(--space-4);
    font-size: clamp(2.75rem, 12vw, 3.2rem);
    line-height: 0.98;
  }

  .service-detail-hero__action {
    margin-block-start: var(--space-6);
  }

  .service-detail-hero__action .booking-link {
    width: 100%;
  }

  .services-catalog__intro,
  .brafitting-chapters__intro {
    display: block;
    padding-block-end: var(--space-12);
  }

  .service-index__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .services-reasons__grid > header,
  .services-reasons__list,
  .services-visit__copy,
  .services-visit__media {
    grid-column: 1 / -1;
  }

  .services-reasons__grid > header {
    position: static;
    margin-block-end: var(--space-12);
  }

  .services-reasons__grid > header h2 {
    max-width: 12ch;
  }

  .services-visit__copy {
    padding-inline-end: 0;
  }

  .services-visit__media {
    min-height: 0;
    margin-block-start: var(--space-12);
    aspect-ratio: 4 / 3;
  }

  /* Ikona idzie do wlasnego wiersza nad tekstem: przy ukladzie obok siebie
     albo ikona musi sie skurczyc, albo naglowek i lead traca ~5rem
     szerokosci. Pionowo ikona zostaje w pelnym rozmiarze, a tresc idzie na
     cala szerokosc karty - stad tez zdjete miary z h2 i akapitu. */
  .service-index__grid article {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-index__icon {
    grid-row: auto;
    margin-block: 0 var(--space-4);
  }

  .service-index__grid .eyebrow,
  .service-index__grid h2,
  .service-index__grid article > p:not(.eyebrow),
  .service-index__grid .button-outline {
    grid-column: 1;
  }

  .service-index__grid h2,
  .service-index__grid article > p:not(.eyebrow) {
    max-width: none;
  }

  .brafitting-faq__grid,
  .service-faq__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .service-facts__col {
    display: contents;
  }

  .service-facts__audience,
  .service-facts__scope,
  .service-facts__prices,
  .service-preparation {
    grid-column: 1 / -1;
  }

  .service-facts__audience {
    order: 1;
    padding: var(--space-6);
  }

  .service-facts__scope {
    order: 2;
    margin-block-start: var(--space-12);
  }

  .service-preparation {
    order: 3;
    margin-block-start: var(--space-12);
  }

  .service-facts__prices {
    order: 4;
    margin-block-start: var(--space-12);
  }

  .faq-accordion__item button {
    min-height: 4.5rem;
  }

  .brafitting-chapters ol {
    display: block;
  }

  .brafitting-chapters li:nth-child(1),
  .brafitting-chapters li:nth-child(2),
  .brafitting-chapters li:nth-child(3) {
    grid-column: auto;
    margin-block-start: 0;
  }

  .not-found-page__inner {
    min-height: 58vh;
    padding-block: 4.5rem 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion__item button,
  .faq-accordion__state {
    transition-property: color, opacity;
    transition-duration: 120ms;
    transition-timing-function: ease;
  }

  .faq-accordion__panel {
    transition: opacity 120ms ease;
  }

  .faq-accordion__state {
    transform: none;
  }
}

@media (max-width: 47.9375rem) {
  .services-hero__title-plate::before,
  .service-detail-hero__title-plate::before,
  .brafitting-hero__title-plate::before {
    content: none;
  }
}

/*--------------------------------------------------------------
# Responsive - o nas  (zrodlo: css/about-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .about-hero__photo {
    grid-column: 1 / 5;
  }

  .about-hero__title-plate {
    grid-column: 5 / 9;
  }

  .about-origin header {
    grid-column: 1 / 5;
  }

  .about-origin__story {
    grid-column: 5 / 9;
  }

  .about-team__intro .eyebrow {
    grid-column: 1 / 3;
  }

  .about-team__intro h2 {
    grid-column: 3 / 8;
  }

  .about-gallery-section__intro h2 {
    grid-column: 1 / 4;
  }

  .about-gallery-section__intro > :last-child {
    grid-column: 5 / 9;
  }

  .about-charity__copy {
    grid-column: 1 / 4;
    grid-row: 1;
  }

  .about-charity__photo {
    grid-column: 4 / 9;
    grid-row: 1;
  }
}

@media (max-width: 47.9375rem) {
  .about-hero {
    padding-block: var(--space-6) var(--space-12);
  }

  .about-hero__grid {
    grid-template-rows: repeat(2, auto);
  }

  .about-hero__photo {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .about-hero__photo img {
    object-position: 50% 50%;
  }

  .about-hero__title-plate {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    padding: var(--space-8);
    margin: calc(-1 * var(--space-8)) var(--space-3) 0;
  }

  .about-hero__title-plate h1 {
    margin-block-end: var(--space-4);
  }

  .about-origin header,
  .about-origin__story,
  .about-team__intro .eyebrow,
  .about-team__intro h2,
  .about-gallery-section__intro h2,
  .about-gallery-section__intro > :last-child,
  .about-charity__copy,
  .about-charity__photo {
    grid-column: 1 / -1;
  }

  .about-origin__stats {
    margin-block-start: var(--space-6);
  }

  .about-origin__story {
    padding-block-start: var(--space-12);
  }

  .about-team__intro {
    padding-block-end: var(--space-12);
  }

  .about-team__intro h2 {
    padding-block-end: var(--space-6);
  }

  .about-team__members {
    gap: var(--space-16);
  }

  .about-member,
  .about-member:nth-child(even) {
    display: block;
  }

  .about-member figure img {
    aspect-ratio: 4 / 5;
  }

  .about-member__copy,
  .about-member:nth-child(even) .about-member__copy {
    padding: var(--space-6);
    margin: calc(-1 * var(--space-6)) var(--space-3) 0;
  }

  .about-gallery-section__intro {
    padding-block-end: var(--space-12);
  }

  .about-gallery-section__intro h2 {
    margin-block-end: var(--space-8);
  }

  .about-gallery-section__intro > :last-child {
    padding-block-start: var(--space-4);
  }

  .about-charity__copy {
    grid-row: 2;
    padding-block-start: var(--space-6);
    margin-block-start: var(--space-12);
  }

  .about-charity__photo {
    grid-row: 1;
  }

  .talk-tabs__list button {
    min-height: 48px;
  }

  .gallery__grid {
    display: block;
  }

  .gallery__item,
  .gallery__item:nth-child(2),
  .gallery__item:nth-child(4) {
    margin: 0 0 var(--space-12);
  }

  .gallery__item:nth-child(even) {
    margin-inline-start: var(--space-6);
  }

  .gallery__item:nth-child(odd):not(:first-child) {
    margin-inline-end: var(--space-6);
  }

  .gallery__item:first-child img {
    aspect-ratio: 16 / 11;
  }

  .gallery__item:nth-child(2) img,
  .gallery__item:nth-child(5) img {
    aspect-ratio: 4 / 5;
  }

  .lightbox {
    padding: var(--space-3);
  }

  .lightbox__dialog {
    width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: var(--space-3);
  }

  .lightbox__header {
    padding-inline: 0;
  }

  .lightbox__header h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .lightbox__close {
    margin-inline-start: auto;
  }

}

@media (max-width: 25rem) {
  .about-member__copy,
  .about-member:nth-child(even) .about-member__copy {
    margin-inline: 0;
  }

  .lightbox__close {
    padding-inline: var(--space-3);
  }
}

/*--------------------------------------------------------------
# Responsive - o nas, sekcje  (zrodlo: css/about-sections-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .visit-invite__copy {
    grid-column: 1 / 6;
  }

  .visit-invite__heading {
    max-width: 11ch;
  }

  .visit-invite__map {
    grid-column: 6 / 9;
  }
}

@media (max-width: 47.9375rem) {
  .about-social__intro,
  .about-social__list,
  .about-social__cta,
  .visit-invite__copy,
  .visit-invite__map {
    grid-column: 1 / -1;
  }

  .about-social__intro {
    padding-block-end: var(--space-8);
  }

  .about-social__list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-social__cta {
    margin-block-start: var(--space-2);
  }

  .visit-invite__copy {
    padding-block-start: var(--space-6);
  }

  .visit-invite__heading {
    max-width: none;
    font-size: clamp(2.5rem, 11vw, 3rem);
  }

  .visit-invite__text {
    max-width: none;
  }

  .visit-invite__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .visit-invite__actions .booking-link {
    width: 100%;
  }

  .visit-invite__actions .text-link {
    justify-content: center;
  }

  .visit-invite__map {
    aspect-ratio: auto;
    height: 18.75rem;
    margin-block-start: var(--space-8);
  }
}

/*--------------------------------------------------------------
# Responsive - blog  (zrodlo: css/blog-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .blog-hero__grid,
  .article-reading {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .blog-hero__heading {
    grid-column: 1 / 6;
  }

  .blog-hero__aside {
    grid-column: 6 / 9;
  }

  .article-row {
    gap: var(--space-12);
  }

  .article-reading__body {
    grid-column: 3 / 8;
  }
}
@media (max-width: 47.9375rem) {
  /* Przerwa hero -> lista skladala sie z czterech warstw naraz: marginesu
     leadu (2rem), dolnego paddingu hero (4rem), gornego .section-space
     (~4.7rem) i .article-ledger (0.5rem) - razem ok. 11rem. Lead nie
     potrzebuje wlasnego marginesu, bo jest ostatni w hero. */
  .blog-hero__grid {
    display: block;
    padding-block: 4.5rem var(--space-8);
  }

  .blog-hero h1 {
    margin-block: var(--space-6) var(--space-8);
  }

  .blog-index.section-space {
    padding-block-start: var(--space-8);
  }

  .article-ledger {
    padding-block-start: var(--space-2);
  }

  .article-row {
    display: block;
    padding-block: var(--space-8);
  }

  .article-row__media {
    aspect-ratio: 3 / 2;
    margin-block-end: var(--space-4);
  }

  .article-header {
    padding-block: 4.5rem var(--space-12);
  }

  .article-header h1 {
    max-width: none;
  }

  .article-figure {
    aspect-ratio: 3 / 2;
  }

  .article-reading {
    display: block;
    padding-block: 4.5rem 6rem;
  }

  .article-figure + .article-reading {
    padding-block-start: var(--space-12);
  }

  .article-reading__body section {
    margin-block-start: var(--space-12);
  }

  .article-related {
    margin-block: var(--space-12);
  }
}

/*--------------------------------------------------------------
# Responsive - bon podarunkowy  (zrodlo: css/gift-card-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .gift-card-hero__grid,
  .gift-configurator,
  .gift-configurator-live {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .gift-card-hero figure {
    grid-column: 3 / 9;
  }

  .gift-card-hero__title-plate {
    grid-column: 1 / 6;
  }

  .gift-configurator__intro,
  .gift-configurator__fields,
  .gift-configurator-live > .form-error-summary {
    grid-column: 1 / 5;
  }

  .gift-configurator__preview {
    grid-column: 5 / 9;
  }
}

@media (max-width: 47.9375rem) {
  .gift-card-hero__grid {
    display: grid;
    min-height: 0;
    padding-block: 0 var(--space-8);
    grid-template-rows: auto auto;
  }

  .gift-card-hero figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    border-radius: var(--radius-media);
  }

  .gift-card-hero figure img {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .gift-card-hero__title-plate {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: var(--space-6) 0 0;
    margin-block-start: calc(-1 * var(--space-8));
  }

  .gift-card-hero__title-plate h1 {
    max-width: 8ch;
    margin-block-end: var(--space-4);
  }

  .gift-configurator,
  .gift-configurator-live {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .gift-configurator__intro,
  .gift-configurator__preview,
  .gift-configurator__fields {
    width: 100%;
  }

  /* Ta sama kolejnosc co naglowek - w kolumnie komunikat ma zostac tuz pod nim,
     a decyduje wtedy kolejnosc w markupie. */
  .gift-configurator__intro,
  .gift-configurator-live > .form-error-summary {
    order: 1;
  }

  .gift-configurator__preview {
    position: static;
    order: 2;
    padding-block: var(--space-8) var(--space-4);
  }

  .gift-configurator__fields {
    order: 3;
    padding-block-start: var(--space-4);
  }

  /* Na waskim ekranie etykieta i wartosc nie zmieszcza sie obok siebie. */
  .gift-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) 0;
  }

  .gift-summary dt:not(:first-child) {
    margin-block-start: var(--space-4);
  }

  .gift-preview__inner {
    aspect-ratio: 1.7 / 1;
    min-height: 12rem;
    padding: var(--space-3) var(--space-4);
    /* Węższy kadr = rama wchodzi głębiej; górny scrim gruntuje tytuł */
    background-image:
      linear-gradient(
        to top,
        rgba(26, 59, 105, 0.92) 0%,
        rgba(26, 59, 105, 0.6) 12%,
        rgba(26, 59, 105, 0.25) 22%,
        transparent 34%
      ),
      linear-gradient(
        to bottom,
        rgba(26, 59, 105, 0.85) 0%,
        rgba(26, 59, 105, 0.5) 16%,
        transparent 32%
      ),
      url("assets/img/bon/bon-front-clean.png");
    background-size: cover, cover, 145% auto;
  }

  .gift-preview[data-theme="koral"] .gift-preview__inner {
    padding: var(--space-3) var(--space-4);
    background-image:
      linear-gradient(
        to top,
        rgba(241, 128, 150, 0.9) 0%,
        rgba(241, 128, 150, 0.55) 12%,
        rgba(241, 128, 150, 0.2) 22%,
        transparent 34%
      ),
      linear-gradient(
        to bottom,
        rgba(241, 128, 150, 0.85) 0%,
        rgba(241, 128, 150, 0.45) 14%,
        transparent 30%
      ),
      url("assets/img/bon/bon-back-clean.png");
    background-size: cover, cover, cover;
  }

  /* Typografia bonu skaluje sie z samym bonem, a nie z okienkiem. Bon jest
     kontenerem (container-type: size), wiec cqw to procent jego szerokosci -
     w przeciwienstwie do vw z regul bazowych, ktore na telefonie schodzi do
     kilku pikseli i zostawia kazdy clamp na minimum policzonym pod desktop.
     Maksima to wartosci desktopowe, wiec nic nie urosnie ponad projekt.
     Logo mialo ten sam problem: minimum 2.75rem zjadalo jedna trzecia
     wysokosci malego bonu. */
  .gift-preview__logo {
    height: clamp(1.5rem, 20cqh, 3rem);
  }

  .gift-preview__logo--koral {
    height: clamp(1.75rem, 11cqh, 2rem);
  }

  .gift-preview__kicker {
    font-size: clamp(0.5625rem, 3.6cqw, 1rem);
  }

  .gift-preview__occasion {
    font-size: clamp(0.5rem, 3.2cqw, 0.6875rem);
  }

  .gift-preview__for {
    font-size: clamp(0.875rem, 5.7cqw, 1.85rem);
  }

  .gift-preview__amount {
    font-size: clamp(1.125rem, 7.6cqw, 2.75rem);
  }

  /* Bez wlasnej miary - 34ch przy tym stopniu pisma to niecale 160px, wiec
     dedykacja lamala sie duzo wczesniej niz konczyl sie bon. */
  .gift-preview__message {
    max-width: none;
    font-size: clamp(0.5625rem, 3.4cqw, 0.8125rem);
  }

  .gift-preview__meta {
    font-size: clamp(0.5625rem, 3.6cqw, 0.75rem);
  }

  .gift-configurator__action {
    position: sticky;
    z-index: 20;
    bottom: 0;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    margin-inline: calc(-1 * var(--gutter));
    border: 1px solid var(--color-border);
    background: var(--color-milk);
    box-shadow: var(--shadow-overlay);
  }

  .gift-configurator__action strong {
    font-size: 1.35rem;
  }

  .gift-configurator__submit {
    max-width: 13rem;
  }

}

@media (max-width: 25rem) {
  .gift-preview__inner {
    min-height: 11.5rem;
    padding: var(--space-4);
  }

  .gift-preview__logo {
    height: clamp(2.25rem, 18cqh, 2.5rem);
  }

  .gift-preview__logo--koral {
    height: clamp(1.5rem, 10cqh, 1.75rem);
  }

  .gift-preview__kicker {
    font-size: 0.75rem;
  }

  .gift-preview__for {
    font-size: 1.15rem;
  }

  .gift-preview__amount {
    margin-block: var(--space-2) 0;
    font-size: 1.7rem;
  }

  .gift-amounts__option > span {
    min-height: 64px;
    padding: var(--space-3);
  }

  .gift-amounts__value {
    font-size: 1.35rem;
  }

  .gift-configurator__action {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .gift-configurator__submit {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 47.9375rem) {
  .gift-card-hero__title-plate::before,
  .gift-card-hero__title-plate::after {
    content: none;
  }
}

/*--------------------------------------------------------------
# Responsive - kontakt  (zrodlo: css/contact-responsive.css)
--------------------------------------------------------------*/

@media (max-width: 79.9375rem) {
  .contact-hero__grid,
  .contact-workspace__grid,
  .legal-placeholder__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .contact-hero figure {
    grid-column: 3 / 9;
  }

  .contact-hero__plate {
    grid-column: 1 / 6;
  }

  .contact-workspace__form {
    grid-column: 1 / 5;
    padding-inline-end: 0;
  }

  .contact-workspace__location {
    grid-column: 5 / 9;
  }

  .legal-placeholder figure {
    grid-column: 1 / 6;
  }

  .legal-placeholder__plate {
    grid-column: 5 / 9;
    margin-inline-start: calc(-1 * var(--space-8));
  }
}

@media (max-width: 47.9375rem) {
  .contact-hero__grid {
    min-height: 0;
    padding-block: 0 var(--space-8);
    grid-template-rows: auto auto;
  }

  .contact-hero figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    border-radius: var(--radius-media);
  }

  .contact-hero img {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .contact-hero__plate {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: var(--space-6) 0 0;
    margin-block-start: calc(-1 * var(--space-8));
  }

  .contact-workspace__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .contact-workspace__form,
  .contact-workspace__location {
    width: 100%;
  }

  .contact-workspace__location {
    order: -1;
  }

  .location-panel__map {
    min-height: 13rem;
  }

  .location-panel__details,
  .contact-form__success {
    padding: var(--space-6);
  }

  .contact-form__submit {
    width: 100%;
  }

  .contact-form__success-actions,
  .legal-placeholder__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form__primary-action,
  .legal-placeholder__primary {
    width: 100%;
  }

  .legal-placeholder {
    min-height: 0;
    padding-block: 0 var(--space-16);
  }

  .legal-placeholder__grid {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .legal-placeholder figure {
    width: 100%;
    min-height: 0;
  }

  .legal-placeholder figure img {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .legal-placeholder__plate {
    width: min(calc(100% - (2 * var(--gutter))), var(--content-max));
    padding: var(--space-8) 0 0;
    margin: calc(-1 * var(--space-8)) auto 0;
    border-top: 0;
  }

  .not-found-page__inner {
    display: block;
    min-height: 58vh;
    padding-block: var(--space-16) var(--space-24);
  }

  .not-found-page__copy {
    padding-inline-start: var(--space-6);
  }
}

@media (max-width: 25rem) {
  .location-panel__details,
  .contact-form__success {
    padding-inline: var(--space-4);
  }

  .contact-form__success-actions .text-link,
  .legal-placeholder__actions .text-link {
    width: 100%;
  }
}

@media (max-width: 47.9375rem) {
  .contact-hero__plate::before,
  .contact-hero__plate::after {
    content: none;
  }
}

/*--------------------------------------------------------------
# Blog - dodatki WordPressa
----------------------------------------------------------------
Dwie rzeczy, ktorych statyczny prototyp nie potrzebowal, a WordPress tak.

1. TRESC Z EDYTORA. Prototyp owijal kazdy rozdzial artykulu w
   <section aria-labelledby="article-section-N"> i to na <section> wisial
   odstep oraz kreska nad rozdzialem. Gutenberg produkuje plaska liste
   naglowkow i akapitow, wiec te same wartosci przenosimy na bezposrednie
   dzieci .article-reading__body. Efekt wizualny jest identyczny.

2. PAGINACJA. Projekt pokazywal siedem wpisow na jednym ekranie i nie mial
   nawigacji miedzy stronami; WordPress dzieli liste wg ustawienia
   "Strony bloga pokazują co najwyżej", wiec bez tego kolejne wpisy
   znikaja bez sladu. Wyglad zbudowany wylacznie z tokenow designu.
--------------------------------------------------------------*/

.article-reading__body > h2 {
  padding-block-start: var(--space-8);
  margin-block: var(--space-16) var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  line-height: 1.03;
}

.article-reading__body > p {
  max-width: 64ch;
}

/* Zapowiedz stoi przed pierwszym rozdzialem - wlasny odstep ma
   z .article-reading__opening. */
.article-reading__body > .article-reading__opening {
  margin-block-start: 0;
}

.article-reading__body > ul,
.article-reading__body > ol {
  max-width: 64ch;
  padding-inline-start: var(--space-6);
}

.article-reading__body > ul li,
.article-reading__body > ol li {
  margin-block-end: var(--space-3);
}

.article-reading__body > blockquote {
  max-width: 64ch;
  padding-inline-start: var(--space-6);
  margin-inline: 0;
  border-left: 1px solid var(--color-raspberry);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
}

.article-reading__body > figure {
  margin-inline: 0;
}

.article-reading__body > figure img {
  display: block;
  width: 100%;
  height: auto;
}

.article-reading__body figcaption {
  margin-block-start: var(--space-3);
  color: var(--color-graphite);
  font-size: 0.8125rem;
}

.blog-index .navigation.pagination {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.blog-index .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.blog-index .page-numbers {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.blog-index .page-numbers.current {
  border-color: var(--color-raspberry);
  background: var(--color-raspberry);
  color: var(--color-on-accent);
}

.blog-index .page-numbers.dots {
  min-width: auto;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .blog-index a.page-numbers:hover {
    border-color: var(--color-raspberry);
    color: var(--color-raspberry);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-index .page-numbers {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Strona tekstowa
----------------------------------------------------------------
Domyslny page.php: regulamin, polityka prywatnosci, cookies.
Prototyp takiej strony nie mial. Uklad wziety z wpisu bloga
(malinowy H1, kolumna tekstu przesunieta w prawo), ale naglowki
sa mniejsze - dokument prawny ma kilkanascie paragrafow, a nie
trzy rozdzialy. Tresc z Gutenberga stylowana po tagach, bez klas.
--------------------------------------------------------------*/

.text-page__header {
  padding-block: var(--space-24) var(--space-12);
}

.text-page__header h1 {
  max-width: 20ch;
  margin: 0 0 var(--space-6);
  color: var(--color-raspberry);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.04;
}

.text-page__meta {
  margin: 0;
  color: var(--color-graphite);
  font-size: 0.8125rem;
  font-weight: 500;
}

.text-page__meta time {
  font-variant-numeric: tabular-nums;
}

.text-page__figure {
  margin: 0 auto var(--space-16);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-milk);
}

.text-page__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-page__body {
  display: grid;
  padding-block: var(--space-16) var(--space-36);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  border-block: 1px solid var(--color-border);
}

.text-page__content {
  grid-column: 3 / 11;
  min-width: 0;
  max-width: 70ch;
}

/* Rytm pionowy - jeden odstep pod kazdym blokiem tresci. */
.text-page__content > :is(p, ul, ol, blockquote, figure, .wp-block-table) {
  margin-block: 0 var(--space-6);
}

.text-page__content > :first-child {
  margin-block-start: 0;
}

.text-page__content > :last-child {
  margin-block-end: 0;
}

/* Naglowki. Linki do paragrafow (#par-5) nie chowaja celu pod sticky
   naglowkiem strony. */
.text-page__content :is(h2, h3, h4, h5, h6) {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.text-page__content h2 {
  padding-block-start: var(--space-8);
  margin-block: var(--space-16) var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.08;
}

.text-page__content > h2:first-child {
  padding-block-start: 0;
  border-top: 0;
}

.text-page__content h3 {
  margin-block: var(--space-12) var(--space-4);
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  line-height: 1.15;
}

.text-page__content :is(h4, h5, h6) {
  margin-block: var(--space-8) var(--space-3);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.text-page__content h2 + h3 {
  margin-block-start: var(--space-6);
}

/* Linki */
.text-page__content a {
  color: var(--color-ink);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--color-raspberry);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 140ms ease;
}

.text-page__content a:focus-visible {
  color: var(--color-raspberry);
}

.text-page__content strong {
  font-weight: 700;
}

/* Listy. Zagniezdzona lista numerowana bez wybranego w edytorze typu
   dostaje litery - "1. a)" jak w typowym regulaminie. */
.text-page__content :is(ul, ol) {
  padding-inline-start: var(--space-6);
}

.text-page__content li {
  margin-block-end: var(--space-2);
  padding-inline-start: var(--space-1);
}

.text-page__content li > :is(ul, ol) {
  margin-block: var(--space-2) 0;
}

.text-page__content ul > li::marker {
  color: var(--color-raspberry);
}

.text-page__content ol > li::marker {
  color: var(--color-graphite);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.text-page__content ol ol:not([type]) {
  list-style-type: lower-alpha;
}

/* Cytat */
.text-page__content blockquote {
  padding-inline-start: var(--space-6);
  margin-inline: 0;
  border-left: 1px solid var(--color-raspberry);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
}

.text-page__content blockquote p {
  margin-block: 0 var(--space-3);
}

.text-page__content blockquote cite {
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

/* Separator */
.text-page__content hr {
  height: 0;
  margin-block: var(--space-12);
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* Tabele (np. lista plikow cookies). Waska tabela przewija sie
   w poziomie zamiast rozpychac strone. */
.text-page__content .wp-block-table {
  margin-inline: 0;
  overflow-x: auto;
}

.text-page__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.text-page__content :is(th, td) {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.text-page__content th {
  background: var(--color-milk);
  font-weight: 650;
}

.text-page__content thead {
  border-bottom: 1px solid var(--color-ink);
}

/* Zdjecia i podpisy */
.text-page__content figure {
  margin-inline: 0;
}

.text-page__content figcaption {
  margin-block-start: var(--space-3);
  color: var(--color-graphite);
  font-size: 0.8125rem;
}

/* Podzial dokumentu na strony (<!--nextpage-->). */
.text-page__content .page-links {
  display: flex;
  margin-block-start: var(--space-12);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
  .text-page__content a:hover {
    color: var(--color-raspberry);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-page__content a {
    transition: none;
  }
}

@media (max-width: 79.9375rem) {
  .text-page__body {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .text-page__content {
    grid-column: 2 / 8;
  }
}

@media (max-width: 47.9375rem) {
  .text-page__header {
    padding-block: 4.5rem var(--space-8);
  }

  .text-page__header h1 {
    max-width: none;
  }

  .text-page__figure {
    margin-block-end: var(--space-12);
    aspect-ratio: 3 / 2;
  }

  .text-page__body {
    display: block;
    padding-block: var(--space-12) 6rem;
  }

  .text-page__content h2 {
    margin-block-start: var(--space-12);
  }

  .text-page__content table {
    font-size: 0.875rem;
  }
}

/*--------------------------------------------------------------
# Contact Form 7
----------------------------------------------------------------
Wtyczka generuje wlasny markup, ktorego nie da sie w calosci ubrac
w klasy designu. Wieksza czesc zalatwia szablon formularza
(docs/cf7-kontakt.txt): pola siedza w gotowych .form-field,
a zgoda w .contact-form__privacy. Ponizej zostaja tylko te fragmenty,
ktorych CF7 nie pozwala otagowac: wrappery kontrolek, komunikaty
walidacji i spinner.
--------------------------------------------------------------*/

/* Wrapper kazdej kontrolki jest inline'owy - bez tego input nie ma
   pelnej szerokosci pola. */
.wpcf7-form-control-wrap {
  display: block;
}

/* Podpowiedz walidacyjna pod polem - ten sam wyglad co .form-field__error.
   Sam obrys pola dziala juz bez dodatkowej reguly: CF7 ustawia na bledej
   kontrolce aria-invalid="true", a design stylowal wlasnie ten atrybut. */
.wpcf7-not-valid-tip {
  margin: var(--space-2) 0 0;
  color: var(--color-error);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Komunikat calego formularza - wyglad .form-error-summary. */
.wpcf7-response-output {
  display: flex;
  padding: var(--space-4);
  margin: var(--space-6) 0 0;
  flex-direction: column;
  gap: var(--space-1);
  border: 0;
  border-left: 3px solid var(--color-error);
  background: var(--color-milk);
  font-size: 0.875rem;
}

.wpcf7-form.sent .wpcf7-response-output {
  border-left-color: var(--color-raspberry);
}

/* Zgoda: CF7 owija checkbox w dodatkowe spany z wlasnym marginesem,
   ktory rozjezdza flexa z .contact-form__privacy label. */
.contact-form__privacy .wpcf7-list-item {
  margin: 0;
}

.contact-form__privacy .wpcf7-form-control-wrap {
  display: inline;
}

.wpcf7-spinner {
  margin: 0 0 0 var(--space-3);
}

/*--------------------------------------------------------------
# Okruszki
----------------------------------------------------------------
Pasek pod naglowkiem na kazdej podstronie (inc/breadcrumbs.php,
wolany na koncu header.php). Prototyp go nie mial - dodany po
audycie SEO. Stoi w zwyklym przeplywie nad hero kazdego szablonu,
wiec zadna sekcja nie potrzebowala wlasnej korekty.
--------------------------------------------------------------*/

.breadcrumbs {
  padding-block: var(--space-4) 0;
}

.breadcrumbs__list {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  color: var(--color-graphite);
  font-size: 0.75rem;
  line-height: 1.5;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-2);
}

/* Separator z CSS, zeby czytnik ekranu nie czytal ukosnikow - pusty tekst
   alternatywny po "/" to skladnia content z alt. */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  content: "/" / "";
  color: var(--color-border);
}

.breadcrumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}

.breadcrumbs a:focus-visible {
  color: var(--color-raspberry);
  text-decoration-color: currentColor;
}

.breadcrumbs [aria-current="page"] {
  overflow-wrap: anywhere;
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumbs a:hover {
    color: var(--color-raspberry);
    text-decoration-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumbs a {
    transition: none;
  }
}

@media (max-width: 47.9375rem) {
  .breadcrumbs {
    padding-block-start: var(--space-3);
  }
}

/*--------------------------------------------------------------
# WordPress core
----------------------------------------------------------------
Klasy, ktorych statyczny layout nie mial, bo nie mial WordPressa:
dostepnosc, wyrownania, podpisy, galerie i korekta sticky naglowka
pod pasek administratora.
--------------------------------------------------------------*/

/* Dostepnosc
--------------------------------------------- */

/* WordPress i wtyczki wypisuja .screen-reader-text; design uzywa .sr-only
   (globals.css). Alias zamiast drugiej definicji - jedno zrodlo prawdy. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nie pokazuj obrysu na celu skip-linka. */
#main-content[tabindex="-1"]:focus,
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Pasek administratora
--------------------------------------------- */

/* .site-header jest position: sticky z top: 0 - bez tego chowa sie
   pod paskiem administratora WordPressa. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Wyrownania
--------------------------------------------- */
.alignleft {

  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {

  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-right: auto;
  margin-bottom: 1.5em;
  margin-left: auto;
}

/* Wpisy i strony
--------------------------------------------- */
.sticky {
  display: block;
}

.updated:not(.published) {
  display: none;
}

/* Komentarze
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  padding: 0;
  border: none;
  margin-top: 0;
  margin-bottom: 0;
}

.custom-logo-link {
  display: inline-block;
}

/* Podpisy
--------------------------------------------- */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5em;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galerie
--------------------------------------------- */
.gallery {
  display: grid;
  margin-bottom: 1.5em;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}