/* pages/custom-design-experience (MM): the Custom Design Experience landing page.
   Layout follows legacy www.music-man.com /assets/css/cde.css. */

.cde-hero { position: relative; }
.cde-hero__art, .cde-hero__image { display: block; width: 100%; height: auto; }
.cde-hero__logo { position: absolute; left: 15%; top: 30%; width: 70%; }
.cde-hero__logo img { display: block; width: 100%; height: auto; }

.cde-section { padding: 1.5rem 0; }
.cde-heading {
    margin: 0 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid #ddd; text-align: center;
    font-weight: 300; text-transform: uppercase; letter-spacing: .05em; font-size: 1.75rem;
}
.cde-intro { max-width: 46rem; margin: 1rem auto 1.5rem; text-align: center; font-size: 1.125rem; }

.cde-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.cde-model { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.cde-model__image { display: block; width: 100%; height: auto; }
.cde-model__button {
    display: inline-block; padding: .6rem 1.75rem; border: 1px solid var(--brand-primary); border-radius: 4px;
    text-transform: uppercase; letter-spacing: .05em; color: #222; background: #fff;
}
.cde-model:hover .cde-model__button, .cde-model:focus-visible .cde-model__button { background: var(--brand-primary); }

.cde-finishes {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.cde-finish { text-align: center; }
.cde-finish__image { display: block; width: 100%; height: auto; margin-bottom: .5rem; }
.cde-finish__name { display: block; font-size: 1rem; font-weight: 600; min-height: 2.6em; }

.cde-gallery__frame { position: relative; }
.cde-gallery__track {
    list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column;
    grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.cde-gallery__slide { scroll-snap-align: start; }
.cde-gallery__slide img { display: block; width: 100%; height: auto; }
.cde-gallery__arrow {
    position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;
}
.cde-gallery__arrow[hidden] { display: none; }
.cde-gallery__arrow:disabled { opacity: .3; cursor: default; }
.cde-gallery__arrow::before { content: ''; display: block; width: 12px; height: 12px; margin: 0 auto; border: solid #fff; border-width: 0 3px 3px 0; }
.cde-gallery__arrow--prev { left: 8px; }
.cde-gallery__arrow--prev::before { transform: translateX(2px) rotate(135deg); }
.cde-gallery__arrow--next { right: 8px; }
.cde-gallery__arrow--next::before { transform: translateX(-2px) rotate(-45deg); }

.cde-finance__band { position: relative; color: #fff; background: #111; }
.cde-finance__image { display: block; width: 100%; height: auto; }
.cde-finance__copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.cde-finance__band:not(:has(.cde-finance__image)) .cde-finance__copy { position: static; padding: 2.5rem 1rem; }
.cde-finance__copy h2 { margin: 0 0 .5rem; font-size: 2rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.cde-finance__with { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.cde-finance__affirm { height: 1.6em; width: auto; vertical-align: -.35em; }
.cde-finance__disclosure { margin: .75rem 0 0; font-size: .875rem; color: #555; }

.cde-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cde-process__art { position: relative; background: #222; min-height: 6rem; }
.cde-process__art img { display: block; width: 100%; height: auto; }
.cde-process__title {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0;
    color: #fff; text-transform: uppercase; font-size: 2rem; font-weight: 600; text-align: center;
}
.cde-process__body { margin: 1.25rem .5rem; text-align: center; text-transform: uppercase; font-size: .875rem; font-weight: 300; }

.cde-faq { margin: 0; color: #444; }
.cde-faq__q { font-weight: 600; font-size: 1rem; }
.cde-faq__a { margin: .25rem 0 0; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #ddd; }

.cde-article { text-align: center; }
.cde-article__bear { display: block; width: 120px; height: auto; margin: 0 auto 1rem; }
.cde-article__heading { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.cde-article__subheading { margin: .25rem 0 1.5rem; text-transform: uppercase; letter-spacing: .1em; color: #666; }
.cde-article__body { max-width: 56rem; margin: 0 auto; text-align: left; }
.cde-article__body h3 { margin: 1.5rem 0 .5rem; font-size: 1.25rem; }
.cde-article__body h4 { margin: 1rem 0 .25rem; font-size: 1.0625rem; }

@media (min-width: 768px) {
    .cde-hero__logo { left: 27%; width: 46%; }
    .cde-gallery__track { grid-auto-columns: 50%; }
    .cde-finance__copy h2 { font-size: 2.5rem; }
    .cde-finance__with { font-size: 1.5rem; }
}
@media (min-width: 1200px) {
    .cde-gallery__track { grid-auto-columns: calc(100% / 3); }
}
@media (max-width: 767.98px) {
    .cde-models, .cde-process { grid-template-columns: 1fr; }
}