/* ============================================================
   POLISA EDUKACJA – FINAL UI SYSTEM v0.33.0
   Authoritative visual rhythm across every public page.
   Content/copy is untouched. This layer normalizes only layout,
   spacing, typography, hero proportions and responsive behavior.
   ============================================================ */

:root {
    /* One vertical rhythm. Header height and type scale live in pe-base.css. */
    --pe-hero-top-gap: 20px;
    --pe-hero-top-gap-mobile: 16px;
    --pe-hero-bottom-gap: 72px;
    --pe-hero-bottom-gap-mobile: 48px;
    --pe-section-y: 88px;
    --pe-section-y-tablet: 72px;
    --pe-section-y-mobile: 56px;

    --pe-heading-block-gap: 40px;
    --pe-heading-block-gap-mobile: 32px;
    --pe-layout-gap: clamp(40px, 4.5vw, 56px);
    --pe-layout-gap-wide: clamp(44px, 5vw, 64px);
}

/* ============================================================
   GLOBAL READABILITY / INTERACTION
   ============================================================ */
.pe-ui {
    font-size: var(--pe-text-body);
    line-height: 1.6;
}

.pe-ui :is(button, input, select, textarea) {
    font-family: var(--pe-font-sans);
}

.pe-ui p,
.pe-ui li {
    line-height: 1.65;
}

.pe-ui .pe-eyebrow {
    margin-bottom: 12px;
    font-size: var(--pe-text-xs);
    line-height: 1.25;
    font-weight: 600;
}

.pe-ui .pe-material-note {
    margin-bottom: 8px;
    font-size: var(--pe-text-xs);
    line-height: 1.4;
}

.pe-ui .pe-anchor {
    scroll-margin-top: calc(var(--pe-header-height) + 20px);
}

/* ============================================================
   ONE HERO START ACROSS THE ENTIRE SITE
   The first visible content starts exactly the same distance below
   the fixed header on every public page.
   ============================================================ */
.pe-home-hero,
.pe-child-hero,
.pe-student-hero,
.pe-teacher-hero,
.pe-documents-hero,
.pe-agent-hero,
.pe-business-hero,
.pe-legal-hero,
.pe-guide-page .pe-guide__hero {
    padding-top: var(--pe-hero-top-gap) !important;
}

/* Consistent breadcrumb rhythm wherever breadcrumbs exist. */
.pe-child-page .pe-breadcrumbs,
.pe-student-page .pe-breadcrumbs,
.pe-teacher-page .pe-breadcrumbs,
.pe-documents-page .pe-breadcrumbs,
.pe-agent-page .pe-agent-breadcrumbs {
    margin: 0 0 20px !important;
    gap: 8px;
    font-size: var(--pe-text-sm);
    line-height: 1.4;
}

/* ============================================================
   HERO TYPOGRAPHY – ONE SCALE
   ============================================================ */
.pe-home h1,
.pe-child-hero__copy h1,
.pe-student-hero h1,
.pe-teacher-hero h1,
.pe-documents-hero h1,
.pe-agent-hero h1,
.pe-business-hero h1,
.pe-legal-hero h1,
.pe-guide-page .pe-guide__hero h1 {
    font-family: var(--pe-font-display);
    font-size: var(--pe-text-h1) !important;
    font-weight: 500;
    line-height: 1.03 !important;
    letter-spacing: -.035em;
}

.pe-child-hero__copy h1,
.pe-student-hero h1,
.pe-teacher-hero h1 {
    margin: 12px 0 18px !important;
}

.pe-home-hero__lead,
.pe-child-hero__lead,
.pe-student-hero__lead,
.pe-teacher-hero__lead,
.pe-documents-hero__lead,
.pe-agent-hero__lead,
.pe-business-hero__lead,
.pe-legal-hero__lead,
.pe-guide-page .pe-guide__lead {
    font-size: var(--pe-text-lead) !important;
    line-height: 1.62 !important;
}

