:root {

    --navy: #06488f;

    --navy-dark: #03356d;

    --blue: #06488f;

    --text: #253342;

    --muted: #526272;

    --line: #d5dfe9;

    --light-blue: #f0f5fb;

    --notice-bg: #fff8eb;

    --notice-accent: #94621c;

    --font: "Segoe UI", Arial, Helvetica, sans-serif;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    font-size: 100%;

    scroll-padding-top: 24px;

}



body {

    margin: 0;

    background: #fff;

    color: var(--text);

    font-family: var(--font);

    font-size: 1.125rem;

    font-weight: 400;

    line-height: 1.65;

}



.container {

    width: min(1120px, calc(100% - 48px));

    margin-inline: auto;

}



a {

    color: var(--blue);

    text-underline-offset: 4px;

    text-decoration-thickness: 1px;

}



a:hover {

    text-decoration: underline;

    text-decoration-thickness: 2px;

}



a:focus-visible {

    outline: 3px solid #b67513;

    outline-offset: 5px;

}



h1,

h2,

h3 {

    margin: 0 0 16px;

    color: var(--navy);

    font-family: var(--font);

    font-weight: 600;

    line-height: 1.25;

    overflow-wrap: anywhere;

}



p {

    margin: 0 0 16px;

}



section,

article {

    scroll-margin-top: 18px;

}





/* =========================================================

   DOSTĘPNOŚĆ

   ========================================================= */



.skip-link {

    position: absolute;

    top: 12px;

    left: 12px;

    z-index: 100;



    padding: 12px 18px;



    background: #fff;



    transform: translateY(-200%);

}



.skip-link:focus {

    transform: translateY(0);

}





/* =========================================================

   NAGŁÓWEK

   ========================================================= */



.site-header {

    background: #fff;

    border-top: 5px solid var(--blue);

}



.header-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;



    gap: 24px;



    padding-block: 24px;

}



.brand {

    min-width: 0;



    color: var(--navy);



    text-decoration: none;

}



.brand:hover {

    text-decoration: none;

}



.brand-title {

    display: block;



    font-size: 1.5rem;

    font-weight: 700;



    line-height: 1.3;

}



.brand-address {

    display: block;



    margin-top: 5px;



    color: var(--muted);



    font-size: .9375rem;

}



.header-phone {

    text-align: right;



    text-decoration: none;

}



.header-phone:hover {

    text-decoration: none;

}



.header-phone span {

    display: block;



    color: var(--muted);



    font-size: .9375rem;

}



.header-phone strong {

    color: var(--navy);



    font-size: 1.5rem;

}





/* =========================================================

   MENU

   ========================================================= */



.navigation {

    background: var(--navy);

}



.navigation ul {

    display: flex;

    flex-wrap: wrap;



    margin: 0;

    padding: 0;



    list-style: none;

}



.navigation a {

    display: block;



    padding: 16px 21px;



    color: #fff;



    font-size: 1rem;

    font-weight: 600;



    text-decoration: none;

}



.navigation a:hover,

.navigation a:focus-visible {

    background: var(--navy-dark);



    text-decoration: underline;

    text-underline-offset: 6px;

}



.navigation a:focus-visible {

    outline-color: #fff;

    outline-offset: -5px;

}



.navigation a[aria-current="page"] {

    background: var(--navy-dark);

}





/* =========================================================

   STRONA GŁÓWNA — GABINET

   ========================================================= */



.intro {

    background: var(--light-blue);



    border-bottom: 1px solid var(--line);

}



.intro-layout {

    display: grid;



    grid-template-columns:

        minmax(0, 1.5fr)

        minmax(0, .85fr)

        minmax(0, 1fr);



    align-items: center;



    gap: 32px;



    padding-block: 48px;

}



.eyebrow {

    margin-bottom: 18px;



    color: var(--blue);



    font-size: .875rem;

    font-weight: 700;



    letter-spacing: .08em;



    text-transform: uppercase;

}



.degree {

    margin-bottom: 6px;



    color: var(--muted);

}



h1 {

    margin-bottom: 24px;



    font-size: clamp(2rem, 3.2vw, 2.625rem);



    letter-spacing: -.025em;



    line-height: 1.2;

}



