/* ╔══════════════════════════════════════════════════════════════════╗
   ║  GIA REVAMP 2026 — LKYSPP HOMEPAGE "GLOBAL-IS-ASIAN" SECTION      ║
   ║  Deploy to: LKY.Web\assets\GIA\css\gia-home-list.css              ║
   ║  Paired view: GIARevampArticle\Detail.LkyHomePageList.cshtml      ║
   ║  Paired JS  : assets\GIA\js\gia-home-list.js                      ║
   ║                                                                   ║
   ║  Figma layout: header (hairline under the heading, burgundy bold  ║
   ║  lead-in) above TWO columns — Articles | Podcasts — each with a   ║
   ║  ruled column heading, 3 flat media rows (thumb left, body        ║
   ║  right) and its own View-all CTA.                                 ║
   ║                                                                   ║
   ║  Requires gia_style.css loaded first — reuses the revamp tokens   ║
   ║  (--gia-rv-*), the .gia-revamp-root reset and the canonical       ║
   ║  .gia-btn-primary CTA. Every selector is scoped under             ║
   ║  .gia-revamp-root with the unique gia-home- prefix, so legacy     ║
   ║  homepage styles cannot reach in and these rules cannot leak out. ║
   ║  Type scale (house rule): 11/12/13/14/15/17/19/21/26px.           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Section frame ─────────────────────────────────────────────────── */
