/**
 * Focus Slider Styles
 *
 * Featured posts section matching the Rails focusfm project design.
 * Replicates: app/views/home/featured.html.haml
 * Animations match: app/javascript/controllers/featured_controller.js (anime.js)
 *
 * @package FocusSlider
 * @since 1.0.0
 */

/* ===================================
   CSS Custom Properties (Animation Timing)
   Matches anime.js duration: 100ms, easing: linear
   =================================== */

:root {
    --focus-slider-animation-duration: 100ms;
    --focus-slider-animation-easing: linear;
    --focus-slider-bg-color: #e2e8f0; /* slate-200 */
    --focus-slider-thumbnail-dim: 0.3;
}

/* ===================================
   Main Container
   Matches Rails: md:m-3 min-[2560px]:m-0 min-[2560px]:mx-auto min-[2560px]:w-9/12
   =================================== */

.focus-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Desktop layout visible by default, mobile hidden */
.focus-slider--desktop {
    display: block;
    margin: 0.75rem; /* md:m-3 = 12px */
}

.focus-slider--mobile {
    display: none;
}

/* ===================================
   Alignment Classes (Gutenberg)
   =================================== */

/* Default/None alignment - constrained width */
.wp-block-focus-slider-slider:not(.alignwide):not(.alignfull) .focus-slider {
    max-width: 1200px;
}

/* Wide alignment */
.wp-block-focus-slider-slider.alignwide .focus-slider {
    max-width: 1400px;
}

/* Full width alignment - no max-width constraint */
.wp-block-focus-slider-slider.alignfull .focus-slider {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ===================================
   Container Layout
   Matches Rails: flex flex-col gap-3
   =================================== */

.focus-slider__container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* gap-3 = 12px */
}

/* ===================================
   Main Image Section
   Matches Rails: relative container
   =================================== */

.focus-slider__main-section {
    position: relative;
    width: 100%;
}

.focus-slider__images {
    position: relative;
    width: 100%;
}

.focus-slider__main-link {
    display: block;
    width: 100%;
}

/* Main image with animation support */
.focus-slider__main-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 650px;
    object-fit: cover;
    transition: opacity var(--focus-slider-animation-duration) var(--focus-slider-animation-easing);
}

/* Lazy-loaded images (hidden by default) */
/* Matches Rails: class: "hidden opacity-0" */
.focus-slider__lazy-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    transition: opacity var(--focus-slider-animation-duration) var(--focus-slider-animation-easing);
}

.focus-slider__lazy-image.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.focus-slider__lazy-image:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* ===================================
   Info Box Overlay
   Matches Rails: p-6 relative -mt-[100px] h-1/2 mx-auto w-11/12
                  xl:w-5/12 xl:h-5/6 xl:absolute xl:right-0 xl:top-10 xl:bottom-0
                  z-20 bg-slate-200 p-3
   Note: Rails has both p-6 and p-3, last one wins = p-3 (0.75rem)
   =================================== */

.focus-slider__info-box {
    position: relative;
    padding: 0.75rem; /* p-3 = 12px (last class wins in Tailwind) */
    margin: -100px auto 0; /* -mt-[100px] mx-auto */
    width: 91.666667%; /* w-11/12 */
    height: 50%; /* h-1/2 */
    background-color: var(--focus-slider-bg-color); /* bg-slate-200 */
    z-index: 20;
}

.focus-slider__info-link {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* gap-y-6 = 24px */
    text-decoration: none;
    color: inherit;
}

.focus-slider__info-link:hover {
    opacity: 0.9;
}

/* Info box text elements with animation support */
.focus-slider__date,
.focus-slider__title,
.focus-slider__description {
    transition: opacity var(--focus-slider-animation-duration) var(--focus-slider-animation-easing);
}

.focus-slider__date {
    font-size: 0.875rem;
    color: #666;
}

.focus-slider__title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    line-height: 1.2;
    color: #000;
}

.focus-slider__description {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6;
    color: #333;
}

/* ===================================
   Thumbnail Row
   Matches Rails: flex flex-row gap-3
   =================================== */

.focus-slider__thumbnails {
    display: flex;
    flex-direction: row;
    gap: 0.75rem; /* gap-3 = 12px */
    width: 100%;
}

/* Thumbnail item
   Matches Rails: w-1/3 lg:w-full hover:text-black cursor-pointer */
.focus-slider__thumbnail {
    width: 33.333333%; /* w-1/3 */
    cursor: pointer;
    transition: color 0.3s ease;
}

.focus-slider__thumbnail:hover {
    color: #000; /* hover:text-black */
}

/* Thumbnail article
   Matches Rails: relative h-[200px] */
.focus-slider__thumbnail-article {
    position: relative;
    height: 200px; /* h-[200px] */
    overflow: hidden;
}

