/* =================================
   Single location
================================= */


/* ---------------------------------
   Main
--------------------------------- */

.site-main--location {
    padding-top: 0;
    margin-top: 0;
}


/* ---------------------------------
   Hero
--------------------------------- */

.location-hero {
    --location-hero-offset: 74px;

    position: relative;

    display: flex;

    min-height:
        calc(
            640px
            + var(--location-hero-offset)
        );

    align-items: center;

    margin-top:
        calc(
            var(--location-hero-offset)
            * -1
        );

    overflow: hidden;

    color: #ffffff;

    background-color: #0b2238;
}


/* ---------------------------------
   Tło hero
--------------------------------- */

.location-hero__background {
    position: absolute;
    z-index: 0;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}

.location-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ---------------------------------
   Overlay
--------------------------------- */

.location-hero__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgb(5 24 42 / 86%) 0%,
            rgb(5 24 42 / 70%) 28%,
            rgb(5 24 42 / 34%) 58%,
            rgb(5 24 42 / 10%) 100%
        ),
        linear-gradient(
            0deg,
            rgb(5 24 42 / 30%) 0%,
            transparent 48%
        );

    pointer-events: none;
}


/* ---------------------------------
   Container hero
--------------------------------- */

.location-hero__container {
    position: relative;
    z-index: 2;

    display: flex;

    width:
        min(
            calc(100% - 80px),
            var(--container-wide, 1400px)
        );

    align-items: center;

    padding-top:
        calc(
            190px
            + var(--location-hero-offset)
        );

    padding-right: 0;
    padding-bottom: 90px;
    padding-left: 0;

    margin-right: auto;
    margin-left: auto;
}


/* ---------------------------------
   Content
--------------------------------- */

.location-hero__content {
    width:
        min(
            100%,
            610px
        );
}

.location-hero__title {
    max-width: 560px;

    margin:
        0
        0
        20px;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            4vw,
            66px
        );

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.04em;

    text-wrap: balance;
}


/* ---------------------------------
   Meta
--------------------------------- */

.location-hero__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
}

.location-hero__meta-item {
    display: inline-flex;

    min-height: 34px;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        7px
        12px;

    color: #172334;

    background-color:
        rgb(255 255 255 / 94%);

    border:
        1px solid
        rgb(255 255 255 / 78%);

    border-radius: 8px;

    box-shadow:
        0 5px 16px
        rgb(0 0 0 / 8%);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.15;
}

.location-hero__meta-icon {
    display: inline-flex;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    align-items: center;
    justify-content: center;

    color: #344155;
}

.location-hero__meta-icon svg {
    display: block;

    width: 15px;
    height: 15px;

    max-width: 15px;
    max-height: 15px;
}


/* ---------------------------------
   Opis
--------------------------------- */

.location-hero__description {
    max-width: 530px;

    color:
        rgb(255 255 255 / 92%);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;
}

.location-hero__description p {
    margin:
        0
        0
        12px;
}

.location-hero__description p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------
   Przyciski
--------------------------------- */

