/* =====================================================================
   FILE: kcbme/objective.css — "The Objective..." progression timeline for kcbme/index.php.
   Loaded AFTER programs.css. CSS grid only, no flexbox. Corners 8px at most.
   ===================================================================== */

.objective { width: 100%; padding: 70px 0 90px; background: #f4f7fc; }
.obj-wrap { width: 92%; max-width: 1320px; margin: 0 auto; }
.obj-title.headline { text-align: center; margin: 0; }
.objective .obj-sub { text-align: center; font-size: 2rem; line-height: 1.4; color: #7981a8; padding: 6px 0 10px; }

/* Five stages in a row, with room between them for the connector arrows */
.obj-grid {
    list-style: none;
    margin: 0;
    padding: 50px 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 96px;
}
.obj-step { position: relative; display: grid; }

/* Numbered circle that overlaps the top edge of the card */
.obj-badge {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-sizing: border-box;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--c);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}
.obj-badge span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #ffffff, #e4e8f1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14);
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    color: #4b5788;
}

/* Card */
.obj-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    row-gap: 10px;
    justify-items: center;
    text-align: center;
    background: #fff;
    border: 2px solid var(--c);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(30, 50, 90, 0.12);
    padding: 50px 16px 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.obj-step:hover .obj-card { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(30, 50, 90, 0.18); }

.obj-card p { padding: 0; margin: 0; }
.obj-card .obj-kicker { color: #94631F; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; }
.obj-card h3 { margin: 0; font-size: 2.1rem; line-height: 1.25; color: #4b5788; }
.obj-card .obj-text { font-size: 1.5rem; line-height: 1.5; color: #5b6075; }
.obj-icon { color: var(--c); margin-top: 6px; }

/* Connector arrow to the next stage: the same arrow character used in the dark panel, in the card's own colour.
   The box is exactly as wide as the gap, so the arrow sits in the middle of it. */
.obj-step:not(:last-child)::after {
    content: "\27A7";
    position: absolute;
    top: 50%;
    right: -44px;
    width: 44px;
    text-align: center;
    transform: translateY(-50%);
    font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif;
    font-size: 5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--c);
}

@media (max-width: 1250px) {
    .obj-grid { column-gap: 34px; }
    .obj-card h3 { font-size: 1.8rem; }
    .obj-step:not(:last-child)::after { right: -34px; width: 34px; font-size: 2.6rem; }
}

/* Tablets and phones: one column, arrows rotated 90 degrees so they point down */
@media (max-width: 1000px) {
    .obj-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; row-gap: 96px; }
    .obj-card h3 { font-size: 2.1rem; }
    .obj-step:not(:last-child)::after {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -47px;
        width: auto;
        font-size: 5rem;
        transform: translateX(-50%) rotate(90deg);
    }
}
@media (max-width: 600px) {
    .obj-title.headline { font-size: 4rem; }
    .objective .obj-sub { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .obj-card { transition: none; }
    .obj-step:hover .obj-card { transform: none; }
}