/* Thumbnail image with animation support
   Matches Rails anime.js: opacity dims to 0.3 on hover */
.focus-slider__thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity var(--focus-slider-animation-duration) var(--focus-slider-animation-easing);
}

/* Thumbnail overlay (content)
   Matches Rails: absolute left-0 right-0 top-0 bottom-0 z-20 opacity-0 content
   Note: Rails overlay has NO background color - it's transparent.
   The image dims to 0.3 opacity making white text visible. */
.focus-slider__thumbnail-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    opacity: 0;
    /* No background-color - matches Rails transparent overlay */
    transition: opacity var(--focus-slider-animation-duration) var(--focus-slider-animation-easing);
    color: white;
    padding: 0; /* No padding in Rails */
}

/* Thumbnail content container
   Matches Rails: flex flex-col justify-center h-full */
.focus-slider__thumbnail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Thumbnail title
   Matches Rails: font-bold text-center */
.focus-slider__thumbnail-title {
    font-size: 1rem;
    font-weight: 700; /* font-bold */
    text-align: center;
    margin: 0;
    color: black;
}

/* ===================================
   Large Desktop Layout (LG screens - 1024px+)
   Matches Rails lg: breakpoint classes
   =================================== */

@media (min-width: 1024px) {
    /* Larger title on lg screens
       Matches Rails: lg:text-4xl */
    .focus-slider__title {
        font-size: 2.25rem; /* text-4xl = 2.25rem */
    }

    /* Thumbnails full width on lg screens
       Matches Rails: lg:w-full */
    .focus-slider__thumbnail {
        width: 100%; /* lg:w-full */
        flex: 1;
    }
}

/* ===================================
   Extra Large Desktop Layout (XL screens - 1280px+)
   Matches Rails xl: breakpoint classes
   =================================== */