h1 span {

    display: block;

}



.specializations {

    padding-left: 18px;



    border-left: 3px solid var(--blue);



    font-weight: 600;

}



.specializations p {

    margin: 3px 0;

}



.lead {

    max-width: 530px;



    margin: 24px 0 0;



    color: var(--muted);

}





/* =========================================================

   PORTRET

   ========================================================= */



.doctor-portrait {

    position: relative;



    display: grid;

    place-items: center;



    width: 100%;



    aspect-ratio: 4 / 5;



    margin: 0;



    overflow: hidden;



    background: #fff;



    border: 1px solid #bdcedb;

    border-bottom: 4px solid var(--blue);

}



.doctor-portrait img {

    position: absolute;

    inset: 0;



    display: block;



    width: 100%;

    height: 100%;



    object-fit: cover;

    object-position: center;

}





/* =========================================================

   PRZYJĘCIA

   ========================================================= */



.visit-info {

    min-width: 0;



    padding-left: 30px;



    border-left: 1px solid #bdcedb;

}



.visit-info h2 {

    margin-bottom: 22px;



    font-size: 1.25rem;

}



.visit-info dl {

    margin: 0 0 22px;

}



.visit-info dl > div + div {

    margin-top: 17px;

}



.visit-info dt {

    color: var(--muted);



    font-size: .9375rem;

}



.visit-info dd {

    margin: 3px 0 0;



    font-weight: 600;

}



.visit-phone {

    font-size: 1.5rem;



    text-decoration: none;

}



.text-link {

    font-size: 1rem;

    font-weight: 600;

}





/* =========================================================

   KOMUNIKAT NA STRONIE GŁÓWNEJ

   ========================================================= */



.notice {

    margin-top: 32px;



    padding: 25px 30px;



    background: var(--notice-bg);



    border: 1px solid #e6d6b8;

    border-left: 4px solid var(--notice-accent);

}



.notice .eyebrow {

    margin-bottom: 8px;



    color: #795018;

}



.notice h2 {

    margin-bottom: 10px;



    font-size: clamp(1.25rem, 2.5vw, 1.5rem);

}



.notice p:not(.eyebrow) {

    margin-bottom: 13px;

}



.notice-link {

    font-weight: 600;

}





/* =========================================================

   SPECJALIZACJE

   ========================================================= */



.services {

    padding-block: 48px;



    border-bottom: 1px solid var(--line);

}

/*

.section-heading {

    margin-bottom: 18px;

}



.section-heading .eyebrow {

    margin-bottom: 8px;

}



.section-heading h2 {

    margin-bottom: 0;



    font-size: clamp(1.625rem, 3vw, 2rem);



    letter-spacing: -.02em;

}

*/

.section-heading {

    position: relative;

    margin-bottom: 34px;

    padding-bottom: 18px;

}



.section-heading::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;



    width: 52px;

    height: 3px;



    background: var(--blue);

}



.section-heading .eyebrow {

    margin-bottom: 6px;



    color: var(--muted);



    font-size: .8125rem;

    font-weight: 700;

    letter-spacing: .09em;



    text-transform: uppercase;

}



.section-heading h2 {

    margin: 0;



    color: var(--navy);



    font-size: clamp(1.75rem, 3vw, 2.15rem);

    font-weight: 600;



    letter-spacing: -.025em;

    line-height: 1.2;

}



.services-layout,

.contact-layout {

    display: grid;



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 40px;

}



.services-layout article + article {

    padding-left: 40px;



    border-left: 1px solid var(--line);

}



.services-layout article,

.contact-layout > div {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;



    min-width: 0;

}



.services-layout article {

    min-height: 240px;



    padding-block: 16px;

}



.services-layout article > :last-child {

    margin-bottom: 0;

}



.services h3,

.contact h3 {

    margin-bottom: 14px;



    font-size: 1.25rem;

}



.services p {

    color: var(--muted);

}



.service-list {

    margin: 0;



    padding-left: 21px;

}



.service-list li {

    padding-left: 3px;



    margin-block: 5px;

}



.service-list li::marker {

    color: var(--blue);

}





/* =========================================================

   KONTAKT NA STRONIE GŁÓWNEJ

   ========================================================= */



