/* Homepage showroom cards, workshop video, purchasing section and testimonial section.
 * Load after Bootstrap; load main.css before a page-type stylesheet.
 * Breakpoints retain the original min-width values.
 */

/* Showroom and featured instruments */
.section-header h2 span { color: var(--kei-red); font-style: italic; }

.showroom { padding: 60px 0; background-color: var(--bg-cream); border-top: 4px solid var(--kei-red); }

.featured-card {
    background-color: var(--bg-wood); border: 1px solid var(--bg-deep);
    transition: transform 0.3s ease, border-color 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.featured-card:hover { transform: translateY(-5px); border-color: var(--kei-red); }

.featured-visual { position: relative; }

.featured-visual img, .featured-visual iframe { width: 100%; height: 230px; object-fit: cover; border-bottom: 2px solid var(--kei-red); }

.featured-number {
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.85); color: var(--white);
    padding: 5px 12px; font-family: var(--font-body); font-weight: bold; font-size: 0.9rem; letter-spacing: 1px; border: 1px solid var(--kei-red);
}

/* Workshop video and overlapping desktop layout */
.look-inside-section {
    padding: 65px 0;
    background-color: var(--bg-deep);
}

.look-inside-box {
    background-color: var(--bg-wood);
    border: 1px solid var(--kei-red);
}

.look-inside-box h2 {
    color: var(--text-light) !important;
    letter-spacing: 2px; /* Moved from HTML */
}

.look-inside-box p,
.look-inside-box li {
    color: var(--text-light) !important;
}

.look-inside-video-wrapper {
    border: 2px solid var(--kei-red); /* Moved from HTML */
}

/* Organ background and cream overlay for homepage cream sections. */
.showroom,
.we-buy-section {
    position: relative;
    background-image: url('../images/hammond-hero.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.showroom::before,
.we-buy-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-cream);
    opacity: 0.92;
    pointer-events: none;
    z-index: 1;
}

.showroom > .container,
.we-buy-section > .container {
    position: relative;
    z-index: 2;
}

/* Instrument purchasing section */
.we-buy-section {
    position: relative;
    background-color: var(--bg-cream);
    padding: 65px 0;
    border-top: 4px solid var(--kei-red);
}

.we-buy-section .container {
    position: relative;
    z-index: 2;
}

.we-buy-section h2,
.we-buy-section p,
.we-buy-section li {
    color: var(--text-dark);
}

/* Homepage testimonial section and cards */
.testimonials-section {
    background-color: var(--bg-deep);
    padding: 65px 0;
    border-top: 4px solid var(--kei-red);
    border-bottom: 4px solid var(--kei-red);
}

.testimonials-section .section-header h2 span { font-style: normal; }

.testimonials-section .section-header h2,
.testimonials-section .section-header p {
    color: var(--text-light) !important;
}

.testimonial-card {
    background-color: var(--white) !important;
    border: none;
    border-bottom: 4px solid var(--kei-red); /* Subtle red accent at bottom of card */
}

.testimonial-card p,
.testimonial-card h4 {
    color: var(--text-dark) !important;
}

/* Responsive homepage overrides */
@media (min-width: 992px) {
    .video-overlap-col { margin-left: -10%;  }

    .look-inside-section .col-lg-5 { z-index: 1 !important; }

    .look-inside-section .video-overlap-col {  margin-left: -6%; z-index: 2 !important;}

    .look-inside-section .look-inside-box { margin-right: -6%; padding-right: calc(3rem + 6%) !important; }
}

@media (min-width: 1400px) {
    .featured-visual img,
    .featured-visual iframe {
        height: 270px;
    }

    .featured-card .p-4 {
        padding: 2rem !important;
    }

    .look-inside-section .look-inside-box {
        padding-right: calc(3.5rem + 6%) !important;
    }

    .look-inside-box p {
        max-width: 58ch;
    }

    .we-buy-section p,
    .we-buy-section li {
        max-width: 72ch;
    }
}

/* Consistent H2 typography on the homepage. */
h2.home-section-heading {
    font-family: var(--font-head);
    font-size: 2.8rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}

h2.home-section-heading span { font-style: normal; }