/**
 * About Page Components
 * Juliana y Fadi Tango Website
 * 
 * Spezifische Komponenten für ueber-uns.php
 * (Pfad: css/pages/ueber-uns.css - vormals fälschlich unter css/components/)
 */

/* ==================== HERO - ABOUT SPECIFIC ==================== */

/* Struktur (Breite, Höhe, Flex, Position, Farbe) kommt von der gemeinsamen
   .hero-Klasse in css/components/hero.css - hier nur das Seiten-spezifische
   Hintergrundbild, der Verlauf (jetzt vereinheitlicht auf den mehrheitlich
   genutzten Wert 0.5/0.7) und der bewusst abweichende Bildausschnitt. */
.hero--about {
    background-image: var(--hero-gradient), 
                url('../../images/ueber_uns/about-hero.jpg');
    /* Bewusste Ausnahme (nicht "center" wie bei den anderen Seiten):
       zeigt mehr vom Bild / positioniert die Personen besser im Ausschnitt. */
    background-position: center 32%;
}

/* .hero__content-Positionierung (früher: eigene position:absolute-Lösung
   mit top:53%) wurde entfernt - läuft jetzt über die zentrale, fluide
   margin-top-Regel in components/hero.css (.hero__content), wie auf
   allen anderen Seiten auch. */

/* .hero h1 / .hero__subtitle liegen zentral in components/hero.css. */


/* ==================== PHILOSOPHIE: EINE KARTE STATT DREI BOXEN ====================
   Ersetzt die früheren drei .card-benefit-Boxen: Titel, Intro-Text und die
   drei Spalten (Verbindung/Ausdruck/Emotionen) liegen jetzt gemeinsam in
   EINER Karte, die Spalten selbst haben keinen eigenen Kasten mehr, nur
   dünne Trennlinien dazwischen. */

.philosophy-pillars {
    /* Fluid statt starrer 4rem/3rem - komplett ohne Mobile-Anpassung
       (Fluid-Design-Audit Kategorie B2/B3). Desktop-Maxima unverändert. */
    margin: clamp(var(--spacing-lg), 8vw, var(--spacing-2xl)) 0;
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: 12px;
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    box-shadow: var(--shadow-glow-white);
}

.philosophy-pillars h2 {
    color: var(--color-primary);
    font-size: var(--font-size-6xl);
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 2px;
}

.philosophy-pillars__intro {
    text-align: center;
    font-size: var(--font-size-lg);
    max-width: 800px;
    margin: 0 auto 3rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* Trennlinie zwischen Intro-Text und den drei Spalten - identisch zur
   Trennlinie bei der Práctica-Karte auf der Preise-Seite
   (.card-price--practica__location, css/components/cards.css). */
.philosophy-pillars__divider {
    height: 1px;
    margin-top: 2rem;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--color-primary) 15%,
        var(--color-primary) 85%,
        transparent 100%
    );
}

.philosophy-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}

.philosophy-pillars__item {
    text-align: center;
    padding: 0 1.5rem;
}

.philosophy-pillars__item:not(:first-child) {
    border-left: 1px solid #333;
}

