/* ================================================================= */
/* HOMEPAGE FEATURED SLIDER (.rsn-featured-slider)                    */
/* The rotating "one article at a time" banner above Latest Articles. */
/* Markup lives in template-parts/front-page/featured-slider.php; the */
/* movement (autoplay, arrows, dots, swipe, keyboard) lives in         */
/* assets/js/slider.js. How it works: every slide sits side by side in */
/* one long row (the "track"), and only one slide-width of that row   */
/* is visible through the "viewport" — the JS slides the track left   */
/* or right to bring a different slide into view.                     */
/* ================================================================= */

/* Outer container — same width/centering as the Latest Articles section below it, so the two line up */
.rsn-featured-slider {
    max-width: 1100px; /* Matches .rsn-latest-articles so the slider's edges align with the article grid */
    margin: 40px auto 0; /* Space above (below the header), centered; no bottom margin since Latest Articles adds its own top margin */
    padding: 0 20px; /* Left/right breathing room on smaller screens, matching the section below */
}

/* Positioning box for the arrows — "relative" lets the absolutely-positioned arrow buttons sit on top of the slides */
.rsn-slider-frame {
    position: relative; /* Becomes the reference point for the arrows' top/left/right values */
}

/* The visible "window" — only one slide's worth of the track shows through it */
.rsn-slider-viewport {
    overflow: hidden; /* Clip the off-screen slides so only the current one is visible */
    border-radius: 6px; /* Rounded corners, consistent with the theme's card styling elsewhere */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); /* Same shadow as the article cards, so the slider "lifts" off the page too */
}

/* The long row containing every slide side by side */
.rsn-slider-track {
    display: flex; /* Line the slides up horizontally in a single row */
    transition: transform 0.5s ease; /* Smoothly glide between slides when the JS changes the transform */
}

/* One slide — each takes up exactly the viewport's full width */
.rsn-slide {
    flex: 0 0 100%; /* Don't grow, don't shrink, always exactly 100% of the viewport's width */
    position: relative; /* Reference point for the text overlay positioned on top of the image */
}

/* The link wrapping the whole slide */
.rsn-slide-link {
    display: block; /* Make the link fill the entire slide so the whole thing is clickable */
    color: var(--rsn-ice); /* Ice — default text color inside the slide, on the dark overlay */
    text-decoration: none; /* Remove the default link underline from all the slide's text */
}

/* The slide's featured image */
.rsn-slide-image {
    display: block; /* Removes the small default inline-image gap beneath the image */
    width: 100%; /* Fill the slide's full width */
    height: 440px; /* Fixed height so every slide is the same size no matter the image's shape */
    object-fit: cover; /* Crop the image to fill that box without stretching or squashing it */
    background-color: var(--rsn-depth); /* Depth shows behind the image while it loads (or if it's missing) */
}

/* Dark gradient panel holding the text along the bottom of the image */
.rsn-slide-overlay {
    position: absolute; /* Layer the text on top of the image instead of below it */
    left: 0; /* Stretch from the slide's left edge... */
    right: 0; /* ...to its right edge... */
    bottom: 0; /* ...pinned to the bottom */
    padding: 80px 72px 32px; /* Tall top padding gives the gradient room to fade in; side padding clears the arrow buttons */
    /* Carbon (#060F15) fading from nearly solid at the bottom to fully transparent at the top, */
    /* so the white headline is always readable no matter how bright the photo behind it is */
    background: linear-gradient(to top, rgba(6, 15, 21, 0.95) 0%, rgba(6, 15, 21, 0.7) 55%, rgba(6, 15, 21, 0) 100%);
}

/* Small category tag above the headline (e.g. "NFL") */
.rsn-slide-category {
    display: inline-block; /* Lets the tag take padding/background while staying only as wide as its text */
    font-family: var(--rsn-font-dm-mono); /* Data role: DM Mono — the spec lists "tags" as a Data use case */
    font-weight: var(--rsn-type-data-weight); /* 500 weight, per the Data row of the type spec */
    font-size: var(--rsn-type-data-size); /* 12px, the middle of the Data role's 11–14px range */
    text-transform: uppercase; /* All caps reads as a label/tag rather than a sentence */
    letter-spacing: 0.08em; /* Slight letter spacing keeps small uppercase text legible */
    color: var(--rsn-deep); /* Deep text on the bright Signal background for strong contrast */
    background-color: var(--rsn-signal); /* Signal — brand accent color marks this as a highlight tag */
    padding: 3px 8px; /* A little room around the text inside the tag */
    border-radius: 3px; /* Slightly rounded corners, a smaller radius to suit the small tag */
    margin-bottom: 12px; /* Space between the tag and the headline below it */
}

