/* apply_lonotv/assets/css/style.css */

/* Removes the platform's shared glassmorphism look (translucent,
   blurred navbar/card backgrounds) for this app only. layout.php
   inlines tokens.css into a <style> tag, then loads this file as a
   real stylesheet right after — so redeclaring these same classes
   here overrides tokens.css's glass styling by cascade order, without
   touching that shared file (lonotv/news/travel keep the glass look). */
.glass-nav {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.glass-card {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.apply-hero {
    padding: 3rem 5% 1.5rem;
    max-width: 800px;
}

/* Homepage-only — centers the hero block itself on wide screens (its
   800px max-width would otherwise sit flush left), so the centered
   text inside actually lands center-page, not just center-of-a-
   left-anchored-box. college.php's hero reuses .apply-hero but stays
   left-aligned, so this is its own class rather than added to
   .apply-hero directly. */
.hero-home {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.apply-hero .hero-title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.apply-hero .hero-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Only the homepage's marketing line — college.php reuses
   .hero-subtitle for its own description text and 404 message, which
   should stay the regular secondary gray, not dark/bold/uppercase. */
.hero-home .hero-subtitle {
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

.colleges-section {
    padding: 1rem 5% 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.search-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.search-filter-bar .form-field {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

/* A small, left-aligned label rather than the shared .section-title
   (2.25rem, centered, 2.5rem margin) — that's a marketing-page heading
   style borrowed for a dynamic results count/utility label, which is
   what made this page feel disjointed: a huge centered headline
   sitting between a left-aligned search bar and left-aligned cards,
   with enough margin to push the actual results below the fold. */
.results-heading {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    margin-bottom: 1rem;
}

.colleges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.college-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.college-card-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
    background: #ffffff;
    padding: 0.5rem;
}

.college-card-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 1.75rem;
}

.college-card h3 {
    font-size: 1.15rem;
}

.college-card .college-location {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.college-card .college-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.college-card .view-programs {
    align-self: flex-start;
    margin-top: auto;
    pointer-events: none;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.pagination-status {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* college.php used to stack a left-anchored 700px hero directly above
   a separately-centered 1200px programs section — two unrelated
   width/alignment rules on top of each other read as scattered, and
   on a wide screen Programs (what an applicant actually came for)
   ended up looking like an afterthought below a lot of hero text.
   .college-layout gives both a shared 1200px frame and, from tablet
   width up, puts them side by side instead of stacked, so Programs is
   visible immediately rather than requiring a scroll past the profile. */
.college-page-header,
.college-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}

.college-page-header {
    padding-top: 1.5rem;
}

.college-layout {
    padding-bottom: 4rem;
}

@media (min-width: 769px) {
    .college-layout {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2rem;
        align-items: start;
    }
}

.college-profile-card {
    padding: 1.75rem;
    margin-bottom: 2rem;
}

@media (min-width: 769px) {
    .college-profile-card {
        margin-bottom: 0;
        /* Stays in view while a long programs list scrolls past it,
           rather than disappearing off the top of the page. */
        position: sticky;
        top: 1.5rem;
    }
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.back-link:hover {
    color: var(--text-primary);
}

.college-detail-name {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.college-location {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.college-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.75rem 0;
}

.college-detail-logo {
    /* Was a default inline image sitting on the same line as the
       .back-link right before it — an inline element's default
       vertical-align:baseline lines up the *bottom* of a 64px-tall
       image with the small text's baseline, so the image appeared to
       float above the link instead of stacking cleanly underneath it. */
    display: block;
    max-height: 90px;
    max-width: 200px;
    width: auto;
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sm);
}

.college-programs-panel .results-heading {
    margin-top: 0;
}

.college-programs {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.program-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
    font-size: 0.9rem;
    gap: 0.75rem;
}

.program-row .program-info {
    display: flex;
    flex-direction: column;
}

.program-row .program-degree {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: capitalize;
}

.program-row .program-period {
    display: block;
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 600;
}

.program-row .program-period.is-closed {
    color: var(--color-danger);
}

.program-row .program-period.is-upcoming {
    color: var(--color-warning);
}

/* Applying is its own page (apply.php) now, not a modal. .apply-layout
   wraps the instructions box + the form card; on a phone they just
   stack (this rule), same reading-width cap as before. */
.apply-layout {
    max-width: 820px;
    margin: 0 auto;
}

.application-page-card {
    padding: 2.5rem;
}

.application-instructions {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--border-radius-md);
    background: rgba(226, 35, 26, 0.06);
    border: 1px solid rgba(226, 35, 26, 0.2);
    white-space: pre-line;
    font-size: 0.9rem;
    line-height: 1.6;
}

.application-instructions h3 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* On a phone the two blocks just stack (the rule above) — from tablet
   width up, when there's actually an instructions box to show
   (.has-instructions; a course with neither a fee nor instructions
   text has only the form, which should stay full-width rather than
   being squeezed into a half-empty two-column grid), they sit side by
   side instead of one stacked on top of the other. */
@media (min-width: 769px) {
    .apply-layout {
        max-width: 1100px;
    }

    .apply-layout.has-instructions {
        display: grid;
        grid-template-columns: 2fr 3fr;
        align-items: start;
        gap: 2rem;
    }

    .apply-layout.has-instructions .application-instructions {
        margin-bottom: 0;
    }
}

.application-fee {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.application-section-title {
    margin: 2rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    font-size: 1.1rem;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.radio-option input[type="radio"] {
    width: auto;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.checkbox-option input[type="checkbox"] {
    width: auto;
}

.custom-field-upload-status {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.custom-field-upload-status.is-uploaded {
    color: var(--color-success);
}

.custom-field-upload-status.is-error {
    color: var(--color-danger);
}

@media (max-width: 768px) {
    /* The logo image alone renders ~80px at the shared 32px height,
       and tokens.css never taught the navbar to shrink — with just
       "Colleges" left in nav-links (the old second "LonoTV" link read
       as confusingly similar to the LONO TV brand mark right next to
       it, and was redundant with the footer's own link to lonotv.com,
       so it's gone) brand + link comfortably fit one row on a real
       phone width. flex-wrap stays on only as a fallback for
       unusually narrow viewports, not to force two rows outright. */
    .navbar {
        flex-wrap: wrap;
        row-gap: 0.4rem;
        padding: 0.75rem 6%;
    }

    .main-container {
        padding-top: 88px;
    }

    .apply-hero {
        padding: 1rem 6% 1.25rem;
    }

    .colleges-section {
        padding: 1rem 6% 3rem;
    }

    /* Centered rather than stretched edge-to-edge across the section's
       full width — reads as a search box, not a form filling the page. */
    .search-filter-bar {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .colleges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .college-card {
        padding: 1rem;
        gap: 0.35rem;
    }

    .college-card h3 {
        font-size: 1rem;
    }

    .college-card .college-description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .program-row {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .program-row .apply-program-btn {
        width: 100%;
    }

    .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .apply-hero .hero-title {
        font-size: 2rem;
    }

    .apply-hero .hero-subtitle {
        font-size: 1rem;
    }

    .search-filter-bar .form-field {
        min-width: 100%;
    }

    .search-filter-bar .btn-primary,
    .search-filter-bar .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .colleges-grid {
        gap: 0.6rem;
    }

    .college-card {
        padding: 0.75rem;
    }

    .college-card-logo {
        width: 56px;
        height: 56px;
    }

    .college-card h3 {
        font-size: 0.9rem;
    }

    .college-card .college-location {
        font-size: 0.75rem;
    }

    .college-card .college-description {
        font-size: 0.75rem;
        -webkit-line-clamp: 3;
    }

    .college-card .view-programs {
        font-size: 0.75rem;
        padding: 0.4rem 0.7rem;
    }

    .college-detail-logo {
        max-height: 72px;
    }

    .application-page-card {
        padding: 1.5rem;
    }

    .application-instructions {
        padding: 1rem 1.1rem;
    }
}