@media (min-width: 1280px) {
    /* Override WordPress constrained layout for slider content */
    .focus-slider.is-layout-constrained > .focus-slider__container,
    .focus-slider.is-layout-constrained > .focus-slider__container > * {
        max-width: none !important;
    }

    /* Main section needs to be relative for absolute positioning of info box */
    .focus-slider__main-section {
        position: relative;
        display: block;
        width: 100%;
        max-width: none;
        height: 650px; /* Fixed height like production */
    }

    /* Main image container - full width container */
    .focus-slider__images {
        width: 100%;
        height: 100%;
    }

    /* Main image link - NOT full width, allows info box overlap */
    .focus-slider__main-link {
        display: block;
        width: auto;
    }

    /* Main image - fixed dimensions like production (1150x650) */
    .focus-slider__main-image,
    .focus-slider__lazy-image {
        width: auto;
        max-width: 65%;
        height: 650px;
        object-fit: cover;
    }

    /* Info box positioned absolutely on the right
       Matches Rails: xl:w-5/12 xl:h-5/6 xl:absolute xl:right-0 xl:top-10 xl:bottom-0 xl:-mt-0 */
    .focus-slider__info-box {
        position: absolute;
        right: 0;
        top: 2.5rem; /* xl:top-10 = 40px */
        bottom: 0; /* xl:bottom-0 */
        margin-top: 0; /* xl:-mt-0 */
        width: 41.666667%; /* xl:w-5/12 */
        height: 83.333333%; /* xl:h-5/6 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .focus-slider__info-link {
        height: 100%;
        justify-content: flex-start;
    }

    .focus-slider__thumbnails {
        max-width: none;
    }
}

/* ===================================
   Tablet Layout (768px - 1023px)
   Between md and lg breakpoints
   =================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Title stays at text-2xl (1.5rem) on tablet, no change needed */

    /* Convert thumbnails to grid layout to prevent overflow */
    .focus-slider__thumbnails {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        gap: 0.75rem; /* gap-3 = 12px */
        width: 100%;
        overflow: hidden;
    }

    /* Thumbnails fill grid cells */
    .focus-slider__thumbnail {
        width: 100%;
        flex: none;
    }

    /* Reduce thumbnail height on tablet for better fit */
    .focus-slider__thumbnail-article {
        height: 150px; /* Reduced from 200px for tablet */
    }
}

/* ===================================
   Mobile Layout (max-width: 767px)
   Show mobile layout, hide desktop layout
   Matches Rails: browser.device.mobile? section
   =================================== */

@media (max-width: 767px) {
    /* Hide desktop, show mobile */
    .focus-slider--desktop {
        display: none;
    }

    .focus-slider--mobile {
        display: block;
        margin: 1.5rem 0; /* my-6 */
    }

    /* Mobile container
       Matches Rails: grid grid-cols-1 w-11/12 mx-auto gap-y-3 */
    .focus-slider__mobile-container {
        display: grid;
        grid-template-columns: 1fr;
        width: 91.666667%; /* w-11/12 */
        margin: 0 auto;
        gap: 0.75rem; /* gap-y-3 */
    }

    /* Featured post link */
    .focus-slider__mobile-featured {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
    }

    /* Featured image
       Matches Rails: object-cover w-full */
    .focus-slider__mobile-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Featured article card
       Matches Rails: bg-white p-3 rounded-md shadow-md shadow-gray-400 flex flex-col p-3 flex-grow */
    .focus-slider__mobile-article {
        background-color: white;
        padding: 0.75rem; /* p-3 */
        border-radius: 0.375rem; /* rounded-md */
        box-shadow: 0 4px 6px -1px rgba(156, 163, 175, 0.5), 0 2px 4px -1px rgba(156, 163, 175, 0.3); /* shadow-md shadow-gray-400 */
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    /* Mobile date
       Matches Rails: text-left text-sm */
    .focus-slider__mobile-date {
        text-align: left;
        font-size: 0.875rem; /* text-sm */
        color: #666;
    }

    /* Mobile title
       Matches Rails: text-lg font-bold my-3 */
    .focus-slider__mobile-title {
        font-size: 1.125rem; /* text-lg */
        font-weight: 700; /* font-bold */
        margin: 0.75rem 0; /* my-3 */
        color: #000;
    }

    /* Mobile excerpt
       Matches Rails: mt-auto text-sm */
    .focus-slider__mobile-excerpt {
        margin-top: auto;
        font-size: 0.875rem; /* text-sm */
        color: #333;
    }

    /* More posts section
       Matches Rails: flex flex-col gap-y-3 my-3 */
    .focus-slider__mobile-more {
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* gap-y-3 */
        margin: 0.75rem 0; /* my-3 */
    }

    .focus-slider__mobile-more-label {
        font-weight: 500;
        color: #333;
    }

    /* More posts item link */
    .focus-slider__mobile-item {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
    }

    /* More posts item date
       Matches Rails: text-left text-xs mb-1 */
    .focus-slider__mobile-item-date {
        text-align: left;
        font-size: 0.75rem; /* text-xs */
        margin-bottom: 0.25rem; /* mb-1 */
        color: #666;
    }

    /* More posts item title
       Matches Rails: font-bold text-sm */
    .focus-slider__mobile-item-title {
        font-weight: 700; /* font-bold */
        font-size: 0.875rem; /* text-sm */
        color: #000;
    }

    .focus-slider__mobile-item:hover .focus-slider__mobile-item-title {
        text-decoration: underline;
    }
}

/* ===================================
   Large Screens (2560px+)
   Matches Rails: min-[2560px]:m-0 min-[2560px]:mx-auto min-[2560px]:w-9/12
   =================================== */

@media (min-width: 2560px) {
    .focus-slider--desktop {
        margin: 0; /* min-[2560px]:m-0 */
        margin-left: auto;
        margin-right: auto; /* min-[2560px]:mx-auto */
        width: 75%; /* min-[2560px]:w-9/12 */
    }

    /* Only apply width constraint for non-full alignments */
    .wp-block-focus-slider-slider:not(.alignfull) .focus-slider--desktop {
        width: 75%; /* 9/12 */
        padding: 0;
    }

    /* Full width stays full on large screens too */
    .wp-block-focus-slider-slider.alignfull .focus-slider--desktop {
        width: 100%;
    }
}

/* ===================================
   Empty State
   =================================== */

.focus-slider--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: #f5f5f5;
}

.focus-slider__message {
    font-size: 18px;
    color: #666;
    text-align: center;
    margin: 0;
}

/* ===================================
   Animation States (JavaScript controlled)
   These classes are added/removed by slider.js
   to replicate anime.js sequential animations
   =================================== */

/* Fade out state */
.focus-slider__main-image.is-fading-out,
.focus-slider__lazy-image.is-fading-out,
.focus-slider__date.is-fading-out,
.focus-slider__title.is-fading-out,
.focus-slider__description.is-fading-out {
    opacity: 0;
}

/* Fade in state */
.focus-slider__main-image.is-fading-in,
.focus-slider__lazy-image.is-fading-in,
.focus-slider__date.is-fading-in,
.focus-slider__title.is-fading-in,
.focus-slider__description.is-fading-in {
    opacity: 1;
}

/* Thumbnail hover states (JavaScript controlled)
   Matches Rails anime.js behavior:
   - Image dims to opacity 0.3
   - Overlay fades in to opacity 1 */
.focus-slider__thumbnail.is-hovered .focus-slider__thumbnail-image {
    opacity: var(--focus-slider-thumbnail-dim); /* 0.3 */
}

.focus-slider__thumbnail.is-hovered .focus-slider__thumbnail-overlay {
    opacity: 1;
}