/* =========================
   Base variables & defaults
   ========================= */
:root {
    --oc-grid-columns: 12;
    --oc-gap: 1em;
    --oc-brand: #0086cb;
    --oc-brand-hover: #005f99;
    --oc-border-width: 1px;
    --oc-transition: 220ms ease-in-out;
}

/* ==============
   Grid container
   ============== */
.oc_row {
    /* Each row is its own grid context */
    display: grid;
    grid-template-columns: repeat(var(--oc-grid-columns), minmax(0, 1fr));
    gap: var(--oc-gap);

    /* IMPORTANT: reset span at every row so nested rows don't inherit a parent column's span */
    --oc-span: 12;
}

/* Columns:
   Apply only to *direct* children of a row to avoid accidental matches elsewhere. */
.oc_row > [class^="oc_col-"],
.oc_row > [class*=" oc_col-"] {
    grid-column: span var(--oc-span, 12);
}

/* Optional: convenience classes without breakpoint prefix (mobile-first) */
.oc_row > .oc_col-1  { --oc-span: 1; }
.oc_row > .oc_col-2  { --oc-span: 2; }
.oc_row > .oc_col-3  { --oc-span: 3; }
.oc_row > .oc_col-4  { --oc-span: 4; }
.oc_row > .oc_col-5  { --oc-span: 5; }
.oc_row > .oc_col-6  { --oc-span: 6; }
.oc_row > .oc_col-7  { --oc-span: 7; }
.oc_row > .oc_col-8  { --oc-span: 8; }
.oc_row > .oc_col-9  { --oc-span: 9; }
.oc_row > .oc_col-10 { --oc-span: 10; }
.oc_row > .oc_col-11 { --oc-span: 11; }
.oc_row > .oc_col-12 { --oc-span: 12; }

.oc_equalRow {
    align-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
}

.oc_equalLimit {
    contain: size;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.oc_col_transition {
    transition: 0.3s ease all;
}

.oc_equalLimit__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.oc_row.oc_equalRow > [class^="oc_col-"],
.oc_row.oc_equalRow > [class*=" oc_col-"] {
    display: flex;
    align-items: stretch;
}

.oc_row.oc_equalRow > [class^="oc_col-"] > .oc_row,
.oc_row.oc_equalRow > [class*=" oc_col-"] > .oc_row {
    flex: 1 1 auto;
    min-height: 100%;
}

.oc_row.oc_equalRow > [class^="oc_col-"] > .oc_fill,
.oc_row.oc_equalRow > [class*=" oc_col-"] > .oc_fill {
    flex: 1 1 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* =========
   Utilities
   ========= */
.oc_relative { position: relative; }

.oc_section-noMargin { margin-top: 0 !important; }

.oc_section {
    margin-top: 100px;
    margin-bottom: 100px;
}

.oc_col-alignBottom {
    margin-top: auto;
}

.oc_col-alignRight {
    margin-left: auto;
}

.oc_col-alignCenter {
    display: flex;
    align-items: center;   /* vertikal */
}

.oc_center {
    text-align: center;
    display: block;
}

.oc_none { display: none; }

/* ============
   Breakpoints
   ============
   Each class sets only the span variable.
   Because we scope with `.oc_row >`, it affects only columns that are
   *direct children* of that row (nested rows start fresh).
*/
@media (min-width: 0) {
    .oc_row > .oc_col-mobile-1  { --oc-span: 1; }
    .oc_row > .oc_col-mobile-2  { --oc-span: 2; }
    .oc_row > .oc_col-mobile-3  { --oc-span: 3; }
    .oc_row > .oc_col-mobile-4  { --oc-span: 4; }
    .oc_row > .oc_col-mobile-5  { --oc-span: 5; }
    .oc_row > .oc_col-mobile-6  { --oc-span: 6; }
    .oc_row > .oc_col-mobile-7  { --oc-span: 7; }
    .oc_row > .oc_col-mobile-8  { --oc-span: 8; }
    .oc_row > .oc_col-mobile-9  { --oc-span: 9; }
    .oc_row > .oc_col-mobile-10 { --oc-span: 10; }
    .oc_row > .oc_col-mobile-11 { --oc-span: 11; }
    .oc_row > .oc_col-mobile-12 { --oc-span: 12; }
}

@media (min-width: 768px) {
    .oc_row > .oc_col-tablet-1  { --oc-span: 1; }
    .oc_row > .oc_col-tablet-2  { --oc-span: 2; }
    .oc_row > .oc_col-tablet-3  { --oc-span: 3; }
    .oc_row > .oc_col-tablet-4  { --oc-span: 4; }
    .oc_row > .oc_col-tablet-5  { --oc-span: 5; }
    .oc_row > .oc_col-tablet-6  { --oc-span: 6; }
    .oc_row > .oc_col-tablet-7  { --oc-span: 7; }
    .oc_row > .oc_col-tablet-8  { --oc-span: 8; }
    .oc_row > .oc_col-tablet-9  { --oc-span: 9; }
    .oc_row > .oc_col-tablet-10 { --oc-span: 10; }
    .oc_row > .oc_col-tablet-11 { --oc-span: 11; }
    .oc_row > .oc_col-tablet-12 { --oc-span: 12; }
}

@media (min-width: 1200px) {
    .oc_row > .oc_col-desktop-1  { --oc-span: 1; }
    .oc_row > .oc_col-desktop-2  { --oc-span: 2; }
    .oc_row > .oc_col-desktop-3  { --oc-span: 3; }
    .oc_row > .oc_col-desktop-4  { --oc-span: 4; }
    .oc_row > .oc_col-desktop-5  { --oc-span: 5; }
    .oc_row > .oc_col-desktop-6  { --oc-span: 6; }
    .oc_row > .oc_col-desktop-7  { --oc-span: 7; }
    .oc_row > .oc_col-desktop-8  { --oc-span: 8; }
    .oc_row > .oc_col-desktop-9  { --oc-span: 9; }
    .oc_row > .oc_col-desktop-10 { --oc-span: 10; }
    .oc_row > .oc_col-desktop-11 { --oc-span: 11; }
    .oc_row > .oc_col-desktop-12 { --oc-span: 12; }
}

/* ======
   Button
   ====== */
.oc_ui-button {
    background: var(--oc-brand);
    border-color: var(--oc-brand);
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    display: inline-block;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: var(--oc-border-width);
    border-style: solid;
    appearance: none;
    -webkit-appearance: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
            background-color var(--oc-transition),
            border-color var(--oc-transition),
            color var(--oc-transition),
            box-shadow var(--oc-transition),
            transform var(--oc-transition);
    font-family: "Eurostile", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.oc_ui-button:hover {
    background-color: var(--oc-brand-hover);
    border-color: var(--oc-brand-hover);
}

.oc_ui-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 134, 203, 0.35);
}

.oc_ui-button:disabled,
.oc_ui-button[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

.oc_ui-button-active {
    background-color: var(--oc-brand-hover) !important;
    border-color: var(--oc-brand-hover) !important;
}