/* =========================================================
   Preferra Learn — Homepage Content Menu
   Tiles: 16:9 image + label bar below.
   Active state: 3% scale-up. Hover: lift + shadow.
   Requires design-system.css.
   ========================================================= */

.cdg-content-menu{
    max-width: 120rem;
    margin: var(--space-xl) auto;
    padding: 0 var(--section-padding-x);
}

/* ----- Tile grid ----- */
.cdg-tiles{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.cdg-tile{
    /* Card structure */
    display: flex;
    flex-direction: column;
    border: var(--border-none);
    padding: 0;
    margin: 0;
    background: var(--c-reverse);
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 0.2rem 0.6rem rgba(33, 22, 98, 0.08);

    /* Transform origin centered so 3% scale doesn't shift layout corners */
    transform-origin: center center;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.cdg-tile:hover{
    transform: translateY(-0.4rem);
    box-shadow: 0 1.4rem 3rem var(--c-primary-25);
}

/* Active (panel open) — 3% scale-up, primary-tinted shadow */
.cdg-tile[aria-expanded="true"]{
    transform: scale(1.03);
    box-shadow: 0 1.6rem 3.6rem var(--c-primary-25);
    z-index: 2;                                 /* lift above siblings */
}
.cdg-tile[aria-expanded="true"]:hover{
    /* Combine scale + lift on hover when active */
    transform: scale(1.03) translateY(-0.4rem);
}

/* Keyboard focus ring (separate from active state) */
.cdg-tile:focus-visible{
    outline: var(--border-3) solid var(--c-primary);
    outline-offset: 0.2rem;
}

/* ----- Tile media (16:9 image) ----- */
.cdg-tile__media{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-light-shade);
    overflow: hidden;
}
.cdg-tile__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Tile label bar (below image) ----- */
.cdg-tile__label{
    display: block;
    padding: var(--space-sm) var(--space-md);
    background: var(--c-reverse);
    color: var(--c-dark-shade);
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-normal);
    text-align: center;
    border-top: var(--border-1) solid rgba(33, 22, 98, 0.06);
    transition: color .25s ease, background .25s ease;
}
.cdg-tile:hover .cdg-tile__label,
.cdg-tile[aria-expanded="true"] .cdg-tile__label{
    color: var(--c-primary);
}

/* ----- Panels ----- */
.cdg-panels{ position: relative; }

.cdg-panel{
    /* Extra top margin to make room for the 3% scaled-up active tile */
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--c-light-shade);
    border-radius: var(--radius-lg);
    box-shadow: 0 0.4rem 1.4rem var(--c-primary-25);
    animation: cdgFadeIn .25s ease both;
}
.cdg-panel[hidden]{ display: none; }
@keyframes cdgFadeIn{
    from{ opacity: 0; transform: translateY(-0.8rem); }
    to  { opacity: 1; transform: none; }
}

.cdg-panel__header{
    margin-bottom: var(--space-md);
}
.cdg-panel__title{
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    color: var(--c-dark-shade);
}
/* Panel must be the positioning anchor for the close button */
.cdg-panel{
    position: relative;
    /* leave room at top-right so the title doesn't run under the button */
    padding-right: calc(var(--space-lg) + 4.4rem);
}

.cdg-panel__close{
    /* Anchored to upper-right corner of the panel */
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);

    /* Square hit/hover target */
    width: 4.4rem;
    height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: var(--border-none);
    background: transparent;
    color: var(--c-medium-gray);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0;

    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.cdg-panel__close-icon{
    /* The X mark itself — 60% of the button = ~26px in a 44px box */
    width: 60%;
    height: 60%;
    display: block;
}

.cdg-panel__close:hover{
    background: var(--c-primary-25);
    color: var(--c-primary);
    transform: scale(1.02);
}

.cdg-panel__close:focus-visible{
    outline: var(--border-3) solid var(--c-primary);
    outline-offset: 0.2rem;
}

/* ----- Panel grid: 4 columns ----- */
.cdg-panel__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: start;
}

.cdg-panel{
    max-width: 100%;
    overflow: hidden;
}
.cdg-panel__group,
.cdg-panel__illus,
.cdg-panel__featured{
    min-width: 0;
}

/* ----- Column 1: Illustration ----- */
.cdg-panel__illus{
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--c-reverse);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cdg-panel__illus-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cdg-panel__illus-placeholder{
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, var(--c-primary-25) 0%, transparent 60%),
        var(--c-light-shade);
}

/* ----- Link groups (cols 2..N) ----- */
.cdg-panel__group{ min-width: 0; }

.cdg-panel__group-title{
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-normal);
    color: var(--c-dark-shade);
    border-bottom: var(--border-2) solid var(--c-primary);
    white-space: nowrap;          /* ← prevents wrap */
}

.cdg-panel__list,
.cdg-panel__list li{
    list-style: none !important;
    margin: 0;
    padding: 0;
    background: none;
}
.cdg-panel__list li::before,
.cdg-panel__list li::after{
    content: none !important;
    display: none !important;
}
.cdg-panel__list li + li{ margin-top: var(--space-2xs); }

.cdg-panel__list a{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--c-body);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.cdg-panel__list a:hover,
.cdg-panel__list a:focus-visible{
    color: var(--c-primary);
    transform: translateX(0.3rem);
}
.cdg-panel__list-arrow{
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    color: var(--c-primary);
    transition: transform .2s ease;
}
.cdg-panel__list a:hover .cdg-panel__list-arrow{
    transform: translateX(0.2rem);
}