/* The slide's headline — family/weight/size come from the .rsn-text-display utility class */
.rsn-slide-title {
    color: var(--rsn-ice); /* Ice — primary text color on the dark overlay */
    line-height: 1.05; /* Tight line spacing suits big display headlines that wrap onto two lines */
    margin-bottom: 12px; /* Space between the headline and the excerpt */
    transition: color 0.2s ease; /* Smoothly animate the color change on hover below */
}

/* Hovering anywhere on the slide (or tabbing onto it) tints the headline, signaling the slide is a link */
.rsn-slide-link:hover .rsn-slide-title,
.rsn-slide-link:focus .rsn-slide-title {
    color: var(--rsn-signal); /* Signal — brand accent for link hover states */
}

/* Short excerpt under the headline */
.rsn-slide-excerpt {
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, since "descriptions" is a Body use case */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    font-size: var(--rsn-type-body-size); /* 15px, the middle of the Body role's 14–16px range */
    color: rgba(255, 255, 255, 0.8); /* Slightly muted Ice keeps the excerpt secondary to the headline */
    max-width: 640px; /* Keep the excerpt's lines a comfortable reading length on wide screens */
    margin-bottom: 10px; /* Space between the excerpt and the date */
}

/* Publish date at the bottom of the overlay */
.rsn-slide-date {
    font-family: var(--rsn-font-dm-mono); /* Label role: DM Mono — the spec's own Label example is a publish date */
    font-weight: var(--rsn-type-label-weight); /* 400 weight, per the Label row of the type spec */
    font-size: var(--rsn-type-label-size); /* 10px, the middle of the Label role's 9–11px range */
    color: rgba(255, 255, 255, 0.6); /* Muted Ice — the least important text on the slide */
}

/* Previous/next arrow buttons — shared styling for both */
.rsn-slider-arrow {
    position: absolute; /* Float the buttons on top of the slide image */
    top: 50%; /* Start at the vertical middle of the frame... */
    transform: translateY(-50%); /* ...then nudge up by half the button's own height so it's truly centered */
    width: 44px; /* 44px is the minimum comfortable touch-target size for fingers */
    height: 44px; /* Same as the width, making a circle when combined with the border-radius below */
    border-radius: 50%; /* Turn the square button into a circle */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Faint Ice outline so the button is visible on dark photos */
    background-color: rgba(10, 26, 36, 0.7); /* Deep at 70% opacity — dark enough to read, but lets the image show through */
    display: flex; /* Flexbox lets us center the arrow image inside the circle (next two lines) */
    align-items: center; /* Center the arrow image vertically */
    justify-content: center; /* Center the arrow image horizontally */
    padding: 0; /* Remove the browser's default button padding so the image isn't pushed off-center */
    cursor: pointer; /* Show the "hand" cursor so it's clearly clickable */
    z-index: 2; /* Keep the buttons above the slides */
    transition: background-color 0.2s ease, border-color 0.2s ease; /* Smoothly animate the hover change below */
}

/* The custom arrow image inside each button (images/rsn-left-arrow.png and rsn-right-arrow.png) */
.rsn-slider-arrow-icon {
    display: block; /* Remove the small gap browsers leave under inline images, which would throw off centering */
    width: 26px; /* Shrink the 33px source image a little so it sits comfortably inside the 44px circle */
    height: 26px; /* Match the width to keep the image square and undistorted */
    transition: transform 0.2s ease; /* Smoothly animate the hover nudge below */
}

/* Place each arrow near its own edge of the slide */
.rsn-slider-prev {
    left: 16px; /* 16px in from the slide's left edge */
}
.rsn-slider-next {
    right: 16px; /* 16px in from the slide's right edge */
}

/* Arrow hover and keyboard-focus state */
.rsn-slider-arrow:hover,
.rsn-slider-arrow:focus-visible {
    /* The arrow images are Signal blue, so a Signal fill (the old hover) would make them vanish. */
    /* Instead keep the dark fill, make it solid, and switch the outline to Signal. */
    background-color: var(--rsn-deep); /* Solid Deep (no transparency) so the blue arrow stands out clearly */
    border-color: var(--rsn-signal); /* Signal outline shows the button is active/interactive */
}

