/* ==========================================================================
   ISOXPERT — eigene Anpassungen (Mega-Menü + Leistungsübersicht)
   --------------------------------------------------------------------------
   Gilt AUSSCHLIESSLICH für ul.sub-menu.ct-mega-leistungen aus
   resources/views/system/header/partials/leistungen_submenu.blade.php.
   Kein anderes Menü und kein anderes Theme-Element wird berührt.

   Desktop (>= 1200px): das Dropdown wird zu einem mehrspaltigen Panel.
       Jede Kategorie ist eine Spalte, ihre Leistungen stehen fest sichtbar
       darunter (statt als seitliches Flyout aufzuklappen).

   Mobile (< 1200px): bewusst KEINE Regeln. Dort bleibt das Theme-Accordion
       aus main.js aktiv (Leistungen > Abdichtung > Kellerabdichtung).
   ========================================================================== */

@media screen and (min-width: 1200px) {

    /* --- Panel ------------------------------------------------------------ */
    .ct-main-menu .sub-menu.ct-mega-leistungen {
        display: flex;
        align-items: stretch;
        width: -webkit-max-content;
        width: max-content;
        max-width: min(900px, calc(100vw - 60px));
        padding: 28px 10px;
        border-radius: 0 0 6px 6px;
    }

    /* Theme-JS hängt .back an überlaufende Flyouts und schiebt sie mit
       right:100% nach links aus dem Bild. Für das Panel stattdessen rechts
       ausrichten, damit es im Viewport bleibt. */
    .ct-main-menu .sub-menu.ct-mega-leistungen.back {
        left: auto !important;
        right: 0 !important;
    }

    /* --- Spalte = Kategorie ---------------------------------------------- */
    .ct-main-menu .sub-menu.ct-mega-leistungen > li.ct-mega-col {
        flex: 1 1 0;
        min-width: 216px;
        padding: 0 22px;
        white-space: normal;
    }

    .ct-main-menu .sub-menu.ct-mega-leistungen > li.ct-mega-col + li.ct-mega-col {
        border-left: 1px solid rgba(58, 66, 104, 0.11);
    }

    /* --- Kategorie-Überschrift ------------------------------------------- */
    .ct-main-menu .sub-menu.ct-mega-leistungen > li.ct-mega-col > a {
        display: block;
        padding: 0 0 10px;
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .01em;
        color: #0d1b45;
        border-bottom: 1px solid rgba(58, 66, 104, 0.16);
    }

    /* Der Chevron ">" des Theme-Flyouts ergibt hier keinen Sinn mehr,
       ebenso der Hover-Einzug der Überschrift. */
    .ct-main-menu .sub-menu.ct-mega-leistungen > li.ct-mega-col > a:after,
    .ct-main-menu .sub-menu.ct-mega-leistungen > li.ct-mega-col > a:before {
        display: none;
    }

    .ct-main-menu .sub-menu.ct-mega-leistungen > li.ct-mega-col > a:hover {
        padding-left: 0;
        color: var(--primary-color);
    }

    /* --- Leistungen innerhalb der Spalte --------------------------------- */
    /* Aus dem absoluten Flyout wird ein statischer Listenblock. */
    .ct-main-menu .sub-menu.ct-mega-leistungen .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        clip: auto;
        -webkit-transform: none;
        transform: none;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        margin: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .ct-main-menu .sub-menu.ct-mega-leistungen .sub-menu li {
        padding: 0;
        white-space: normal;
    }

    .ct-main-menu .sub-menu.ct-mega-leistungen .sub-menu li a {
        padding: 7px 0;
        border-bottom: none;
        line-height: 1.35;
        -webkit-transition: color 180ms linear, padding-left 180ms linear;
        transition: color 180ms linear, padding-left 180ms linear;
    }

    /* Dezente Hover-Animation: der Theme-Strich links, sonst nichts. */
    .ct-main-menu .sub-menu.ct-mega-leistungen .sub-menu li a:hover {
        padding-left: 14px;
    }
}

/* ==========================================================================
   ISOXPERT — /leistungen Übersicht, Kategorie-Überschriften
   --------------------------------------------------------------------------
   Die Übersicht gruppiert Leistungen nach Kategorie.

   Bewusst NICHT die Theme-Klasse .item--title: die ist für Kartentitel auf dem
   dunklen Bild-Overlay gedacht — weisse Schrift mit opacity:0, die per
   Scroll-Animation eingeblendet wird. Auf weissem Grund wäre sie unsichtbar.

   Font (Poppins) und Gewicht erbt die Überschrift vom Theme; hier werden nur
   Grösse und Farbe gesetzt.

   Hierarchie: Seitentitel 36px > Kategorie 28px > Kartentitel 20px.
   ========================================================================== */

.ct-service-category--title {
    font-size: 28px;
    line-height: 1.25;
    color: #0d1b45;
}

@media screen and (max-width: 767px) {
    .ct-service-category--title {
        font-size: 24px;
    }
}