/* ==========================================================================
   LANDINGS DE CIUDAD - EUROFREETOUR
   ========================================================================== */

.eft-city-not-found {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding:
        150px
        24px
        80px;

    background:
        linear-gradient(
            145deg,
            #fff7f9,
            #ffffff 55%,
            #f7f8fc
        );
}

.eft-city-not-found__section {
    width: 100%;
}

.eft-city-not-found__container {
    width: min(100%, 780px);

    margin: 0 auto;
    padding:
        clamp(38px, 6vw, 72px);

    border:
        1px solid rgba(23, 29, 43, 0.08);
    border-radius: 32px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 30px 80px rgba(23, 29, 43, 0.1);

    text-align: center;
}

.eft-city-not-found__icon {
    width: 88px;
    height: 88px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 26px;

    background:
        rgba(244, 37, 79, 0.08);

    color:
        #f4254f;
}

.eft-city-not-found__icon svg {
    width: 48px;
    height: 48px;

    stroke:
        currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eft-city-not-found__eyebrow {
    display: block;

    margin-bottom: 10px;

    color:
        #f4254f;

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eft-city-not-found h1 {
    margin: 0;

    color:
        #171d2b;

    font-size:
        clamp(2rem, 5vw, 3.7rem);

    line-height: 1.08;
    letter-spacing: -0.045em;
}

.eft-city-not-found p {
    max-width: 570px;

    margin:
        20px
        auto
        0;

    color:
        #737d90;

    font-size: 1rem;
    line-height: 1.75;
}

.eft-city-not-found__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}

.eft-city-not-found__actions .eft-btn {
    min-width: 190px;
}

@media (max-width: 560px) {

    .eft-city-not-found {
        padding:
            120px
            16px
            50px;
    }

    .eft-city-not-found__container {
        padding:
            38px
            22px;

        border-radius: 24px;
    }

    .eft-city-not-found__actions {
        flex-direction: column;
    }

    .eft-city-not-found__actions .eft-btn {
        width: 100%;
    }
}

/* ==========================================================================
   HERO DE CIUDAD
   --------------------------------------------------------------------------
   La base visual proviene de assets/css/tour/hero.css.
   Aquí solo se adapta el componente al contexto de una ciudad.
   ========================================================================== */

.eft-city-hero {
    min-height: 820px;
}

.eft-city-hero__media picture {
    width: 100%;
    height: 100%;

    display: block;
}

.eft-city-hero__media picture img {
    width: 100%;
    height: 100%;

    display: block;

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

.eft-city-hero__layout {
    grid-template-columns:
        minmax(0, 820px);

    justify-content: start;
}

.eft-city-hero__meta {
    max-width: 760px;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {

    .eft-city-hero {
        min-height: 760px;
    }

    .eft-city-hero__layout {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   MÓVIL
   ========================================================================== */

@media (max-width: 760px) {

    .eft-city-hero {
        min-height: 780px;

        align-items: flex-end;

        padding:
            130px
            0
            64px;
    }

    .eft-city-hero .eft-tour-container {
        width: min(100% - 32px, 1380px);
    }

    .eft-city-hero .eft-tour-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(7, 13, 25, 0.22) 0%,
                rgba(7, 13, 25, 0.62) 38%,
                rgba(7, 13, 25, 0.96) 100%
            );
    }

    .eft-city-hero .eft-tour-hero__badges {
        margin-bottom: 22px;
    }

    .eft-city-hero .eft-tour-hero__description {
        font-size: 1rem;
        line-height: 1.65;
    }

    .eft-city-hero__meta {
        grid-template-columns: 1fr;

        margin-top: 32px;
    }

    .eft-city-hero .eft-tour-hero__actions {
        flex-direction: column;

        margin-top: 34px;
    }

    .eft-city-hero .eft-tour-btn {
        width: 100%;
    }
}


/* ==========================================================================
   MÓVIL PEQUEÑO
   ========================================================================== */

@media (max-width: 420px) {

    .eft-city-hero {
        min-height: 820px;
    }

    .eft-city-hero h1 {
        font-size:
            clamp(
                2.25rem,
                12vw,
                3.15rem
            );
    }

    .eft-city-hero
    .eft-tour-hero__meta-item {
        padding: 15px;
        border-radius: 18px;
    }
}

/* ==========================================================================
   SECCIÓN DE TOURS DE LA CIUDAD
   --------------------------------------------------------------------------
   Organiza el componente reutilizable tour-card.php únicamente dentro
   de la landing pública de ciudad.

   No modifica:
   - assets/css/tour-card.css
   - tarjetas del home
   - sliders públicos
   ========================================================================== */


/* ==========================================================================
   01. SECCIÓN PRINCIPAL
   ========================================================================== */

.eft-city-page .eft-city-tours {
    position: relative;

    width: 100%;

    padding:
        clamp(72px, 8vw, 112px)
        0;

    background:
        linear-gradient(
            180deg,
            #f7f8fc 0%,
            #ffffff 45%,
            #f7f8fc 100%
        );

    overflow: hidden;
}


/* ==========================================================================
   02. CONTENEDOR REUTILIZABLE DE CIUDAD
   ========================================================================== */

.eft-city-page .eft-city-container {
    width: min(
        calc(100% - 48px),
        1240px
    );

    margin:
        0
        auto;
}


/* ==========================================================================
   03. ENCABEZADO DE LA SECCIÓN
   ========================================================================== */

.eft-city-page .eft-city-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 32px;

    margin-bottom:
        clamp(34px, 5vw, 54px);
}

.eft-city-page .eft-city-section-header__copy {
    max-width: 760px;
}

.eft-city-page .eft-city-section-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #f4254f;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eft-city-page .eft-city-section-header h2 {
    margin: 0;

    color: #111827;

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

    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.eft-city-page .eft-city-section-header p {
    max-width: 680px;

    margin:
        18px
        0
        0;

    color: #6f7889;

    font-size: 1rem;
    line-height: 1.75;
}

.eft-city-page .eft-city-section-header__count {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        18px;

    border:
        1px solid rgba(244, 37, 79, 0.16);
    border-radius: 999px;

    background:
        rgba(244, 37, 79, 0.07);

    color: #f4254f;

    font-size: 0.86rem;
    font-weight: 800;
}


/* ==========================================================================
   04. GRID DE TOURS
   ========================================================================== */

.eft-city-page .eft-city-tours__grid {
    display: grid;

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

    align-items: stretch;

    gap:
        clamp(20px, 2.5vw, 30px);
}


/* ==========================================================================
   05. CONTENEDOR INDIVIDUAL
   ========================================================================== */

.eft-city-page .eft-city-tours__item {
    min-width: 0;
    height: 100%;
}


/* ==========================================================================
   06. ADAPTACIÓN CONTEXTUAL DE TOUR CARD
   --------------------------------------------------------------------------
   Estas reglas solamente se aplican dentro de .eft-city-page.
   El componente del home conserva exactamente su comportamiento.
   ========================================================================== */

.eft-city-page
.eft-city-tours__item
.eft-tour-card {
    width: 100%;
    min-width: 0;
    max-width: none;

    height: 100%;
    min-height: 540px;

    flex:
        none;
}

.eft-city-page
.eft-city-tours__item
.eft-tour-card__content {
    width: 100%;
}


/* Evita que títulos largos rompan la distribución */

.eft-city-page
.eft-city-tours__item
.eft-tour-card__title {
    overflow-wrap: anywhere;
}


/* ==========================================================================
   07. ESTADO VACÍO
   ========================================================================== */

.eft-city-page .eft-city-tours__empty {
    width: min(100%, 760px);

    margin: 0 auto;

    padding:
        clamp(42px, 6vw, 68px);

    border:
        1px dashed rgba(244, 37, 79, 0.24);
    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 26px 70px rgba(17, 24, 39, 0.08);

    text-align: center;
}

.eft-city-page .eft-city-tours__empty-icon {
    width: 82px;
    height: 82px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 24px;

    background:
        rgba(244, 37, 79, 0.08);

    color: #f4254f;
}

.eft-city-page .eft-city-tours__empty-icon svg {
    width: 44px;
    height: 44px;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eft-city-page .eft-city-tours__empty h3 {
    margin: 0;

    color: #111827;

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

    line-height: 1.2;
}

.eft-city-page .eft-city-tours__empty p {
    max-width: 560px;

    margin:
        16px
        auto
        28px;

    color: #737d90;

    line-height: 1.7;
}


/* ==========================================================================
   08. TABLET
   ========================================================================== */

@media (max-width: 1050px) {

    .eft-city-page .eft-city-tours__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .eft-city-page
    .eft-city-tours__item
    .eft-tour-card {
        min-height: 540px;
    }
}


/* ==========================================================================
   09. TABLET PEQUEÑA
   ========================================================================== */

@media (max-width: 760px) {

    .eft-city-page .eft-city-tours {
        padding:
            68px
            0;
    }

    .eft-city-page .eft-city-container {
        width:
            min(
                calc(100% - 32px),
                1240px
            );
    }

    .eft-city-page .eft-city-section-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;

        margin-bottom: 34px;
    }

    .eft-city-page .eft-city-section-header__count {
        align-self: flex-start;
    }

    .eft-city-page .eft-city-tours__grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .eft-city-page
    .eft-city-tours__item
    .eft-tour-card {
        min-height: 560px;
    }
}


/* ==========================================================================
   10. MÓVIL PEQUEÑO
   ========================================================================== */

@media (max-width: 420px) {

    .eft-city-page .eft-city-container {
        width:
            min(
                calc(100% - 24px),
                1240px
            );
    }

    .eft-city-page .eft-city-section-header h2 {
        font-size:
            clamp(
                1.9rem,
                10vw,
                2.45rem
            );
    }

    .eft-city-page
    .eft-city-tours__item
    .eft-tour-card {
        min-height: 540px;
        border-radius: 20px;
    }

    .eft-city-page .eft-city-tours__empty {
        padding:
            38px
            22px;

        border-radius: 24px;
    }
}