/* =========================================================
 * i2t3 Content Tabs — trigger row + switching panel.
 * Styles: tabs (text + optional icon), tiles (image cards),
 * pointer (dark icon nav with a caret pointing at a light panel).
 * ========================================================= */

/* Icon inside a text tab (style "tabs") */
.i2t3-contenttabs__icon {
    margin-right: .5rem;
}

/* --- Tiles style ------------------------------------------------------- */
.i2t3-contenttabs--tiles .i2t3-contenttabs__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    border-bottom: 0;
    margin-bottom: 1.5rem;
}
.i2t3-contenttabs--tiles .i2t3-contenttabs__trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    width: 9rem;
    max-width: 40vw;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    background: transparent;
    color: inherit;
}
.i2t3-contenttabs--tiles .i2t3-contenttabs__trigger.active {
    border-color: var(--i2t3-primary, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 2px var(--i2t3-primary, var(--bs-primary, #0d6efd));
}
.i2t3-contenttabs--tiles .i2t3-contenttabs__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--bs-border-radius, .375rem);
}
.i2t3-contenttabs--tiles .i2t3-contenttabs__label {
    font-weight: 600;
}

/* --- Pointer style (rebuilt from the Hankel project look) -------------- */
/* Dark icon navigation: equal-width triggers across one row. */
.i2t3-contenttabs--pointer .i2t3-contenttabs__pointer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #282828;
    margin: 0;
    padding: 0 0 .5rem;
    border: 0;
    list-style: none;
}
.i2t3-contenttabs--pointer .nav-item {
    flex: 1 1 0;
    min-width: 5rem;
}
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1.75rem .5rem;
    border: 0;
    background: transparent;
}
.i2t3-contenttabs--pointer .i2t3-contenttabs__icon-base,
.i2t3-contenttabs--pointer .i2t3-contenttabs__icon-active {
    width: 60%;
    max-width: 5rem;
    height: auto;
}
/* Swap to the active icon variant on active/hover. */
.i2t3-contenttabs--pointer .i2t3-contenttabs__icon-active {
    display: none;
}
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger.active .i2t3-contenttabs__icon-base,
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger:hover .i2t3-contenttabs__icon-base {
    display: none;
}
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger.active .i2t3-contenttabs__icon-active,
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger:hover .i2t3-contenttabs__icon-active {
    display: inline-block;
}
/* Caret: rotated square in the panel colour, pointing down from the active
 * trigger into the panel below. */
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.75rem;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    border-bottom: 0.75rem solid #e9e9e9; /* caret pointing up to the active trigger, panel colour */
    z-index: 1;
}
/* Trigger label under the icon (white, active = orange). */
.i2t3-contenttabs--pointer .i2t3-contenttabs__label {
    margin-top: .5rem;
    color: #fff;
    font-size: .95rem;
}
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger.active .i2t3-contenttabs__label,
.i2t3-contenttabs--pointer .i2t3-contenttabs__trigger:hover .i2t3-contenttabs__label {
    color: #ea5c18;
}

/* Light panel band. */
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels {
    background: #e9e9e9;
    color: #656565;
    /* No hard-coded vertical padding — vertical spacing is the editor's call via
     * the CE layout/padding fields. Keep only a small horizontal gutter so text
     * doesn't touch the panel edge. */
    padding: 0 1.5rem;
}
/* The panel is light even inside a dark (i2t3-inverse) section — force
 * readable colours: dark body text, primary (orange) headings + links. The
 * two-class selectors out-specify the inherited .i2t3-inverse rules. */
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels p,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels li {
    color: #656565;
}
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels h1,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels h2,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels h3,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels h4,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels h5,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels h6,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels a,
.i2t3-contenttabs--pointer .i2t3-contenttabs__panels .btn-link {
    color: var(--i2t3-primary, #cc6600);
}

/* Boxed content (i2t3_content_boxed): keep the dark nav strip and the light
 * panel full width, but limit their INNER content to the content width via
 * symmetric inline padding. On viewports narrower than the content width the
 * max() falls back to the element's base padding, so nothing overflows. */
.i2t3-contenttabs--pointer.i2t3-contenttabs--boxed .i2t3-contenttabs__pointer-nav {
    padding-inline: max(0px, calc((100% - var(--i2t3-content-width, 1200px)) / 2));
}
.i2t3-contenttabs--pointer.i2t3-contenttabs--boxed .i2t3-contenttabs__panels {
    padding-inline: max(1.5rem, calc((100% - var(--i2t3-content-width, 1200px)) / 2));
}