.contact {

    padding-block: 48px 56px;

}



address {

    font-style: normal;

}



.reception {

    margin: 20px 0 0;



    color: var(--navy);



    font-weight: 600;

}



.contact-main {

    margin-bottom: 18px;

}



.contact-main a {

    font-size: clamp(1.75rem, 4vw, 2.25rem);



    font-weight: 700;



    line-height: 1.3;



    text-decoration: none;

}



.email-label {

    margin-bottom: 3px;



    color: var(--muted);



    font-size: .9375rem;

}



.email {

    overflow-wrap: anywhere;

}





/* =========================================================

   STOPKA

   ========================================================= */



.site-footer {

    background: var(--navy);



    color: #fff;

}



.footer-inner {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;



    gap: 16px 30px;



    padding-block: 25px;



    font-size: .875rem;

}



.footer-links {

    display: flex;

    flex-wrap: wrap;



    gap: 12px 24px;

}



.site-footer a {

    color: #fff;

}





/* =========================================================

   STRONA NARUSZENIA — NAGŁÓWEK

   ========================================================= */



.incident-header {

    background: var(--light-blue);



    border-bottom: 1px solid var(--line);

}



.incident-header-inner {

    padding-block: 48px 44px;

}



.incident-header .eyebrow {

    margin-bottom: 12px;

}



.incident-header h1 {

    max-width: 850px;



    margin: 0;



    font-size: clamp(2rem, 4vw, 2.625rem);

}



.incident-header h1 span {

    display: block;

}



.incident-date {

    margin: 20px 0 0;



    color: var(--muted);



    font-size: .9375rem;

}





/* =========================================================

   STRONA NARUSZENIA — TREŚĆ

   ========================================================= */



.incident-article {

    max-width: 880px;



    padding-block: 48px 64px;

}



.incident-article > section {

    margin-top: 48px;

}



.incident-article h2 {

    margin-bottom: 16px;



    font-size: 1.5rem;

}



.incident-article p {

    max-width: 800px;

}





/* =========================================================

   STRONA NARUSZENIA — WAŻNY KOMUNIKAT

   ========================================================= */



.important-box {

    margin: 0 0 48px;



    padding: 25px 30px;



    background: var(--notice-bg);



    border: 1px solid #e6d6b8;

    border-left: 4px solid var(--notice-accent);

}



.important-box strong {

    display: block;



    margin-bottom: 8px;



    color: var(--navy);



    font-size: 1.125rem;

}



.important-box p {

    margin: 0;

}





/* =========================================================

   STRONA NARUSZENIA — LISTA DANYCH

   ========================================================= */



.data-list {

    margin: 8px 0 22px;



    padding-left: 23px;

}



.data-list li {

    margin-block: 5px;

}



.data-list li::marker {

    color: var(--blue);

}





/* =========================================================

   STRONA NARUSZENIA — ZALECENIA

   ========================================================= */



.recommendations {

    display: grid;



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 16px;



    margin-top: 25px;

}



.recommendation {

    padding: 22px 24px;



    background: var(--light-blue);



    border: 1px solid var(--line);

}



.recommendation strong {

    display: block;



    margin-bottom: 8px;



    color: var(--navy);



    font-size: 1rem;

}



.recommendation p {

    margin: 0;



    color: var(--muted);



    font-size: 1rem;

}





/* =========================================================

   STRONA NARUSZENIA — KONTAKT

   ========================================================= */



.incident-contact {

    padding: 30px;



    background: var(--light-blue);



    border: 1px solid var(--line);

}



.incident-contact .eyebrow {

    margin-bottom: 8px;

}



.incident-contact h2 {

    margin-bottom: 16px;

}



.incident-contact address {

    margin-top: 24px;

}



.incident-phone {

    margin-top: 24px !important;

    margin-bottom: 5px !important;

}



.incident-phone a {

    color: var(--navy);



    font-size: 1.5rem;

    font-weight: 700;



    text-decoration: none;

}



.incident-email {

    margin-bottom: 0;

}



.incident-email a {

    overflow-wrap: anywhere;



    font-weight: 600;

}





/* =========================================================

   STRONA NARUSZENIA — POWRÓT

   ========================================================= */



