/**
 * mincore_tabcontainer (b13/container based, multi-tab) - Frontend CSS
 * =====================================================================
 * Element: <section class="mincore-tabs mincore-tabs--{variant}">
 *
 * Token-Quelle: Mandant-spezifisch via min_mandant_<slug>/Resources/Public/Css/design-tokens.css
 * (Pipeline-generiert aus kunden/<slug>/styles/prototype/design-tokens.json).
 * Mandanten-spezifische Farben werden ueber CSS Custom Properties (var(--min-color-*)) referenziert.
 *
 * BEM:
 *   .mincore-tabs                  (Block)
 *     .mincore-tabs__header        (Element)
 *     .mincore-tabs__title         (Element)
 *     .mincore-tabs__subtitle      (Element)
 *     .mincore-tabs__tablist       (Element)
 *     .mincore-tabs__tab           (Element)
 *     .mincore-tabs__panel         (Element)
 *   .mincore-tabs--default         (Modifier, Standard)
 *   .mincore-tabs--lotte-newsbox   (Modifier, Lotte-Newsbox-Layout)
 *
 * Variants in dieser Datei:
 *   - default       : neutrale Standard-Tabs (Underline-Stil)
 *   - lotte-newsbox : Lotte-Layout (gleiche Tab-Optik, Inhalts-Layout
 *                     kommt aus dem Wrapper-Grid in den Tab-Panels)
 *
 * Breakpoints (Werte aus design-tokens.css :9. BREAKPOINTS):
 *   md = 768px, lg = 992px
 *
 * Accessibility:
 *   - WCAG 2.2 AA: Kontrast >= 4.5:1 fuer Text, >= 3:1 fuer UI
 *   - Focus-Ring sichtbar (>= 3:1)
 *   - prefers-reduced-motion respektiert (alle Transitions deaktivierbar)
 *   - Touch-Targets >= 44x44px auf Mobile
 */

/* ==========================================================================
   1. Block: .mincore-tabs (Common Base, alle Variants)
   ========================================================================== */

