/*
 * Home page styles
 * Loaded via @push('styles') — only on the home page.
 */

/* =================================================================
   Section titles (shared pattern)
   ================================================================= */
.section-title {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #ff10a4;
    margin-top: 0.5rem;
}
.section-title.text-center::after {
    margin-left: auto;
    margin-right: auto;
}

/* .btn-pink is defined globally (brand-tokenized) in resources/css/global.css. */

/* =================================================================
   1. HERO SLIDER
   ================================================================= */
.hero-slider {
    position: relative;
    overflow: hidden;
}
.hero-slide-link {
    display: block;
    text-decoration: none;
    color: #fff;
}
.hero-slide-link:hover {
    text-decoration: none;
    color: #fff;
}
.hero-slide {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3840 / 1646; /* Reserve space before media loads — prevents CLS */
}

/* Override Swiper default height:100% so slide height is driven by content */
#hero-swiper .swiper-slide {
    height: auto;
}

/* The <picture> element drives the slide height via natural aspect ratio */
.hero-slide-picture {
    display: block;
    line-height: 0; /* remove inline gap below img */
}
.hero-slide-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video slides */
.hero-slide-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text overlay floats on top of the image.

   Legibility on ANY slide (2026-09-01). Editors choose the imagery, so the
   caption cannot assume a dark background under white text — the WAVE pass
   found white on near-white on two slides. A translucent scrim now sits under
   the whole caption box — a plain solid block, no halo or rounding, by Jesse's
   call the same day. Worst case is a pure-white slide: white text
   on 0.6 black composites to #666 and measures 5.7:1, above AA for the 18px
   sub-heading. The --invert variant does the same in white for dark text.
   HeroCaptionScrimTest recomputes these ratios from this file. Below 768px the
   caption moves under the media onto solid white and the scrim is reset. */
.hero-slide-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 500px;
    text-align: left;
    z-index: 1;
    padding: 2rem 3rem;
    background: rgba(0, 0, 0, 0.6);
}
.hero-slide-content h2 {
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.hero-slide-content p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Layout modifiers — position the text overlay */
.hero-slide--left .hero-slide-content  { left: 0; }
.hero-slide--right .hero-slide-content { right: 0; }
.hero-slide--center .hero-slide-content {
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.hero-slide--center-bottom .hero-slide-content {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding-bottom: 4rem;
}

/* Invert text (dark text for light backgrounds) — same scrim, in white */
.hero-slide--invert .hero-slide-content {
    color: #111;
    background: rgba(255, 255, 255, 0.72);
}
.hero-slide--invert .hero-slide-content h2,
.hero-slide--invert .hero-slide-content p {
    text-shadow: none;
    color: #111;
}

/* Swiper nav arrows */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s;
    /* They are <button>s now — strip the UA chrome. */
    background: none;
    border: 0;
    padding: 0;
}
.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
    opacity: 1;
}

/* Swiper pagination dots */
/* Bullets: a 24px hit area (WCAG 2.2 target size, axe 2026-09-01) drawing
   the same 10px dot it always did, via ::before. */
.hero-slider .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    opacity: 1;
}
.hero-slider .swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.5;
}
.hero-slider .swiper-pagination-bullet-active::before {
    opacity: 1;
}

/* =================================================================
   2. CATEGORY NAVIGATION BOXES
   ================================================================= */
.home-categories {
    overflow: hidden;
}
.category-boxes {
    display: flex;
}
.category-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 700 / 420;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: #111; /* fallback when no image */
}
/* Background image on ::before so we can scale it independently */
.category-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.category-box:hover {
    text-decoration: none;
    color: #fff;
}
.category-box:hover::before {
    transform: scale(1.06);
}
.category-box-inner {
    position: relative;
    z-index: 1; /* above the overlay */
}
.category-box-inner h2 {
    font-weight: 900;
    font-size: 2rem;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin: 0;
    text-align: center;
}

/* =================================================================
   3. FEATURED PRODUCTS
   ================================================================= */
