/* ==========================================================================
   Product Highlights — Storefront Accordion Styles
   Based on: SampleProductHighlightsAccordeon.html
   ========================================================================== */

/* --- Section container --- */

/* Full-width background breakout: bg spans viewport, content stays centered */
.ph-section.ph-has-bg {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: 5rem calc(50vw - 50%);
}

.ph-header {
    margin-bottom: 1.5rem;
}

.ph-tagline {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    color: inherit;
    opacity: 0.6;
}

.ph-title {
    /* Inherits standard h2 styles from theme */
}

.ph-text {
    font-weight: normal;
}

/* --- Accordion shell: grid layout --- */
.accordion-shell {
    display: block;
    padding-top: 6px;
}

@media (min-width: 992px) {
    .accordion-shell {
        display: grid;
        grid-template-columns: 2fr 2fr;
        gap: 24px;
        align-items: start;
    }
}

/* --- Accordion cards --- */
.accordion-shell .accordion .card,
.accordion-shell .accordion .card-header {
    border: none;
    background: transparent;
    padding: 0;
    overflow: visible;
}

.accordion-shell .accordion .btn-link:focus-visible {
    position: relative;
    z-index: 1;
}

.accordion-shell .accordion .card-body {
    padding: 0;
}

/* --- Active item indicator (border + bold title) --- */
.accordion-shell .accordion-item-wrapper.open .accordion-left {
    border-left-color: #000;
}

.accordion-shell .accordion-item-wrapper.open .btn-link {
    font-weight: 700;
}

.accordion-shell .accordion-left {
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 3px solid transparent;
    transition: border-color 0.25s ease;
    min-width: 0;
}

/* --- Accordion buttons --- */
.accordion-shell .accordion .btn-link {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #000;
    text-align: left;
    text-decoration: none;
    border: none !important;
    border-radius: 0 !important;
    background: none;
    white-space: normal;
    hyphens: manual;
    overflow-wrap: normal;
    position: relative;
}

.accordion-shell .accordion .btn-link:hover,
.accordion-shell .accordion .btn-link:active {
    text-decoration: none;
}

.accordion-shell .accordion .btn-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* WCAG 2.2: Visible focus indicator (2.4.7, 2.4.11, 2.4.13) */
.accordion-shell .accordion .btn-link:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 4px;
}

/* WCAG 2.2: Target Size (2.5.8) - Minimum 44x44px */
.accordion-shell .accordion .btn-link {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* --- Content & text --- */
.accordion-shell .accordion-content {
    padding-bottom: 0.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    color: #000;
    background: transparent;
}

.accordion-shell .accordion-content p:last-child {
    margin-bottom: 0;
}

.accordion-shell .card-header h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    margin: 0;
}

/* --- Media (video & image) --- */
.accordion-shell .panel-media video,
.accordion-shell .panel-media img,
.accordion-shell .accordion-visual video,
.accordion-shell .accordion-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-bottom: 1rem;
}

/* Video cropping instead of letterboxing */
.accordion-shell .panel-media video,
.accordion-shell .accordion-visual video {
    object-fit: cover;
}

/* --- Right visual column (desktop) --- */
.accordion-shell .accordion-visual {
    margin: 0;
    min-width: 0;
    min-height: 375px;
    overflow: hidden;
}

/* Slide-in animation for desktop visual on media switch */
@keyframes phSlideInFromRight {
    from {
        transform: translateX(60%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.accordion-shell .accordion-visual .ph-slide-in {
    animation: phSlideInFromRight 0.5s ease forwards;
}

@media (min-width: 992px) {
    .accordion-shell .accordion-visual {
        position: sticky;
        top: 0;
    }
}

/* --- Panel media: visible below lg, hidden on lg+ --- */
.accordion-shell .panel-media {
    margin: 0;
}

@media (min-width: 992px) {
    .accordion-shell .panel-media {
        display: none !important;
    }
}

/* --- Utility: hide elements --- */
.accordion-shell .is-hidden {
    display: none !important;
}

/* --- Reduced motion for users with vestibular disorders --- */
@media (prefers-reduced-motion: reduce) {
    .accordion-shell .accordion-left,
    .accordion-shell * {
        transition: none !important;
        animation: none !important;
    }
}