/**
 * products.css — Product Catalog page styles
 *
 * @package Frigotel
 */

/* =========================================================
   1. CATEGORY LIST SECTION
   ========================================================= */

.products-categories {
    background-color: var(--color-bianco);
}

.categories-grid {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.category-card {
    padding: 0;
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.category-card__link {
    display: grid;
    /* Fixed image width, flexible content area, auto-sized arrow */
    grid-template-columns: 340px 1fr auto;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-l);
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.category-card__image {
    width: 100%;
    height: 260px;
    border-radius: var(--radius-l);
    background-color: var(--color-sfondo-freddo);
    border: 1px solid var(--color-boundary, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blu-primario);
    overflow: hidden;
}

.category-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.category-card__arrow {
    color: var(--color-ciano-accento);
    padding-right: var(--space-l);
    transition: transform var(--transition-base), color var(--transition-base);
}

.category-card:hover .category-card__arrow {
    transform: translateX(8px);
    color: var(--color-blu-primario);
}

.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.category-card:hover .category-card__image img {
    transform: scale(1.05);
}

/* =========================================================
   PRODUCT CARDS (Individual Products)
   Specifically for single product lists in categories.
   ========================================================= */

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
    margin-top: var(--space-xl);
}

.platform-item-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
}

.platform-item-card__image {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-l);
    background-color: var(--color-sfondo-freddo);
    border: 1px solid var(--color-boundary, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blu-primario);
    overflow: hidden;
}

.platform-item-card__image svg {
    width: 64px;
    height: 64px;
    opacity: 0.8;
}

.platform-item-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.platform-item-card:hover .platform-item-card__image img {
    transform: scale(1.05);
}

.platform-item-card .btn {
    margin-top: var(--space-xs);
}

/* =========================================================
   7. RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 1199px) {
    .category-card__link {
        grid-template-columns: 280px 1fr auto;
        gap: var(--space-xl);
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .products-header-small__title {
        font-size: var(--text-heading-m);
    }

    .category-card__link {
        grid-template-columns: 1fr;
        gap: var(--space-m);
        padding: var(--space-m);
    }

    .category-card__image {
        height: 200px;
    }

    .category-card__arrow {
        display: none; /* Hide arrow on mobile to save space */
    }

    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   8. BACK BUTTON STYLE
   Heavy use of !important is required to override global button 
   styles and ensure smooth GSAP entrance animations.
   ========================================================= */

.btn-hero-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0.7rem 1.6rem !important;
    background-color: var(--color-bianco) !important;
    border: 1px solid var(--color-bianco) !important;
    border-radius: 100px !important;
    color: var(--color-blu-profondo) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 2.5rem !important;
    /* Remove global transition: all to avoid GSAP conflicts */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* GSAP Reset: ensures no transition interference during entrance */
.btn-hero-back.anim-fade-up {
    transition: none !important;
}

.btn-hero-back svg {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease !important;
}

.btn-hero-back span {
    line-height: 1;
    display: inline-block;
    padding-top: 1px; /* Optical centering */
}

.btn-hero-back:hover {
    background-color: var(--color-blu-primario) !important;
    color: var(--color-bianco) !important;
    border-color: var(--color-blu-primario) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 87, 168, 0.3) !important;
    /* Re-enable transitions for hover */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.btn-hero-back:hover svg {
    transform: translateX(-3px) !important;
}

@media (max-width: 767px) {
    .btn-hero-back {
        padding: 0.6rem 1.2rem !important;
        font-size: 0.75rem !important;
        margin-bottom: 2rem !important;
    }
}
/* =========================================================
   9. STATIC CATEGORY CARDS
   Cards whose destination page is not defined yet: rendered as
   plain blocks, so no pointer affordance and no arrow column.
   Placed after the responsive overrides above so the breakpoint
   column counts stay in sync.
   ========================================================= */

.category-card--static:hover {
    transform: none;
    box-shadow: var(--shadow-card, none);
}

.category-card--static .category-card__link {
    cursor: default;
    grid-template-columns: 340px 1fr;
}

.category-card--static:hover .category-card__image img {
    transform: none;
}

@media (max-width: 1199px) {
    .category-card--static .category-card__link {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 767px) {
    .category-card--static .category-card__link {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   10. CATEGORY CARD TYPOGRAPHY — DESKTOP
   Larger title and body on wide screens, where the card is a
   full-width horizontal band with plenty of room.
   ========================================================= */

@media (min-width: 1200px) {
    .category-card .card__title {
        font-size: var(--text-heading-s);
    }

    .category-card .card__body {
        font-size: var(--text-body-large);
    }
}

/* Static cards have no arrow column, so the text column carries the
   right-hand breathing room the arrow used to provide. */
.category-card--static .category-card__content {
    padding-right: var(--space-2xl);
}

@media (max-width: 767px) {
    .category-card--static .category-card__content {
        padding-right: 0;
    }
}