/**
 * Main Stylesheet
 * Kompilowane przez PostCSS + Tailwind
 */

/* Tailwind base, components, utilities */

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {

    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {

    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {

    .container {
        max-width: 1536px;
    }
}

.collapse {
    visibility: collapse;
}

.static {
    position: static;
}

.sticky {
    position: sticky;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.resize {
    resize: both;
}

.border {
    border-width: 1px;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* Zmienne projektu */

/**
 * Custom CSS Variables
 *
 * UWAGA: Główne zmienne (kolory, czcionki, spacing) są definiowane w theme.json
 * i dostępne jako CSS custom properties (--wp--preset--*).
 *
 * Ten plik służy do dodatkowych zmiennych specyficznych dla projektu.
 */

:root {
    /* Breakpoints (do użycia w JS, CSS media queries używają hardcoded wartości) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ==========================================================================
       BUTTON SYSTEM
       Centralne ustawienia przycisków - zmień tutaj aby zaktualizować wszędzie
       ========================================================================== */

    /* Button border radius */
    --btn-radius: 16px;

    /* Button padding */
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.25rem;
    --btn-padding-y-lg: 1rem;
    --btn-padding-x-lg: 2rem;

    /* Button font */
    --btn-font-size: 0.875rem;
    --btn-font-weight: 600;
    --btn-text-transform: uppercase;

    /* Button hover effects */
    --btn-hover-lift: -3px;
    --btn-hover-shadow-light: 0 6px 20px rgba(84, 53, 118, 0.25);
    --btn-hover-shadow-dark: 0 6px 20px rgba(255, 253, 249, 0.35);
    --btn-arrow-shift: 4px;

    /* Button transition */
    --btn-transition: all 0.3s ease;

    /* ==========================================================================
       SECTION LAYOUT
       Globalne paddingi dla sekcji
       ========================================================================== */

    /* Section padding mobile - dla kontenerów na mobile (<1024px) */
    --section-padding-mobile: var(--wp--custom--spacing--section-padding-mobile, 24px);

    /* Section outer padding - dla desktop (>=1024px)
       1024-1439px (tablet): 24px - zapewnia padding na mniejszych ekranach
       1440px+: 0px - wrapper jest wycentrowany, padding niepotrzebny */
    --section-padding-outer: 24px;

    /* ==========================================================================
       GRADIENTY
       Jedno źródło prawdy - używane do tła i obramówek
       ========================================================================== */

    --gradient-main: linear-gradient(217deg, rgba(232, 226, 214, 1) 1%, rgba(254, 254, 253, 1) 26%, rgba(255, 255, 255, 1) 58%, rgba(207, 218, 241, 1) 87%);
    --gradient-home: linear-gradient(217deg, #F3F1EB 0%, #FEFEFD 25%, #FFFFFF 55%, #E8EDF5 100%);
    --gradient-gray: linear-gradient(217deg, #ECECEC 1%, #F8F8F8 26%, #FFFFFF 58%, #E0E4EC 87%);
    --gradient-gray-blue: linear-gradient(135deg, #E8E2D6 0%, #F5F5F5 35%, #E8EDF5 65%, #CFDAF1 100%);
    --gradient-horizontal: linear-gradient(90deg, rgba(232, 226, 214, 1) 0%, rgba(255, 255, 255, 1) 100%);
    --gradient-subtle: linear-gradient(180deg, rgba(255, 253, 249, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(243, 241, 235, 1) 100%);
}

/* Powyzej 1440px wrapper jest wycentrowany (margin: 0 auto) - padding niepotrzebny */

@media (min-width: 1440px) {
    :root {
        --section-padding-outer: 0px;
    }
}

/* ==========================================================================
   STANDALONE BREADCRUMBS
   Auto-injected na podstronach bez hero section z breadcrumbs
   ========================================================================== */

.standalone-breadcrumbs-wrapper {
    max-width: var(--wp--style--global--content-size, 1440px);
    margin: 0 auto;
    padding: 0 var(--section-padding-mobile, 24px);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .standalone-breadcrumbs-wrapper {
        padding: 0 var(--section-padding-outer, 72px);
    }
}

/* Style breadcrumbs identyczne jak w hero section */

.standalone-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-family: var(--wp--preset--font-family--body, 'Figtree', sans-serif);
}

.standalone-breadcrumbs a {
    display: flex;
    align-items: center;
    color: var(--wp--preset--color--primary, #543576);
    text-decoration: none;
    transition: color 0.3s ease;
}

.standalone-breadcrumbs a:hover {
    color: var(--wp--preset--color--accent, #814997);
    text-decoration: underline;
}

.standalone-breadcrumbs .hero-section__home-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.standalone-breadcrumbs .hero-section__breadcrumb-sep {
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: var(--wp--preset--color--text-light, #9ca3af);
    vertical-align: middle;
}

.standalone-breadcrumbs .hero-section__breadcrumb-current {
    color: var(--wp--preset--color--text-medium, #4b5563);
}

/* ==========================================================================
   CONTAINMENT: Standardowe bloki WordPress w post content
   Ogranicza szerokość core bloków (heading, paragraph, list, etc.)
   do contentSize z odpowiednim paddingiem.
   ACF bloki (<section>) nie są objęte — mają własny containment.
   ========================================================================== */

.wp-block-post-content > h1,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > h5,
.wp-block-post-content > h6,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > figure:not(.alignfull):not(.alignwide),
.wp-block-post-content > blockquote,
.wp-block-post-content > hr,
.wp-block-post-content > .wp-block-separator,
.wp-block-post-content > .wp-block-spacer,
.wp-block-post-content > .wp-block-columns,
.wp-block-post-content > .wp-block-table,
.wp-block-post-content > .wp-block-quote,
.wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide),
.wp-block-post-content > .wp-block-image:not(.alignfull):not(.alignwide),
.wp-block-post-content > .wp-block-buttons,
.wp-block-post-content > .wp-block-cover:not(.alignfull):not(.alignwide) {
    max-width: var(--wp--style--global--content-size, 1440px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-padding-mobile, 24px);
    padding-right: var(--section-padding-mobile, 24px);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .wp-block-post-content > h1,
    .wp-block-post-content > h2,
    .wp-block-post-content > h3,
    .wp-block-post-content > h4,
    .wp-block-post-content > h5,
    .wp-block-post-content > h6,
    .wp-block-post-content > p,
    .wp-block-post-content > ul,
    .wp-block-post-content > ol,
    .wp-block-post-content > figure:not(.alignfull):not(.alignwide),
    .wp-block-post-content > blockquote,
    .wp-block-post-content > hr,
    .wp-block-post-content > .wp-block-separator,
    .wp-block-post-content > .wp-block-spacer,
    .wp-block-post-content > .wp-block-columns,
    .wp-block-post-content > .wp-block-table,
    .wp-block-post-content > .wp-block-quote,
    .wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide),
    .wp-block-post-content > .wp-block-image:not(.alignfull):not(.alignwide),
    .wp-block-post-content > .wp-block-buttons,
    .wp-block-post-content > .wp-block-cover:not(.alignfull):not(.alignwide) {
        padding-left: var(--section-padding-outer, 72px);
        padding-right: var(--section-padding-outer, 72px);
    }
}

/* Tło rozciągnięte na pełną szerokość viewportu (full-bleed background)
   Content zostaje w containmencie, ale tło wychodzi na 100vw */

.wp-block-post-content > [class*="section-bg-"] {
    position: relative;
    z-index: 0;
}

.wp-block-post-content > [class*="section-bg-"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: inherit;
    z-index: -1;
}

/* Własne utilities */

/**
 * Custom Utilities
 * Dodatkowe klasy utility poza Tailwind
 */

/* Visually hidden (accessibility) */

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

/* Focus visible */

.focus-visible:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Container z max-width */

.container-content {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}

.container-wide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}

/* Text utilities */

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* Aspect ratios */

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* Truncate */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover effects */

.hover-lift {
    transition: transform var(--transition-base);
}

.hover-lift:hover {
        transform: translateY(-4px);
    }

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
        transform: scale(1.02);
    }

/* Scroll snap */

.snap-x {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.snap-center {
    scroll-snap-align: center;
}

/* Pulse animation - globalny znacznik do mrugania tekstu */

/* Uzycie: dodaj klase .pulse-text do dowolnego elementu */

@keyframes renova-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

.pulse-text {
    animation: renova-pulse 2s ease-in-out infinite;
    display: inline-block;
}

/* Hide scrollbar */

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
        display: none;
    }

/* Globalna biblioteka przycisków */

/**
 * Global Button Library
 * Ujednolicone style przycisków dla całego projektu
 *
 * Warianty stylu:
 * - .btn--primary   : Primary tło (#543576), cream tekst
 * - .btn--secondary : Cream tło, primary border, primary tekst
 * - .btn--outline   : Przezroczyste z borderem
 *
 * Warianty rozmiaru:
 * - .btn--sm : Mały (padding 8×20px, font 12px)
 * - .btn     : Domyślny (padding 12×24px, font 14px)
 * - .btn--lg : Duży (padding 16×32px, font 16px)
 *
 * @package Renova_Clinic
 */

/* ==========================================================================
   CSS VARIABLES - Button Design Tokens
   ========================================================================== */

:root {
    /* Kolory */
    --btn-color-primary-bg: var(--wp--preset--color--primary, #543576);
    --btn-color-primary-text: var(--wp--preset--color--bg-cream, #FFFDF9);
    --btn-color-secondary-bg: var(--wp--preset--color--bg-cream, #FFFDF9);
    --btn-color-secondary-text: var(--wp--preset--color--primary, #543576);
    --btn-color-secondary-border: var(--wp--preset--color--primary, #543576);
    --btn-color-accent: var(--wp--preset--color--accent, #814997);

    /* Rozmiary - domyślne */
    --btn-padding-y: 0.75rem;       /* 12px */
    --btn-padding-x: 1.5rem;        /* 24px */
    --btn-font-size: 0.875rem;      /* 14px */

    /* Rozmiary - small */
    --btn-sm-padding-y: 0.5rem;     /* 8px */
    --btn-sm-padding-x: 1.25rem;    /* 20px */
    --btn-sm-font-size: 0.75rem;    /* 12px */

    /* Rozmiary - large */
    --btn-lg-padding-y: 1rem;       /* 16px */
    --btn-lg-padding-x: 2rem;       /* 32px */
    --btn-lg-font-size: 1rem;       /* 16px */

    /* Wspólne */
    --btn-border-radius: 16px;
    --btn-border-width: 2px;
    --btn-font-weight: 600;
    --btn-font-family: var(--wp--preset--font-family--heading, 'Figtree', sans-serif);
    --btn-text-transform: uppercase;
    --btn-letter-spacing: 0.025em;
    --btn-transition: all 0.3s ease;

    /* Hover effects */
    --btn-hover-lift: -3px;
    --btn-hover-shadow: 0 6px 20px rgba(84, 53, 118, 0.25);
    --btn-hover-shadow-strong: 0 6px 20px rgba(84, 53, 118, 0.35);

    /* Arrow */
    --btn-arrow-size: 20px;
    --btn-arrow-size-lg: 24px;
    --btn-arrow-gap: 8px;
    --btn-arrow-shift: 4px;
}

/* ==========================================================================
   BASE BUTTON STYLES
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-arrow-gap);

    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: none;

    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-border-radius);
    cursor: pointer;

    transition: var(--btn-transition);

    /* Reset */
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

/* ==========================================================================
   BUTTON VARIANTS - Style
   ========================================================================== */

/* PRIMARY - Główny przycisk akcji */

.btn--primary {
    background-color: var(--btn-color-primary-bg);
    color: var(--btn-color-primary-text);
    border-color: var(--btn-color-primary-bg);
}

.btn--primary:hover {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: var(--btn-hover-shadow-strong);
    background-color: var(--btn-color-accent);
    border-color: var(--btn-color-accent);
    color: var(--btn-color-primary-text);
}

.btn--primary:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(84, 53, 118, 0.2);
}

/* SECONDARY - Alternatywny przycisk (kremowy, jak w headerze) */

.btn--secondary {
    background-color: var(--btn-color-secondary-bg);
    color: var(--btn-color-accent, #814997);
    border-color: var(--btn-color-accent, #814997);
}

.btn--secondary:hover {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: var(--btn-hover-shadow);
    background-color: var(--btn-color-secondary-bg);
    border-color: var(--btn-color-accent, #814997);
    color: var(--btn-color-accent, #814997);
}

.btn--secondary:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(84, 53, 118, 0.15);
}

/* OUTLINE - Przycisk z obramowaniem */

.btn--outline {
    background-color: transparent;
    color: var(--btn-color-secondary-text);
    border-color: var(--btn-color-secondary-border);
}

.btn--outline:hover {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: var(--btn-hover-shadow);
    background-color: var(--btn-color-primary-bg);
    border-color: var(--btn-color-primary-bg);
    color: var(--btn-color-primary-text);
}

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

/* ==========================================================================
   BUTTON VARIANTS - Size
   ========================================================================== */

/* SMALL */

.btn--sm {
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
    font-size: var(--btn-sm-font-size);
}

.btn--sm .btn__arrow {
    width: 16px;
    height: 16px;
}

/* LARGE */

.btn--lg {
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
    font-size: var(--btn-lg-font-size);
}

.btn--lg .btn__arrow {
    width: var(--btn-arrow-size-lg);
    height: var(--btn-arrow-size-lg);
}

/* ==========================================================================
   BUTTON ARROW
   ========================================================================== */

.btn__arrow {
    width: var(--btn-arrow-size);
    height: var(--btn-arrow-size);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn:hover .btn__arrow {
    transform: translateX(var(--btn-arrow-shift));
}

/* ==========================================================================
   BUTTON MODIFIERS
   ========================================================================== */

/* Full width */

.btn--full {
    width: 100%;
}

/* No uppercase */

.btn--normal-case {
    text-transform: none;
    letter-spacing: normal;
}

/* Disabled state */

.btn:disabled,
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .btn--lg {
        padding: 0.875rem 1.5rem;   /* 14px 24px on mobile */
        font-size: 0.9375rem;       /* 15px */
    }
}

/* ==========================================================================
   WORDPRESS BUTTON OVERRIDE
   Nadpisanie domyślnych stylów Gutenberga
   ========================================================================== */

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-arrow-gap);

    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: none;

    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-border-radius);

    transition: var(--btn-transition);
}

.wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--btn-color-primary-bg);
    color: var(--btn-color-primary-text);
    border-color: var(--btn-color-primary-bg);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: var(--btn-hover-shadow-strong);
    background-color: var(--btn-color-accent);
    border-color: var(--btn-color-accent);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--btn-color-secondary-text);
    border-color: var(--btn-color-secondary-border);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    transform: translateY(var(--btn-hover-lift));
    box-shadow: var(--btn-hover-shadow);
    background-color: var(--btn-color-primary-bg);
    border-color: var(--btn-color-primary-bg);
    color: var(--btn-color-primary-text);
}

/* ==========================================================================
   GLOBALNE STYLE
   ========================================================================== */

html {
    /* visibility: visible jest dodawane przez JS po załadowaniu wszystkich stylów */
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: -webkit-fill-available;
    max-width: 100%;
    overscroll-behavior-x: none;
}

body {
    overflow-x: hidden;
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--secondary);
    background: #FFFDF9;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
}

/* ==========================================================================
   GRADIENTY TŁA
   Wybierane per strona w ACF
   ========================================================================== */

/* Wspólne style dla gradientów body */

html {
    min-height: 100%;
}

body[class*="gradient-"] {
    position: relative;
}

body[class*="gradient-"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

/* Główny gradient - ukośny (Figma Grad1) */

body.gradient-main::before {
    background: linear-gradient(217deg,
        rgba(232, 226, 214, 1) 1%,
        rgba(254, 254, 253, 1) 26%,
        rgba(255, 255, 255, 1) 58%,
        rgba(207, 218, 241, 1) 87%
    );
}

/* Poziomy gradient (podstrony) */

body.gradient-horizontal::before {
    background: linear-gradient(90deg,
        rgba(232, 226, 214, 1) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Subtelny gradient */

body.gradient-subtle::before {
    background: linear-gradient(180deg,
        rgba(255, 253, 249, 1) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(243, 241, 235, 1) 100%
    );
}

/* Brak gradientu */

body.gradient-none {
    background: #FFFDF9;
}

/* Kolory solidne dla body (wybierane w ACF) */

body.white {
    background-color: #FFFFFF;
}

body.cream {
    background-color: #FFFDF9;
}

body.light {
    background-color: #F3F1EB;
}

body.gray {
    background-color: #F2F3F5;
}

body.light-blue {
    background-color: #CFDAF1;
}

body.warm-beige {
    background-color: #E8E2D6;
}

/* ==========================================================================
   TŁA SEKCJI (do użycia na blokach)
   ========================================================================== */

.section-bg-white {
    background-color: #FFFFFF;
}

.section-bg-cream {
    background-color: #FFFDF9;
}

.section-bg-light {
    background-color: #F3F1EB;
}

.section-bg-gray {
    background-color: #F2F3F5;
}

.section-bg-light-blue {
    background-color: #CFDAF1;
}

.section-bg-warm-beige {
    background-color: #E8E2D6;
}

.section-bg-gradient-main {
    background: var(--gradient-main);
}

.section-bg-gradient-home {
    background: var(--gradient-home);
}

.section-bg-gradient-gray {
    background: var(--gradient-gray);
}

.section-bg-gradient-horizontal {
    background: var(--gradient-horizontal);
}

.section-bg-gradient-subtle {
    background: var(--gradient-subtle);
}

.section-bg-gradient-gray-blue {
    background: var(--gradient-gray-blue);
}

/* Gradient strona główna (subtelny beżowo-biały) */

body.gradient-home::before {
    background: linear-gradient(217deg,
        #F3F1EB 0%,
        #FEFEFD 25%,
        #FFFFFF 55%,
        #E8EDF5 100%
    );
}

/* Gradient szary (podstrony zabiegów) */

body.gradient-gray::before {
    background: linear-gradient(217deg,
        #ECECEC 1%,
        #F8F8F8 26%,
        #FFFFFF 58%,
        #E0E4EC 87%
    );
}

/* Gradient szaro-niebieski (wyrazisty) */

body.gradient-gray-blue::before {
    background: linear-gradient(135deg,
        #E8E2D6 0%,
        #F5F5F5 35%,
        #E8EDF5 65%,
        #CFDAF1 100%
    );
}

/* WordPress FSE wrapper fix */

.wp-site-blocks {
    overflow-x: hidden;
    max-width: 100%;
    overscroll-behavior-x: none;
}

/* Usuń domyślny block-gap z WordPress */

.is-layout-flow > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

footer,
.site-footer,
.wp-block-template-part {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Prevent touch scroll beyond bounds */

* {
    -webkit-overflow-scrolling: touch;
}

html, body {
    touch-action: pan-y;
}

/* Fix skip-link overflow */

.skip-link,
.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: 0;
}

/* Prevent any element from causing horizontal overflow */

main,
.entry-content,
.wp-block-post-content,
article {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix alignfull/alignwide overflow */

.alignfull,
.alignwide {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.mobile-menu-open {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--secondary);
}

a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
        color: var(--wp--preset--color--secondary);
    }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-footer {
    margin-top: auto;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Przyciski - style zdefiniowane w buttons.css */

/* Karty */

.card {
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: var(--wp--preset--color--bg-white);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);
    }

.card__image {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 16 / 9;
}

.card__content {
    padding: 1.5rem;
}

.card__title {
    margin-bottom: 0.5rem;
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
}

.card__description {
    color: var(--wp--preset--color--text-medium);
}

/* ==========================================================================
   WORDPRESS BLOCKS OVERRIDES
   ========================================================================== */

/* Buttony WordPress */

.wp-block-button__link {
    border-radius: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Separatory */

.wp-block-separator {
    border-color: var(--wp--preset--color--bg-light);
    opacity: 1;
}

/* Obrazki */

.wp-block-image img {
    border-radius: 0.5rem;
}

/* ==========================================================================
   ANIMATIONS (GSAP defaults)
   ========================================================================== */

[data-animate] {
    opacity: 0;
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   SEKCJA O NAS
   ========================================================================== */

.about-section .wp-block-columns {
        gap: 3rem;
    }

.about-section .about-team-image img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
           object-fit: cover;
        transition: transform 0.3s ease;
    }

.about-section .about-team-image:hover img {
        transform: scale(1.02);
    }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .about-section .wp-block-columns {
        flex-direction: column;
    }

    .about-section .wp-block-column {
        flex-basis: 100% !important;
    }

    .about-section .wp-block-column:first-child {
        max-width: 500px;
        margin: 0 auto;
    }

    .about-section .wp-block-column:last-child {
        text-align: center;
    }

    .about-section .wp-block-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .site-header {
        position: relative;
    }

    .about-section h3 {
        font-size: 1.5rem;
    }
}