/* ================================================
   CHI BASEL - Tablet Header CSS
   Nur fuer iPad Hoch und aehnliche Tablets
   Breakpoint: min-width 768px AND max-width 1100px
   Version: 9.6
   ================================================ */

@media (min-width: 768px) and (max-width: 1100px) {

    /* ============================================================
       HEADER
       ============================================================ */

    .et_pb_section_1_tb_header {
        padding-top: 20px !important;
    }

    .et_pb_row_4_tb_header {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .et_pb_section_1_tb_header .et_pb_row {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .et_pb_column_9_tb_header {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        padding-right: 10px !important;
    }

    .chi-hamburger {
        margin-top: 8px !important;
        margin-left: auto !important;
    }

    /* ============================================================
       SEITENINHALT — 20px Abstand links und rechts (alle Rows)
       ============================================================ */

    /* Alle Rows: 20px Abstand — AUSSER verschachtelte Rows (et_pb_row_nested)
       damit Divi's internes Flex-Layout auf Unterseiten nicht gestört wird */
    .et_pb_section .et_pb_row:not(.et_pb_row_nested) {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* ============================================================
       BILD 1 — HERO
       ============================================================ */

    .et_pb_section_4.chi-page-layer {
        min-height: 60vh !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .et_pb_section_4 .et_pb_row_3 {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .et_pb_section_4.et_flex_section {
        align-items: flex-start !important;
    }

    /* ============================================================
       COUNTDOWN: 3 Spalten nebeneinander halten
       ============================================================ */

    .et_pb_section_5 .et_pb_row_4 {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .et_pb_section_5 .et_pb_row_4 > .et_pb_column {
        flex: 1 1 0 !important;
        width: 33.333% !important;
        max-width: 33.333% !important;
        min-width: 0 !important;
    }

    /* ============================================================
       NEWS: 3 Spalten gleich breit, Cards korrekt
       ============================================================ */

    .chi-news-row {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* News-Columns: nur innerhalb chi-news-row — nicht global!
       et_pb_column_8 wird auch auf anderen Seiten verwendet (z.B. Preise) */
    .chi-news-row .et_pb_column_6,
    .chi-news-row .et_pb_column_8,
    .chi-news-row .et_pb_column_10 {
        width: calc(33.333% - 6px) !important;
        flex: 0 0 calc(33.333% - 6px) !important;
        max-width: calc(33.333% - 6px) !important;
        min-width: 0 !important;
    }

    /* Innere Card-Row: Mindesthöhe nur auf iPad */
    .et_pb_column_6 .et_pb_row,
    .et_pb_column_8 .et_pb_row,
    .et_pb_column_10 .et_pb_row {
        min-height: 400px !important;
    }

    /* Titel: min-height damit alle Cards gleich starten */
    .chi-news-title .et_pb_text_inner {
        min-height: 100px !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    /* Weisse Card — gleiche Höhe in allen 3 Spalten */
    .chi-news-card {
        height: 100% !important;
        min-height: 400px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Inhalt in Spalten nicht abschneiden */
    .et_pb_column_6 .et_pb_module,
    .et_pb_column_8 .et_pb_module,
    .et_pb_column_10 .et_pb_module {
        height: auto !important;
        overflow: visible !important;
    }

    /* ============================================================
       QUICKLINKS — Balken gleich breit wie Bild (505px)
       ============================================================ */

    /* Quicklinks-Row linksbündig mit Titel ausrichten */
    .et_pb_section_5 .et_pb_row_9 {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .et_pb_column_13 .et_pb_text_20,
    .et_pb_column_14 .et_pb_text_21,
    .et_pb_column_15 .et_pb_text_22 {
        max-width: 505px !important;
        width: 505px !important;
        box-sizing: border-box !important;
    }

    /* ============================================================
       SPONSOREN
       ============================================================ */

    .chi-sponsors {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .chi-title {
        padding-left: 0 !important;
    }

    /* Logos in Grid-Zellen linksbündig ausrichten (980px-Block setzt justify-content: center) */
    .chi-row-1 .chi-col-c .chi-logo,
    .chi-row-2 .chi-logo,
    .chi-row-3 .chi-col-bc .chi-logo,
    .chi-row-4 .chi-col-span .chi-logo {
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /* Sponsor-Logos iPad: 4-Spalten-Grid, linksbündig.
       Erhöhte Spezifität mit .chi-sponsors damit Plugin-CSS überschrieben wird */
    .chi-sponsors .chi-row-1 .chi-col-c .chi-logos,
    .chi-sponsors .chi-row-2 .chi-logos,
    .chi-sponsors .chi-row-3 .chi-col-bc .chi-logos,
    .chi-sponsors .chi-row-4 .chi-col-span .chi-logos {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
        align-items: center !important;
        width: 100% !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
    }

    /* Alle Logos: Grid mit justify-items:start — jedes Logo in jeder Zeile linksbündig */
    .chi-sponsors .chi-row-1 .chi-col-c .chi-logos,
    .chi-sponsors .chi-row-2 .chi-logos,
    .chi-sponsors .chi-row-3 .chi-col-bc .chi-logos,
    .chi-sponsors .chi-row-4 .chi-col-span .chi-logos {
        justify-items: start !important;
    }

    .chi-sponsors .chi-row-1 .chi-col-c .chi-logo,
    .chi-sponsors .chi-row-2 .chi-logo,
    .chi-sponsors .chi-row-3 .chi-col-bc .chi-logo,
    .chi-sponsors .chi-row-4 .chi-col-span .chi-logo {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* SRF Sport Logo (Official Broadcaster): inline style="height:17px" überschreiben */
    .chi-row-3 .chi-col-a .chi-logo img {
        height: 20px !important;
        max-height: 20px !important;
        width: auto !important;
    }

    /* ============================================================
       FOOTER: Social Icons verkleinern
       ============================================================ */

    .et_pb_text_30_tb_header img {
        width: 40px !important;
        height: 40px !important;
    }

    .et_pb_section_8_tb_header img {
        width: 40px !important;
        height: 40px !important;
    }

    /* ============================================================
       PREISE-SEITE (page-id-2022): Tages-Abschnitte
       Problem: Unsere .et_pb_section .et_pb_row padding-Regel
       macht die verschachtelten Rows zu schmal → Tagname bricht um
       Lösung: padding auf Preise-Seite zurücksetzen + flex-direction
       ============================================================ */

    /* Footer: Social Icons — nebeneinander, verkleinert */
    /* Alle 5 Icons sitzen in EINER Column (et_pb_column_7_tb_footer) */
    .chi-footer-social {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .chi-footer-social .et_pb_image {
        width: auto !important;
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
    }

    .chi-footer-social img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        display: block !important;
    }

}


/* ================================================
   iPad QUER (Landscape) + grosse Tablets
   Breakpoint: min-width 1101px AND max-width 1280px
   ================================================ */

@media (min-width: 1101px) and (max-width: 1280px) {

    /* Mobile-Abschnitt ausblenden — nur Desktop-Header zeigen */
    .et_pb_section_1_tb_header {
        display: none !important;
    }

    /* HERO: Abstand zum Header */
    .et_pb_section_4.chi-page-layer {
        padding-top: 30px !important;
    }

    /* HERO Claim: EMOTION. FASCINATION. PASSION. */
    .chi-hero-claim .et_pb_text_inner,
    .chi-hero-claim .et_pb_text_inner * {
        font-size: clamp(30px, 5vw, 50px) !important;
        line-height: 1.1 !important;
    }

    /* HERO Subtitle: FEI WORLD CUP etc. */
    .chi-hero-subtitle .et_pb_text_inner,
    .chi-hero-subtitle .et_pb_text_inner * {
        font-size: clamp(14px, 2vw, 20px) !important;
        line-height: 1.3 !important;
    }