/**
 * CARACAS TELECOM - Estilos Responsivos Adicionales
 * Ajustes específicos para dispositivos móviles y tablets
 * 
 * @package CaracasTelecom
 * @version 1.0.0
 */

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    .site-header .col-full {
        padding: 0 var(--ct-space-5);
    }

    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        padding: var(--ct-space-3) var(--ct-space-3);
        font-size: var(--ct-text-xs);
    }

    /* Grid de productos: 3 columnas */
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero */
    .ct-hero {
        min-height: 250px;
    }

    .ct-hero__title {
        font-size: var(--ct-text-4xl);
    }

    /* Secciones de homepage */
    .ct-section {
        padding: 60px var(--ct-space-5) !important;
    }

    .ct-categories-grid,
    .ct-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   MOVIL GRANDE (481px - 767px)
   ============================================ */
@media (max-width: 768px) {
    /* Header */
    .site-header {
        height: var(--ct-header-height-mobile);
    }

    .site-header .col-full {
        padding: 0 var(--ct-space-4);
    }

    /* Branding */
    .site-branding .custom-logo-link img {
        max-height: 42px;
    }

    .site-branding .site-title {
        font-size: var(--ct-text-lg);
    }

    /* Menú móvil */
    .storefront-primary-navigation {
        display: none;
        position: absolute;
        top: var(--ct-header-height-mobile);
        left: 0;
        width: 100%;
        background: var(--ct-color-primary-dark);
        border-top: 1px solid var(--ct-color-primary-light);
        box-shadow: var(--ct-shadow-lg);
        max-height: calc(100vh - var(--ct-header-height-mobile));
        overflow-y: auto;
    }

    .storefront-primary-navigation.toggled {
        display: block;
        animation: ctSlideDown 250ms ease forwards;
    }

    @keyframes ctSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        flex-direction: column;
        gap: 0;
        padding: var(--ct-space-2) 0;
    }

    .main-navigation ul.menu > li,
    .main-navigation ul.nav-menu > li {
        width: 100%;
    }

    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        padding: var(--ct-space-3) var(--ct-space-6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: var(--ct-text-sm);
    }

    .main-navigation ul.menu > li > a::after,
    .main-navigation ul.nav-menu > li > a::after {
        display: none;
    }

    /* Submenú móvil */
    .main-navigation ul.menu ul.sub-menu,
    .main-navigation ul.nav-menu ul.sub-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--ct-color-accent);
        margin-left: var(--ct-space-4);
        background: rgba(0, 0, 0, 0.2);
    }

    .main-navigation ul.menu ul.sub-menu li a,
    .main-navigation ul.nav-menu ul.sub-menu li a {
        padding: var(--ct-space-2) var(--ct-space-5);
        border-left: none;
    }

    /* Hero */
    .ct-hero {
        min-height: 240px;
        max-height: 300px;
    }

    .ct-hero__content {
        padding: var(--ct-space-6) var(--ct-space-4);
    }

    .ct-hero__title {
        font-size: var(--ct-text-3xl);
        letter-spacing: 0.05em;
    }

    .ct-hero__subtitle {
        font-size: var(--ct-text-base);
        margin-bottom: var(--ct-space-3);
    }

    .ct-hero__cta {
        flex-direction: column;
        align-items: center;
    }

    .ct-hero__cta .ct-button {
        width: 100%;
        max-width: 280px;
    }

    /* Grid de productos: 2 columnas */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ct-space-4);
    }

    .woocommerce ul.products li.product a img {
        height: 180px;
    }

    /* Single Product */
    .woocommerce div.product .product_title {
        font-size: var(--ct-text-2xl);
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: var(--ct-text-2xl);
    }

    .woocommerce div.product div.images {
        margin-bottom: var(--ct-space-3);
    }

    .woocommerce div.product form.cart {
        flex-direction: column;
        align-items: stretch;
        padding: var(--ct-space-4);
    }

    .woocommerce div.product form.cart div.quantity {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .woocommerce div.product form.cart .button {
        width: 100%;
        min-width: auto;
    }

    /* Tabs */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column;
        border-bottom: none;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        border-radius: var(--ct-radius-sm);
        margin-bottom: var(--ct-space-1);
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: var(--ct-space-3) var(--ct-space-4);
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
        border-radius: var(--ct-radius-sm);
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: var(--ct-space-5);
    }

    /* Cart */
    .woocommerce-cart table.shop_table thead {
        display: none;
    }

    .woocommerce-cart table.shop_table tbody tr {
        display: block;
        padding: var(--ct-space-4);
        border-bottom: 2px solid var(--ct-color-gray-200);
        margin-bottom: var(--ct-space-2);
    }

    .woocommerce-cart table.shop_table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--ct-space-2) 0;
        border: none;
        text-align: right !important;
    }

    .woocommerce-cart table.shop_table tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        text-transform: uppercase;
        font-size: var(--ct-text-xs);
        color: var(--ct-color-gray-600);
        letter-spacing: 0.04em;
    }

    .woocommerce-cart table.shop_table tbody td.product-thumbnail,
    .woocommerce-cart table.shop_table tbody td.product-remove {
        justify-content: center;
    }

    .woocommerce-cart table.shop_table tbody td.product-thumbnail::before,
    .woocommerce-cart table.shop_table tbody td.product-remove::before {
        display: none;
    }

    .woocommerce-cart table.shop_table tbody td.actions {
        display: block;
    }

    .woocommerce-cart table.shop_table tbody td.actions .coupon {
        display: flex;
        flex-direction: column;
        gap: var(--ct-space-2);
        margin-bottom: var(--ct-space-3);
    }

    .woocommerce-cart table.shop_table tbody td.actions .input-text {
        width: 100% !important;
    }

    /* Cart totals */
    .woocommerce-cart .cart-collaterals {
        margin-top: var(--ct-space-6);
    }

    .woocommerce-cart .cart_totals {
        padding: var(--ct-space-4);
    }

    /* Secciones homepage */
    .ct-section {
        padding: 48px var(--ct-space-4) !important;
    }

    .ct-categories-grid,
    .ct-services-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ct-section-title {
        font-size: var(--ct-text-2xl) !important;
    }

    /* Quote form */
    .ct-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-quote-form {
        padding: var(--ct-space-6);
    }

    .ct-quote-page__header {
        padding: var(--ct-space-8) var(--ct-space-4) !important;
    }

    .ct-quote-page__title {
        font-size: var(--ct-text-2xl) !important;
    }

    .ct-quote-page__subtitle {
        font-size: var(--ct-text-base) !important;
    }

    .ct-quote-form__submit {
        font-size: var(--ct-text-sm) !important;
        height: 48px !important;
    }

    /* Floating button */
    .ct-floating-quote {
        bottom: var(--ct-space-4);
        right: var(--ct-space-4);
        padding: var(--ct-space-3) var(--ct-space-4);
        font-size: var(--ct-text-xs);
    }

    /* Pagination */
    .woocommerce nav.woocommerce-pagination ul li a,
    .woocommerce nav.woocommerce-pagination ul li span {
        min-width: 36px;
        height: 36px;
        font-size: var(--ct-text-sm);
    }

    /* Breadcrumbs */
    .storefront-breadcrumb {
        padding: var(--ct-space-2) var(--ct-space-4);
        font-size: var(--ct-text-xs);
    }

    /* Footer */
    .site-footer .footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--ct-space-6);
        padding-bottom: var(--ct-space-8);
    }

    .site-info {
        padding: var(--ct-space-3);
        font-size: 10px;
    }

    /* Header de tienda */
    .woocommerce-products-header {
        padding: var(--ct-space-8) var(--ct-space-4) !important;
    }

    .woocommerce-products-header__title {
        font-size: var(--ct-text-2xl) !important;
    }

    .woocommerce-result-count {
        float: none;
        text-align: center;
        margin-bottom: var(--ct-space-3);
    }

    .woocommerce-ordering {
        float: none;
        text-align: center;
    }

    .storefront-sorting {
        text-align: center;
    }

    /* Widgets */
    .widget-area {
        margin-top: var(--ct-space-8);
    }

    /* Notices */
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        flex-direction: column;
        text-align: center;
        gap: var(--ct-space-3);
    }

    .woocommerce-message .button {
        margin: 0;
        width: 100%;
    }
}

