/* --- humor.css --- */
/* This file contains ONLY the specific styles for the Humors Scroll Effect. 
   It does not modify global styles, header, or footer. */

/* Container for the scroll effect section */
.humors-scroll-section {
    display: grid;
    gap: 0;
    /* Remove gap for seamless scroll effect */
    width: 100%;
    margin: 0 auto;
    /* Ensure it sits nicely between your other sections */
    position: relative;
    z-index: 5;
}

/* The individual item (row) */
.humor-scroll-item {
    display: grid;
    /* Default: Image Left, Text Right */
    grid-template-columns: auto 1fr;
    align-items: center;
    min-height: 70vh;
    /* Tall height to allow the scroll animation to play out */
    position: relative;
    padding: 0;
}

/* Alternate layout for even items: Image Right, Text Left */
.humor-scroll-item:nth-of-type(even),
.humor-scroll-item.reversed {
    grid-template-columns: 1fr auto;
    grid-auto-flow: dense;
}

/* THE IMAGE (Visual) */
.humor-visual {
    width: 100%;
    max-width: 42vw;
    /* Constrain width like the reference */
    height: 50vh;
    /* Fixed height for consistency */
    object-fit: cover;

    /* Animation: Slide in from side */
    view-timeline: --humor-item;
    animation: item-reveal both ease-in;
    animation-timeline: --humor-item;
    animation-range: cover 10% cover 35%;

    /* Reference Styling: Angled corners */
    clip-path: polygon(0 10%, 10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%);

    z-index: 2;
}

/* THE TEXT (Content) */
.humor-text-content {
    font-size: 1.1rem;
    padding: 2rem;
    color: #333;
    /* Ensure text color matches your theme */

    /* Reference Styling: Match .full-width-glow background */
    background: linear-gradient(to right, #f0f4f2 0%, #cbd7d1 50%, #f0f4f2 100%) !important;

    /* Animation: Slide in from bottom, delayed */
    view-timeline: --humor-item;
    animation: item-reveal both ease-out;
    animation-timeline: --humor-item;
    animation-range: cover 35% cover 50%;

    /* The "Sticky" Magic - Stays in view while scrolling */
    position: sticky;
    bottom: 20%;

    /* Layout Placement */
    grid-column: 2;
    /* Default: Second column */
    margin: 2rem;
    z-index: 3;
}

/* Alternate Grid Placement for Even Items */
.humor-scroll-item:nth-of-type(even) .humor-text-content,
.humor-scroll-item.reversed .humor-text-content {
    grid-column: 1;
    margin: 2rem;
}

.humor-scroll-item:nth-of-type(even) .humor-visual,
.humor-scroll-item.reversed .humor-visual {
    grid-column: 2;
}

/* Typography for the content (scoped) */
.humor-text-content h3 {
    font-family: 'Playfair Display', serif;
    color: #688278;
    /* Your primary color */
    font-size: 2rem;
    margin-bottom: 1rem;
}

.humor-text-content h4 {
    font-family: 'Playfair Display', serif;
    color: #688278;
    /* Your primary color */
    font-size: 1.2rem;
}

.humor-text-content p {
    margin-bottom: 0.7rem;
    line-height: 1.6;
}

/* --- Animation Variables & Keyframes (From Reference) --- */

/* Default direction (Left to Right reveal) */
.humor-scroll-item {
    --x: -100%;
}

/* Even direction (Right to Left reveal) */
.humor-scroll-item:nth-of-type(even),
.humor-scroll-item.reversed {
    --x: 100%;
}

.humor-text-content {
    --x: 0;
    --y: 50%;
}

@keyframes item-reveal {
    0% {
        opacity: 0;
        translate: var(--x, 0) var(--y, 0);
    }
}

/* --- Mobile Responsive Overrides --- */
/* On mobile, stack items and disable sticky/complex animations */
@media (max-width: 768px) {
    .humor-scroll-item {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 1rem 0;
        gap: 1rem;
    }

    .humor-scroll-item:nth-of-type(even),
    .humor-scroll-item.reversed {
        grid-template-columns: 1fr;
    }

    .humor-visual {
        max-width: 100%;
        height: 250px;
        grid-column: 1 !important;
        grid-row: 1;
        clip-path: none;
        /* Remove angled corners on mobile for cleaner look */
    }

    .humor-text-content {
        grid-column: 1 !important;
        grid-row: 2;
        position: static;
        /* Disable sticky */
        margin: 0;
        background: #fff;
        /* Solid bg on mobile */
    }

    /* Disable animations on mobile */
    .humor-visual,
    .humor-text-content {
        animation: none;
        opacity: 1;
        translate: none;
    }
}