/* =====================================================================
   FILE: kcbme/programs.css — ribbon panel and flip cards for kcbme/index.php. Loaded AFTER impact.css.
   CSS grid only, no flexbox. Corners 8px at most. All cards are the same height (the tallest card sets it).
   ===================================================================== */

.programs { width: 100%; padding: 50px 0 70px; }
.programs-wrap { width: 90%; max-width: 1280px; margin: 0 auto; }

/* Ribbon heading */
.prog-ribbon-wrap { display: grid; justify-items: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28)); }
.prog-ribbon {
    margin: 0;
    padding: 14px 80px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 3.4rem;
    color: #2f4f9a;
    background: linear-gradient(#fff9e8, #f0d58a);
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 50%, 100% 100%, 0 100%, 30px 50%);
}
.programs .prog-sub { color: #fff; text-align: center; font-size: 1.6rem; padding: 18px 0 24px; }

/* Responsive grid on a 12-column track: 4 cards per row wide, 2 medium, 1 narrow.
   grid-auto-rows: 1fr makes every row as tall as the tallest card, so all cards match. */
.prog-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
}
.prog-grid > .flip-card { grid-column: span 3; }

/* With 6 cards, centre the two on the second row (these rules switch themselves off if you add or remove cards) */
.prog-grid > .flip-card:nth-child(5):nth-last-child(2) { grid-column: 4 / span 3; }
.prog-grid > .flip-card:nth-child(6):nth-last-child(1) { grid-column: 7 / span 3; }

@media (max-width: 1099px) {
    .prog-grid > .flip-card,
    .prog-grid > .flip-card:nth-child(5):nth-last-child(2),
    .prog-grid > .flip-card:nth-child(6):nth-last-child(1) { grid-column: span 6; }
}
@media (max-width: 699px) {
    .prog-grid > .flip-card,
    .prog-grid > .flip-card:nth-child(5):nth-last-child(2),
    .prog-grid > .flip-card:nth-child(6):nth-last-child(1) { grid-column: span 12; }
}

/* Flip card: fills its grid cell; both faces share one grid cell inside it */
.flip-card { display: grid; perspective: 1100px; outline: none; cursor: pointer; }
.flip-card:focus-visible { outline: 3px solid #f0d58a; outline-offset: 4px; border-radius: 8px; }

.flip-inner {
    position: relative;
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-inner { transform: rotateY(180deg); }
}

.flip-face {
    grid-area: 1 / 1;
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* Front: background image with a dark fade; falls back to a solid blue if the image is missing */
.flip-front {
    min-height: 340px;
    padding: 20px;
    display: grid;
    align-content: end;
    background-color: #27456b;
    background-image: linear-gradient(to top, rgba(8, 18, 32, 0.85) 0%, rgba(8, 18, 32, 0.2) 55%, rgba(8, 18, 32, 0) 100%), var(--img, none);
    background-size: cover;
    background-position: center;
}
.flip-front-text span { display: block; }
.flip-tag { color: #f7d48a; font-size: 1.5rem; letter-spacing: 0.04em; }
.flip-front h3 { color: #fff; font-size: 3rem; margin: 6px 0; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); }
.flip-hint { color: #dce6f5; font-size: 1.3rem; }
.flip-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 12px;
    border-radius: 8px;
    background: #f0d58a;
    color: #2f4f9a;
    font-size: 1.3rem;
}

/* Back: graded background with the details */
.flip-back {
    transform: rotateY(180deg);
    padding: 24px 26px;
    display: grid;
    align-content: center;
    background: #12385a;
    background: linear-gradient(160deg, #234a8a 0%, #12385a 55%, #0a2c30 100%);
    box-shadow: inset 0 0 0 2px rgba(240, 213, 138, 0.55), 0 6px 16px rgba(0, 0, 0, 0.28);
}
.flip-back .flip-kicker { color: #f0d58a; font-size: 1.4rem; padding: 0; letter-spacing: 0.04em; }
.flip-back h3 { color: #fff; font-size: 2.6rem; margin: 4px 0 8px; }
.flip-back .flip-text { color: #e6eef8; font-size: 1.6rem; line-height: 1.5; padding: 0 0 10px; }
.flip-back ul { list-style: none; margin: 0 0 14px; padding: 0; }
.flip-back li { position: relative; color: #e6eef8; font-size: 1.5rem; line-height: 1.4; padding: 0 0 6px 24px; }
.flip-back li::before { content: "\2713"; position: absolute; left: 0; color: #f0d58a; }
.flip-back .probutton { margin: 0; font-size: 1.4rem; padding: 6px 22px; }

@media (max-width: 600px) {
    .prog-ribbon { font-size: 2.4rem; padding: 12px 54px; }
    .flip-front { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
    .flip-inner { transition: none; }
}