.location-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.location-hero__button {
    display: inline-flex;

    min-width: 230px;
    min-height: 50px;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        12px
        24px;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* ---------------------------------
   Primary button
--------------------------------- */

.location-hero .button--primary {
    color: #ffffff;

    background-color:
        var(--color-primary);

    border:
        1px solid
        var(--color-primary);

    box-shadow:
        0 10px 24px
        rgb(227 6 19 / 18%);
}

.location-hero .button--primary:hover,
.location-hero .button--primary:focus-visible {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgb(227 6 19 / 24%);
}


/* ---------------------------------
   Light button
--------------------------------- */

.location-hero .button--light {
    color: #172334;

    background-color:
        rgb(255 255 255 / 96%);

    border:
        1px solid
        rgb(255 255 255 / 90%);

    box-shadow:
        0 8px 22px
        rgb(0 0 0 / 10%);
}

.location-hero .button--light:hover,
.location-hero .button--light:focus-visible {
    background-color: #ffffff;

    transform:
        translateY(-2px);
}

.location-hero__button-arrow {
    display: inline-block;

    transition:
        transform
        0.2s
        ease;
}

.location-hero .button--light:hover
.location-hero__button-arrow,
.location-hero .button--light:focus-visible
.location-hero__button-arrow {
    transform:
        translateX(3px);
}


/* ---------------------------------
   Desktop / mniejsze laptopy
--------------------------------- */

@media (max-width: 1200px) {

    .location-hero {
        min-height:
            calc(
                610px
                + var(--location-hero-offset)
            );
    }

    .location-hero__container {
        width:
            min(
                calc(100% - 64px),
                var(--container-wide, 1400px)
            );

        padding-top:
            calc(
                175px
                + var(--location-hero-offset)
            );

        padding-bottom: 75px;
    }

    .location-hero__content {
        width:
            min(
                100%,
                570px
            );
    }
}


/* ---------------------------------
   Tablet
--------------------------------- */

@media (max-width: 900px) {

    .location-hero {
        --location-hero-offset: 0px;

        min-height: 600px;

        margin-top: 0;
    }

    .location-hero__container {
        width:
            min(
                calc(100% - 48px),
                var(--container-width, 1200px)
            );

        padding-top: 125px;
        padding-bottom: 70px;
    }

    .location-hero__content {
        width:
            min(
                100%,
                600px
            );
    }

    .location-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgb(5 24 42 / 84%) 0%,
                rgb(5 24 42 / 63%) 55%,
                rgb(5 24 42 / 28%) 100%
            ),
            linear-gradient(
                0deg,
                rgb(5 24 42 / 42%) 0%,
                transparent 60%
            );
    }

    .location-hero__title {
        font-size:
            clamp(
                40px,
                7vw,
                58px
            );
    }
}


/* ---------------------------------
   Mobile
--------------------------------- */

@media (max-width: 700px) {

    .location-hero {
        min-height: 670px;

        align-items: flex-end;
    }

    .location-hero__image {
        object-position: center;
    }

    .location-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgb(5 24 42 / 95%) 0%,
                rgb(5 24 42 / 76%) 42%,
                rgb(5 24 42 / 32%) 78%,
                rgb(5 24 42 / 20%) 100%
            );
    }

    .location-hero__container {
        width:
            calc(
                100%
                - 40px
            );

        align-items: flex-end;

        padding-top: 110px;
        padding-bottom: 42px;
    }

    .location-hero__content {
        width: 100%;
    }

    .location-hero__title {
        margin-bottom: 18px;

        font-size:
            clamp(
                38px,
                12vw,
                52px
            );

        line-height: 1;
    }

    .location-hero__meta {
        gap: 6px;
    }

    .location-hero__meta-item {
        min-height: 31px;

        padding:
            6px
            9px;

        font-size: 11px;
    }

    .location-hero__meta-icon {
        width: 14px;
        height: 14px;

        flex-basis: 14px;
    }

    .location-hero__meta-icon svg {
        width: 14px;
        height: 14px;

        max-width: 14px;
        max-height: 14px;
    }

    .location-hero__description {
        max-width: 100%;

        font-size: 14px;

        line-height: 1.55;
    }

    .location-hero__actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 24px;
    }

    .location-hero__button {
        width: 100%;

        min-width: 0;
    }
}


/* ---------------------------------
   Bardzo małe telefony
--------------------------------- */

@media (max-width: 420px) {

    .location-hero__container {
        width:
            calc(
                100%
                - 32px
            );
    }

    .location-hero__meta-item {
        width: max-content;

        max-width: 100%;
    }

    .location-hero__title {
        font-size:
            clamp(
                36px,
                13vw,
                46px
            );
    }
}



/* =================================
   Shared location section heading
================================= */

.location-section-heading {
    margin-bottom: 34px;
}

.location-section-heading__title {
    position: relative;

    width: max-content;
    max-width: 100%;

    padding-bottom: 14px;
    margin: 0;

    color: #172334;

    font-size:
        clamp(
            25px,
            1.7vw,
            31px
        );

    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -0.025em;
}

