/**
 * REITPROFIL SECTION - 4-COLUMN GRID LAYOUT
 * Converted from Figma/Home Tailwind version
 *
 * Layout: 1 column mobile → 2 columns tablet → 4 columns desktop
 * Cards: 1 text card + 3 image cards with hover effects
 */

/* ===== SECTION WRAPPER ===== */
#reitprofil {
    background: #000;
    position: relative;
    padding-top: 120px !important; /* Mobile: Überschrift tiefer (mehr Abstand zum Divider) */
}

/* Desktop: Normales Padding */
@media (min-width: 1024px) {
    #reitprofil {
        padding-top: 6rem !important; /* Desktop: Standard */
    }
}

/* Desktop: Padding reduzieren */
@media (min-width: 1024px) {
    #reitprofil {
        padding-bottom: 60px !important;
    }
}

/* Inhalt über dem Divider, aber Section-Hintergrund darunter */
#reitprofil .container {
    position: relative;
    z-index: 10;
}

/* ===== SECTION HEADER ===== */
#reitprofil .section-category {
    /* Uses default from typography.css */
}

#reitprofil .section-subtitle {
    /* Uses default from typography.css */
}

/* ===== GRID CONTAINER ===== */
/* Mobile: Horizontal Scroll */
.reitprofil-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--container-padding-mobile));
    margin-right: calc(-1 * var(--container-padding-mobile));
    margin-bottom: 0 !important;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.reitprofil-grid::-webkit-scrollbar {
    display: none;
}

.reitprofil-grid > .reitprofil-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
}

/* Tablet Portrait: 2 columns Grid */
@media (min-width: 768px) {
    .reitprofil-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        overflow-x: visible;
        scroll-snap-type: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .reitprofil-grid > .reitprofil-card {
        flex: none;
    }

    /* Text-Card über 2 Spalten auf Tablet Portrait */
    .reitprofil-card--text {
        grid-column: span 2;
        aspect-ratio: unset;
        min-height: auto;
        padding: var(--space-lg);
    }
}

/* Tablet Landscape: 3 columns, hide 2 cards */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: landscape),
       (min-width: 1024px) and (max-width: 1279px) {
    .reitprofil-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .reitprofil-card--text {
        grid-column: span 1;
        aspect-ratio: 3 / 4;
        min-height: 288px;
        padding: 1.5rem;
    }

    .reitprofil-card--tablet-hidden {
        display: none;
    }
}

/* Desktop: 4 columns */
@media (min-width: 1280px) {
    .reitprofil-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .reitprofil-card--text {
        grid-column: span 1;
        aspect-ratio: 3 / 4;
        min-height: 288px;
        padding: 1.5rem;
    }
}

/* ===== CARD BASE STYLES ===== */
.reitprofil-card {
    position: relative;
    overflow: hidden;
    min-height: 288px;
    aspect-ratio: 3 / 4; /* Festes Seitenverhältnis verhindert Verzerrung */
    display: flex;
    align-items: flex-end; /* Content at bottom for image cards */
    cursor: pointer;
    border-radius: 6px;
}

/* Tablet landscape: Etwas breiteres Verhältnis */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .reitprofil-card {
        aspect-ratio: 4 / 5;
    }
}

/* ===== TEXT CARD (Card 1) ===== */
.reitprofil-card--text {
    background: #141B4D; /* Header-Blau */
    align-items: center; /* Center content vertically */
}

/* CTA-Card Hover (wenn Text-Card als Link verwendet wird) */
a.reitprofil-card--text {
    transition: background-color 0.2s ease;
}

a.reitprofil-card--text:hover p {
    color: var(--old-gold) !important; /* Gold bei Hover */
    transition: color 0.2s ease;
}

.reitprofil-card--text .reitprofil-card__content {
    width: 100%;
    height: 100%;
    padding: 1.5rem; /* Mehr Padding auf Mobile für bessere Lesbarkeit */
    padding-left: 2rem; /* Extra Platz links für Anführungszeichen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    container-type: inline-size;
}

/* Mehr Padding wenn Platz vorhanden */
@media (min-width: 768px) and (orientation: portrait) {
    .reitprofil-card--text .reitprofil-card__content {
        padding: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .reitprofil-card--text .reitprofil-card__content {
        padding: 1.5rem;
    }
}

.reitprofil-card__quote {
    color: #ffffff; /* Weiß */
    /* Größere Schrift auf Mobile für bessere Raumnutzung */
    font-size: 1.2rem;
    font-family: var(--font-interface);
    line-height: 1.6;
    margin-bottom: 0.75rem;
    position: relative;
}

/* Tablet Portrait (volle Breite): Größere Schrift */
@media (min-width: 768px) and (orientation: portrait) {
    .reitprofil-card__quote {
        font-size: 1.25rem;
    }
}

/* Desktop (breite Spalten): Noch größer */
@media (min-width: 1200px) {
    .reitprofil-card__quote {
        font-size: 1.5rem;
    }
}

/* Anführungszeichen betonen */
.reitprofil-card__quote::before {
    content: '"';
    font-size: 3rem; /* 48px - große Anführungszeichen */
    line-height: 0;
    position: absolute;
    top: 0.5rem;
    left: -0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

.reitprofil-card__quote::after {
    content: '"';
    font-size: 3rem;
    line-height: 0;
    position: absolute;
    bottom: -1rem;
    right: -0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Quote-Schriftgröße: Automatisch via Container Query (cqi) in .reitprofil-card__quote */

.reitprofil-card__author {
    color: rgba(255, 255, 255, 0.7); /* Helles Grau */
    font-size: 1rem; /* 16px */
    font-family: var(--font-interface);
}

/* ===== IMAGE CARDS (Cards 2-4) ===== */
.reitprofil-card--image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay */
.reitprofil-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 33.333%; /* 1/3 of card height */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    transition: opacity 300ms ease;
}

/* Image card title */
.reitprofil-card__title {
    position: relative;
    font-size: 1.5rem; /* 24px */
    font-weight: 400;
    color: white;
    line-height: 1.75rem;
    padding: 2rem; /* 32px */
    z-index: 10;
    transition: opacity 300ms ease;
}

/* ===== HOVER EFFECTS ===== */
.reitprofil-card--image:hover .reitprofil-card__overlay,
.reitprofil-card--image:hover .reitprofil-card__title {
    opacity: 0;
}

/* ===== ACCESSIBILITY ===== */
/* Focus states for keyboard navigation */
.reitprofil-card:focus {
    outline: 2px solid var(--penn-blue);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reitprofil-card__overlay,
    .reitprofil-card__title {
        transition: none;
    }
}

/* ===== UTILITY: HIDE ON DESKTOP ===== */
@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none;
    }
}