.mincore-tabs {
    display: block;
    margin-block: var(--min-space-section, 4rem);
    color: var(--min-color-text, #171717);
    font-family: var(--min-font-sans, system-ui, sans-serif);
    line-height: var(--min-leading-normal, 1.5);
}

.mincore-tabs__header {
    margin-block-end: var(--min-space-lg, 1.5rem);
    padding-inline: var(--min-space-container, 1rem);
}

.mincore-tabs__title {
    margin: 0 0 var(--min-space-sm, 0.5rem);
    font-size: var(--min-text-2xl, 1.5rem);
    font-weight: var(--min-font-semibold, 600);
    line-height: var(--min-leading-tight, 1.25);
    color: var(--min-color-text, #171717);
}

.mincore-tabs__subtitle {
    margin: 0;
    font-size: var(--min-text-base, 1rem);
    color: var(--min-color-text-muted, #525252);
}

/* ==========================================================================
   2. Tab list (role="tablist")
   ========================================================================== */

.mincore-tabs__tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    border-block-end: var(--min-border-width, 1px) solid var(--min-color-border, #e5e5e5);
    background-color: transparent;
}

/* ==========================================================================
   3. Tab button (role="tab")
   ========================================================================== */

.mincore-tabs__tab {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Touch-target >= 44x44 (WCAG 2.5.5) */
    min-block-size: 44px;
    padding: var(--min-space-3, 0.75rem) var(--min-space-4, 1rem);
    /* Typo */
    font-family: inherit;
    font-size: var(--min-text-base, 1rem);
    font-weight: var(--min-font-medium, 500);
    line-height: var(--min-leading-snug, 1.375);
    color: var(--min-color-text-muted, #525252);
    text-align: center;
    /* Visual cue: bottom border placeholder for active state */
    border-block-end: var(--min-border-width-2, 2px) solid transparent;
    margin-block-end: -1px; /* Overlap tablist border */
    cursor: pointer;
    transition: var(--min-transition-colors,
        color 150ms ease-out,
        border-color 150ms ease-out,
        background-color 150ms ease-out);
}

.mincore-tabs__tab:hover {
    color: var(--min-color-text, #171717);
    background-color: var(--min-color-bg-alt, #fafafa);
}

.mincore-tabs__tab:focus-visible {
    outline: var(--min-border-width-2, 2px) solid var(--min-color-focus, #3b82f6);
    outline-offset: 2px;
    /* Slight inset so the focus ring is fully visible inside the row */
    border-radius: var(--min-radius-sm, 0.125rem);
}

/* Active tab (aria-selected="true") */
.mincore-tabs__tab[aria-selected="true"] {
    color: var(--min-color-primary, #2563eb);
    border-block-end-color: var(--min-color-primary, #2563eb);
    background-color: transparent;
}

/* ==========================================================================
   4. Tab panel (role="tabpanel")
   ========================================================================== */

.mincore-tabs__panel {
    display: block;
    padding: var(--min-space-lg, 1.5rem) var(--min-space-container, 1rem);
}

.mincore-tabs__panel[hidden] {
    display: none;
}

/* Smooth fade-in on tab switch (only when motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
    .mincore-tabs__panel:not([hidden]) {
        animation: mincore-tabs-fade-in var(--min-duration-normal, 300ms) var(--min-ease-out, ease-out);
    }
}

@keyframes mincore-tabs-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   5. Variant: --default (already covered by base styles above)
   ========================================================================== */

/* No additional rules — base styles ARE the default variant. */

/* ==========================================================================
   6. Variant: --lotte-newsbox
   ========================================================================== */
/* Layout-Stil fuer Lotte-Homepage-Newsbox.
   Tab 1: Wrapper-Grid 1fr / 2fr (33/66 auf md+).
   Tab 2: einzeilige Liste.
   Inhalt der Tabs (news_pi1-Plugins) kommt vom Editor in die Container-Slots.
   Diese Regeln stylen NUR den Wrapper, nicht das news-Plugin selbst.
*/

.mincore-tabs--lotte-newsbox {
    /* Slight contrast box so the news section is recognisable as a unit */
    background-color: var(--min-color-bg-alt, #fafafa);
    border-radius: var(--min-radius-lg, 0.5rem);
    padding-block: var(--min-space-lg, 1.5rem);
}

.mincore-tabs--lotte-newsbox .mincore-tabs__header {
    padding-inline: var(--min-space-lg, 1.5rem);
}

.mincore-tabs--lotte-newsbox .mincore-tabs__tablist {
    padding-inline: var(--min-space-lg, 1.5rem);
}

.mincore-tabs--lotte-newsbox .mincore-tabs__panel {
    padding: var(--min-space-lg, 1.5rem);
}

/* Tab 1 panel: 2-column wrapper grid for news_pi1 plugins.
   Each direct child of the panel (a tt_content rendered block) becomes a column.
   Mobile-first: single column. From md upwards: 1fr 2fr (33/66 like Pfad-C-Brief). */
.mincore-tabs--lotte-newsbox .mincore-tabs__panel[data-tab-index="1"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--min-space-lg, 1.5rem);
}

@media (min-width: 768px) {
    .mincore-tabs--lotte-newsbox .mincore-tabs__panel[data-tab-index="1"] {
        grid-template-columns: 1fr 2fr;
        gap: var(--min-space-xl, 2rem);
    }
}

/* Tab 2 panel: single-column list, narrower content reading width */
.mincore-tabs--lotte-newsbox .mincore-tabs__panel[data-tab-index="2"] {
    display: block;
    max-inline-size: 80ch;
}

/* Make news-plugin lists more readable inside the newsbox */
.mincore-tabs--lotte-newsbox .mincore-tabs__panel ul,
.mincore-tabs--lotte-newsbox .mincore-tabs__panel ol {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

/* ==========================================================================
   7. Responsive (xs / sm) - mobile-first refinements
   ========================================================================== */

/* On very small screens, allow horizontal scrolling for the tablist
   instead of wrapping (wrapping creates uneven button heights). */
@media (max-width: 575px) {
    .mincore-tabs__tablist {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .mincore-tabs__tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   8. High-contrast / Dark mode - delegated to design-tokens.css
   ========================================================================== */
/* Tokens already swap colors in [data-theme="dark"] / @media prefers-color-scheme:dark
   blocks of design-tokens.css. No overrides needed here as long as we use tokens. */