.location-section-heading__title::after {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 42px;
    height: 3px;

    background-color:
        var(--color-primary);

    border-radius: 999px;

    content: "";
}


/* =================================
   About location
================================= */

.location-about {
    position: relative;

    padding:
        clamp(72px, 7vw, 110px)
        0;

    background-color: #ffffff;
}


/* ---------------------------------
   Layout
--------------------------------- */

.location-about__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(480px, 1.1fr);

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

    align-items: start;
}


/* ---------------------------------
   Text
--------------------------------- */

.location-about__content {
    max-width: 650px;

    color: #4b5563;

    font-size: 15px;
    line-height: 1.75;
}

.location-about__content > *:first-child {
    margin-top: 0;
}

.location-about__content > *:last-child {
    margin-bottom: 0;
}

.location-about__content p {
    margin:
        0
        0
        20px;
}

.location-about__content strong {
    color: #172334;

    font-weight: 700;
}

.location-about__content a {
    color:
        var(--color-primary);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ---------------------------------
   Stats grid
--------------------------------- */

.location-about__stats {
    display: grid;

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

    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        #e4e7eb;

    border-radius: 12px;

    box-shadow:
        0 12px 36px
        rgb(15 23 42 / 5%);
}


/* ---------------------------------
   Stat
--------------------------------- */

.location-stat {
    position: relative;

    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr);

    min-height: 112px;

    align-items: center;

    gap: 17px;

    padding:
        22px
        24px;

    background-color: #ffffff;
}


/*
 * Pionowe separatory.
 */
.location-stat:nth-child(odd) {
    border-right:
        1px solid
        #e4e7eb;
}


/*
 * Poziome separatory.
 *
 * Działa dla układu maks. 6 elementów,
 * czyli 3 rzędy po 2 elementy.
 */
.location-stat:nth-child(-n + 4) {
    border-bottom:
        1px solid
        #e4e7eb;
}


/* ---------------------------------
   Icon
--------------------------------- */

.location-stat__icon {
    display: flex;

    width: 54px;
    height: 54px;

    align-items: center;
    justify-content: center;
}

.location-stat__icon-image {
    display: block;

    width: 48px;
    height: 48px;

    object-fit: contain;
}


/* ---------------------------------
   Text
--------------------------------- */

.location-stat__text {
    color: #263244;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.45;
}


/* =================================
   Responsive
================================= */

@media (max-width: 1100px) {

    .location-about__layout {
        grid-template-columns:
            1fr;

        gap: 46px;
    }

    .location-about__content {
        max-width: 760px;
    }

    .location-about__stats {
        width: 100%;
        max-width: 760px;
    }
}


@media (max-width: 700px) {

    .location-about {
        padding:
            62px
            0;
    }

    .location-section-heading {
        margin-bottom: 28px;
    }

    .location-about__layout {
        gap: 36px;
    }

    .location-about__content {
        font-size: 14px;

        line-height: 1.68;
    }

    .location-about__stats {
        grid-template-columns:
            1fr;

        border-radius: 10px;
    }

    .location-stat {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        min-height: 88px;

        gap: 15px;

        padding:
            18px
            20px;

        border-right: 0 !important;
        border-bottom:
            1px solid
            #e4e7eb;
    }

    .location-stat:last-child {
        border-bottom: 0;
    }

    .location-stat__icon {
        width: 46px;
        height: 46px;
    }

    .location-stat__icon-image {
        width: 40px;
        height: 40px;
    }

    .location-stat__text {
        font-size: 13px;
    }
}


/* =================================
   Location training
================================= */

.location-training {
    padding:
        clamp(72px, 7vw, 110px)
        0;

    background-color: #ffffff;
}


/* ---------------------------------
   Layout
--------------------------------- */

.location-training__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(520px, 1.18fr);

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

    align-items: center;
}


/* ---------------------------------
   Content
--------------------------------- */

