:root {
    --oc-red: #d0021b;
    --oc-navy: #332f91;
    --oc-line: #333291;
    --oc-col-gap: 1rem;
}

.oc-section-title {
    text-align: center;
    color: var(--oc-red);
    font-weight: 700;
    font-size: 1.6rem;
    margin: 2.5rem 0 1.25rem;
}

.oc-tier {
    display: grid;
    grid-template-columns: repeat(var(--oc-columns, 5), minmax(0, 1fr));
    justify-content: center;
    gap: 1.5rem var(--oc-col-gap);
    margin: 0 auto 3.5rem;
    max-width: calc(var(--oc-columns, 5) * 190px);
    position: relative;
}

/* Connectors: a bus across the tier's FIRST ROW only, a drop from that bus
   into each first-row card, and a downward-pointing arrowhead at the foot
   of each drop. Pseudo-elements rather than SVG so the chart survives an
   admin adding a member or a tier wrapping on a narrow screen.

   Measured from the source PDF's vector geometry: there is NO vertical
   stem linking a bus up to its parent card above -- the hierarchy reads
   from proximity and arrow direction alone, not a continuous spine. Do
   not reintroduce a .oc-tier--hierarchy::before "stem" rule here.

   Pure CSS can't select "the first row" of a wrapping grid (nth-child math
   would need --oc-columns duplicated as a literal, and still couldn't tell
   where a short first row ends when member count < columns), so Blade does
   that arithmetic per card and emits .oc-bus / .oc-bus--start / .oc-bus--end
   on first-row cards only. A wrapped second (or later) row gets none of
   these classes and therefore no connector at all. */

/* The President's card is the chart's focal point: roughly 2x the linear
   size of a Vice President's card and noticeably squarer (source PDF
   measures the President's portrait at 201.2x205.9pt, ~1:1.02, against a
   Vice President's ~91x111pt, ~1:1.22). .oc-tier's own max-width clamps
   to var(--oc-columns, 5) * 190px, which for this single-column tier is
   just 190px -- override it here so the enlarged photo below isn't
   clipped back down to Vice President size. */
.oc-tier--first {
    max-width: 320px;
}

/* The top tier connects to nothing above it, so it gets neither a bus,
   nor a drop, nor an arrowhead from a parent that isn't there. */
.oc-tier--first .oc-bus::before,
.oc-tier--first .oc-bus::after,
.oc-tier--first .oc-bus .oc-photo::before {
    display: none;
}

.oc-card {
    margin: 0;
    text-align: center;
    position: relative;
}

/* Anchors the arrowhead (.oc-bus .oc-photo::before below), which is
   positioned relative to the photo box rather than the card so it sits
   correctly even though .oc-card itself is a <figure>. */
.oc-photo {
    position: relative;
}

/* The vertical drop from the bus into a first-row card.
   PDF: 14.5pt tall, 1.0pt stroke -> 24px tall, 2px wide.
   Runs from the bus (top: -46px) down to -22px. */
.oc-bus::before {
    content: "";
    position: absolute;
    top: -46px;
    left: 50%;
    width: 2px;
    height: 24px;
    background: var(--oc-line);
}

/* The downward-pointing arrowhead at the foot of the drop, drawn on the
   card's photo (not the bus rule above it) via the standard CSS
   border-triangle technique. PDF: 10.0 x 8.6pt, overlapping the drop's
   base by 1.5pt -> 16px wide x 14px tall, overlapping the drop by 2px.
   Top: -24px (2px into the drop's -22px foot) so the tip lands at
   -24 + 14 = -10px, i.e. 10px above the card top. */
.oc-bus .oc-photo::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid var(--oc-line);
    line-height: 0;
}

/* The horizontal bus itself. Each segment is drawn on its own grid
   cell, so it must overhang by half the column gap at each side --
   otherwise the gap between cells (--oc-col-gap) shows through as a
   break, and the bus reads as dashed instead of continuous. Adjacent
   segments then meet mid-gap and read as one continuous bus.
   --start/--end trim the outer edges back to that card's centre, so
   the bus begins under the first card and ends under the last rather
   than overhanging past the row. When a first row has exactly one
   card, that card gets BOTH --start and --end: left: 50% and
   right: 50% still win over the overhang (they come later in the
   file), collapsing the bar to zero width instead of drawing a
   stray line, so a single-card row (e.g. General Secretary) shows
   only the drop and arrowhead, not a spurious bus.
   PDF stroke 1.0pt -> 2px, level with the drop's top (-46px). */
.oc-bus::after {
    content: "";
    position: absolute;
    top: -46px;
    left: calc(var(--oc-col-gap) / -2);
    right: calc(var(--oc-col-gap) / -2);
    height: 2px;
    background: var(--oc-line);
}

.oc-bus--start::after {
    left: 50%;
}

.oc-bus--end::after {
    right: 50%;
}

.oc-photo img,
.oc-photo-empty {
    display: block;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 5 / 5.5;
    object-fit: cover;
    margin: 0 auto;
    border: 1px solid var(--oc-red);
    background: #fff;
}

.oc-name {
    display: block;
    color: var(--oc-red);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    margin-top: 0.45rem;
}

.oc-role {
    display: block;
    color: var(--oc-navy);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.25;
}

/* President card: ~2x the linear photo size of every other tier and a
   squarer crop (see the .oc-tier--first max-width note above for the
   source measurements), with name/role bumped a step so the card reads
   as the chart's focal point. Scoped by .oc-tier--first rather than a
   President-specific class or `columns === 1` -- General Secretary and
   Treasurer are single-column tiers too and must stay at normal size. */
.oc-tier--first .oc-photo img,
.oc-tier--first .oc-photo-empty {
    max-width: 300px;
    aspect-ratio: 1 / 1.02;
}

.oc-tier--first .oc-name {
    font-size: 1.3rem;
    margin-top: 0.65rem;
}

.oc-tier--first .oc-role {
    font-size: 1.05rem;
}

/* A seven-wide grid of faces is unusable on a phone, and the connectors
   become noise once a tier wraps. Below 992px the grid collapses to
   min(columns, 3) columns, so --oc-columns no longer matches the real
   column count and any bus computed against it would be wrong; the chart
   degrades to stacked sections with no connectors at all. */
@media (max-width: 991px) {
    .oc-tier {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 560px;
    }

    .oc-bus::before,
    .oc-bus::after,
    .oc-bus .oc-photo::before {
        display: none;
    }
}

@media (max-width: 575px) {
    .oc-tier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 340px;
    }
}