/* ----- Empty-state placeholder (used in cols 2..N) ----- */
.cdg-panel__placeholder{
    padding: var(--space-md);
    background: var(--c-reverse);
    border: var(--border-1) dashed var(--c-primary-25);
    border-radius: var(--radius-md);
}
.cdg-panel__placeholder-msg{
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--c-medium-gray);
    line-height: var(--lh-loose);
}
.cdg-panel__placeholder-cta{
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--c-primary);
    text-decoration: none;
    transition: gap .2s ease;
}
.cdg-panel__placeholder-cta:hover{ gap: var(--space-xs); }
.cdg-panel__placeholder-cta svg{ width: 1.4rem; height: 1.4rem; }

/* ----- Last col: Featured Event card ----- */
.cdg-panel__featured{ min-width: 0; }

.cdg-panel__event-card{
    display: block;
    background: var(--c-reverse);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0.1rem 0.3rem rgba(33, 22, 98, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cdg-panel__event-card:hover{
    transform: translateY(-0.3rem);
    box-shadow: 0 1rem 2.4rem var(--c-primary-25);
}
.cdg-panel__event-media{
    display: block;
    aspect-ratio: 16/9;
    background: var(--c-light-shade);
    overflow: hidden;
}
.cdg-panel__event-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cdg-panel__event-body{
    display: block;
    padding: var(--space-md);
}
.cdg-panel__event-eyebrow{
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: var(--space-2xs);
}
.cdg-panel__event-title{
    margin: 0 0 var(--space-3xs);
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--c-dark-shade);
}
.cdg-panel__event-date{
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--c-medium-gray);
}
.cdg-panel__event-cta{
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--c-primary);
    transition: gap .2s ease;
}
.cdg-panel__event-card:hover .cdg-panel__event-cta{ gap: var(--space-xs); }
.cdg-panel__event-cta svg{ width: 1.4rem; height: 1.4rem; }

/* ----- Empty featured event ----- */
.cdg-panel__event-empty{
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, var(--c-primary-25) 0%, var(--c-reverse) 70%);
    border: var(--border-1) dashed var(--c-primary-25);
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cdg-panel__event-empty-msg{
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--c-dark-shade);
    line-height: var(--lh-body);
}

/* ----- Responsive ----- */
@media (max-width: 980px){
    .cdg-panel__grid{ grid-template-columns: 1fr 1fr; }
    .cdg-panel__illus{ max-width: 28rem; }
}
@media (max-width: 520px){
    .cdg-panel__grid{ grid-template-columns: 1fr; }
    .cdg-panel__illus{ max-width: 24rem; margin-inline: auto; }
}

/* ----- Responsive ----- */
@media (max-width: 980px){
    .cdg-tiles,
    .cdg-panel__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
    .cdg-tiles{ gap: var(--space-xs); }
    .cdg-panel{ padding: var(--space-md); }
    .cdg-panel__grid{
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
    /* Reduce active scale on small screens to avoid clipping */
    .cdg-tile[aria-expanded="true"]{ transform: scale(1.02); }
    .cdg-tile[aria-expanded="true"]:hover{ transform: scale(1.02) translateY(-0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
    .cdg-tile,
    .cdg-panel,
    .cdg-panel__item,
    .cdg-tile__label{ transition: none; animation: none; }
    .cdg-tile[aria-expanded="true"]{ transform: none; }
    .cdg-tile[aria-expanded="true"] .cdg-tile__label{ color: var(--c-primary); }
}

/* ===== Wide layout (ODR-style) ===== */

.cdg-panel__group--wide{
    grid-column: 2 / -1;          /* spans cols 2 through 4 */
}

.cdg-panel__list--wide{
    column-count: 3;
    column-gap: var(--space-md);
    column-fill: auto;
}
.cdg-panel__list--wide li{
    break-inside: avoid;          /* don't split a link across columns */
}
.cdg-panel__list--wide li.is-column-break{
    break-before: column;         /* force start of a new column */
    margin-top: 0;        /* cancels the li+li spacing at column start */
}

/* ----- View All CTA below the wide list ----- */
.cdg-panel__viewall-li{
    list-style: none !important;
    margin-top: var(--space-md);
    padding-left: 0;
    break-inside: avoid;
}
.cdg-panel__viewall-li::before,
.cdg-panel__viewall-li::after{
    content: none !important;
    display: none !important;
}

/* View All button — scoped under .cdg-panel__viewall-li
   to outrank .cdg-panel__list a inheritance (specificity 0,2,0 vs 0,1,1) */

.cdg-panel__viewall-li .cdg-panel__viewall{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--c-primary);
    color: var(--c-reverse);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    transform: none;     /* reset any inherited translateX from list-link hover */
    transition: background .2s ease, transform .2s ease, gap .2s ease;
}

.cdg-panel__viewall-li .cdg-panel__viewall:hover,
.cdg-panel__viewall-li .cdg-panel__viewall:focus-visible{
    background: var(--c-dark-shade);
    color: var(--c-reverse);
    transform: translateY(-0.2rem);
    gap: var(--space-sm);
}

.cdg-panel__viewall-li .cdg-panel__viewall svg{
    width: 1.4rem;
    height: 1.4rem;
    color: var(--c-reverse);
}

/* ----- Responsive (wide layout) ----- */
@media (max-width: 980px){
    .cdg-panel__group--wide{ grid-column: 1 / -1; }
    .cdg-panel__list--wide{ column-count: 2; }
}
@media (max-width: 520px){
    .cdg-panel__list--wide{ column-count: 1; }
}