.philosophy-pillars__item h3 {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.philosophy-pillars__item p {
    color: #ccc;
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
}

/* Ab hier bricht die rechte Spalte (Emotionen) zuerst in eine neue Zeile
   um (2 Spalten oben, 1 volle Breite darunter) - vertikale Trennlinie
   ergibt für die alleinstehende Zeile keinen Sinn mehr, daher horizontale
   Trennlinie stattdessen. */
@media (max-width: 900px) {
    .philosophy-pillars__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .philosophy-pillars__item:nth-child(3) {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid #333;
        padding: 1.5rem 1.5rem 0;
        margin-top: 0.5rem;
    }
}

/* Schmalste Bildschirme: alle drei komplett untereinander, durchgehend
   horizontale statt vertikaler Trennlinien. */
@media (max-width: 600px) {
    .philosophy-pillars__grid {
        grid-template-columns: 1fr;
    }

    .philosophy-pillars__item:not(:first-child) {
        border-left: none;
        border-top: 1px solid #333;
        padding: 1.5rem 0 0;
        margin-top: 0.5rem;
    }

    .philosophy-pillars__item:first-child {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

/* ==================== STORY SECTION MIT BOX ==================== */

.about-story-section {
    /* Fluid statt starrem 6rem - komplett ohne Mobile-Anpassung (Fluid-
       Design-Audit Kategorie B2/B3, hier bislang übersehen). Desktop-
       Maximum unverändert bei 6rem (kein passender Skalen-Wert dafür
       vorhanden, daher Literal statt Variable - wie z.B. auch bei
       .divider/.mb-fluid-divider gehandhabt). */
    margin: clamp(var(--spacing-lg), 8vw, 6rem) 0;
}

.about-box {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: 12px;
    /* Fluid statt starrer 2-Stufen-Kaskade (3rem/4rem Desktop, 2rem/2rem
       ≤768px - siehe Fluid-Design-Audit Kategorie B2/B3, gilt gemeinsam
       für .about-box--reverse). Desktop-Maxima unverändert. */
    padding: clamp(var(--spacing-lg), 6vw, var(--spacing-xl));
    box-shadow: var(--shadow-glow-white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--spacing-lg), 8vw, var(--spacing-2xl));
    align-items: start;
}

/* Reverse Layout (Bild rechts, Text links) */
.about-box--reverse {
    direction: rtl;
}

.about-box--reverse > * {
    direction: ltr;
}

/* Single Column Variante - Nur Text, kein Grid */
.about-box--single {
    display: block;  /* Statt grid */
    text-align: center;
    /*max-width: 1000px;*/
    margin: 0 auto;
}

.about-box--single h2 {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    margin-bottom: 2rem;
    letter-spacing: 3px;
}

.about-box--single p {
    font-size: var(--font-size-lg);
    color: #FFFFFF;
    line-height: 1.8;
    margin-bottom: 2rem;
    letter-spacing: 1.65px;
}

.about-box--single .about-quote {
    background: rgba(221, 191, 95, 0.1);
    border-left: 4px solid var(--color-primary);
    padding: 2rem;
    margin: 3rem 0;
    font-size: var(--font-size-2xl);
    font-style: italic;
    color: var(--color-primary);
    line-height: 1.8;
    letter-spacing: 1.65px;
    text-align: left;  /* Quote linksbündig */
}

/* Story Image - Mit goldenem Rahmen + Zoom Hover */
.about-story-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: var(--border-width-medium) solid var(--border-color-default);/*2px solid var(--color-primary);  /* Goldener Rahmen */
	/*box-shadow: var(--shadow-glow-gold); //++FF Juliana fragen was ihr gefällt*/
    position: relative;
}

.about-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    transition: transform 0.5s ease;  /* Smooth Zoom */
}

/* Hover Zoom Effect */
.about-story-image:hover img {
    transform: scale(1.1);  /* Zoom 110% */
}

