/*
 * Music Man 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: #c8a84e;
    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: 2560 / 1400; /* Legacy www's slide proportions; reserves space before media loads (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. INSTRUMENT FAMILY NAVIGATION
   ================================================================= */
.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 INSTRUMENTS
   ================================================================= */
.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;
}
.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;
}

/* =================================================================
   5. MUSIC MAN 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); /* gold on white is 2.65: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 MUSIC MAN
   ================================================================= */
.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);
}

/* =================================================================
   LEGACY WWW SECTIONS (2026-11-03): details, factory tour, family,
   find a dealer + join the family
   ================================================================= */
.home-details {
    padding: 4rem 0 0;
    background: #fff;
}
.home-details__intro {
    max-width: 46rem;
    margin: 0 auto 2rem;
    text-align: center;
}
.home-details__intro p {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
}
.home-details__neck {
    display: block;
    width: 100%;
    height: auto;
}
.home-details__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-details__item {
    position: relative;
}
.home-details__item img {
    display: block;
    width: 100%;
    height: auto;
}
/* Legacy laid the caption over the photo's dark lower edge; a scrim keeps
   white text at AA whatever the photo does there. */
.home-details__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1.25rem 1.25rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
}
.home-details__caption h3 {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
    color: #fff;
}
.home-details__caption p {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
}

.home-factory-tour {
    position: relative;
    background-color: #111;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.home-factory-tour::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.home-factory-tour__inner {
    position: relative;
    max-width: 40rem;
    margin: 0 auto;
    padding: 6rem 1.5rem;
    text-align: center;
}
.home-factory-tour__inner h2 {
    font-size: 2.25rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
}
.home-factory-tour__inner p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.home-family {
    padding: 4rem 0;
    background: #f5f5f5;
}
.home-family__img {
    display: block;
    width: 100%;
    height: auto;
}
.home-family__copy {
    padding-top: 1.5rem;
}
.home-family__copy p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #333;
}

.home-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.home-pair__half {
    padding: 3.5rem 1.5rem;
    text-align: center;
}
.home-pair__half h2 {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
}
.home-pair__half--dealer {
    background: #111;
    color: #fff;
}
.home-pair__half--dealer h2 {
    color: #fff;
}
.home-pair__half--join {
    background: #fff;
    color: #111;
}

@media (max-width: 991.98px) {
    .home-details__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .home-details__grid,
    .home-pair {
        grid-template-columns: 1fr;
    }
    .home-factory-tour__inner {
        padding: 4rem 1.25rem;
    }
}

/* =================================================================
   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;
    }
}

/* Mobile (< 768px): content drops below the media */
@media (max-width: 767.98px) {
    .hero-slide {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }
    .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;
    }
    .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;
    }
}