/* Nudge each arrow image toward the direction it points on hover/focus, as extra feedback */
.rsn-slider-prev:hover .rsn-slider-arrow-icon,
.rsn-slider-prev:focus-visible .rsn-slider-arrow-icon {
    transform: translateX(-2px); /* Shift the left arrow 2px further left */
}
.rsn-slider-next:hover .rsn-slider-arrow-icon,
.rsn-slider-next:focus-visible .rsn-slider-arrow-icon {
    transform: translateX(2px); /* Shift the right arrow 2px further right */
}

/* Row of dot buttons under the slider */
.rsn-slider-dots {
    display: flex; /* Lay the dots out in a row */
    justify-content: center; /* Center the row under the slider */
    gap: 4px; /* Small space between each dot's (invisible) tap area */
    margin-top: 12px; /* Space between the slider and the dots */
}

/* Each dot button — the button itself is a larger invisible tap area; the visible dot is drawn by ::before */
.rsn-slider-dot {
    width: 28px; /* Wider than the dot itself, giving fingers a bigger target to hit */
    height: 24px; /* Taller than the dot itself, for the same reason */
    padding: 0; /* Remove the browser's default button padding */
    border: none; /* Remove the browser's default button border */
    background: none; /* Remove the browser's default button background — the dot is drawn below */
    cursor: pointer; /* Show the "hand" cursor so it's clearly clickable */
    display: flex; /* Use flexbox to center the visible dot inside the tap area */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

/* The visible dot inside each button */
.rsn-slider-dot::before {
    content: ''; /* Pseudo-elements need a "content" value (even empty) to appear at all */
    width: 10px; /* Dot size */
    height: 10px; /* Same as the width, so it's a circle */
    border-radius: 5px; /* Half the height rounds it into a circle (and the active pill below into a capsule) */
    background-color: rgba(255, 255, 255, 0.3); /* Faint Ice for slides that aren't currently showing */
    transition: width 0.3s ease, background-color 0.3s ease; /* Smoothly animate into/out of the active pill shape */
}

/* Hovering an inactive dot brightens it slightly */
.rsn-slider-dot:hover::before {
    background-color: rgba(255, 255, 255, 0.6); /* Brighter Ice hints that the dot is clickable */
}

/* The dot for the slide that's currently showing (the JS sets aria-current="true" on it) */
.rsn-slider-dot[aria-current="true"]::before {
    width: 24px; /* Stretch into a wider pill so the current position is obvious at a glance */
    background-color: var(--rsn-signal); /* Signal — brand accent for the active state */
}

/* On a slide, the tag sits on the same line as the blue category tag, so give it room on its right */
.rsn-slide-overlay .rsn-breaking-badge {
    margin-right: 8px; /* Gap between the red Breaking News tag and the blue category tag next to it */
    margin-bottom: 12px; /* Match the category tag's bottom spacing so both line up above the headline */
}

/* Respect the visitor's "reduce motion" setting: jump straight between slides instead of gliding */
/* (the JS also turns off autoplay for these visitors) */
@media (prefers-reduced-motion: reduce) {
    .rsn-slider-track,
    .rsn-slider-dot::before {
        transition: none; /* Switch instantly, with no animation */
    }
}

/* Smaller screens: shorter image, smaller headline, and tighter padding so the slide fits a phone */
@media (max-width: 768px) {
    .rsn-slide-image {
        height: 320px; /* Shorter image so the slide doesn't take up the whole phone screen */
    }
    .rsn-slide-overlay {
        padding: 60px 20px 20px; /* Less padding all round; arrows move out of the way (below), so sides can be narrow */
    }
    /* ".rsn-slide" is added in front to make this selector more specific than the .rsn-text-display */
    /* utility class (base.css), so this smaller size always wins, whatever order the files load in */
    .rsn-slide .rsn-slide-title {
        font-size: 28px; /* Much smaller than the 56px desktop Display size, so headlines fit a narrow screen */
    }
    .rsn-slide-excerpt {
        display: none; /* Hide the excerpt on phones — the headline alone is enough, and space is tight */
    }
    .rsn-slider-arrow {
        top: 24px; /* Move the arrows to the top of the image so they don't sit over the headline */
        transform: none; /* Cancel the desktop vertical-centering nudge, since we're no longer centering */
        width: 36px; /* Slightly smaller buttons to suit the smaller screen */
        height: 36px; /* Match the width to stay circular */
    }
    .rsn-slider-arrow-icon {
        width: 22px; /* Smaller arrow image to fit the smaller 36px button */
        height: 22px; /* Match the width to keep it square */
    }
}