/**
 * TDS Component: Layout & Grid Decoration
 * Structure: Managed by Bootstrap 5 (row/col)
 * Physics: IBM Carbon 2x Alignment
 */

.uh-container {
    max-width: var(--tds-max-width);
    margin-inline: auto;
    padding-inline: var(--tds-space-04);
}

main#maincontent {
    scroll-margin-top: calc(var(--tds-header-h) + var(--tds-space-04));
}

/* --- 1. Institutional Vertical Rhythm --- */
.uh-section-padding {
    padding-block: var(--tds-space-06);
}

/* --- 2. Asymmetric Column Decoration --- */
/* Applied to col-lg-5 and col-lg-7 for the 5:7 Narrative Split */
.uh-narrative-col {
    padding-right: var(--tds-space-05);
}

.uh-data-col {
    border-left: 1px solid var(--tds-border);
    padding-left: var(--tds-space-05);
}

/* --- 3. Surface & Icon Primitives --- */
.uh-surface-soft {
    background: #fff;
    border: 1px solid var(--tds-border);
}

/* The 32px Mandate: Institutional Icon Scaling */
.uh-icon-wireframe {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: var(--tds-space-03);
    color: var(--tds-brand-strong);
    flex-shrink: 0;
}

.uh-icon-wireframe svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- 4. Responsive Adaptations --- */
@media (max-width: 991.98px) {
    .uh-section-padding {
        padding-block: var(--tds-space-05);
    }
    .uh-narrative-col {
        padding-right: 0;
        margin-bottom: var(--tds-space-05);
    }
    .uh-data-col {
        border-left: none;
        padding-left: 0;
    }
}

/* TYPE-01: page-content rows must fit the phone container padding. */
@media (max-width: 575.98px) {
    main .row.g-5 { --bs-gutter-x: var(--tds-space-lg); }
}

/* --- 5. Focus (DESIGN-01): one outline for every focusable element --- */
html {
    scroll-padding-top: calc(var(--tds-header-stack-h) + var(--tds-space-md));
}

:focus-visible {
    outline: var(--tds-focus-outline);
    outline-offset: var(--tds-focus-offset);
}

/* Bootstrap resets outline on :focus with higher specificity and adds its blue ring (.btn: see button.css). */
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.accordion-button:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
.focus-ring:focus-visible {
    outline: var(--tds-focus-outline);
    outline-offset: var(--tds-focus-offset);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tds-focus-color);
    box-shadow: none;
}

.accordion-button:focus,
.btn-close:focus,
.page-link:focus {
    box-shadow: none;
}

/* Dark surfaces: the light-surface colour is below 3:1 here. */
.uh-hero--deep-space :focus-visible,
.uh-insights-hero :focus-visible,
.uh-insights-single__header :focus-visible,
.uh-media-video-stage :focus-visible,
.uh-motif-structure-figure :focus-visible {
    outline: var(--tds-focus-outline-inverse);
    outline-offset: var(--tds-focus-offset);
}

/* Skip link: shown as a chip at the top-left of the viewport while focused. */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: fixed;
    top: var(--tds-space-sm);
    left: var(--tds-space-sm);
    z-index: var(--tds-z-overlay);
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-tap-target-min);
    padding: var(--tds-space-2xs) var(--tds-space-sm);
    background: var(--tds-surface);
    color: var(--tds-text-main);
    border-radius: var(--tds-radius-control);
    outline: var(--tds-focus-outline);
    outline-offset: var(--tds-focus-offset);
}