/* Archivo: catalog-page.css
   Funcion: Estilo especifico de "Catalogo" (catalogo.php), misma direccion "natural/organico"
   que el resto de paginas ya migradas. Se carga UNICAMENTE en catalogo.php (ver
   includes/header.php) y todas las reglas van prefijadas con body.page-catalog. */

@keyframes organic-drift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(4deg); }
}

@keyframes gentle-sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

body.page-catalog .page-hero::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    animation: organic-drift 16s ease-in-out infinite;
}

body.page-catalog .page-hero::after {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    animation: organic-drift 20s ease-in-out infinite reverse;
}

body.page-catalog .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.page-catalog .leaf-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-earth-clay);
    animation: gentle-sway 4s ease-in-out infinite;
    transform-origin: 70% 70%;
}

body.page-catalog .section-title h2 {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    letter-spacing: -0.01em;
}

body.page-catalog .section-title h2::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-earth-clay));
}

/* ---------- Selector de catalogos (catalogo.php sin "?catalog="): reutiliza el grid y las
   tarjetas de producto (.products-grid/.card/.card-media/.card-body) para mantener el mismo
   aspecto visual que el resto del sitio, con dos ajustes propios: la tarjeta entera es un
   enlace <a> (no un <div>), y se le da un acento tierra al pasar el raton igual que en
   Herramientas (ver tools-page.css). ---------- */
body.page-catalog a.catalog-select-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* La tarjeta entera navega al catalogo (no abre un lightbox como las de producto), asi que el
   cursor de "zoom" heredado de .card-media img no pega aqui. */
body.page-catalog a.catalog-select-card .card-media img {
    cursor: pointer;
}

@media (hover: hover) {
    body.page-catalog a.catalog-select-card:hover {
        border-top-color: var(--color-earth-clay);
    }
}

/* ---------- Barra "Volver al listado" + "Compartir" (visor de un catalogo concreto) ---------- */
body.page-catalog .catalog-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

body.page-catalog .catalog-back-link {
    margin-bottom: 0;
}

/* ---------- Aviso "gira tu pantalla": oculto salvo en movil/tablet en vertical ---------- */
body.page-catalog .catalog-rotate-notice {
    display: none;
}

@media (max-width: 900px) and (orientation: portrait) {
    body.page-catalog .catalog-rotate-notice {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
        padding: 60px 24px;
        background: var(--color-earth-cream);
        border-radius: var(--radius-lg);
    }

    body.page-catalog .catalog-rotate-notice svg {
        width: 56px;
        height: 56px;
        color: var(--color-earth-clay);
        animation: catalog-rotate-hint 1.8s ease-in-out infinite;
    }

    body.page-catalog .catalog-rotate-notice p {
        font-weight: 600;
        color: var(--color-dark);
        max-width: 280px;
        margin: 0;
    }

    body.page-catalog .catalog-display-wrap {
        display: none !important;
    }
}

@keyframes catalog-rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
}

/* ---------- Pantalla completa en movil en horizontal: en landscape hay poca altura
   disponible, asi que el catalogo pasa a ocupar toda la pantalla (sin navbar, cabecera ni pie)
   para aprovechar el espacio al maximo: la imagen pasa a ocupar la pantalla entera (a lo grande,
   no encajada en una fila junto a botones que le robaban espacio), las flechas prev/siguiente
   quedan flotando ENCIMA de la imagen (no a los lados, para no restarle ancho), y se ocultan el
   indicador "Pagina X de Y" y la tira de numeros de pagina (no caben bien y sobran cuando el
   objetivo es ver la pagina lo mas grande posible). El umbral (alto maximo 550px Y ancho maximo
   1000px) cubre los telefonos en horizontal, INCLUYENDO los mas grandes (ej. iPhone Pro Max
   ronda 932x430 en horizontal: un umbral de 926px lo dejaba fuera por 6px y hacia que esos
   moviles NO activaran la pantalla completa, cayendo en la vista normal mas pequeña, que era
   justo el problema reportado), y deliberadamente NO usa un umbral mucho mas alto tipo 900px:
   un portatil con la ventana del navegador no maximizada del todo puede tener facilmente menos
   de 900px de alto y seria landscape "por naturaleza", así que un umbral tan alto activaria por
   error esta vista de pantalla completa en un ordenador de escritorio. Se activa/desactiva solo
   con este media query (sin JS): al volver a vertical, esta regla deja de aplicar y la pagina
   vuelve a su aspecto normal automaticamente (mas la regla de arriba, que ya oculta
   catalog-display-wrap en vertical). */
@media (orientation: landscape) and (max-height: 550px) and (max-width: 1000px) {
    body.page-catalog .navbar,
    body.page-catalog .page-hero,
    body.page-catalog .section-title,
    body.page-catalog .footer {
        display: none;
    }

    body.page-catalog {
        overflow: hidden;
    }

    body.page-catalog .section {
        padding: 0;
    }

    body.page-catalog .catalog-display-wrap {
        position: fixed;
        inset: 0;
        z-index: 900;
        margin: 0;
        padding: 0;
        background: var(--color-earth-cream);
    }

    /* La tira de numeros de pagina y el indicador de texto se quitan en esta vista: en un
       telefono en horizontal no caben bien y quitan sitio a la propia imagen, que es lo que
       importa ver grande. Seguir navegando queda solo con las flechas superpuestas. */
    body.page-catalog .catalog-page-list,
    body.page-catalog .catalog-page-indicator {
        display: none;
    }

    body.page-catalog .catalog-stage {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        gap: 0;
    }

    body.page-catalog .catalog-image-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    body.page-catalog .catalog-image-frame img {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 0;
        box-shadow: none;
    }

    body.page-catalog .catalog-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 4px 14px rgba(20, 30, 24, 0.25);
    }

    body.page-catalog .catalog-nav-prev {
        left: 10px;
    }

    body.page-catalog .catalog-nav-next {
        right: 10px;
    }
}

/* ---------- Visor: imagen + flechas ---------- */
body.page-catalog .catalog-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--color-earth-cream);
    border-radius: var(--radius-lg);
    padding: 24px;
}

body.page-catalog .catalog-image-frame {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

body.page-catalog .catalog-image-frame img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(20, 30, 24, 0.18);
    background: var(--color-white);
}

body.page-catalog .catalog-nav-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-gray-light);
    background: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

body.page-catalog .catalog-nav-btn:hover:not(:disabled) {
    background: var(--color-white);
    border-color: var(--color-earth-clay);
    box-shadow: var(--shadow-sm);
}

body.page-catalog .catalog-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

body.page-catalog .catalog-page-indicator {
    text-align: center;
    font-weight: 600;
    color: var(--color-dark);
    margin: 16px 0 12px;
}

/* ---------- Lista de numeros de pagina (1 a 70), tira horizontal con scroll ---------- */
body.page-catalog .catalog-page-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 4px 10px;
    scrollbar-width: thin;
}

body.page-catalog .catalog-page-btn {
    flex-shrink: 0;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-light);
    background: var(--color-white);
    color: var(--color-dark);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.page-catalog .catalog-page-btn:hover {
    border-color: var(--color-earth-clay);
}

body.page-catalog .catalog-page-btn.is-active {
    background: var(--color-earth-clay);
    border-color: var(--color-earth-clay);
    color: var(--color-white);
}

@media (max-width: 720px) {
    body.page-catalog .catalog-stage {
        padding: 14px;
        gap: 8px;
    }

    body.page-catalog .catalog-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    body.page-catalog .catalog-image-frame {
        min-height: 180px;
    }
}