.location-training__content {
    max-width: 620px;
}

.location-training__description {
    color: #4b5563;

    font-size: 15px;
    line-height: 1.75;
}

.location-training__description > *:first-child {
    margin-top: 0;
}

.location-training__description > *:last-child {
    margin-bottom: 0;
}

.location-training__description p {
    margin:
        0
        0
        18px;
}


/* ---------------------------------
   Points
--------------------------------- */

.location-training__points {
    display: grid;

    gap: 10px;

    padding: 0;
    margin:
        24px
        0
        0;

    list-style: none;
}

.location-training__point {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #263244;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.5;
}

.location-training__check {
    display: inline-flex;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    color:
        var(--color-primary);
}

.location-training__check svg {
    display: block;

    width: 16px;
    height: 16px;
}


/* ---------------------------------
   Button
--------------------------------- */

.location-training__button {
    display: inline-flex;

    min-height: 46px;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        11px
        20px;

    margin-top: 28px;

    color: #172334;

    background-color: #ffffff;

    border:
        1px solid
        #d9dde3;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.location-training__button:hover,
.location-training__button:focus-visible {
    color:
        var(--color-primary);

    border-color:
        var(--color-primary);

    transform:
        translateY(-2px);
}

.location-training__button-arrow {
    display: inline-block;

    transition:
        transform
        0.2s
        ease;
}

.location-training__button:hover
.location-training__button-arrow,
.location-training__button:focus-visible
.location-training__button-arrow {
    transform:
        translateX(3px);
}


/* ---------------------------------
   Media
--------------------------------- */

.location-training__media {
    overflow: hidden;

    border-radius: 14px;

    background-color: #eef2f6;

    box-shadow:
        0 18px 44px
        rgb(15 23 42 / 8%);
}

.location-training__media picture {
    display: block;
}

.location-training__image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    transition:
        transform
        0.5s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.location-training__media:hover
.location-training__image {
    transform:
        scale(1.025);
}


/* =================================
   Responsive
================================= */

@media (max-width: 1100px) {

    .location-training__layout {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .location-training__content {
        max-width: 760px;
    }

    .location-training__media {
        max-width: 820px;
    }
}


@media (max-width: 700px) {

    .location-training {
        padding:
            62px
            0;
    }

    .location-training__layout {
        gap: 34px;
    }

    .location-training__description {
        font-size: 14px;

        line-height: 1.68;
    }

    .location-training__point {
        font-size: 13px;
    }

    .location-training__button {
        width: 100%;

        min-height: 48px;
    }

    .location-training__media {
        border-radius: 10px;
    }

    .location-training__image {
        aspect-ratio: 4 / 3;
    }
}

/* =================================
   Location meeting point
================================= */

.location-meeting {
    padding:
        clamp(72px, 7vw, 110px)
        0;

    background-color: #ffffff;
}


/* ---------------------------------
   Layout
--------------------------------- */

.location-meeting__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);

    gap:
        clamp(
            54px,
            6vw,
            96px
        );

    align-items: center;
}


/* ---------------------------------
   Media
--------------------------------- */

.location-meeting__media {
    overflow: hidden;

    border-radius: 14px;

    background-color: #eef2f6;

    box-shadow:
        0 16px 40px
        rgb(15 23 42 / 7%);
}

.location-meeting__media picture {
    display: block;
}

.location-meeting__image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}


/* ---------------------------------
   Content
--------------------------------- */

.location-meeting__content {
    max-width: 600px;
}

