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

/* ==================== CONTACT PAGE INTRO ==================== */

.contact-intro {
    text-align: center;
    font-size: var(--font-size-lg);
    margin-bottom: 4rem;
    color: #ccc;
    line-height: 1.8;
    letter-spacing: 1.65px;
}

/* ==================== CONTACT SECTION ==================== */

.contact-section {
    margin-bottom: 4rem;
}

/* Contact Box - Wrapper wie story-box */
.contact-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 Desktop, 2rem ≤768px -
       siehe Fluid-Design-Audit Kategorie B2/B3). Desktop-Maximum
       unverändert. */
    padding: clamp(var(--spacing-lg), 6vw, var(--spacing-xl));
    box-shadow: var(--shadow-glow-white);
}

.contact-box h2 {
    color: var(--color-primary);
    font-size: var(--font-size-5xl);
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 3px;
}

.contact-description {
    text-align: center;
    font-size: var(--font-size-base);
    margin-bottom: 3rem;
    color: #FFFFFF;
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 1.65px;
}

/* ==================== CONTACT METHODS GRID ==================== */

.contact-methods {
    display: grid;
    /* Explizit statt auto-fit - konsistent zum etablierten Muster
       (Testimonials, Video-Grid, Workshop-Showcase, Worldwide-Features). */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

/* Social-Media-Bereich hat nur 2 statt 3 Karten (Instagram/Facebook) -
   die Basis-Regel (repeat(3,1fr)) passte nur für den 3-Karten-Bereich
   "Direkte Kontaktmöglichkeiten". Auf Desktop (>1024px, wo die
   Media-Query unten noch nicht greift) entstand dadurch eine leere
   dritte Spalte, die die beiden vorhandenen Karten asymmetrisch schmal
   wirken ließ. Gezielte Modifier-Klasse statt Änderung der Basis-Regel,
   damit der 3-Karten-Bereich unangetastet bleibt. Bewusst OHNE max-width:
   Die 2 Karten sollen die volle verfügbare Breite ausfüllen (nicht auf
   700px begrenzt bleiben), analog zum 3-Karten-Bereich darüber. */
.contact-methods--social {
    grid-template-columns: repeat(2, 1fr);
}

/* Contact Card - Mit Zoom-Hover wie gallery-item */
.contact-card {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: 12px;
    /* Fluid statt starrem 2.5rem 2rem - komplett ohne Mobile-Anpassung.
       Gleiche Formel wie .card-benefit--featured (identische Werte).
       Desktop-Maximum unverändert. */
    padding: clamp(var(--spacing-md), 5vw, var(--spacing-lg-alt))
             clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow-white);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

/* Link Wrapper - Macht ganze Card klickbar */
.contact-card-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.contact-card-link .contact-card {
    cursor: pointer;
}

/* Hover: Gesamte Card hebt sich + Shadow */
.contact-card-link:hover .contact-card {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}

/* Icon Container */
.contact-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s;
}

/* Hover: Icon zoomt rein */
.contact-card-link:hover .contact-card-icon {
    transform: scale(1.1);
}

.contact-card-icon svg {
    width: 60px;
    height: 60px;
    stroke: var(--color-primary);
    fill: none;
    transition: stroke 0.3s;
}

/*
.contact-card-link:hover .contact-card-icon svg {
    stroke: #fff;
}*/

.contact-card h3 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

/* Instagram/Facebook: Überschrift weiß statt golden - selbst hier
   anpassbar, indem einfach die Farbe geändert wird. */
.contact-card--social h3 {
    color: #FFFFFF;
}

.contact-card p {
    font-size: var(--font-size-base);
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 0;  /* Kein margin - nutzt Spacer */
    letter-spacing: 1.65px;
}

/* Spacer - kontrolliert Abstand zwischen Text und Action */
.contact-card p + .contact-card-action::before {
    content: '';
    display: block;
    height: 0.75rem;  /* 12px Abstand - HIER ANPASSEN */
    margin-bottom: 0;
}

/* Action Text (früher <a>, jetzt <span>) */
.contact-card-action {
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 1.5px;
    display: inline-block;
    transition: color 0.3s, transform 0.3s;
    margin-top: auto;  /* Bleibt am Ende */
}

.contact-card-link:hover .contact-card-action {
    /*color: #fff;*/
	transform: scale(1.1);  /* ← Zoom 110% */
}

/* .social-methods entfernt: nie ins Markup eingebunden, Kontakt-Seite
   nutzt durchgängig .contact-methods für dasselbe Konzept. */

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

@media (max-width: 1024px) {
    .contact-methods {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Bei genau 3 Kontaktkarten: 3. Karte zentriert unter den beiden
       anderen - gleiches Muster wie Testimonials/Video-Grid/Workshop-
       Showcase. */
    .contact-methods > .contact-card:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 2rem) / 2);
    }
}

@media (max-width: 768px) {
    .contact-intro {
        font-size: var(--font-size-base);
    }
    
    .contact-methods {
        grid-template-columns: 1fr;
    }

    /* Reset der 3.-Karte-Zentrierung aus dem 1024px-Block oben - der
       deckt auch den Bereich <=768px mit ab, wo das Grid inzwischen
       bereits einspaltig ist. Ohne diesen Reset bliebe die Karte auf
       die halbe (nicht mehr existierende) 2-Spalten-Breite verengt. */
    .contact-methods > .contact-card:nth-child(3):last-child {
        width: auto;
        justify-self: stretch;
    }
}