.home-featured {
    padding: 3rem 0;
}
.product-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #333;
    padding: 1rem 0.5rem;
    transition: transform 0.2s;
}
.product-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: #333;
}
.product-card-img {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.product-card-img i {
    font-size: 3rem;
}
/* Constrain the product image to the card and keep it inside its column so
   adjacent cards can't visually overlap. */
.product-card-img img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
.product-card-name {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =================================================================
   4. FROM THE FEED
   ================================================================= */
.home-feed {
    padding: 3rem 0;
    background: #f9f9f9;
}
/* Reserve vertical space so the externally-injected Elfsight widget cannot
   shift surrounding content while its script loads. */
.home-feed-widget {
    min-height: 320px;
}
.home-feed-fallback {
    margin-top: 1.5rem;
    text-align: center;
}
.feed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.feed-item {
    display: block;
    text-decoration: none;
    overflow: hidden;
}
.feed-item-img {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}
.feed-item-img i {
    color: rgba(255,255,255,0.4);
    font-size: 1.5rem;
}
.feed-item:hover .feed-item-img {
    transform: scale(1.05);
}

/* =================================================================
   5. ERNIE BALL NEWS
   ================================================================= */
.home-news {
    padding: 3rem 0;
}
.news-card {
    display: block;
    text-decoration: none;
    color: #333;
    margin-bottom: 1.5rem;
    transition: transform 0.2s;
    border: 1px solid #eee;
    background: #fff;
}
.news-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: #333;
}
.news-card-img {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.news-card-img i {
    font-size: 2rem;
    color: rgba(255,255,255,0.4);
}
.news-card-body {
    padding: 1rem;
}
.news-card-date {
    font-size: 0.6875rem;
    color: #666; /* was #999: 2.85:1 on white. #666 is 5.74:1 (WAVE, 2026-09-01) */
    text-transform: uppercase;
}
.news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-link); /* Slinky Pink on white is 3.3:1; the link token is AA */
    margin: 0.25rem 0;
    line-height: 1.3;
}
.news-card-excerpt {
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.5;
}
.news-card-read-more {
    font-size: 0.8125rem;
    color: var(--brand-link);
    font-weight: 600;
}

/* =================================================================
   6. ABOUT ERNIE BALL
   ================================================================= */
.home-about {
    padding: 4rem 0;
    background: #f5f5f5;
}
.home-about p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #333;
}
.about-read-more {
    color: #666; /* was #999: 2.6:1 on the #f5f5f5 section */
    font-size: 0.8125rem;
    text-decoration: none;
}
.about-read-more:hover {
    color: var(--brand-link);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* Desktop (>= 768px): pull the edge-aligned caption in from the slide edge
   so its scrim block clears the swiper chevrons. 30px was enough for bare
   text; the solid block behind it (2026-09-01) overlapped the right chevron,
   so 60px, mirrored on the left for left-aligned slides. */
@media (min-width: 768px) {
    .hero-slide--right .hero-slide-content {
        right: 60px;
    }
    .hero-slide--left .hero-slide-content {
        left: 60px;
    }
}

/* Tablet (768–991px): scale down text but keep the layout position */
@media (max-width: 991.98px) {
    .hero-slide-content h2 {
        font-size: 2rem;
    }
    .hero-slide-content {
        padding: 1.5rem;
    }
    .category-box-inner h2 {
        font-size: 1.5rem;
    }
    .feed-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile (< 768px): content drops below the media */
@media (max-width: 767.98px) {
    .hero-slide {
        aspect-ratio: auto;           /* let content dictate height */
        display: flex;
        flex-direction: column;
    }
    /* Cap the media so image + text fits in the viewport */
    .hero-slide-picture,
    .hero-slide-video,
    .hero-slide-img {
        max-height: 65svh;
        width: 100%;
        object-fit: cover;
    }
    .hero-slide-picture img {
        max-height: 65svh;
        object-fit: cover;
    }
    .hero-slide-content {
        position: static;
        transform: none;
        max-width: 100%;
        text-align: center;
        padding: 1.25rem 1.5rem;
        color: #111;
        background: #fff;
        flex-shrink: 0;
    }
    .hero-slide-content h2 {
        font-size: 1.5rem;
        text-shadow: none;
        color: #111;
    }
    .hero-slide-content p {
        font-size: 0.9375rem;
        text-shadow: none;
        color: #444;
        margin-bottom: 1rem;
    }
    /* Override invert since content is now on white bg */
    .hero-slide--invert .hero-slide-content,
    .hero-slide--invert .hero-slide-content h2,
    .hero-slide--invert .hero-slide-content p {
        color: #111;
    }
    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        display: none;
    }
    /* Move pagination bullets to the top of the slider, over the image */
    .hero-slider .swiper-pagination {
        top: 0.75rem;
        bottom: auto;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .category-boxes {
        flex-direction: column;
    }
    .feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}