/* =========================================================
   GERMAN MADE EASY — PROGRAMMES CATALOGUE
   Scoped to .gme-programmes-page
   ========================================================= */

.gme-programmes-page {
    --catalog-black: #000000;
    --catalog-red: #dd0000;
    --catalog-gold: #ffce00;
    --catalog-white: #ffffff;

    --catalog-bg: var(--gme-bg, #fffdf7);
    --catalog-surface: var(--gme-surface, #ffffff);
    --catalog-surface-2: var(--gme-surface-2, #f5f1e8);
    --catalog-text: var(--gme-text, #0b0b0b);
    --catalog-muted: var(--gme-muted, #686868);
    --catalog-line: var(--gme-line, rgba(0, 0, 0, .1));

    background: var(--catalog-bg);
    color: var(--catalog-text);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.gme-programmes-page .gme-container {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}


/* =========================================
   CATALOG HERO
========================================= */

.catalog-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;

    min-height: 540px;
    padding: 100px 0 120px;

    overflow: hidden;
    color: #ffffff;
    background: #171717;
}

/* Background image */

.catalog-hero__background {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image: url("/static/images/programmes.png");
    background-position: center 45%;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.02);
}

/* Dark gradient overlay */

.catalog-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.70) 45%,
            rgba(0, 0, 0, 0.32) 100%
        );
}

/* Main layout */

.catalog-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: end;
    gap: 64px;
    width: 100%;
}

/* Eyebrow */

.catalog-hero__eyebrow {
    display: inline-block;
    margin-bottom: 24px;

    color: #ffcc00;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

/* Heading */

.catalog-hero__title h1 {
    margin: 0;

    color: #ffffff;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.catalog-hero__title h1 em {
    color: #ff4545;
    font-style: normal;
}

/* Supporting text */

.catalog-hero__content {
    max-width: 440px;
    justify-self: end;
}

.catalog-hero__content > p {
    margin: 0 0 32px;

    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1.9;
}

/* Programme count */

.catalog-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 20px 24px;

    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.catalog-count span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.catalog-count strong {
    color: #ffcc00;
    font-size: 2rem;
    line-height: 1;
}

/* Bottom information strip */

.catalog-hero__bottom {
    position: absolute;
    right: 0;
    bottom: 28px;
    left: 0;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0 max(24px, calc((100vw - 1200px) / 2));

    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.catalog-hero__line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

/* =========================================
   DARK MODE
========================================= */

html[data-theme="dark"] .catalog-hero {
    background: #111111;
}

/*
The image and overlay remain dark in both themes
so the white text stays readable.
*/

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
    .catalog-hero {
        min-height: 500px;
        padding: 80px 0 110px;
    }

    .catalog-hero__grid {
        grid-template-columns: 1fr;
        gap: 36px;
        align-items: start;
    }

    .catalog-hero__content {
        justify-self: start;
        max-width: 560px;
    }

    .catalog-hero__content > p {
        max-width: 520px;
    }

    .catalog-hero__title h1 {
        font-size: clamp(3rem, 8vw, 5rem);
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {
    .catalog-hero {
        min-height: 560px;
        padding: 72px 0 100px;
    }

    .catalog-hero__background {
        background-position: 58% center;
    }

    .catalog-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.84) 100%
        );
    }

    .catalog-hero__grid {
        gap: 28px;
    }

    .catalog-hero__eyebrow {
        margin-bottom: 18px;
        font-size: 0.68rem;
    }

    .catalog-hero__title h1 {
        font-size: clamp(2.8rem, 11vw, 4rem);
        line-height: 1.03;
    }

    .catalog-hero__content > p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .catalog-count {
        padding: 18px;
    }

    .catalog-hero__bottom {
        bottom: 22px;
        gap: 10px;
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .catalog-hero__background {
        transform: none;
    }
}
/* =========================================================
   CATALOG CONTENT
   ========================================================= */

.gme-programmes-page .catalog-content {
    padding-top: 90px;
    padding-bottom: 110px;
}


.gme-programmes-page .catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;

    padding-bottom: 30px;
    margin-bottom: 38px;

    border-bottom: 1px solid var(--catalog-line);
}


.gme-programmes-page .gme-section-label {
    display: block;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}


.gme-programmes-page .catalog-toolbar .gme-section-label {
    color: var(--catalog-red);
}


.gme-programmes-page .catalog-toolbar h2 {
    margin: 9px 0 0;

    font-family: Manrope, Inter, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -.05em;
}


