/* ============================================================
   BEAUTY SKIN BC — Responsive (Media Queries)
   Kaskada paddingów sekcji (base → mobile):
     base     → 120px
     ≤960px   →  90px
     ≤768px   →  72px
     ≤576px   →  56px
============================================================ */


@media (max-width: 1680px) {
    .nav {
        gap: 24px;
    }
}

@media (max-width: 1380px) {
    .hero-collage {
        width: 580px;
        height: 560px;
    }

    .collage-img-3 {
        width: 230px;
        height: 430px;
    }

    /* Logo — bez letter-spacing */
    .logo-name {
        letter-spacing: 0.04em;
    }

    .logo-tagline {
        letter-spacing: 0;
    }

    /* Nav — minimalnie mniejsze odstępy */
    .nav {
        gap: 32px;
    }

    /* Btn — dużo mniejszy */
    .header-right .btn-primary {
        padding: 9px 16px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    /* Social — tylko ikonka Insta */
    .social-ig-sep,
    .social-ig-handle {
        display: none;
    }


    /* Help — mniejszy gap */
    .help-inner {
        grid-template-columns: 1fr 1.8fr;
        gap: 48px;
    }
}

/* ── 1200px ── */
@media (max-width: 1200px) {

    /* Nav — mniejszy gap żeby zmieściło się więcej linków */
    .nav {
        gap: 28px;
    }

    .about-inner {
        grid-template-columns: 0.5fr 1fr 280px;
        gap: 48px;
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        gap: 40px;
    }

    /* Help — fr zamiast % żeby gap nie powodował overflow */
    .help-inner {
        grid-template-columns: 1fr 1.8fr;
        gap: 40px;
    }
}

/* ── 1100px ── */
@media (max-width: 1100px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .adv-item {
        border-right: none;
        border-bottom: 1px solid rgba(184, 150, 90, 0.1);
    }

    .adv-item:nth-child(odd) {
        border-right: 1px solid rgba(184, 150, 90, 0.1);
    }

    .adv-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

/* ── 991px ── */
@media (max-width: 991px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Przyciski — mniejszy padding */
    .btn-primary,
    .btn-outline {
        padding: 11px 22px;
        font-size: 12px;
    }

    /* Footer — wszystko wycentrowane */
    .footer-grid>div {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-about-text {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-col-title {
        text-align: center;
    }

    .footer-links {
        align-items: center;
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-links a::before {
        display: none;
    }

    .footer-contact-item {
        justify-content: center;
    }

    /* Cennik — bez padding-top na tablet */
    .cennik {
        padding-top: 0;
    }
}

/* ── 1100px ── Nawigacja → hamburger, social + btn zostają ── */
@media (max-width: 1100px) {
    .nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .header-inner {
        padding: 14px 28px;
    }

    /* Mobile menu — tablet / small desktop */
    .mobile-menu {
        gap: 20px;
    }

    .mobile-link {
        font-size: 1.7rem;
    }

    .mobile-sub-link {
        font-size: 1rem;
    }
}

/* ── 960px ── */
@media (max-width: 960px) {

    /* ── Mobile menu ── */
    .mobile-menu {
        gap: 18px;
    }

    .mobile-link {
        font-size: 1.6rem;
    }

    .mobile-sub-link {
        font-size: 0.975rem;
    }

    /* ── Hero ── */
    .hero-container {
        display: block;
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero-visual {
        display: none;
    }

    .hero-content {
        padding: 20px 0;
    }

    .hero-bg-panel {
        width: 100%;
        clip-path: none;
        opacity: 0.3;
    }

    /* ── Sekcje — 90px ── */
    .about,
    .services,
    .help,
    .advantages,
    .testimonials,
    .cta-section {
        padding: 90px 0;
    }

    /* ── Page hero — mniejszy padding ── */
    .page-hero {
        padding-top: calc(var(--header-height) + 48px);
        padding-bottom: 56px;
    }

    /* ── About ── */
    .about-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-left {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .about-pull-quote {
        margin-top: 0;
    }

    .about-img-col {
        display: none;
    }

    /* ── Help ── */
    .help-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .help-right {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Testimonials ── */
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    /* ── Footer grid — col1: 100%, cols 2-4: po 1/3 ── */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }

    .footer-grid>div:first-child {
        grid-column: 1 / -1;
    }

    /* ── Page hero decorations ── */
    .phbr-1 {
        width: 520px;
        height: 520px;
    }

    .phbr-2 {
        width: 340px;
        height: 340px;
    }

    .phbr-3 {
        width: 180px;
        height: 180px;
    }

    .entry-page {
        padding: 60px 32px 80px;
    }
}

/* ── 768px ── */
@media (max-width: 768px) {
    .social-icons {
        display: none;
    }

    .header-right .btn-primary {
        display: none;
    }

    .container {
        padding: 0 20px;
    }

    /* ── Mobile menu — 768px (telefon landscape / duży portret) ── */
    .mobile-menu {
        gap: 16px;
    }

    .mobile-link {
        font-size: 1.5rem;
    }

    .mobile-sub-link {
        font-size: 0.95rem;
    }

    /* ── Hero stats ── */
    .hero-stats {
        gap: 24px;
    }

    /* ── Help / Advantages ── */
    .help-right {
        grid-template-columns: 1fr;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .adv-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(184, 150, 90, 0.1);
    }

    .adv-item:last-child {
        border-bottom: none;
    }

    /* ── About ── */
    .about-left {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Footer grid — col1 100%, cols 2-4 po 1/3 ── */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .footer-grid>div:first-child {
        grid-column: 1 / -1;
    }


    /* ── CTA ── */
    .cta-actions {
        flex-direction: column;
    }

    .cta-divider-v {
        display: none;
    }

    /* ── Sekcje — 72px ── */
    .about,
    .services,
    .help,
    .advantages,
    .testimonials,
    .cta-section {
        padding: 72px 0;
    }

    /* ── Page hero — jeszcze mniejszy ── */
    .page-hero {
        padding-top: calc(var(--header-height) + 32px);
        padding-bottom: 40px;
    }

    .phbr-1 {
        width: 380px;
        height: 380px;
    }

    .phbr-2 {
        width: 240px;
        height: 240px;
    }

    .phbr-3 {
        width: 130px;
        height: 130px;
    }

    /* ── Blog / Entry ── */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .entry-page {
        padding: 48px 20px 72px;
    }

    .entry-featured-img {
        max-height: 320px;
        margin-bottom: 32px;
    }

    .entry-content h2 {
        margin-top: 44px;
    }

    .entry-content h3 {
        margin-top: 32px;
    }

    /* ── Paragrafy ACF — odstępy ── */
    .about-text p,
    .help-intro p,
    .entry-content p {
        margin-bottom: 1em;
    }

    .about-text p:last-child,
    .help-intro p:last-child,
    .entry-content p:last-child {
        margin-bottom: 0;
    }

    /* ── Gutenberg alignright ── */
    .wp-block-image .alignright {
        float: none;
        margin: 0 0 1rem 0;
    }   .footer-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 28px;
    }

    .footer-bottom-inner {
        display: flex;
        flex-direction: column;
    }

}

/* ── 576px ── */
@media (max-width: 576px) {

    /* ── Sekcje — 56px ── */
    .about,
    .services,
    .help,
    .advantages,
    .testimonials,
    .cta-section {
        padding: 56px 0;
    }

    .footer-top {
        padding: 52px 0 36px;
    }

    /* ── Page hero — minimalny padding ── */
    .page-hero {
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 28px;
    }

    .page-hero-title {
        font-size: 2rem;
    }

    /* ── Logo ── */
    .logo-name {
        font-size: 15px;
        letter-spacing: 0.04em;
    }

    .logo-tagline {
        font-size: 7.5px;
        letter-spacing: 0;
    }

    /* ── Mobile menu — 576px (telefon portret standard) ── */
    .mobile-menu {
        gap: 14px;
    }

    .mobile-menu .btn-primary {
        width: 80%;
        justify-content: center;
    }

    .mobile-link {
        font-size: 1.4rem;
    }

    .mobile-sub-link {
        font-size: 0.9rem;
    }

    /* ── Przyciski ── */
    .btn-primary,
    .btn-outline {
        margin-left: 0;
        margin-right: 0;
        padding: 10px 18px;
    }

    /* ── CTA phone — 30% mniejszy ── */
    .cta-phone {
        font-size: 21px;
    }

    /* ── About stats — 2 boxy w rzędzie ── */
    .about-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ── Help phone ── */
    .help-phone {
        width: 100%;
    }

    /* ── Footer contact ── */
    .footer-contact-item {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-bottom: 20px;
    }

    .footer-contact-text {
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 28px;
    }

    .footer-bottom-inner {
        display: flex;
        flex-direction: column;
    }

    /* ── Blog ── */
    .blog-card-body {
        padding: 20px 18px 24px;
    }

    .not-found-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .not-found-actions .btn-primary,
    .not-found-actions .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .entry-meta {
        flex-wrap: wrap;
        gap: 6px;
    }

    .search-form-wrap {
        margin-bottom: 40px;
    }

    .page-hero-title--404 {
        font-size: clamp(4.5rem, 22vw, 7rem);
    }
}

/* ── 480px ── */
@media (max-width: 480px) {
    /* ── Mobile menu — małe telefony ── */
    .mobile-menu {
        gap: 12px;
    }

    .mobile-link {
        font-size: 1.25rem;
    }

    .mobile-sub-link {
        font-size: 0.875rem;
    }

    .hero-ctas {
        flex-direction: column;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .about-stats {
        gap: 24px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.8rem;
    }
}

/* ── 340px ── */
@media (max-width: 340px) {
    /* ── Mobile menu — bardzo małe telefony ── */
    .mobile-menu {
        gap: 10px;
    }

    .mobile-link {
        font-size: 1.1rem;
    }

    .mobile-sub-link {
        font-size: 0.825rem;
    }

    .hero-stat-num {
        font-size: 1.4rem;
    }

    .container {
        padding: 0 14px;
    }
}