.location-meeting__place {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #172334;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}

.location-meeting__place-icon {
    display: inline-flex;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    align-items: center;
    justify-content: center;

    color:
        var(--color-primary);
}

.location-meeting__place-icon svg {
    display: block;

    width: 16px;
    height: 16px;
}


/* ---------------------------------
   Description
--------------------------------- */

.location-meeting__description {
    color: #4b5563;

    font-size: 15px;
    line-height: 1.72;
}

.location-meeting__description > *:first-child {
    margin-top: 0;
}

.location-meeting__description > *:last-child {
    margin-bottom: 0;
}

.location-meeting__description p {
    margin:
        0
        0
        18px;
}


/* ---------------------------------
   Notice
--------------------------------- */

.location-meeting__notice {
    display: flex;

    max-width: 420px;

    align-items: center;

    gap: 12px;

    padding:
        15px
        18px;

    margin-top: 24px;

    color: #344155;

    background-color: #f5f7fa;

    border:
        1px solid
        #eceff3;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.45;
}

.location-meeting__notice-icon {
    display: inline-flex;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    align-items: center;
    justify-content: center;

    color: #344155;
}

.location-meeting__notice-icon svg {
    display: block;

    width: 18px;
    height: 18px;
}


/* =================================
   Responsive
================================= */

@media (max-width: 1100px) {

    .location-meeting__layout {
        grid-template-columns: 1fr;

        gap: 44px;
    }

    .location-meeting__media {
        max-width: 820px;
    }

    .location-meeting__content {
        max-width: 760px;
    }
}


@media (max-width: 700px) {

    .location-meeting {
        padding:
            62px
            0;
    }

    .location-meeting__layout {
        gap: 32px;
    }

    .location-meeting__media {
        border-radius: 10px;
    }

    .location-meeting__image {
        aspect-ratio: 4 / 3;
    }

    .location-meeting__description {
        font-size: 14px;

        line-height: 1.65;
    }

    .location-meeting__notice {
        width: 100%;
        max-width: none;

        padding:
            14px
            16px;
    }
}


/* =================================
   Location attractions
================================= */

.location-attractions {
    position: relative;

    padding:
        clamp(78px, 7vw, 110px)
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0c2944 0%,
            #0a2239 48%,
            #071b2e 100%
        );
}


/* delikatne światło w tle */

.location-attractions::before {
    position: absolute;

    top: -180px;
    right: -100px;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgb(255 255 255 / 7%) 0%,
            rgb(255 255 255 / 0%) 70%
        );

    border-radius: 50%;

    content: "";

    pointer-events: none;
}


/* ---------------------------------
   Heading
--------------------------------- */

.location-attractions
.location-section-heading {
    position: relative;
    z-index: 1;
}

.location-attractions
.location-section-heading__title {
    color: #ffffff;
}

.location-attractions
.location-section-heading__title::after {
    background-color:
        var(--color-primary);
}


/* ---------------------------------
   Grid
--------------------------------- */

.location-attractions__grid {
    position: relative;
    z-index: 1;

    display: grid;

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

    margin-top: 8px;

    border-top:
        1px solid
        rgb(255 255 255 / 14%);

    border-bottom:
        1px solid
        rgb(255 255 255 / 14%);
}


/* ---------------------------------
   Attraction
--------------------------------- */

.location-attraction {
    position: relative;

    display: flex;

    min-height: 210px;

    flex-direction: column;

    justify-content: flex-start;

    padding:
        34px
        30px
        32px;

    transition:
        background-color 0.3s ease;
}


/* separator */

.location-attraction:not(:last-child)::after {
    position: absolute;

    top: 24px;
    right: 0;
    bottom: 24px;

    width: 1px;

    background-color:
        rgb(255 255 255 / 12%);

    content: "";
}


/* hover */

.location-attraction:hover {
    background-color:
        rgb(255 255 255 / 4%);
}


/* ---------------------------------
   Icon
--------------------------------- */

.location-attraction__icon {
    display: flex;

    width: 58px;
    height: 58px;

    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background-color:
        rgb(255 255 255 / 9%);

    border:
        1px solid
        rgb(255 255 255 / 13%);

    border-radius: 16px;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease;
}

.location-attraction__icon::after {
    display: none;
}


/* ---------------------------------
   Icon image
--------------------------------- */