.gme-programmes-page .catalog-toolbar > p {
    margin: 0;

    color: var(--catalog-muted);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   PROGRAMME GRID
   ========================================================= */

.gme-programmes-page .programme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* =========================================================
   PROGRAMME CARD
   ========================================================= */

.gme-programmes-page .programme-card--catalog {
    min-width: 0;

    background: var(--catalog-surface);
    border: 1px solid var(--catalog-line);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.gme-programmes-page .programme-card--catalog:hover {
    transform: translateY(-8px);

    border-color: rgba(0, 0, 0, .18);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .12);
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.gme-programmes-page .programme-card__visual {
    position: relative;

    height: 300px;

    overflow: hidden;

    background: var(--catalog-surface-2);
}


.gme-programmes-page .programme-card__visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2, .7, .2, 1);
}


.gme-programmes-page .programme-card--catalog:hover
.programme-card__visual img {
    transform: scale(1.045);
}


/* dark image overlay */

.gme-programmes-page .programme-card__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .05) 20%,
            rgba(0, 0, 0, .45) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.gme-programmes-page .programme-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #000 0%,
            #111 48%,
            #dd0000 48%,
            #dd0000 72%,
            #ffce00 72%,
            #ffce00 100%
        );

    color: #fff;

    text-align: center;
}


.gme-programmes-page .programme-placeholder span {
    position: relative;
    z-index: 2;

    font-family: Manrope, sans-serif;
    font-size: 74px;
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.08em;
}


.gme-programmes-page .programme-placeholder small {
    position: relative;
    z-index: 2;

    margin-top: 14px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .2em;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.gme-programmes-page .programme-card__number {
    position: absolute;
    z-index: 3;

    top: 20px;
    left: 20px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: var(--catalog-white);
    color: var(--catalog-black);

    font-size: 12px;
    font-weight: 900;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}


/* =========================================================
   GERMAN FLAG MARK
   ========================================================= */

.gme-programmes-page .programme-card__flag {
    position: absolute;
    z-index: 3;

    right: 20px;
    bottom: 20px;

    width: 42px;
    height: 42px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
}


.gme-programmes-page .programme-card__flag i {
    flex: 1;
    display: block;
}


.gme-programmes-page .programme-card__flag i:nth-child(1) {
    background: #000;
}

.gme-programmes-page .programme-card__flag i:nth-child(2) {
    background: #dd0000;
}

.gme-programmes-page .programme-card__flag i:nth-child(3) {
    background: #ffce00;
}


/* =========================================================
   CARD BODY
   ========================================================= */

.gme-programmes-page .programme-card__body {
    padding: 27px 27px 30px;
}


.gme-programmes-page .programme-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 17px;

    color: var(--catalog-muted);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: .13em;
    text-transform: uppercase;
}


.gme-programmes-page .programme-meta span:first-child {
    color: var(--catalog-red);
}


.gme-programmes-page .programme-card__body h3 {
    margin: 0;

    font-family: Manrope, Inter, Arial, sans-serif;
    font-size: 29px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.045em;

    color: var(--catalog-text);
}


