/*
 * hc-overrides.css — friseur-hietzing.at Ad-hoc-Overrides
 *
 * Lade-Reihenfolge: index.html bindet diese Datei NACH index-*.css ein,
 * damit Specificity + Cascade-Order die Build-Regeln ueberstimmen.
 *
 * Hintergrund: Der React-Source ist verloren, nur das gebaute Bundle
 * liegt vor. Strukturelle Aenderungen werden hier per CSS + Bootstrap-JS
 * (hc-overrides.js) erzwungen, bis der Source rekonstruiert ist.
 *
 * Mandant-Hinweis fuer spaeter: Sobald der Source da ist, sollten
 * Sidebar-Module ueber Feature-Flags pro Mandant konfigurierbar sein
 * (Termin-Block ein/aus analog `beauty_shop_aktiv`).
 */

/* ============================================================
 * 2026-05-15 (v2): Untere Info-Tiles-Reihe komplett entfernt.
 *
 * Die 5er-Reihe ("Termin vereinbaren", "Online Termin",
 * "Gutscheine kaufen", "Unser Beauty & Wellness Shop", "Unser Salon
 * Shop") wird KOMPLETT ausgeblendet — Desktop UND Mobile.
 *
 * Mobile war via @media schon display:none; Desktop hatte die Reihe
 * mit flex:1 + grid 5-spaltig im hc-home-grid. Wir blenden den
 * Container global aus.
 * ============================================================ */
.hc-info-tiles {
  display: none !important;
}

/* ============================================================
 * 2026-05-15 (v2): Layout-Korrektur fuer das Maincontent-Flex-Column.
 *
 * Die Karten hatten margin-top:auto (in Kombi mit hc-info-tiles flex:1
 * wurde die Vertikale verteilt). Mit weggefallenen Info-Tiles wuerde
 * margin-top:auto die Karten nach unten kleben, Hero stehen lassen und
 * dazwischen klafft Leerraum. Pragmatischer Fix: margin-top normalisieren,
 * Hero + Karten setzen sich oben zusammen, unten bleibt sauberer
 * Whitespace (Korbs minimal-flat Aesthetik).
 * ============================================================ */
.hc-home-grid .hc-karten {
  margin-top: 32px !important;
}

/* ============================================================
 * 2026-05-16 (v3): Hero+Karten gestapelt statt nebeneinander.
 *
 * Build-Regel `@media (width>=1600px)` setzte hc-home-grid auf ein
 * 2-Spalten-Grid (hero 62fr links, karten 38fr rechts als 2x2).
 * Soll: Hero volle Breite oben, Karten in einer 4er-Reihe darunter.
 *
 * Override greift ab 1024px Breite (Desktop). Mobile/Tablet (<=1023px)
 * bleibt unangetastet: dort ist home-grid weiter flex-column und
 * karten ist 2x2-Grid (CSS-Build-Regel `@media (width<=1024px)`).
 *
 * Zwingt:
 *   - home-grid: flex-column statt grid 62fr/38fr
 *   - hero: volle Breite, Standard-Hoehe (50vh)
 *   - karten: 4-Spalten-Grid, border-top statt border-left,
 *     normaler Abstand zu hero
 *   - musicplayer/footer/etc. behalten ihren flex-column-Platz
 * ============================================================ */