.incident-back {

    margin-top: 48px;



    padding-top: 25px;



    border-top: 1px solid var(--line);

}



.incident-back a {

    font-weight: 600;

}



.location {

    padding-block: 48px;

    border-bottom: 1px solid var(--line);

}



.location-layout {

    display: grid;

    grid-template-columns: 1.55fr 1fr;

    gap: 32px;

}



.location-photo {

    margin: 0;

    overflow: hidden;

    background: var(--light-blue);

    border: 1px solid var(--line);

}



.location-photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.location-building {

    min-height: 430px;

}



.location-entry {

    display: flex;

    flex-direction: column;

}



.location-entry .location-photo {

    aspect-ratio: 4 / 4;

}



.location-description {

    padding-top: 22px;

}



.location-description h3 {

    margin-bottom: 10px;

    font-size: 1.25rem;

}



.location-description p {

    color: var(--muted);

}



@media (max-width: 700px) {



    .location-layout {

        grid-template-columns: 1fr;

    }



    .location-building {

        min-height: 0;

        aspect-ratio: 4 / 3;

    }

}

/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1000px) {



    .intro-layout {

        grid-template-columns:

            minmax(0, 1.5fr)

            minmax(0, 1fr);



        gap: 30px;



        padding-block: 36px;

    }



    .visit-info {

        grid-column: 1 / -1;



        padding: 25px 0 0;



        border-left: 0;

        border-top: 1px solid #bdcedb;

    }



    .visit-info dl {

        display: flex;

        flex-wrap: wrap;



        gap: 20px 36px;

    }



    .visit-info dl > div + div {

        margin-top: 0;

    }



    .navigation a {

        padding: 13px 16px;

    }



}







/* =========================================================

   TELEFON

   ========================================================= */



@media (max-width: 600px) {



    .container {

        width: calc(100% - 32px);

    }





    /* Nagłówek */



    .header-inner {

        align-items: flex-start;

        flex-direction: column;



        gap: 14px;



        padding-block: 20px;

    }



    .header-phone {

        text-align: left;

    }





    /* Menu */



    .navigation ul {

        padding-block: 6px;

    }



    .navigation a {

        padding: 11px 12px;



        font-size: .9375rem;

    }





    /* Gabinet */



    .intro-layout {

        grid-template-columns: 1fr;

    }



    .doctor-portrait {

        width: min(100%, 280px);



        justify-self: center;

    }





    /* Komunikat strony głównej */



    .notice {

        margin-top: 24px;



        padding: 22px 20px;

    }





    /* Usługi i kontakt */



    .services-layout,

    .contact-layout {

        grid-template-columns: 1fr;



        gap: 28px;

    }



    .services-layout article + article {

        padding: 26px 0 0;



        border-left: 0;

        border-top: 1px solid var(--line);

    }



    .services-layout article {

        min-height: 0;



        padding-block: 0;

    }



    .services,

    .contact {

        padding-block: 36px;

    }





    /* Naruszenie */



    .incident-header-inner {

        padding-block: 34px 32px;

    }



    .incident-article {

        padding-block: 32px 44px;

    }



    .incident-article > section {

        margin-top: 38px;

    }



    .important-box {

        margin-bottom: 38px;



        padding: 22px 20px;

    }



    .recommendations {

        grid-template-columns: 1fr;

    }



    .recommendation {

        padding: 20px;

    }



    .incident-contact {

        padding: 24px 20px;

    }





    /* Stopka */



    .footer-inner,

    .footer-links {

        flex-direction: column;

    }



}
/* Specjalizacje: kardiologia nad medycyną pracy */
.services-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.services-layout article { min-height: 0; padding-block: 0; }
.services-layout article + article { padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.services-layout article p { max-width: 900px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Mapa gabinetu w sekcji kontaktu */
.contact-map { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.contact-map iframe { display: block; width: 100%; height: 420px; border: 1px solid var(--line); background: var(--light-blue); }
.contact-map > p { color: var(--muted); }
.contact-map .map-caption { font-size: .9375rem; margin: 12px 0 0; }
@media (max-width: 600px) { .contact-map iframe { height: 340px; } }