.location-attraction__icon-image {
    display: block;

    width: 31px;
    height: 31px;

    max-width: 31px;
    max-height: 31px;

    object-fit: contain;

    /*
     * Jeżeli wrzucasz czarne PNG/SVG,
     * robimy z nich białe.
     */
    filter:
        brightness(0)
        invert(1);

    opacity: 0.94;

    transition:
        transform 0.3s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.location-attraction:hover
.location-attraction__icon {
    background-color:
        rgb(255 255 255 / 13%);

    transform:
        translateY(-3px);
}

.location-attraction:hover
.location-attraction__icon-image {
    transform:
        scale(1.07);
}


/* ---------------------------------
   Content
--------------------------------- */

.location-attraction__content {
    display: flex;

    min-width: 0;

    flex-direction: column;

    justify-content: flex-start;
}


/* ---------------------------------
   Title
--------------------------------- */

.location-attraction__title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            17px,
            1.15vw,
            20px
        );

    font-weight: 750;

    line-height: 1.25;

    letter-spacing: -0.02em;
}


/* ---------------------------------
   Description
--------------------------------- */

.location-attraction__description {
    max-width: 260px;

    margin:
        9px
        0
        0;

    color:
        rgb(255 255 255 / 66%);

    font-size: 13px;

    line-height: 1.55;
}


/* gdy nie ma opisu */

.location-attraction__description:empty {
    display: none;
}


/* ---------------------------------
   Subtelny czerwony akcent
--------------------------------- */

.location-attraction__content::after {
    width: 28px;
    height: 2px;

    margin-top: 18px;

    background-color:
        var(--color-primary);

    border-radius: 999px;

    content: "";

    opacity: 0.85;

    transition:
        width 0.3s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.location-attraction:hover
.location-attraction__content::after {
    width: 46px;
}


/* =================================
   Tablet
================================= */

@media (max-width: 1100px) {

    .location-attractions__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .location-attraction {
        min-height: 190px;
    }

    .location-attraction:nth-child(2n)::after {
        display: none;
    }

    .location-attraction:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgb(255 255 255 / 12%);
    }
}


/* =================================
   Mobile
================================= */

@media (max-width: 700px) {

    .location-attractions {
        padding:
            62px
            0;
    }

    .location-attractions__grid {
        grid-template-columns:
            1fr;

        border-top:
            1px solid
            rgb(255 255 255 / 14%);

        border-bottom:
            1px solid
            rgb(255 255 255 / 14%);
    }

    .location-attraction {
        display: grid;

        grid-template-columns:
            54px
            minmax(0, 1fr);

        min-height: 0;

        align-items: center;

        gap: 17px;

        padding:
            22px
            4px;
    }

    .location-attraction:not(:last-child) {
        border-bottom:
            1px solid
            rgb(255 255 255 / 12%);
    }

    .location-attraction::after {
        display: none !important;
    }


    /* icon */

    .location-attraction__icon {
        width: 54px;
        height: 54px;

        margin-bottom: 0;

        border-radius: 14px;
    }

    .location-attraction__icon-image {
        width: 28px;
        height: 28px;

        max-width: 28px;
        max-height: 28px;
    }


    /* content */

    .location-attraction__title {
        font-size: 16px;
    }

    .location-attraction__description {
        max-width: none;

        margin-top: 5px;

        font-size: 12px;
    }

    .location-attraction__content::after {
        display: none;
    }

    .location-attraction:hover {
        background-color: transparent;
    }

    .location-attraction:hover
    .location-attraction__icon {
        transform: none;
    }

    .location-attraction:hover
    .location-attraction__icon-image {
        transform: none;
    }
}

/* =================================
   Location transport
================================= */

.location-transport {
    position: relative;

    padding:
        clamp(78px, 7vw, 110px)
        0;

    overflow: hidden;

    background-color: #ffffff;
}


/* ---------------------------------
   Layout
--------------------------------- */

.location-transport__layout {
    display: grid;

    grid-template-columns:
        minmax(310px, 0.72fr)
        minmax(0, 1.28fr);

    gap:
        clamp(
            52px,
            5vw,
            78px
        );

    align-items: stretch;
}

.location-transport__layout--without-map {
    grid-template-columns:
        minmax(0, 760px);
}


