/*
 * mobile.css — Media queries mobile-first
 * Breakpoints: 375px (base), 768px (tablet), 1024px (desktop)
 * Depende de: style.css + components.css
 */

/* =============================================================================
   BASE MOBILE — 375px (diseño raíz, sin media query)
   Todo el código fuera de @media es mobile-first.
   ============================================================================= */

/* Layout: una sola columna en mobile */
.pcs-container {
    --pcs-gutter: 1rem;
}

/* El grid de datos ocupa toda la anchura en mobile */
.pcs-beach-data__grid {
    grid-template-columns: 1fr 1fr;
}

/* Servicios: 2 columnas en mobile */
.pcs-services-grid {
    grid-template-columns: 1fr 1fr;
}

/* Hero: más compacto en mobile */
.pcs-beach-hero {
    min-height: 280px;
}

.pcs-beach-hero__contenido {
    padding: 1.5rem 1rem;
}

/* El filtro muestra el toggle en mobile */
.pcs-filter-bar__toggle {
    display: flex;
}

/* En mobile el panel está oculto (JS lo controla) */
.pcs-filter-bar__panel {
    display: none;
}

/* Tarjeta: anchura completa en mobile */
.pcs-beach-card {
    width: 100%;
}

/* Grids de tarjetas: una columna en mobile */
.pcs-grid-playas {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.25rem;
}

/* Contenido + sidebar: stack en mobile */
.pcs-layout-content-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            2rem;
}

/* AdSense: ocultar sidebar en mobile (evitar reflow) */
.pcs-adsense-unit--sidebar {
    position: static;
}

/* Mapa: aspect-ratio más cuadrado en mobile */
.pcs-map-container {
    aspect-ratio: 4 / 3;
}

/* Booking / GYG widgets: padding reducido en mobile */
.pcs-booking-widget,
.pcs-gyg-widget {
    padding: 1.25rem 1rem;
}

/* Datos de playa: padding reducido */
.pcs-beach-data {
    padding: 1.25rem 1rem;
}

/* Hero badges: wrapping en móvil */
.pcs-beach-hero__badges {
    gap: 0.35rem;
}

/* Ocultar meta de card en móvil muy pequeño para ganar espacio */
@media (max-width: 374px) {
    .pcs-beach-card__meta {
        display: none;
    }
}

/* =============================================================================
   TABLET — 768px
   ============================================================================= */

@media (min-width: 768px) {

    /* Contenedor con más margen */
    .pcs-container {
        --pcs-gutter: 1.5rem;
    }

    /* Tarjetas: 2 columnas */
    .pcs-grid-playas {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Datos de playa: 3-4 columnas */
    .pcs-beach-data__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Servicios: 3 columnas en tablet */
    .pcs-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero más alto */
    .pcs-beach-hero {
        min-height: 400px;
    }

    .pcs-beach-hero__contenido {
        padding: 2.5rem 1.5rem;
        max-width: var(--pcs-max-width);
        margin:   0 auto;
        width:    100%;
    }

    /* Filtros: panel visible sin toggle en tablet */
    .pcs-filter-bar__toggle {
        display: none;
    }

    .pcs-filter-bar__panel {
        display:        flex;
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            0.75rem;
        padding-top:    0;
    }

    /* Layout sidebar: 2 columnas en tablet */
    .pcs-layout-content-sidebar {
        flex-direction: row;
        align-items:    flex-start;
    }

    .pcs-layout-content-sidebar__main {
        flex: 1;
        min-width: 0;
    }

    .pcs-layout-content-sidebar__sidebar {
        width:      280px;
        flex-shrink: 0;
    }

    /* Mapa: vuelve a 16/9 en tablet */
    .pcs-map-container {
        aspect-ratio: 16 / 9;
    }

    /* Widgets de afiliación: lado a lado */
    .pcs-affiliate-widgets {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   1.25rem;
    }

    /* Booking y GYG: padding completo */
    .pcs-booking-widget,
    .pcs-gyg-widget {
        padding: 1.5rem;
    }

    /* Datos de playa */
    .pcs-beach-data {
        padding: 1.5rem;
    }

    /* Section spacing */
    .pcs-section {
        padding: 4rem 0;
    }

    /* Botones: no ancho completo */
    .pcs-btn--full-mobile {
        width: auto;
    }
}

/* =============================================================================
   DESKTOP — 1024px
   ============================================================================= */

@media (min-width: 1024px) {

    /* Contenedor con gutter generoso */
    .pcs-container {
        --pcs-gutter: 2rem;
    }

    /* Tarjetas: 3 columnas */
    .pcs-grid-playas {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* Datos de playa: 4 columnas */
    .pcs-beach-data__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Servicios: 4 columnas */
    .pcs-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Hero: altura máxima */
    .pcs-beach-hero {
        min-height: 520px;
    }

    /* Sidebar fija en desktop */
    .pcs-layout-content-sidebar__sidebar {
        width:    320px;
        position: sticky;
        top:      2rem;
    }

    /* AdSense sidebar sticky */
    .pcs-adsense-unit--sidebar {
        position: sticky;
        top:      1.5rem;
    }

    /* Section spacing máximo */
    .pcs-section {
        padding: 5rem 0;
    }

    .pcs-section--lg {
        padding: 7rem 0;
    }

    /* Filtros: en línea en desktop */
    .pcs-filter-bar {
        padding: 0.75rem 0;
    }

    .pcs-filter-bar__panel {
        flex-direction: row;
        align-items:    center;
        gap:            1rem;
    }

    /* Tarjetas: hover más pronunciado en desktop */
    .pcs-beach-card:hover {
        transform: translateY(-6px);
    }
}

/* =============================================================================
   DESKTOP LARGE — 1280px
   ============================================================================= */

@media (min-width: 1280px) {

    /* Tarjetas: hasta 4 columnas en grids amplios */
    .pcs-grid-playas--wide {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Hero: contenido más ancho */
    .pcs-beach-hero__contenido {
        padding: 3rem 2rem;
    }
}

/* =============================================================================
   PREFERENCIA: MOVIMIENTO REDUCIDO
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior:      auto !important;
    }
}

/* =============================================================================
   PREFERENCIA: MODO OSCURO (preparado, no activo en fase 1)
   ============================================================================= */

/* @media (prefers-color-scheme: dark) {
    :root {
        --pcs-white:     #1A1A2E;
        --pcs-sand:      #252542;
        --pcs-sand-dark: #303055;
        --pcs-ink:       #F0F0F8;
        --pcs-ink-soft:  #C8C8E0;
        --pcs-ink-muted: #8080A0;
    }
} */

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {

    .pcs-filter-bar,
    .pcs-booking-widget,
    .pcs-gyg-widget,
    .pcs-adsense-unit,
    .pcs-civitatis-link {
        display: none !important;
    }

    .pcs-beach-data {
        background: #fff;
        border:     1px solid #ccc;
    }

    .pcs-beach-hero__overlay {
        display: none;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.7em;
        color: #666;
    }
}