/* ============================================
   MOVIL PEQUENO (hasta 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Productos: 1 columna */
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    .woocommerce ul.products li.product a img {
        height: 220px;
    }

    /* Hero */
    .ct-hero {
        min-height: 300px;
    }

    .ct-hero__title {
        font-size: var(--ct-text-2xl) !important;
    }

    /* Contenido */
    .site-content {
        padding: var(--ct-space-4);
    }

    .entry-title {
        font-size: var(--ct-text-2xl) !important;
    }

    /* Cart */
    .woocommerce-cart .woocommerce {
        padding: var(--ct-space-4);
    }

    .woocommerce-cart .page-title {
        font-size: var(--ct-text-2xl) !important;
    }

    /* Botones */
    .ct-button {
        width: 100%;
    }

    .ct-hero__cta .ct-button,
    .ct-quote-page__header + .ct-quote-form .ct-button {
        width: 100%;
    }

    /* Tabla de productos */
    .woocommerce table.shop_table tbody td.product-thumbnail img {
        width: 60px;
        height: 60px;
    }

    /* Secciones */
    .ct-section--categories .ct-category-card > div:first-child {
        height: 140px !important;
    }

    .ct-service-card {
        padding: 24px 16px !important;
    }

    /* Quote */
    .ct-quote-form {
        padding: var(--ct-space-4);
    }

    .ct-quote-form__section-title {
        font-size: var(--ct-text-base) !important;
    }

    /* Checkout */
    .woocommerce-checkout .woocommerce {
        padding: var(--ct-space-4);
    }

    /* Floating button - más pequeño */
    .ct-floating-quote {
        padding: 8px 12px;
        font-size: 10px;
        bottom: var(--ct-space-3);
        right: var(--ct-space-3);
    }

    .ct-floating-quote svg {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   LANDSCAPE EN MOVIL
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .ct-hero {
        min-height: 200px;
        max-height: 280px;
    }

    .ct-hero__content {
        padding: var(--ct-space-6) var(--ct-space-4);
    }

    .ct-hero__title {
        font-size: var(--ct-text-2xl);
        margin-bottom: var(--ct-space-2);
    }

    .ct-hero__subtitle {
        display: none;
    }

    .ct-hero__cta {
        flex-direction: row;
    }

    .ct-hero__cta .ct-button {
        width: auto;
    }

    /* Header */
    .site-header {
        height: 56px;
    }

    .storefront-primary-navigation.toggled {
        top: 56px;
        max-height: calc(100vh - 56px);
    }
}

/* ============================================
   PANTALLAS GRANDES (1200px+)
   ============================================ */
@media (min-width: 1200px) {
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .woocommerce ul.products.columns-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ============================================
   ALTA RESOLUCION (RETINA)
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .woocommerce ul.products li.product a img,
    .woocommerce div.product div.images img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   HEADER OCULTO AL SCROLL (solo desktop)
   ============================================ */
@media (min-width: 769px) {
    .site-header {
        transition: transform 350ms ease, box-shadow 350ms ease;
    }

    .site-header.header-hidden {
        transform: translateY(-100%);
    }

    .site-header.scrolled {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    /* Mostrar header al hover (cuando está oculto) */
    .site-header.header-hidden:hover {
        transform: translateY(0);
    }
}

/* ============================================
   REDUCED MOTION (accesibilidad)
   ============================================ */
@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;
    }

    .ct-floating-quote.ct-glow-pulse {
        animation: none;
    }
}