/* ============================================================
   PRODUCT HEROES – CHILD / STUDENT / TEACHER
   Identical image box, column, alignment and proof-card geometry.
   ============================================================ */
.pe-child-hero,
.pe-student-hero,
.pe-teacher-hero {
    padding-bottom: var(--pe-hero-bottom-gap) !important;
}

.pe-child-hero__grid,
.pe-student-hero__grid,
.pe-teacher-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px) !important;
    gap: clamp(40px, 4.7vw, 56px) !important;
    align-items: start !important;
}

.pe-child-hero__media,
.pe-student-hero__media,
.pe-teacher-hero__media {
    position: relative;
    width: 400px;
    max-width: 100%;
    justify-self: end;
    align-self: start;
    margin: 0 !important;
}

.pe-child-hero__photo,
.pe-student-hero__photo,
.pe-teacher-hero__photo {
    width: 100%;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden;
    border-radius: var(--pe-radius-lg) !important;
    background: var(--pe-mist);
}

.pe-child-hero__photo img,
.pe-student-hero__photo img,
.pe-teacher-hero__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.pe-child-pzu-proof,
.pe-student-pzu-proof,
.pe-teacher-pzu-proof {
    left: -24px !important;
    bottom: 24px !important;
    width: min(360px, calc(100% + 24px)) !important;
    grid-template-columns: 52px 1fr !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: var(--pe-radius) !important;
}

.pe-child-pzu-proof img,
.pe-student-pzu-proof img,
.pe-teacher-pzu-proof img {
    width: 52px !important;
    height: 52px !important;
}

.pe-child-hero__actions,
.pe-student-hero__actions,
.pe-teacher-hero__actions {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    gap: 12px;
}

.pe-child-hero__facts,
.pe-student-hero__facts,
.pe-teacher-hero__facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    margin-top: 24px !important;
    padding: 0 !important;
    border: 1px solid var(--pe-line) !important;
    background: var(--pe-line) !important;
}

