/**
 * Internal Links Frontend Styles
 *
 * Image cards with overlay text - matches site design
 *
 * @package WineCuratedPro
 * @since 2.1.0
 */

/* =====================================================
   SECTION WRAPPER
   ===================================================== */

.wcp-internal-links-section {
    margin: 0;
    padding: 0;
}

/* =====================================================
   SECTION HEADING
   ===================================================== */

.wcp-internal-links-heading {
    margin: 0 0 20px 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ast-global-color-2, #333333);
}

.wcp-internal-links-heading strong {
    font-weight: 700;
}

/* =====================================================
   MAIN CONTAINER
   ===================================================== */

.wcp-internal-links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    width: 100%;
}

/* Column layout based on number of items */
.wcp-internal-links-container[data-columns="1"] .wcp-il-item {
    flex: 0 0 100%;
}

.wcp-internal-links-container[data-columns="2"] .wcp-il-item {
    flex: 0 0 calc(50% - 4px);
}

.wcp-internal-links-container[data-columns="3"] .wcp-il-item {
    flex: 0 0 calc(33.333% - 6px);
}

.wcp-internal-links-container[data-columns="4"] .wcp-il-item {
    flex: 0 0 calc(25% - 6px);
}

/* =====================================================
   5 COLUMNS - Horizontal Scroll on Desktop
   ===================================================== */

.wcp-internal-links-container[data-columns="5"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 15px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Custom scrollbar for desktop */
.wcp-internal-links-container[data-columns="5"]::-webkit-scrollbar {
    height: 6px;
}

.wcp-internal-links-container[data-columns="5"]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.wcp-internal-links-container[data-columns="5"]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.wcp-internal-links-container[data-columns="5"]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.wcp-internal-links-container[data-columns="5"] .wcp-il-item {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: 250px !important;
    aspect-ratio: 1 / 1 !important;
    scroll-snap-align: start;
}

.wcp-internal-links-container[data-columns="5"] .wcp-il-content {
    bottom: 0;
    min-height: 70px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

/* =====================================================
   LINK ITEM
   ===================================================== */

.wcp-il-item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    max-height: 320px;
    max-width: 320px;
}

/* =====================================================
   IMAGE
   ===================================================== */

.wcp-il-image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.wcp-il-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.wcp-il-item:hover .wcp-il-image {
    transform: scale(1.05);
}

/* =====================================================
   OVERLAY - Dark gradient from bottom
   ===================================================== */

.wcp-il-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(0, 0, 0, 0.1) 60%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: background 0.3s ease;
}

.wcp-il-item:hover .wcp-il-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

/* =====================================================
   CONTENT - Text at bottom
   ===================================================== */

.wcp-il-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wcp-il-text {
    color: #fff;
    font-size: var(--wp--preset--font-size--medium, 20px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wcp-il-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    transition: transform 0.3s ease;
}

.wcp-il-arrow svg {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    display: inline-block;
    vertical-align: middle;
}

.wcp-il-item:hover .wcp-il-arrow {
    transform: translateX(5px);
}

/* =====================================================
   RESPONSIVE - TABLET
   ===================================================== */

@media (max-width: 1024px) {
    .wcp-internal-links-container[data-columns="4"] .wcp-il-item {
        flex: 0 0 calc(50% - 4px);
    }

    .wcp-il-content {
        padding: 20px;
    }

    .wcp-il-text {
        font-size: 18px;
    }

    .wcp-il-arrow svg {
        width: 1.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
    }
}

/* =====================================================
   RESPONSIVE - MOBILE
   ===================================================== */

@media (max-width: 768px) {
    .wcp-internal-links-container {
        flex-wrap: wrap;
        overflow: visible;
        gap: 6px;
    }

    /* Override for 5 columns on mobile */
    .wcp-internal-links-container[data-columns="5"] {
        display: flex;
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
    }

    .wcp-internal-links-container[data-columns="5"] .wcp-il-item {
        flex: 0 0 calc(50% - 3px);
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
    }

    .wcp-internal-links-container[data-columns="5"] .wcp-il-item,
    .wcp-internal-links-container[data-columns="4"] .wcp-il-item,
    .wcp-internal-links-container[data-columns="3"] .wcp-il-item {
        flex: 0 0 calc(50% - 3px);
        max-width: none;
    }

    .wcp-il-item {
        aspect-ratio: 1 / 1;
    }

    .wcp-il-content {
        padding: 15px;
        gap: 8px;
    }

    .wcp-il-text {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    .wcp-il-arrow svg {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
    }
}

/* =====================================================
   RESPONSIVE - SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {
    .wcp-internal-links-container {
        gap: 5px;
    }

    .wcp-internal-links-container[data-columns="5"] .wcp-il-item,
    .wcp-internal-links-container[data-columns="4"] .wcp-il-item,
    .wcp-internal-links-container[data-columns="3"] .wcp-il-item,
    .wcp-internal-links-container[data-columns="2"] .wcp-il-item {
        flex: 0 0 calc(50% - 3px);
        max-width: none;
    }

    .wcp-il-item {
        aspect-ratio: 1 / 1;
    }

    .wcp-il-content {
        padding: 10px;
        gap: 6px;
    }

    .wcp-il-text {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2px;
    }

    .wcp-il-arrow svg {
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
    }
}