/**
 * GEC Schedule Page — Course Runtime consumer.
 *
 * @package GEC_Academy_Child
 * @since 7.0.0
 */

.gec-schedule-page {
    --gec-schedule-section-space: var(--space-16);
    --gec-schedule-card-level: var(--content-width-sm);
    --gec-schedule-action-width: var(--container-xs);
    --gec-schedule-touch-target: var(--component-height-md);
    /* Scoped to this page only — deliberately not the global --blue-soft /
       --color-secondary-50 token (#F3F6FA), which other pages still use. */
    --gec-schedule-hero-bg: #EAF0F7;
}

.gec-schedule-hero,
.gec-schedule-browser,
.gec-schedule-guide,
.gec-schedule-faq {
    padding-block: var(--gec-schedule-section-space);
    padding-inline: max(var(--container-padding), calc((100vw - var(--container-xl)) / 2));
}

.gec-schedule-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--space-16);
    align-items: end;
    background: var(--gec-schedule-hero-bg);
}

.gec-schedule-hero h1 {
    max-inline-size: 16ch;
    margin-block: var(--space-4) 0;
    font-size: var(--font-size-5xl);
}

.gec-schedule-hero__copy {
    max-inline-size: var(--content-width-sm);
}

.gec-schedule-hero__copy p {
    margin-block: 0 var(--space-7);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.gec-schedule-principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: max(var(--container-padding), calc((100vw - var(--container-xl)) / 2));
    border-block: var(--border-width) var(--border-style) var(--color-border);
}

.gec-schedule-principles > div {
    display: flex;
    min-block-size: var(--space-16);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    border-inline-end: var(--border-width) var(--border-style) var(--color-border);
}

.gec-schedule-principles > div:last-child { border-inline-end: 0; }
.gec-schedule-principles strong { color: var(--color-primary-600); font-family: var(--font-family-heading); font-size: var(--font-size-xl); }
.gec-schedule-principles span { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.gec-schedule-browser { background: var(--color-neutral-50); }
.gec-schedule-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .55fr);
    gap: var(--space-12);
    align-items: end;
}

.gec-schedule-heading h2 { margin-block: var(--space-4) 0; font-size: var(--font-size-4xl); }
.gec-schedule-heading > p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-lg); }

.gec-schedule-toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(8rem, 1fr);
    gap: var(--space-8);
    align-items: end;
    margin-block: var(--space-12) var(--space-8);
    padding-block: var(--space-5);
    border-block: var(--border-width) var(--border-style) var(--color-border);
}