@media (width >= 1024px) {
  .hc-home-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .hc-home-grid .hc-hero {
    grid-area: auto !important;
    width: 100% !important;
    height: 50vh !important;
    min-height: 50vh !important;
  }
  .hc-home-grid .hc-karten {
    grid-area: auto !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: 1fr !important;
    border-top: 1px solid var(--line) !important;
    border-left: none !important;
    /* v5: margin-top 0 entfernt den weissen 32px-Streifen zwischen Ticker
     * und Tiles (war v3-Patch zur Kompensation der entfernten Info-Tiles,
     * mit v4-Ticker-Position ist die Luecke nun ungewollt). */
    margin-top: 0 !important;
    /* v5: flex:1 auf die Karten-Reihe, damit sie den verbleibenden
     * Vertical-Space zwischen Ticker und Footer ausfuellt — Hero (50vh)
     * + Ticker + Karten + Footer = 100vh, keine Leerflaeche. */
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
  .hc-home-grid .hc-karten .hc-karte {
    /* v5: Tile selbst muss schrumpfen koennen, damit der Bild-Flex greift.
     * v6: zusaetzlich height:100% gegen Grid-Cell-Stretch (Tile fuellt
     * vertikal seine Spalte aus, in der die Karten-Reihe flext). */
    min-height: 0 !important;
    height: 100% !important;
  }
  .hc-home-grid .hc-karten .hc-karte-img-wrap {
    /* v6: Bild zurueck auf festes 16:9 (v5 hatte aspect-ratio:unset
     * + flex:1, was die Bilder vertikal gestreckt hat). Bild bleibt
     * jetzt formatstabil; der ueberschuessige Vertical-Space in der
     * Tile geht an .hc-karte-body (siehe naechste Regel). */
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
  }
  .hc-home-grid .hc-karten .hc-karte-body {
    /* v6: Body uebernimmt den Restplatz unter dem 16:9-Bild. Bei sehr
     * hoher Karten-Reihe entsteht unten am Tile mehr weisser Background
     * (Tile-Body) — Bildqualitaet hat Vorrang vor Footer-Pinning. */
    flex: 1 1 auto !important;
  }
}

/* ============================================================
 * 2026-05-16 (v4): Ticker zwischen Hero und Service-Tiles + Sidebar-BG.
 *
 * POSITION-Problem (Desktop): Im Build hat .hc-ticker auf Desktop
 * (>=769px) KEIN flex-order. DOM-Reihenfolge ist Ticker-vor-Hero
 * (JSX rendert Xi vor .hc-hero), daher visuell stand der Ticker
 * GANZ OBEN — ueber dem Hero-Bild. (Auf Mobile <=768px setzt der
 * Build explizite Order-Werte: Hero:1, Ticker:2, Karten:4 — daher
 * dort korrekt unter Hero.)
 *
 * Fix: Auf Desktop (>=769px, deckt Tablet+Desktop+Wide) explizite
 * flex-order setzen: Hero:1, Ticker:2, Karten:3. Damit landet der
 * Ticker visuell in der Zone zwischen Hero und Tiles (genau der
 * Whitespace, der nach v3-Stacking dort entstanden ist).
 *
 * BACKGROUND-Problem: Der Ticker hat im JSX ein inline `style=
 * {{background: db.bg_color}}` aus hcs_tickers.bg_color (DB-Wert
 * aktuell `#000000` = reines Schwarz). Override mit `!important`
 * gewinnt gegen Inline-Style. Wert `var(--dark1)` = sidebar background
 * (`.hc-left { background: var(--dark1) }`, --dark1: #1a1a1a in :root).
 * Theme-aware: bei spaeteren Theme-Anpassungen zieht der Ticker mit.
 *
 * Mobile (<=768px): unangetastet (Build-Regeln greifen wie bisher).
 * ============================================================ */
@media (width >= 769px) {
  .hc-home-grid .hc-hero        { order: 1 !important; }
  .hc-home-grid .hc-ticker      { order: 2 !important; }
  .hc-home-grid .hc-karten      { order: 3 !important; }
  .hc-home-grid .hc-musicplayer { order: 4 !important; }
  .hc-home-grid .hc-footer      { order: 5 !important; }
}

.hc-ticker {
  background: var(--dark1) !important;
}

/* ============================================================
 * 2026-05-15 (v2): Termin-CTA in der linken Sidebar (Desktop).
 *
 * Wird per hc-overrides.js nach .hc-oez-wrap injiziert.
 * Stil orientiert sich an .hc-oez-wrap (border-top, padding-top:16px,
 * Schriftgroessen 14/13 wie umliegende Sidebar-Elemente).
 *
 * Mobile (<=768px): nicht sichtbar (Mobile-CTA-Reihe .hc-cta-tiles
 * mit "Jetzt anrufen" + "Online Termin" deckt das ab).
 * ============================================================ */
.fh-termin-cta {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  margin-top: 4px;
}

.fh-termin-cta-head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
}

.fh-termin-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--light);
  stroke-width: 1.6;
  fill: none;
}

.fh-termin-cta-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
}

.fh-termin-cta-tel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  background: #ffffff14;
  border-radius: 8px;
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}

.fh-termin-cta-tel:hover {
  background: #ffffff26;
  color: var(--white);
}

.fh-termin-cta-tel-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

@media (width <= 768px) {
  .fh-termin-cta {
    display: none !important;
  }
}