.gme-programmes-page .programme-card__body p {
    margin: 17px 0 26px;

    min-height: 78px;

    color: var(--catalog-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   EXPLORE LINK
   ========================================================= */

.gme-programmes-page .programme-card__body > a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-top: 19px;

    border-top: 1px solid var(--catalog-line);

    color: var(--catalog-text);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;
}


.gme-programmes-page .programme-card__body > a b {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: var(--catalog-black);
    color: var(--catalog-white);

    font-size: 17px;
    font-weight: 400;

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


.gme-programmes-page .programme-card__body > a:hover b {
    background: var(--catalog-red);
    color: #fff;

    transform: translateX(4px);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.gme-programmes-page .catalog-empty {
    min-height: 280px;

    padding: 50px;

    display: flex;
    align-items: center;
    gap: 35px;

    background: var(--catalog-surface);

    border: 1px solid var(--catalog-line);
}


.gme-programmes-page .catalog-empty > span {
    width: 90px;
    height: 90px;

    flex: 0 0 90px;

    display: grid;
    place-items: center;

    background: var(--catalog-black);
    color: var(--catalog-gold);

    font-family: Manrope, sans-serif;
    font-size: 25px;
    font-weight: 900;
}


.gme-programmes-page .catalog-empty h2 {
    margin: 0 0 10px;

    font-family: Manrope, sans-serif;
    font-size: 32px;
    letter-spacing: -.04em;
}


.gme-programmes-page .catalog-empty p {
    margin: 0;

    color: var(--catalog-muted);
    line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.gme-programmes-page .catalog-cta {
    position: relative;

    overflow: hidden;

    background: var(--catalog-gold);
    color: #000;
}


.gme-programmes-page .catalog-cta::after {
    content: "DE";

    position: absolute;
    right: 4%;
    bottom: -70px;

    font-family: Manrope, sans-serif;
    font-size: 260px;
    font-weight: 900;
    line-height: 1;

    color: rgba(0, 0, 0, .045);

    pointer-events: none;
}


.gme-programmes-page .catalog-cta__inner {
    position: relative;
    z-index: 2;

    min-height: 280px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


.gme-programmes-page .catalog-cta .gme-section-label {
    color: #000;
}


.gme-programmes-page .catalog-cta h2 {
    max-width: 650px;

    margin: 9px 0 0;

    font-family: Manrope, Inter, Arial, sans-serif;
    font-size: clamp(38px, 5vw, 64px);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -.06em;
}


.gme-programmes-page .catalog-cta .gme-btn--gold {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 25px;

    min-height: 58px;
    padding: 0 25px;

    background: #fff;
    color: #000;

    border: 1px solid rgba(0, 0, 0, .12);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

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


.gme-programmes-page .catalog-cta .gme-btn--gold span {
    font-size: 18px;
}


.gme-programmes-page .catalog-cta .gme-btn--gold:hover {
    background: #000;
    color: #fff;

    transform: translateY(-3px);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .gme-programmes-page .programme-card--catalog {
    background: var(--gme-surface, #121212);
    border-color: rgba(255, 255, 255, .12);
}


html[data-theme="dark"] .gme-programmes-page .programme-card--catalog:hover {
    border-color: rgba(255, 255, 255, .25);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .35);
}


html[data-theme="dark"] .gme-programmes-page .programme-card__number {
    background: #fff;
    color: #000;
}


html[data-theme="dark"] .gme-programmes-page .catalog-empty {
    background: var(--gme-surface, #121212);
    border-color: rgba(255, 255, 255, .12);
}


/* =========================================================
   RESPONSIVE — 1050px
   ========================================================= */

@media (max-width: 1050px) {

    .gme-programmes-page .catalog-hero__grid {
        grid-template-columns: 1fr .75fr;
        gap: 50px;
    }

    .gme-programmes-page .catalog-hero h1 {
        font-size: clamp(50px, 7vw, 78px);
    }

    .gme-programmes-page .programme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — 760px
   ========================================================= */

@media (max-width: 760px) {

    .gme-programmes-page .gme-container {
        width: min(100% - 32px, 1240px);
    }

    .gme-programmes-page .catalog-hero__grid {
        min-height: auto;

        padding-top: 70px;
        padding-bottom: 70px;

        grid-template-columns: 1fr;
        gap: 55px;
    }

    .gme-programmes-page .catalog-hero h1 {
        font-size: clamp(52px, 14vw, 76px);
    }

    .gme-programmes-page .catalog-hero__grid > div:last-child {
        max-width: 520px;
    }

    .gme-programmes-page .catalog-content {
        padding-top: 65px;
        padding-bottom: 75px;
    }

    .gme-programmes-page .catalog-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .gme-programmes-page .catalog-toolbar h2 {
        font-size: 38px;
    }

    .gme-programmes-page .programme-card__visual {
        height: 280px;
    }

    .gme-programmes-page .catalog-cta__inner {
        min-height: auto;

        padding-top: 65px;
        padding-bottom: 65px;

        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   RESPONSIVE — 560px
   ========================================================= */

@media (max-width: 560px) {

    .gme-programmes-page .programme-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gme-programmes-page .programme-card__visual {
        height: 310px;
    }

    .gme-programmes-page .programme-card__body {
        padding: 24px 22px 25px;
    }

    .gme-programmes-page .programme-card__body h3 {
        font-size: 27px;
    }

    .gme-programmes-page .programme-card__body p {
        min-height: 0;
    }

    .gme-programmes-page .catalog-empty {
        padding: 30px;

        align-items: flex-start;
        flex-direction: column;
    }

    .gme-programmes-page .catalog-empty h2 {
        font-size: 27px;
    }

    .gme-programmes-page .catalog-cta h2 {
        font-size: 42px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .gme-programmes-page .programme-card--catalog,
    .gme-programmes-page .programme-card__visual img,
    .gme-programmes-page .programme-card__body > a b,
    .gme-programmes-page .catalog-cta .gme-btn--gold {
        transition: none;
    }

}