.gec-schedule-toolbar fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.gec-schedule-toolbar legend {
    inline-size: 100%;
    margin-block-end: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gec-schedule-toolbar button {
    min-block-size: var(--gec-schedule-touch-target);
    padding-inline: var(--space-4);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    cursor: pointer;
}

.gec-schedule-toolbar button:hover,
.gec-schedule-toolbar button[aria-pressed="true"] {
    border-color: var(--color-secondary-500);
    background: var(--color-secondary-500);
    color: var(--color-white);
}

.gec-schedule-toolbar button:focus-visible {
    outline: calc(var(--border-width) * 2) var(--border-style) var(--color-primary-500);
    outline-offset: var(--focus-ring-offset);
}

.gec-schedule-toolbar > p {
    justify-self: end;
    margin: 0;
    color: var(--color-text-secondary);
}

.gec-schedule-toolbar > p strong { color: var(--color-text-primary); font-size: var(--font-size-xl); }

.gec-schedule-list {
    display: flex;
    flex-direction: column;
    border-block-start: var(--border-width) var(--border-style) var(--color-border);
}

.gec-schedule-card {
    display: grid;
    grid-template-columns: minmax(10rem, .7fr) minmax(0, 2fr) minmax(11rem, .75fr);
    border-block-end: var(--border-width) var(--border-style) var(--color-border);
    background: var(--color-surface);
}

.gec-schedule-card[hidden] { display: none; }

.gec-schedule-card__level,
.gec-schedule-card__action {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
}

.gec-schedule-card__level { border-inline-start: 3px solid var(--color-primary-500); }
.gec-schedule-card__level > span { color: var(--color-primary-600); font-size: var(--font-size-xs); }
.gec-schedule-card__level > p { margin-block: var(--space-6) var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.gec-schedule-card__level h3 { margin: 0; font-size: var(--font-size-3xl); }
.gec-schedule-card__level small { margin-block-start: var(--space-2); color: var(--color-text-secondary); }

.gec-schedule-card dl {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr;
    align-items: stretch;
    margin: 0;
}

.gec-schedule-card dl > div {
    padding: var(--space-6);
}

.gec-schedule-card dt {
    margin-block-end: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gec-schedule-card dd { margin: 0; line-height: var(--line-height-relaxed); }
.gec-schedule-card__action { align-items: center; justify-content: center; gap: var(--space-4); text-align: center; }
.gec-schedule-card__status { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.gec-schedule-card__status--open { color: var(--color-success-700); }
.gec-schedule-card__status--full { color: var(--color-text-secondary); }
.gec-schedule-card__status--coming_soon { color: var(--color-warning-700); }

/* .gec-btn already supplies size, padding, radius and the primary (register)
   color. Waitlist/notify only need the neutral outline the design calls for
   instead of .gec-btn-outline's primary-colored border. */
.gec-schedule-card__cta--waitlist,
.gec-schedule-card__cta--notify {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.gec-schedule-card__cta--waitlist:hover,
.gec-schedule-card__cta--notify:hover {
    border-color: var(--color-primary-500);
    background: var(--color-neutral-50);
    color: var(--color-text-primary);
}

.gec-schedule-empty,
.gec-schedule-no-results {
    margin: 0;
    padding: var(--space-10);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.gec-schedule-guide {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--space-16);
}

.gec-schedule-guide h2 { margin-block: var(--space-4) 0; font-size: var(--font-size-4xl); }
.gec-schedule-guide ol { margin: 0; padding: 0; list-style: none; }
.gec-schedule-guide li {
    display: grid;
    grid-template-columns: var(--space-10) 1fr;
    gap: var(--space-5);
    padding-block: var(--space-6);
    border-block-start: var(--border-width) var(--border-style) var(--color-border);
}

.gec-schedule-guide li > span { color: var(--color-primary-600); font-size: var(--font-size-xs); }
.gec-schedule-guide h3 { margin: 0; }
.gec-schedule-guide li p { margin-block: var(--space-2) 0; color: var(--color-text-secondary); }

.gec-schedule-help {
    padding-block: var(--space-16);
    padding-inline: max(var(--container-padding), calc((100vw - var(--container-xl)) / 2));
    background: var(--color-primary-500);
    color: var(--color-white);
    text-align: center;
}

.gec-schedule-help .gec-section-eyebrow { color: var(--color-white); }
.gec-schedule-help h2 { margin-block: var(--space-4) 0; font-size: var(--font-size-4xl); }
.gec-schedule-help > p:not(.gec-section-eyebrow) { margin-block: var(--space-5) 0; font-size: var(--font-size-lg); }
.gec-schedule-help > div { display: flex; justify-content: center; gap: var(--space-5); margin-block-start: var(--space-7); }

/* Both contact buttons share one rule set — only their text content and
   platform icon are allowed to differ. */
.gec-schedule-help__contact {
    display: inline-flex;
    min-inline-size: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    inline-size: 240px;
    block-size: 56px;
    padding-inline: 0;
    background: var(--color-white);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.gec-schedule-help__contact:hover {
    background: var(--color-neutral-100);
    color: var(--color-text-primary);
}

.gec-schedule-help__contact:focus-visible {
    outline: calc(var(--border-width) * 2) var(--border-style) var(--color-white);
    outline-offset: var(--focus-ring-offset);
}

.gec-schedule-help__icon {
    display: block;
    inline-size: 22px;
    block-size: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 47.99rem) {
    .gec-schedule-help > div { flex-direction: column; align-items: stretch; }
    .gec-schedule-help__contact { inline-size: 100%; }
}

.gec-schedule-faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-16); }
.gec-schedule-faq h2 { margin-block: var(--space-4) 0; font-size: var(--font-size-4xl); }
.gec-schedule-faq article { border-block-start: var(--border-width) var(--border-style) var(--color-border); }
.gec-schedule-faq h3 { margin: 0; }
.gec-schedule-faq button {
    display: flex;
    inline-size: 100%;
    min-block-size: var(--space-16);
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    text-align: start;
    cursor: pointer;
}

.gec-schedule-faq article > div { padding-block: 0 var(--space-6); color: var(--color-text-secondary); }
.gec-schedule-faq button:focus-visible { outline: calc(var(--border-width) * 2) var(--border-style) var(--color-primary-500); outline-offset: var(--focus-ring-offset); }

@media (max-width: 63.99rem) {
    .gec-schedule-hero,
    .gec-schedule-heading,
    .gec-schedule-guide,
    .gec-schedule-faq { grid-template-columns: 1fr; gap: var(--space-8); }

    .gec-schedule-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gec-schedule-toolbar { grid-template-columns: 1fr 1fr; }
    .gec-schedule-toolbar > p { grid-column: 1 / -1; justify-self: start; }

    .gec-schedule-card { grid-template-columns: minmax(9rem, .6fr) minmax(0, 1.4fr); }
    .gec-schedule-card__action { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; border-block-start: var(--border-width) var(--border-style) var(--color-border); }
}

@media (max-width: 47.99rem) {
    .gec-schedule-page { --gec-schedule-section-space: var(--space-12); }
    .gec-schedule-hero h1,
    .gec-schedule-heading h2,
    .gec-schedule-guide h2,
    .gec-schedule-help h2,
    .gec-schedule-faq h2 { font-size: var(--font-size-3xl); }

    .gec-schedule-principles,
    .gec-schedule-toolbar,
    .gec-schedule-card,
    .gec-schedule-card dl { grid-template-columns: 1fr; }

    .gec-schedule-principles > div { border-inline-start: var(--border-width) var(--border-style) var(--color-border); }
    .gec-schedule-toolbar fieldset { flex-wrap: nowrap; overflow-x: auto; padding-block-end: var(--space-2); }
    .gec-schedule-toolbar legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    .gec-schedule-card { margin-block-end: var(--space-5); border: var(--border-width) var(--border-style) var(--color-border); }
    .gec-schedule-card__level { border-block-end: var(--border-width) var(--border-style) var(--color-border); }
    .gec-schedule-card dl > div { border-block-end: var(--border-width) var(--border-style) var(--color-border); }
    .gec-schedule-card dt { margin-block-end: var(--space-2); }
    .gec-schedule-card__action { grid-column: auto; justify-content: flex-start; }
    .gec-schedule-help > div { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .gec-schedule-toolbar button,
    .gec-schedule-card__cta { transition: none; }
}