.gia-revamp-root .gia-home-section {
    padding: 60px 0;
    background-color: var(--gia-rv-white, #ffffff);
}

.gia-revamp-root .gia-home-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ── Header ────────────────────────────────────────────────────────── */
.gia-revamp-root .gia-home-heading {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gia-rv-line, #dddddd);
    font: 800 26px/1.2 var(--gia-rv-font, 'Inter', 'Helvetica Neue', Arial, sans-serif);
    letter-spacing: -0.5px;
    color: var(--gia-rv-burgundy, #63001d);
}

.gia-revamp-root .gia-home-lead p {
    margin: 0 0 44px;
    max-width: 960px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gia-rv-body, #484848);
}

.gia-revamp-root .gia-home-lead b {
    font-weight: 700;
    color: var(--gia-rv-burgundy, #63001d);
}

/* ── Two-column layout ─────────────────────────────────────────────── */
/* Columns stretch to the same height (grid default) and each column is
   a flex stack whose CTA pins to the bottom — the two View-all buttons
   share a baseline no matter how the feeds differ. Rows stay uniform
   because every clamped body fits inside the fixed 16:10 thumb height,
   so the thumb dictates one constant row height for both columns. */
.gia-revamp-root .gia-home-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 72px;
}

.gia-revamp-root .gia-home-col {
    display: flex;
    flex-direction: column;
}

.gia-revamp-root .gia-home-col__heading {
    margin: 0 0 26px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--gia-rv-maroon, #96002c);
    font: 800 21px/1.2 var(--gia-rv-font, 'Inter', 'Helvetica Neue', Arial, sans-serif);
    color: var(--gia-rv-burgundy, #63001d);
}

/* ── Media rows ────────────────────────────────────────────────────── */
.gia-revamp-root .gia-home-row {
    display: flex;
    align-items: flex-start; /* default stretch would override the thumb's aspect-ratio on tall rows */
    gap: 22px;
}

.gia-revamp-root .gia-home-row + .gia-home-row,
.gia-revamp-root .gia-home-skel + .gia-home-skel {
    margin-top: 28px;
}

.gia-revamp-root .gia-home-row__thumb {
    position: relative;
    display: block;
    flex: none;
    width: 190px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--gia-rv-bg-soft, #f5f5f5);
}

.gia-revamp-root .gia-home-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.gia-revamp-root .gia-home-row:hover .gia-home-row__thumb img {
    transform: scale(1.05);
}

.gia-revamp-root .gia-home-row__body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.gia-revamp-root .gia-home-row__dot {
    margin: 0 5px;
}

.gia-revamp-root .gia-home-row__eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gia-rv-brand-red, #af1d48);
    /* one line always — a wrapping eyebrow would break row uniformity */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gia-revamp-root .gia-home-row__topic,
.gia-revamp-root .gia-home-row__ep {
    color: var(--gia-rv-brand-red, #af1d48);
    transition: color 0.25s ease;
}

.gia-revamp-root a.gia-home-row__topic:hover {
    color: var(--gia-rv-burgundy, #63001d);
}

.gia-revamp-root .gia-home-row__title {
    margin: 0 0 10px;
    /* reserve exactly two title lines (19px × 1.4 × 2) whether the
       title fills them or not — short and long titles yield the same
       row height, keeping both columns in lockstep */
    min-height: 54px;
}

.gia-revamp-root .gia-home-row__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gia-rv-ink, #231f20);
    transition: color 0.25s ease-out;
}

.gia-revamp-root .gia-home-row__title a:hover {
    color: var(--gia-rv-brand-red, #af1d48);
}

.gia-revamp-root .gia-home-row__title a:focus-visible {
    outline: 2px solid var(--gia-rv-brand-red, #af1d48);
    outline-offset: 3px;
    border-radius: 2px;
}

.gia-revamp-root .gia-home-row__meta {
    margin: 0;
    font-size: 13px;
    color: var(--gia-rv-muted, #8c8c8c);
    /* one line always — long author lists truncate instead of wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gia-revamp-root .gia-home-row__author {
    font-weight: 500;
    color: var(--gia-rv-body, #484848);
}

.gia-revamp-root .gia-home-row__dot {
    color: var(--gia-rv-muted, #8c8c8c);
}

/* ── Column footer CTA ─────────────────────────────────────────────── */
.gia-revamp-root .gia-home-controls {
    /* auto margin pins the CTA to the column's bottom edge (columns
       stretch equal), padding guarantees the gap when space is tight —
       both View-all buttons always share one baseline */
    margin-top: auto;
    padding-top: 34px;
    text-align: center;
}

/* Square flat button matching the main lkyspp.nus.edu.sg chrome —
   this widget sits on the SCHOOL homepage, so the GIA pill CTA
   (.gia-btn-primary) does not apply here. */
.gia-revamp-root .gia-home-btn {
    display: inline-block;
    padding: 13px 32px;
    font: 700 14px/1 var(--gia-rv-font, 'Inter', 'Helvetica Neue', Arial, sans-serif);
    letter-spacing: 0.04em;
    color: #ffffff;
    background-color: var(--gia-rv-maroon, #96002c);
    border: 1px solid transparent;
    border-radius: 0;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.gia-revamp-root .gia-home-btn:hover {
    color: #ffffff;
    background-color: var(--gia-rv-burgundy, #63001d);
    box-shadow: 0 6px 16px rgba(99, 0, 29, 0.25);
}

.gia-revamp-root .gia-home-btn:active {
    box-shadow: none;
}

.gia-revamp-root .gia-home-btn:focus-visible {
    outline: 2px solid var(--gia-rv-brand-red, #af1d48);
    outline-offset: 3px;
}

/* ── Empty / error states ──────────────────────────────────────────── */
.gia-revamp-root .gia-home-empty,
.gia-revamp-root .gia-home-error {
    margin: 0;
    padding: 28px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--gia-rv-body, #484848);
    background: var(--gia-rv-bg-soft, #f5f5f5);
    border-radius: 8px;
}

/* ── Skeleton loading state ────────────────────────────────────────── */
.gia-revamp-root .gia-home-skel {
    display: flex;
    gap: 22px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.gia-revamp-root .gia-home-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(99, 0, 29, 0.05) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: gia-home-shimmer 1.4s ease infinite;
    animation-delay: calc(var(--gia-home-i, 0) * 120ms);
}

.gia-revamp-root .gia-home-skel__media {
    flex: none;
    width: 190px;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background: #efefef;
}

.gia-revamp-root .gia-home-skel__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px;
}

.gia-revamp-root .gia-home-skel__chip {
    width: 90px;
    height: 12px;
    border-radius: 999px;
    background: #efefef;
}

.gia-revamp-root .gia-home-skel__line {
    height: 14px;
    border-radius: 4px;
    background: #efefef;
}

.gia-revamp-root .gia-home-skel__line--w90 { width: 90%; }
.gia-revamp-root .gia-home-skel__line--w55 { width: 55%; }

@keyframes gia-home-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* ── Entrance reveal (added by JS: .is-revealed on each list) ──────── */
.gia-revamp-root .gia-home-list:not(.is-revealed) .gia-home-in {
    opacity: 0;
}

.gia-revamp-root .gia-home-list.is-revealed .gia-home-in {
    /* backwards fill keeps the pre-delay state hidden, and once the
       animation ends nothing keeps overriding the hover transforms */
    animation: gia-home-in 0.65s var(--gia-rv-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) backwards;
    animation-delay: calc(var(--gia-home-i, 0) * 90ms);
}

@keyframes gia-home-in {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.98);
    }
}

/* ── Responsive breakpoints ────────────────────────────────────────── */
@media (max-width: 991px) {
    .gia-revamp-root .gia-home-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .gia-revamp-root .gia-home-section {
        padding: 44px 0;
    }

    .gia-revamp-root .gia-home-row {
        gap: 14px;
    }

    .gia-revamp-root .gia-home-row__thumb,
    .gia-revamp-root .gia-home-skel__media {
        width: 128px;
        border-radius: 6px;
    }

    .gia-revamp-root .gia-home-row__title {
        min-height: 42px; /* two lines at 15px × 1.4 */
    }

    .gia-revamp-root .gia-home-row__title a {
        font-size: 15px;
    }

    .gia-revamp-root .gia-home-row + .gia-home-row,
    .gia-revamp-root .gia-home-skel + .gia-home-skel {
        margin-top: 22px;
    }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gia-revamp-root .gia-home-list:not(.is-revealed) .gia-home-in,
    .gia-revamp-root .gia-home-list.is-revealed .gia-home-in {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .gia-revamp-root .gia-home-row__thumb img,
    .gia-revamp-root .gia-home-row__topic,
    .gia-revamp-root .gia-home-row__title a,
    .gia-revamp-root .gia-home-btn {
        transition: none;
    }

    .gia-revamp-root .gia-home-row:hover .gia-home-row__thumb img {
        transform: none;
    }

    .gia-revamp-root .gia-home-skel::after {
        animation-iteration-count: 1;
    }
}