/* Story Text */
.about-story-text h2 {
    font-size: var(--font-size-5xl);
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.about-story-text p {
    font-size: var(--font-size-lg);
    color: #FFFFFF;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    letter-spacing: 1.65px;
}

.about-story-text .highlight {
    color: var(--color-primary);
    font-weight: 600;
}

/* ==================== TEAM SECTION ==================== */

/* Team Box Modifier - Nutzt about-box als Basis */
.about-box--team {
    display: block;  /* Überschreibt grid */
    text-align: center;
    /* Fluid statt starrem 2rem - komplett ohne Mobile-Anpassung
       (Fluid-Design-Audit Kategorie B2/B3). Desktop-Maximum unverändert. */
    padding: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    transition: transform 0.3s, box-shadow 0.3s;
}

/*.about-box--team:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 30px rgba(255, 255, 255, 0.5);
}*/

/* Team Image - RUND mit goldenem Rahmen + Zoom Hover */
/* Fluid statt starrer 2-Stufen-Kaskade (350px Desktop, 250px <=768px,
   ohne weitere Anpassung darunter - siehe Fluid-Design-Audit Kategorie
   B2/B3, gleiches Muster wie z.B. .about-box--team padding oben). Bei
   sehr schmalen Viewports (~300px) blieb der Kreis zuvor stur bei 250px
   stehen und sprengte dadurch die Kartenbreite. clamp() skaliert jetzt
   stufenlos zwischen 180px (Minimum) und 350px (Desktop-Maximum). */
.about-team-image {
    width: clamp(180px, 55vw, 350px);
    height: clamp(180px, 55vw, 350px);
    margin: 0 auto 1.5rem;
    border-radius: 50%;  /* RUND! */
    overflow: hidden;
    border: var(--border-width-medium) solid var(--border-color-default);/*3px solid var(--color-primary);  /* Goldener Rahmen - dicker */
    box-shadow: var(--shadow-glow-gold);
	position: relative;
}

.about-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform 0.5s ease;  /* Smooth Zoom */
}

/* Hover Zoom Effect */
.about-team-image:hover img {
    transform: scale(1.1);  /* Zoom 110% */
}

.about-box--team h3 {
    font-size: var(--font-size-4xl);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.about-team-role {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    font-style: italic;
    margin-bottom: 1.5rem;
    letter-spacing: 1.5px;
}

.about-box--team p {
    font-size: var(--font-size-base);
    color: #FFFFFF;
    line-height: 1.7;
    letter-spacing: 1.65px;
    text-align: left;
}

/* Bio 2 (kurzes Label, z.B. "Was Fadi über mich sagt:") und Bio 3 (das
   eigentliche Zitat) sollen ohne Leerzeile direkt übereinander stehen -
   dafür den sonst überall geerbten Absatz-Abstand (margin-bottom) hier
   gezielt entfernen. Bio 1 behält ihre Absätze weiterhin über <br><br>
   innerhalb des Textes (siehe common.php), das bleibt unberührt. */
.about-bio-2 {
    text-align: left;
    margin-bottom: 0;
}

/* Optionale Zusatz-Klasse für Bio 2 in Gold - im HTML einfach
   "about-bio-2 about-bio-2--gold" statt nur "about-bio-2" setzen, um sie
   zu aktivieren, oder wieder entfernen für die normale weiße Farbe.
   Selektor bewusst mit "p" kombiniert (höhere Spezifität), da die
   allgemeine ".about-box--team p"-Regel oben sonst ihr "color: #FFFFFF"
   durchsetzen würde. */
p.about-bio-2--gold {
    color: var(--color-primary);
}

.about-bio-3 {
    font-style: italic;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 968px) {
    /* .hero__content--about-Regel entfernt (siehe Hinweis oben) - keine
       Ersatzregel nötig, die zentrale Lösung deckt auch diese Breite ab. */
}

@media (max-width: 768px) {
    /* Höhen-Anpassung kommt jetzt bereits von der gemeinsamen .hero-Regel */

    /* .hero__content--about-Regel entfernt (siehe Hinweis oben in der
       Basis-Sektion) - keine Ersatzregel nötig. */

    /* h1/.hero__subtitle-Verkleinerung kommt bereits von der
       gemeinsamen .hero-Regel (components/hero.css). */
    
    /* Story Box */
    .about-box,
    .about-box--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    
    .about-story-image {
        min-height: 400px;
    }
    
    .about-story-text p {
        font-size: var(--font-size-base);
    }
    
    /* .about-why-tango entfernt: nie ins Markup eingebunden. */
    
    .about-quote {
        font-size: var(--font-size-lg);
        padding: 1.5rem;
    }
}

/* Hinweis: Bei 480px gibt es keinen eigenen Breakpoint mehr - die
   Höhen-Anpassung kommt bereits von der gemeinsamen .hero-Regel
   (siehe css/components/hero.css) */