/* ==========================================================================
   LAYOUT.CSS — Container, Grid, Section Spacing, Hero, Footer
   Autohaus Vorndran GmbH — MODX 3.2.0
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CONTAINER
   -------------------------------------------------------------------------- */

.container {
    width:         100%;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  1rem;
    padding-right: 1rem;
}

@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }


/* --------------------------------------------------------------------------
   2. GRID HELPERS
   -------------------------------------------------------------------------- */

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gap-3 { gap: .75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   3. FLEXBOX HELPERS
   -------------------------------------------------------------------------- */

.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1 1 0%; }
.shrink-0      { flex-shrink: 0; }
.grow          { flex-grow: 1; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-stretch { align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-x-2   { column-gap: .5rem; }
.gap-y-4   { row-gap: 1rem; }
.gap-y-5   { row-gap: 1.25rem; }
.gap-y-2\.5 { row-gap: .625rem; }
.space-y-2  > * + * { margin-top: .5rem; }
.space-y-6  > * + * { margin-top: 1.5rem; }

@media (min-width: 1024px) {
    .lg\:flex        { display: flex; }
    .lg\:flex-col    { flex-direction: column; }
    .lg\:flex-row    { flex-direction: row; }
    .lg\:flex-1      { flex: 1 1 0%; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-end  { justify-content: flex-end; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:gap-0       { gap: 0; }
}


/* --------------------------------------------------------------------------
   4. DISPLAY HELPERS
   -------------------------------------------------------------------------- */

.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.relative     { position: relative; }
.absolute     { position: absolute; }
.sticky       { position: sticky; }
.inset-0      { inset: 0; }
.top-0        { top: 0; }
.bottom-0     { bottom: 0; }
.w-full       { width: 100%; }
.h-full       { height: 100%; }
.h-auto       { height: auto; }
.w-auto       { width: auto; }
.max-w-full   { max-width: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

@media (min-width: 1024px) {
    .lg\:block           { display: block; }
    .lg\:hidden          { display: none; }
    .lg\:relative        { position: relative; }
    .lg\:absolute        { position: absolute; }
    .lg\:inset-0         { inset: 0; }
    .lg\:w-auto          { width: auto; }
    .lg\:w-1\/4          { width: 25%; }
    .lg\:w-3\/4          { width: 75%; }
    .lg\:max-w-3xl       { max-width: 48rem; }
    .lg\:mx-auto         { margin-left: auto; margin-right: auto; }
    .lg\:overflow-y-visible { overflow-y: visible; }
}


/* --------------------------------------------------------------------------
   5. SPACING UTILITIES
   -------------------------------------------------------------------------- */

.p-4   { padding: 1rem; }
.py-3  { padding-top: .75rem;  padding-bottom: .75rem; }
.py-4  { padding-top: 1rem;    padding-bottom: 1rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.px-2  { padding-left: .5rem;  padding-right: .5rem; }
.px-4  { padding-left: 1rem;   padding-right: 1rem; }
.pt-0  { padding-top: 0; }
.pt-4  { padding-top: 1rem; }
.pt-8  { padding-top: 2rem; }
.pb-0  { padding-bottom: 0; }
.pb-8  { padding-bottom: 2rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.ml-2  { margin-left: .5rem; }
.mr-2  { margin-right: .5rem; }
.pr-5  { padding-right: 1.25rem; }

@media (min-width: 1024px) {
    .lg\:pt-8   { padding-top: 2rem; }
    .lg\:pt-16  { padding-top: 4rem; }
    .lg\:pb-16  { padding-bottom: 4rem; }
    .lg\:pb-24  { padding-bottom: 6rem; }
    .lg\:py-3   { padding-top: .75rem; padding-bottom: .75rem; }
    .lg\:px-24  { padding-left: 6rem;  padding-right: 6rem; }
    .lg\:mb-5   { margin-bottom: 1.25rem; }
    .lg\:mb-16  { margin-bottom: 4rem; }
    .lg\:mt-0   { margin-top: 0; }
    .lg\:mb-\[126px\] { margin-bottom: 126px; }
    .lg\:py-0   { padding-top: 0; padding-bottom: 0; }
    .lg\:p-0    { padding: 0; }
}


/* --------------------------------------------------------------------------
   6. MAIN CONTENT SECTIONS
   -------------------------------------------------------------------------- */

main { display: block; }
section { display: block; }

.section-hero { position: relative; }

.section-center {
    display:         flex;
    justify-content: center;
    width:           100%;
}

.section-inner {
    width:           100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}

.prose-container {
    width:     100%;
    max-width: 48rem;
    margin:    0 auto;
}


/* --------------------------------------------------------------------------
   7. VEHICLE SEARCH BAR
   -------------------------------------------------------------------------- */

#vehicle_search_facets {
    width:            100%;
    position:         relative;
    background-color: rgba(255,255,255,0.65);
    z-index:          60;
}

#filter {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    flex:        1;
    row-gap:     .625rem;
    margin:      0 auto;
}


/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */

footer {
    background-color: var(--footer-background-colour);
    padding-top:      2rem;
    padding-bottom:   2rem;
}

@media (min-width: 1024px) {
    footer {
        padding-top:    4rem;
        padding-bottom: 4rem;
    }
}

.footer-links {
    display:        flex;
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    flex-start;
    gap:            .75rem;
}

@media (min-width: 1024px) {
    .footer-links {
        align-items: center;
        gap:         1.5rem;
    }
}

.footer-links a h4 {
    font-size:     .875rem;
    font-weight:   600;
    margin-bottom: 1rem;
    color:         var(--footer-text-colour);
}

.footer-copy {
    margin-left: .5rem;
    margin-top:  1.5rem;
    font-size:   .875rem;
    font-weight: 400;
    color:       var(--footer-text-colour);
    text-align:  center;
}

@media (min-width: 1024px) {
    .footer-copy { margin-top: 0; }
}


/* --------------------------------------------------------------------------
   9. HERO SLIDER (Splide + Echterstrasse style overlay)
   -------------------------------------------------------------------------- */

.hero-slider-section {
    width:    100%;
    overflow: hidden;
    position: relative;
}

.hero-slide-figure {
    margin:        0;
    padding:       0;
    position:      relative;
    width:         100%;
    aspect-ratio:  40 / 13;
    overflow:      hidden;
}

@media (max-width: 767px) {
    .hero-slide-figure {
        aspect-ratio: 16 / 9;
    }
}

.hero-slide-img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

/* Dark overlay box — bottom left */
.hero-slide-overlay {
    position:   absolute;
    bottom:     2rem;
    left:       2rem;
    max-width:  45%;
    background: rgba(0, 0, 0, 0.72);
    padding:    1.75rem 2rem;
    z-index:    10;
}

@media (max-width: 767px) {
    .hero-slide-overlay {
        bottom:    1rem;
        left:      1rem;
        max-width: 90%;
        padding:   1.25rem;
    }
}

.hero-slide-title {
    font-family:    var(--display-font);
    font-size:      1.5rem;
    font-weight:    800;
    color:          #ffffff;
    text-transform: uppercase;
    margin-bottom:  0.75rem;
    line-height:    1.2;
}

@media (min-width: 1024px) {
    .hero-slide-title { font-size: 1.875rem; }
}

.hero-slide-subtitle {
    font-family:   var(--body-font);
    font-size:     1rem;
    font-weight:   400;
    color:         #ffffff;
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

/* White button — matches Echterstrasse */
.hero-slide-btn {
    display:         inline-block;
    background:      #ffffff;
    color:           #000000;
    font-family:     var(--body-font);
    font-size:       0.875rem;
    font-weight:     600;
    padding:         0.625rem 1.25rem;
    text-decoration: none;
    border:          2px solid #ffffff;
    transition:      background 0.2s ease, color 0.2s ease;
}

.hero-slide-btn:hover {
    background:      transparent;
    color:           #ffffff;
    text-decoration: none;
}

/* Splide arrow overrides */
.splide__arrow {
    background:    rgba(0, 0, 0, 0.7);
    border-radius: 0;
    width:         2.5rem;
    height:        4rem;
}
.splide__arrow svg { fill: #ffffff; }
.splide__arrow:hover {
    background: rgba(0, 0, 0, 0.9);
    opacity:    1;
}
.splide__arrow--prev { left: 0; }
.splide__arrow--next { right: 0; }