/**
 * Corporate Governance Award page — styles scoped to .cga-page only.
 * Mirrors legacy css/style.css rules used on this screen (grid, donate-tab, video cards).
 */

/* Hero banner (JS sets background from data-bg-image) */
.cga-page-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* --- Legacy .lgray-bg equivalent (global style.css also defines .lgray-bg) --- */
.cga-page .lgray-bg {
    background: #f7f7f7;
}

/* --- Donate / tabs: segmented switcher (clear inactive + active affordance) --- */
.cga-page .tabs.donate-tab::after,
.cga-page .donate-tab > .nav-tabs::after {
    clear: both;
    content: " ";
    display: table;
}

.cga-page .donate-tab li {
    display: block;
    float: left;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 50%;
}

.cga-page .donate-tab .tab-content {
    border: 0;
    padding: 0;
}

/* Outer track — reads as one control / tab bar */
.cga-page .donate-tab .cga-nav-tabs {
    background: #e8e8e8;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    margin: 0 auto;
    padding: 6px;
    width: 35%;
}

/* Inactive tab — looks like a tappable segment */
.cga-page .donate-tab .nav-tabs > li > a {
    background-color: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: #444;
    margin: 0 2px;
    padding: 12px 10px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.cga-page .donate-tab .nav-tabs > li > a:hover,
.cga-page .donate-tab .nav-tabs > li > a:focus {
    background-color: #fafafa;
    border-color: #b0b0b0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    color: #222;
}

/* Active tab — brand fill + lifted shadow so it reads “selected” */
.cga-page .donate-tab .nav-tabs > li.active > a,
.cga-page .donate-tab .nav-tabs > li.active > a:hover,
.cga-page .donate-tab .nav-tabs > li.active > a:focus {
    background-color: #ef4136;
    border-color: #c8352d;
    box-shadow:
        0 3px 12px rgba(239, 65, 54, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.18);
    color: #fff;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .cga-page .donate-tab .cga-nav-tabs {
        width: 100%;
    }
}

/* --- Video cards: align with home Videos strip (structure + home.css-style treatment) --- */
.cga-page .cga-video-grid .cause-grid-item,
.cga-page .cga-video-grid .event-grid-item {
    margin-bottom: 30px;
}

.cga-page .cga-video-grid .event-content {
    height: auto !important;
    padding-bottom: 18px;
    padding-top: 8px;
}

.cga-page .cga-video-grid .grid-item-inner {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cga-page .cga-video-grid .grid-item-inner:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.cga-page .cga-video-grid .grid-item-inner .grid-item-content {
    border-top: 1px solid #ededed;
    padding: 0;
    position: relative;
}

.cga-page .cga-video-grid .cga-grid-item-content {
    word-wrap: break-word;
}

.cga-page .cga-video-grid h3,
.cga-page .cga-video-grid h3 a {
    font-family: 'Poppins', sans-serif;
}

.cga-page .cga-video-grid .grid-item h3 {
    color: #333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 21px;
    margin: 0 0 10px;
    padding: 0 10px;
    text-transform: uppercase;
}

.cga-page .cga-video-grid .grid-item h3 a {
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cga-page .cga-video-grid .event-grid-item h3 {
    margin-top: 10px;
    min-height: 65px;
}

.cga-page .cga-video-grid .grid-item h3 a:hover,
.cga-page .cga-video-grid .grid-item h3 a:focus {
    color: #ef4136;
}

/* Thumbnail: same as home .home-video-thumb (200px, cover) — wins over global .responsive img-event */
.cga-page .cga-video-grid .responsive.img-event.cga-video-thumb {
    display: block;
    float: none;
    height: 200px;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .cga-page .cga-video-grid .responsive.img-event.cga-video-thumb {
        height: auto;
        min-height: 180px;
        object-fit: cover;
    }
}

/* --- “The Process” --- */
.cga-page .cga-process-copy .block-title {
    margin-top: 0;
}

.cga-page .cga-process-copy p {
    margin: 0 0 20px;
    word-wrap: break-word;
}

.cga-page .cga-frame-wrap {
    margin-bottom: 16px;
    text-align: center;
}

.cga-page .cga-frame-wrap img {
    height: auto;
    max-width: 100%;
}