.pe-child-hero__facts span,
.pe-student-hero__facts span,
.pe-teacher-hero__facts span {
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 14px 16px !important;
    border: 0 !important;
    background: var(--pe-white) !important;
    color: var(--pe-slate) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.pe-child-hero__facts strong,
.pe-student-hero__facts strong,
.pe-teacher-hero__facts strong {
    color: var(--pe-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.pe-child-hero__eligibility,
.pe-student-hero__eligibility,
.pe-teacher-hero__eligibility {
    margin-top: 14px !important;
    font-size: var(--pe-text-ui) !important;
    line-height: 1.55 !important;
}

/* ============================================================
   HOME HERO
   ============================================================ */
.pe-home-hero {
    padding-bottom: 64px;
}

.pe-home-hero__grid { gap: clamp(40px, 5vw, 64px); }

.pe-home h1 {
    margin-bottom: 20px;
    font-size: var(--pe-text-h1) !important;
}

.pe-home-hero__prompt { margin: 22px 0 12px; }
.pe-home-routes { margin-top: 20px; }

.pe-home-hero__visual,
.pe-home-hero__guide,
.pe-home-hero__motion {
    min-height: 440px;
    padding: 32px;
}

/* ============================================================
   DOCUMENTS / AGENT / BUSINESS / LEGAL / GUIDE HEROES
   ============================================================ */
.pe-documents-hero,
.pe-agent-hero,
.pe-business-hero {
    padding-bottom: var(--pe-hero-bottom-gap) !important;
}

.pe-legal-hero {
    padding-bottom: 48px !important;
}

.pe-guide-page .pe-guide__hero {
    padding-bottom: 36px !important;
}

.pe-documents-hero__grid,
.pe-agent-hero__grid,
.pe-business-hero__grid {
    gap: clamp(36px, 4.5vw, 56px) !important;
    align-items: start;
}

/* The guide search must stick below, not underneath, the fixed header. */
.pe-guide-page .pe-guide__searchbox {
    top: calc(var(--pe-header-height) + 12px) !important;
}

.pe-guide-page .pe-guide__nav {
    top: calc(var(--pe-header-height) + 104px) !important;
}

.pe-guide-page .pe-guide__qa {
    scroll-margin-top: calc(var(--pe-header-height) + 124px) !important;
}

/* ============================================================
   LAYOUT GAPS – ONE FAMILY OF TWO-COLUMN SPACING
   ============================================================ */
.pe-home-business-entry__grid,
.pe-home-important__grid,
.pe-home-faq__grid,
.pe-home-segment,
.pe-child-beyond__grid,
.pe-child-explain__grid,
.pe-child-health__grid,
.pe-child-agent__grid,
.pe-child-buy__top,
.pe-child-final__grid,
.pe-student-life__grid,
.pe-student-oc-explain__grid,
.pe-student-buy__card,
.pe-student-faq__grid,
.pe-student-dedicated__grid,
.pe-student-final__grid,
.pe-teacher-work__grid,
.pe-teacher-oc-explain__grid,
.pe-teacher-lead__grid,
.pe-teacher-faq__grid,
.pe-teacher-final__grid,
.pe-business-boundary__grid,
.pe-business-kit__grid,
.pe-business-form-section__grid,
.pe-business-faq__grid,
.pe-documents-priority__grid,
.pe-documents-oc-note__grid,
.pe-documents-final__grid,
.pe-agent-layout,
.pe-agent-docs__head,
.pe-legal-layout {
    gap: var(--pe-layout-gap-wide) !important;
}

/* ============================================================
   SECTION RHYTHM – EVERY PUBLIC PAGE
   ============================================================ */
.pe-home-section,
.pe-child-section,
.pe-child-beyond,
.pe-student-section,
.pe-student-difference,
.pe-student-life,
.pe-teacher-section,
.pe-teacher-difference,
.pe-teacher-work,
.pe-documents-priority,
.pe-documents-section,
.pe-documents-oc-note,
.pe-documents-proposals,
.pe-agent-section,
.pe-business-section {
    padding-top: var(--pe-section-y) !important;
    padding-bottom: var(--pe-section-y) !important;
}

/* Final / closing sections remain visually distinct but obey the same rhythm. */
.pe-child-final,
.pe-student-final,
.pe-teacher-final,
.pe-documents-final,
.pe-agent-disclosure,
.pe-agent-contact,
.pe-legal-contact {
    padding-top: 64px;
    padding-bottom: 64px;
}

.pe-legal-highlights {
    padding-top: 40px !important;
    padding-bottom: 64px !important;
}

.pe-legal-main {
    padding-top: 72px !important;
    padding-bottom: var(--pe-section-y) !important;
}

.pe-guide-page .pe-guide__main {
    padding-top: 48px !important;
    padding-bottom: 72px !important;
}

/* Section titles use one scale, regardless of page history. */
.pe-home h2,
.pe-child-heading h2,
.pe-child-explain h2,
.pe-child-health h2,
.pe-child-agent h2,
.pe-child-faq h2,
.pe-child-buy h2,
.pe-student-heading h2,
.pe-student-life h2,
.pe-student-oc-explain h2,
.pe-student-sport h2,
.pe-student-buy h2,
.pe-student-agent h2,
.pe-student-faq h2,
.pe-student-final h2,
.pe-teacher-heading h2,
.pe-teacher-work h2,
.pe-teacher-oc-explain h2,
.pe-teacher-lead h2,
.pe-teacher-faq h2,
.pe-teacher-final h2,
.pe-business-heading h2,
.pe-business-boundary h2,
.pe-business-kit h2,
.pe-business-form-section h2,
.pe-business-faq h2,
.pe-agent-section__intro h2,
.pe-agent-docs__head h2,
.pe-agent-disclosure__box h2,
.pe-agent-contact__box h2,
.pe-guide-page .pe-guide__heading h2 {
    font-family: var(--pe-font-display);
    font-size: var(--pe-text-h2) !important;
    font-weight: 500;
    line-height: 1.08 !important;
    letter-spacing: -.03em;
}

.pe-home-heading,
.pe-child-heading,
.pe-student-heading,
.pe-teacher-heading,
.pe-business-heading,
.pe-documents-heading,
.pe-agent-section__intro {
    margin-bottom: var(--pe-heading-block-gap) !important;
}

.pe-child-heading > p:last-child,
.pe-student-heading p:last-child,
.pe-teacher-heading p:last-child {
    margin-top: 16px;
    font-size: 17px !important;
    line-height: 1.65 !important;
}


/* One heading rhythm across reusable section headers. */
.pe-home-heading h2,
.pe-child-heading h2,
.pe-student-heading h2,
.pe-teacher-heading h2,
.pe-business-heading h2,
.pe-documents-heading h2,
.pe-agent-section__intro h2 {
    margin: 0 0 16px !important;
}

.pe-home-heading > p:last-child,
.pe-child-heading > p:last-child,
.pe-student-heading > p:last-child,
.pe-teacher-heading > p:last-child,
.pe-business-heading > p:last-child,
.pe-documents-heading > p:last-child,
.pe-agent-section__intro > p:last-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

/* Legal pages: avoid double spacing (padding + margin) between sections. */
.pe-legal-section {
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
}

.pe-legal-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Legal page headings need a smaller editorial step than landing H2. */
.pe-legal-section h2 {
    font-size: clamp(30px, 3.2vw, 42px) !important;
    line-height: 1.1 !important;
}

.pe-legal-section :is(p, ul) {
    font-size: 15px;
    line-height: 1.72;
}


/* Readability floor for meaningful microcopy. */
.pe-ui :is(
    .pe-material-note,
    .pe-agent-person__label,
    .pe-agent-doc__type,
    .pe-business-flow__kicker,
    .pe-business-flow__badge,
    .pe-business-process__num,
    .pe-guide__source,
    .pe-guide__footnote,
    .pe-home-route__body small,
    .pe-home-value-item__num,
    .pe-home-segment__num,
    .pe-home-important__items article > span,
    .pe-home-steps span,
    .pe-legal-toc strong,
    .pe-student-progress__steps span,
    .pe-student-progress__steps small,
    .pe-teacher-selected > span
) {
    font-size: 12px !important;
    line-height: 1.35;
}

/* ============================================================
   FOOTER / MICROCOPY FLOOR
   ============================================================ */
#pe-site-footer .pe-footer__main { padding-top: 56px; }

#pe-site-footer :is(.pe-footer__about, .pe-footer__links a, .pe-footer__agent-meta, .pe-footer__contact a) {
    line-height: 1.55;
}

#pe-site-footer :is(.pe-footer__trust-copy small, .pe-footer__agent-kicker, .pe-footer__legal-copy, .pe-footer__bottom),
.pe-guide-page .pe-guide__qa summary small,
.pe-legal-highlight small,
.pe-legal-tool small,
.pe-legal-fact small,
.pe-legal-number,
.pe-legal-toc strong,
.pe-home-path__sums small,
.pe-home-motion__kicker {
    font-size: var(--pe-text-xs) !important;
    line-height: 1.3;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 980px) {
    .pe-home-hero,
    .pe-child-hero,
    .pe-student-hero,
    .pe-teacher-hero,
    .pe-documents-hero,
    .pe-agent-hero,
    .pe-business-hero,
    .pe-legal-hero,
    .pe-guide-page .pe-guide__hero {
        padding-top: var(--pe-hero-top-gap-mobile) !important;
    }

    .pe-child-hero__grid,
    .pe-student-hero__grid,
    .pe-teacher-hero__grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .pe-child-hero__media,
    .pe-student-hero__media,
    .pe-teacher-hero__media {
        width: min(100%, 420px) !important;
        max-width: 420px !important;
        justify-self: start !important;
    }

    .pe-child-pzu-proof,
    .pe-student-pzu-proof,
    .pe-teacher-pzu-proof {
        left: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: 360px;
    }

    .pe-home-hero__grid,
    .pe-documents-hero__grid,
    .pe-agent-hero__grid,
    .pe-business-hero__grid {
        gap: 40px !important;
    }

    .pe-home-business-entry__grid,
    .pe-home-important__grid,
    .pe-home-faq__grid,
    .pe-home-segment,
    .pe-child-beyond__grid,
    .pe-child-explain__grid,
    .pe-child-health__grid,
    .pe-child-agent__grid,
    .pe-child-buy__top,
    .pe-child-final__grid,
    .pe-student-life__grid,
    .pe-student-oc-explain__grid,
    .pe-student-buy__card,
    .pe-student-faq__grid,
    .pe-student-dedicated__grid,
    .pe-student-final__grid,
    .pe-teacher-work__grid,
    .pe-teacher-oc-explain__grid,
    .pe-teacher-lead__grid,
    .pe-teacher-faq__grid,
    .pe-teacher-final__grid,
    .pe-business-boundary__grid,
    .pe-business-kit__grid,
    .pe-business-form-section__grid,
    .pe-business-faq__grid,
    .pe-documents-priority__grid,
    .pe-documents-oc-note__grid,
    .pe-documents-final__grid,
    .pe-agent-layout,
    .pe-agent-docs__head,
    .pe-legal-layout {
        gap: 40px !important;
    }

    .pe-home-section,
    .pe-child-section,
    .pe-child-beyond,
    .pe-student-section,
    .pe-student-difference,
    .pe-student-life,
    .pe-teacher-section,
    .pe-teacher-difference,
    .pe-teacher-work,
    .pe-documents-priority,
    .pe-documents-section,
    .pe-documents-oc-note,
    .pe-documents-proposals,
    .pe-agent-section,
    .pe-business-section {
        padding-top: var(--pe-section-y-tablet) !important;
        padding-bottom: var(--pe-section-y-tablet) !important;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
    .pe-home-hero,
    .pe-child-hero,
    .pe-student-hero,
    .pe-teacher-hero,
    .pe-documents-hero,
    .pe-agent-hero,
    .pe-business-hero,
    .pe-legal-hero,
    .pe-guide-page .pe-guide__hero {
        padding-top: var(--pe-hero-top-gap-mobile) !important;
    }

    .pe-child-hero,
    .pe-student-hero,
    .pe-teacher-hero,
    .pe-documents-hero,
    .pe-agent-hero,
    .pe-business-hero {
        padding-bottom: var(--pe-hero-bottom-gap-mobile) !important;
    }

    .pe-home-hero { padding-bottom: 48px; }
    .pe-legal-hero { padding-bottom: 36px !important; }
    .pe-guide-page .pe-guide__hero { padding-bottom: 28px !important; }

    .pe-child-page .pe-breadcrumbs,
    .pe-student-page .pe-breadcrumbs,
    .pe-teacher-page .pe-breadcrumbs,
    .pe-documents-page .pe-breadcrumbs,
    .pe-agent-page .pe-agent-breadcrumbs {
        margin-bottom: 16px !important;
    }

    .pe-home h1,
    .pe-child-hero__copy h1,
    .pe-student-hero h1,
    .pe-teacher-hero h1,
    .pe-documents-hero h1,
    .pe-agent-hero h1,
    .pe-business-hero h1,
    .pe-legal-hero h1,
    .pe-guide-page .pe-guide__hero h1 {
        font-size: clamp(38px, 11vw, 48px) !important;
        line-height: 1.04 !important;
    }

    .pe-home h2,
    .pe-child-heading h2,
    .pe-child-explain h2,
    .pe-child-health h2,
    .pe-child-agent h2,
    .pe-child-faq h2,
    .pe-child-buy h2,
    .pe-student-heading h2,
    .pe-student-life h2,
    .pe-student-oc-explain h2,
    .pe-student-sport h2,
    .pe-student-buy h2,
    .pe-student-agent h2,
    .pe-student-faq h2,
    .pe-student-final h2,
    .pe-teacher-heading h2,
    .pe-teacher-work h2,
    .pe-teacher-oc-explain h2,
    .pe-teacher-lead h2,
    .pe-teacher-faq h2,
    .pe-teacher-final h2,
    .pe-guide-page .pe-guide__heading h2,
    .pe-business-heading h2,
    .pe-business-boundary h2,
    .pe-business-kit h2,
    .pe-business-form-section h2,
    .pe-business-faq h2,
    .pe-agent-section__intro h2,
    .pe-agent-docs__head h2,
    .pe-agent-disclosure__box h2,
    .pe-agent-contact__box h2 {
        font-size: clamp(30px, 8.8vw, 36px) !important;
        line-height: 1.1 !important;
    }

    .pe-home-hero__lead,
    .pe-child-hero__lead,
    .pe-student-hero__lead,
    .pe-teacher-hero__lead,
    .pe-documents-hero__lead,
    .pe-agent-hero__lead,
    .pe-business-hero__lead,
    .pe-legal-hero__lead,
    .pe-guide-page .pe-guide__lead {
        font-size: 17px !important;
        line-height: 1.62 !important;
    }

    .pe-child-hero__grid,
    .pe-student-hero__grid,
    .pe-teacher-hero__grid {
        gap: 32px !important;
    }

    .pe-child-hero__media,
    .pe-student-hero__media,
    .pe-teacher-hero__media {
        width: 100% !important;
        max-width: 420px !important;
    }

    .pe-home-business-entry__grid,
    .pe-home-important__grid,
    .pe-home-faq__grid,
    .pe-home-segment,
    .pe-child-beyond__grid,
    .pe-child-explain__grid,
    .pe-child-health__grid,
    .pe-child-agent__grid,
    .pe-child-buy__top,
    .pe-child-final__grid,
    .pe-student-life__grid,
    .pe-student-oc-explain__grid,
    .pe-student-buy__card,
    .pe-student-faq__grid,
    .pe-student-dedicated__grid,
    .pe-student-final__grid,
    .pe-teacher-work__grid,
    .pe-teacher-oc-explain__grid,
    .pe-teacher-lead__grid,
    .pe-teacher-faq__grid,
    .pe-teacher-final__grid,
    .pe-business-boundary__grid,
    .pe-business-kit__grid,
    .pe-business-form-section__grid,
    .pe-business-faq__grid,
    .pe-documents-priority__grid,
    .pe-documents-oc-note__grid,
    .pe-documents-final__grid,
    .pe-agent-layout,
    .pe-agent-docs__head,
    .pe-legal-layout {
        gap: 28px !important;
    }

    .pe-home-section,
    .pe-child-section,
    .pe-child-beyond,
    .pe-student-section,
    .pe-student-difference,
    .pe-student-life,
    .pe-teacher-section,
    .pe-teacher-difference,
    .pe-teacher-work,
    .pe-documents-priority,
    .pe-documents-section,
    .pe-documents-oc-note,
    .pe-documents-proposals,
    .pe-agent-section,
    .pe-business-section {
        padding-top: var(--pe-section-y-mobile) !important;
        padding-bottom: var(--pe-section-y-mobile) !important;
    }

    .pe-home-heading,
    .pe-child-heading,
    .pe-student-heading,
    .pe-teacher-heading,
    .pe-business-heading,
    .pe-documents-heading,
    .pe-agent-section__intro {
        margin-bottom: var(--pe-heading-block-gap-mobile) !important;
    }

    .pe-home-hero__visual,
    .pe-home-hero__guide,
    .pe-home-hero__motion {
        min-height: 0;
        padding: 24px;
    }

    .pe-guide-page .pe-guide__searchbox {
        position: static !important;
        margin-top: 20px;
    }
}