/* =================================
   Lista dojazdów
================================= */

.location-transport__list {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* ---------------------------------
   Item
--------------------------------- */

.location-transport__item {
    position: relative;

    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    min-height: 105px;

    padding:
        21px
        4px;

    border-bottom:
        1px solid
        #e7eaee;
}

.location-transport__item:first-child {
    border-top:
        1px solid
        #e7eaee;
}


/* ---------------------------------
   Icon
--------------------------------- */

.location-transport__icon {
    display: flex;

    width: 54px;
    height: 54px;

    align-items: center;
    justify-content: center;

    background-color: #f5f7f9;

    border:
        1px solid
        #e5e9ed;

    border-radius: 14px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.location-transport__icon-image {
    display: block;

    width: 29px;
    height: 29px;

    max-width: 29px;
    max-height: 29px;

    object-fit: contain;

    opacity: 0.88;

    transition:
        transform
        0.3s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.location-transport__item:hover
.location-transport__icon {
    background-color: #ffffff;

    border-color: #d8dde3;

    transform:
        translateY(-2px);
}

.location-transport__item:hover
.location-transport__icon-image {
    transform:
        scale(1.06);
}


/* ---------------------------------
   Item content
--------------------------------- */

.location-transport__item-content {
    min-width: 0;
}

.location-transport__item-title {
    margin:
        0
        0
        5px;

    color: #172334;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.015em;
}

.location-transport__item-title:last-child {
    margin-bottom: 0;
}

.location-transport__item-time {
    color: #667080;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;
}


/* =================================
   Map
================================= */

.location-transport__map-wrap {
    position: relative;

    min-width: 0;

    /*
     * Dajemy zapas z lewej strony,
     * w który mapa może wejść na hover.
     */
    padding-left: 0;
}


/* ---------------------------------
   Map container
--------------------------------- */

.location-transport__map {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 470px;

    overflow: hidden;

    background-color: #e9edf1;

    border:
        1px solid
        #dfe4e9;

    border-radius: 18px;

    box-shadow:
        0 18px 48px
        rgb(15 23 42 / 8%);

    transition:
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease,
        border-radius 0.4s ease;
}


/*
 * Delikatny cień po lewej.
 */
.location-transport__map::before {
    position: absolute;
    z-index: 2;

    top: 0;
    bottom: 0;
    left: 0;

    width: 90px;

    background:
        linear-gradient(
            90deg,
            rgb(8 27 46 / 8%) 0%,
            rgb(8 27 46 / 0%) 100%
        );

    content: "";

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;
}


/* ---------------------------------
   Iframe
--------------------------------- */

.location-transport__map iframe {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =================================
   Efekt rozwijania mapy
================================= */

@media (min-width: 1101px) {

    /*
     * Mapa powiększa się tylko w lewo.
     * Lewa kolumna się nie przesuwa,
     * więc tekst nie "skacze".
     */
    .location-transport__map-wrap:hover
    .location-transport__map {
        width:
            calc(
                100%
                + 56px
            );

        margin-left: -56px;

        border-radius: 20px;

        box-shadow:
            0 24px 60px
            rgb(15 23 42 / 14%);
    }

    .location-transport__map-wrap:hover
    .location-transport__map::before {
        opacity: 1;
    }
}


/* =================================
   Tablet
================================= */

@media (max-width: 1100px) {

    .location-transport__layout {
        grid-template-columns:
            1fr;

        gap: 42px;
    }

    .location-transport__list {
        max-width: 760px;
    }

    .location-transport__map-wrap {
        width: 100%;
    }

    .location-transport__map {
        width: 100%;

        min-height: 430px;

        margin-left: 0;
    }
}


/* =================================
   Mobile
================================= */

@media (max-width: 700px) {

    .location-transport {
        padding:
            62px
            0;
    }

    .location-transport__layout {
        gap: 32px;
    }


    /* Transport row */

    .location-transport__item {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        min-height: 88px;

        gap: 15px;

        padding:
            17px
            0;
    }

    .location-transport__icon {
        width: 48px;
        height: 48px;

        border-radius: 12px;
    }

    .location-transport__icon-image {
        width: 26px;
        height: 26px;

        max-width: 26px;
        max-height: 26px;
    }

    .location-transport__item-title {
        font-size: 15px;
    }

    .location-transport__item-time {
        font-size: 12px;

        line-height: 1.45;
    }


    /* Map */

    .location-transport__map {
        min-height: 360px;

        border-radius: 14px;
    }

    .location-transport__map::before {
        display: none;
    }
}


/* =================================
   Small mobile
================================= */

@media (max-width: 420px) {

    .location-transport__map {
        min-height: 320px;
    }
}


/* =================================
   Related locations
================================= */

.location-related {
    position: relative;

    padding:
        clamp(78px, 7vw, 110px)
        0;

    overflow: hidden;

    background-color: #f6f7f9;
}


/* ---------------------------------
   Header
--------------------------------- */

.location-related__header {
    display: flex;

    max-width: 760px;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 38px;
}

.location-related__header
.location-section-heading {
    margin-bottom: 0;
}


/* ---------------------------------
   Grid
--------------------------------- */

/*
 * Korzystamy również z .locations__grid
 * z main.css, więc odziedziczymy obecny
 * układ kart z homepage.
 */
.location-related__grid {
    align-items: stretch;
}


/*
 * Karta w tej sekcji ma wypełniać
 * całą wysokość swojej kolumny.
 */
.location-related__grid
.location-card__link {
    height: 100%;
}


/* ---------------------------------
   Delikatniejsze wejście karty
--------------------------------- */

.location-related__grid
.location-card__link {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.location-related__grid
.location-card__link:hover {
    transform:
        translateY(-5px);
}


/* =================================
   Tablet
================================= */

@media (max-width: 900px) {

    .location-related__header {
        margin-bottom: 32px;
    }
}


/* =================================
   Mobile
================================= */

@media (max-width: 700px) {

    .location-related {
        padding:
            62px
            0;
    }

    .location-related__header {
        margin-bottom: 28px;
    }

    .location-related__grid
    .location-card__link:hover {
        transform: none;
    }
}


/* =================================
   Location hotels
================================= */

.location-hotels {
    position: relative;

    padding:
        clamp(78px, 7vw, 110px)
        0;

    background-color: #ffffff;
}


/* ---------------------------------
   Header
--------------------------------- */

.location-hotels__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 520px);

    gap: 48px;

    align-items: end;

    margin-bottom: 42px;
}

.location-hotels__header
.location-section-heading {
    margin-bottom: 0;
}


/* ---------------------------------
   Description
--------------------------------- */

.location-hotels__description {
    margin: 0;

    color: #667080;

    font-size: 14px;
    line-height: 1.65;
}


/* ---------------------------------
   Cards
--------------------------------- */

.location-hotels__grid {
    align-items: stretch;
}

.location-hotels__grid
.hotel-card {
    height: 100%;
}


/* =================================
   Responsive
================================= */

@media (max-width: 900px) {

    .location-hotels__header {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-bottom: 34px;
    }

    .location-hotels__description {
        max-width: 650px;
    }
}


@media (max-width: 700px) {

    .location-hotels {
        padding:
            62px
            0;
    }

    .location-hotels__header {
        margin-bottom: 28px;
    }

    .location-hotels__description {
        font-size: 13px;
    }
}

/*
 * Google Maps — stan przed lazy load.
 */
.location-transport__map::after {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: 26px;
    height: 26px;

    border:
        2px solid
        rgb(8 39 68 / 14%);

    border-top-color:
        var(--color-primary);

    border-radius: 50%;

    content: "";

    transform:
        translate(-50%, -50%);

    animation:
        location-map-loading
        0.8s
        linear
        infinite;

    pointer-events: none;
}

.location-transport__map.is-map-loaded::after {
    display: none;
}

@keyframes location-map-loading {
    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}