/* =========================================================
   MOBILE.CSS
   Adaptación exclusiva para móviles.
   NO afecta al escritorio.
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    main,
    section,
    article,
    figure {
        max-width: 100%;
    }

    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* Quiénes somos */
    .about-section {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .about-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .about-layout > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .about-image,
    .about-image img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .about-image img {
        height: auto;
        object-fit: cover;
    }

    /* Texto */
    p,
    h1,
    h2,
    h3,
    h4 {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* Portada en vertical: la foto entera en una banda superior, para que se lean
   POLICÍA y GUARDIA CIVIL (a pantalla completa solo se veía el centro). */
@media (max-width: 900px) and (orientation: portrait) {
    .home-hero {
        align-items: flex-start;
        padding-top: 50vw;
        background-color: #07152d;
        background-image:
            linear-gradient(
                to bottom,
                rgba(7, 21, 45, 0) 0,
                rgba(7, 21, 45, 0) 40vw,
                #07152d 66.67vw
            ),
            url("/static/img/eventos/2025/cabecera-policia-y-guardia-civil.webp");
        background-size: 100% 100%, 100% auto;
        background-position: top center, top center;
    }

    .home-hero .hero-overlay,
    .home-hero::after {
        display: none;
    }

    .home-hero .hero-content {
        padding-top: 0;
        padding-bottom: 80px;
    }

    .home-hero .hero-logo {
        width: min(110px, 30vw);
        margin-bottom: 10px;
    }
}

/* Contacto: el correo largo no debe ensanchar la columna en pantallas muy estrechas. */
@media (max-width: 900px) {
    .contact-layout > * {
        min-width: 0;
    }

    .contact-layout a[href^="mailto:"] {
        overflow-wrap: anywhere;
    }
}