/* ==========================================================================
   OChEGS — Home Page Styles
   Template: template-ochegs-home.php
   Palette: --uh-red #C8102E | Black #000 | --uh-slate #54585A | --uh-gold #C4953B
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared layout tokens
   -------------------------------------------------------------------------- */

.ochegs-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ochegs-section {
    padding: 5rem 0;
}

.ochegs-section--bg {
    background: var(--dm-surface, #f7f8fa);
}

.ochegs-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--uh-red);
    margin-bottom: .5rem;
}

.ochegs-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.ochegs-section__title {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: 1.8rem !important;
    color: var(--dm-heading, var(--uh-slate)) !important;
    margin: 0 !important;
    line-height: 1.1;
}

.ochegs-link-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .08em;
    color: var(--uh-red);
    text-decoration: none;
    white-space: nowrap;
    transition: gap .2s;
}

.ochegs-link-more:hover {
    gap: .7rem;
    color: var(--uh-red);
}

/* Buttons */
.ochegs-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .07em;
    padding: .8rem 1.75rem;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.ochegs-btn--red {
    background: var(--uh-red);
    color: #fff;
    border: 2px solid var(--uh-red);
}
.ochegs-btn--red:hover {
    background: var(--uh-red-dark, #a00e26);
    border-color: var(--uh-red-dark, #a00e26);
    color: #fff;
}

.ochegs-btn--ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.55);
}
.ochegs-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255,255,255,.1);
    color: #fff;
}

.ochegs-btn--ghost-dark {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.3);
}
.ochegs-btn--ghost-dark:hover {
    border-color: rgba(255,255,255,.7);
    color: #fff;
}

.ochegs-btn--white {
    background: #fff;
    color: #111;
    border: 2px solid #fff;
}
.ochegs-btn--white:hover {
    background: rgba(255,255,255,.88);
    color: #111;
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.ochegs-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--uh-slate) center / cover no-repeat;
}

/* Slideshow slides */
.ochegs-hero--slideshow .ochegs-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 0;
}
.ochegs-hero--slideshow .ochegs-hero__slide.active {
    opacity: 1;
}

/* --- Animation styles (Customize → Home → Slideshow Animation) --- */

/* Gradual Zoom (Ken Burns): active slide slowly scales up */
.ochegs-hero--anim-kenburns .ochegs-hero__slide {
    transform: scale(1);
    transition: opacity 1.2s ease;
}
.ochegs-hero--anim-kenburns .ochegs-hero__slide.active {
    animation: ochegs-hero-kenburns 12s ease-out forwards;
}
@keyframes ochegs-hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Cover / Slide In: active slide slides in from the right over the previous one */
.ochegs-hero--anim-cover .ochegs-hero__slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform 1s cubic-bezier(.4,0,.2,1);
}
.ochegs-hero--anim-cover .ochegs-hero__slide.active {
    transform: translateX(0);
    z-index: 1;
}

/* Simple Crossfade: faster, no movement (overrides base timing) */
.ochegs-hero--anim-fade .ochegs-hero__slide {
    transition: opacity .8s ease;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ochegs-hero--anim-kenburns .ochegs-hero__slide.active { animation: none; }
    .ochegs-hero--anim-cover .ochegs-hero__slide { transition: opacity .6s ease; transform: none; opacity: 0; }
    .ochegs-hero--anim-cover .ochegs-hero__slide.active { opacity: 1; }
}

.ochegs-hero__video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.ochegs-hero__video-bg iframe,
.ochegs-hero__video-bg video {
    position: absolute;
    top: 50%; left: 50%;
    width: 177.78vh; min-width: 100%;
    height: 56.25vw; min-height: 100%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}

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

/* Red accent stripe — left edge signature */
.ochegs-hero__red-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--uh-red);
    z-index: 3;
}

.ochegs-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 6rem 2rem 6rem calc(2rem + 6px); /* account for red stripe */
    margin-left: max(4rem, calc((100% - 1160px)/2 + 2rem));
}

.ochegs-hero__eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--uh-gold);
    margin-bottom: 1rem;
}

.ochegs-hero__title {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3.4rem) !important;
    color: #fff !important;
    margin: 0 0 1.25rem !important;
    line-height: 1.07;
    letter-spacing: .01em;
}

.ochegs-hero__sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,.82);
    margin: 0 0 2.5rem !important;
    line-height: 1.7;
    max-width: 560px;
}

.ochegs-hero__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ochegs-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,.4);
    font-size: .9rem;
    animation: ochegsScrollBounce 2.2s ease-in-out infinite;
}

@keyframes ochegsScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* --------------------------------------------------------------------------
   3. Mission Pillars
   -------------------------------------------------------------------------- */

.ochegs-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5px;
    background: var(--dm-border, #e0e0e0);
}

.ochegs-pillar {
    background: var(--dm-card-bg, #fff);
    padding: 2.25rem 1.75rem 2rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    border-bottom: 4px solid transparent;
    transition: border-color .2s, background .2s;
}

.ochegs-pillar:hover {
    border-bottom-color: var(--uh-red);
    background: var(--dm-surface, #fafafa);
}

.ochegs-pillar__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .25rem;
}

.ochegs-pillar__icon--red {
    background: var(--uh-red);
    color: #fff;
}

.ochegs-pillar__icon--black {
    background: #111;
    color: #fff;
}

.ochegs-pillar__icon i {
    font-size: 1.35rem;
}

.ochegs-pillar h3 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: 1rem !important;
    color: var(--dm-heading, var(--uh-slate)) !important;
    margin: 0 !important;
}

.ochegs-pillar p {
    font-size: .86rem;
    color: var(--dm-text-muted, #666);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

.ochegs-pillar__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .07em;
    color: var(--uh-red);
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: gap .2s;
}

.ochegs-pillar:hover .ochegs-pillar__link {
    gap: .6rem;
}

/* --------------------------------------------------------------------------
   4. News / Events grid
   -------------------------------------------------------------------------- */

.ochegs-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.ochegs-news-card {
    text-decoration: none;
    color: inherit;
    background: var(--dm-card-bg, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--dm-border, #e6e8ec);
    border-radius: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
    min-width: 0;
}

.ochegs-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.ochegs-news-card__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;   /* every card image identical height */
}

.ochegs-news-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.ochegs-news-card:hover .ochegs-news-card__img img {
    transform: scale(1.04);
}

.ochegs-news-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--uh-slate);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ochegs-news-card__img-placeholder i {
    font-size: 2.5rem;
    color: rgba(255,255,255,.2);
}

.ochegs-news-card__badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: var(--uh-red);
    color: #fff;
    font-family: var(--font-display);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .2rem .6rem;
    border-radius: 3px;
    font-weight: 700;
}
.ochegs-news-card__badge--upcoming { background: var(--uh-gold, #C4953B); color: #1f2228; }
.ochegs-news-card__badge--past { background: var(--uh-slate, #54585A); color: #fff; }

.ochegs-news-card__body {
    padding: 1.1rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.ochegs-news-card__date {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--dm-text-muted, #999);
    font-family: var(--font-display);
}

.ochegs-news-card h3 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: .95rem !important;
    color: var(--dm-heading, var(--uh-slate)) !important;
    margin: 0 !important;
    line-height: 1.35;
}

.ochegs-news-card p {
    font-size: .84rem;
    color: var(--dm-text-muted, #666);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;       /* keep excerpts even so cards align */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Officers preview
   -------------------------------------------------------------------------- */

.ochegs-officers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5px;
    background: var(--dm-border, #e0e0e0);
}

.ochegs-officer-card {
    background: var(--dm-card-bg, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 4px solid transparent;
    transition: border-color .2s;
}

.ochegs-officer-card:hover {
    border-top-color: var(--uh-red);
}

.ochegs-officer-card__photo {
    height: 220px;
    overflow: hidden;
    background: var(--dm-surface, #f0f0f0);
    position: relative;
}

.ochegs-officer-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform .4s;
    filter: grayscale(15%);
}

.ochegs-officer-card:hover .ochegs-officer-card__photo img {
    transform: scale(1.04);
    filter: grayscale(0%);
}

.ochegs-officer-card__photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--uh-slate);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ochegs-officer-card__photo-placeholder i {
    font-size: 3rem;
    color: rgba(255,255,255,.2);
}

.ochegs-officer-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}

.ochegs-officer-card__body h3 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: .92rem !important;
    color: var(--dm-heading, var(--uh-slate)) !important;
    margin: 0 !important;
}

.ochegs-officer-card__role {
    font-size: .8rem;
    color: var(--uh-red);
    font-weight: 500;
    margin: 0;
}

.ochegs-officer-card__research {
    font-size: .78rem;
    color: var(--dm-text-muted, #888);
    margin: .2rem 0 0;
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ochegs-officer-card__links {
    display: flex;
    gap: .6rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--dm-border, #eee);
}

.ochegs-officer-card__links a {
    color: var(--dm-text-muted, #aaa);
    font-size: 1rem;
    text-decoration: none;
    transition: color .2s;
}

.ochegs-officer-card__links a:hover {
    color: var(--uh-red);
}

/* --------------------------------------------------------------------------
   6. Research snapshot
   -------------------------------------------------------------------------- */

.ochegs-research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
    background: var(--dm-border, #e0e0e0);
}

.ochegs-research-card {
    text-decoration: none;
    color: inherit;
    background: var(--dm-card-bg, #fff);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-bottom: 4px solid transparent;
    transition: border-color .2s;
}

.ochegs-research-card:hover {
    border-bottom-color: var(--uh-red);
}

.ochegs-research-card__media {
    height: 200px;
    overflow: hidden;
    background: var(--uh-slate);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ochegs-research-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.ochegs-research-card:hover .ochegs-research-card__media img {
    transform: scale(1.04);
}

.ochegs-research-card__icon {
    font-size: 2.5rem;
    color: rgba(255,255,255,.25);
}

.ochegs-research-card__body {
    padding: 1.4rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.ochegs-research-card__tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--uh-red);
    border: 1px solid var(--uh-red);
    padding: .15rem .55rem;
    align-self: flex-start;
}

.ochegs-research-card h3 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: 1rem !important;
    color: var(--dm-heading, var(--uh-slate)) !important;
    margin: 0 !important;
}

.ochegs-research-card p {
    font-size: .84rem;
    color: var(--dm-text-muted, #666);
    line-height: 1.65;
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. Sponsor strip
   -------------------------------------------------------------------------- */

.ochegs-sponsor-strip {
    background: #111;
    padding: 4rem 0;
}

.ochegs-sponsor-strip__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: center;
}

.ochegs-sponsor-strip__text { min-width: 0; }

.ochegs-sponsor-strip__text h2 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: 1.4rem !important;
    color: #fff !important;
    margin: 0 0 .75rem !important;
}

.ochegs-sponsor-strip__text p {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    margin: 0;
    max-width: 580px;
}

.ochegs-sponsor-strip__action {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Join / Get Involved CTA
   -------------------------------------------------------------------------- */

.ochegs-join__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5px;
    background: var(--dm-border, #e0e0e0);
}

.ochegs-join-card {
    padding: 3rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}

.ochegs-join-card--red   { background: var(--uh-red); }
.ochegs-join-card--black { background: #111; }
.ochegs-join-card--slate { background: var(--uh-slate); }

.ochegs-join-card i {
    font-size: 2rem;
    color: rgba(255,255,255,.5);
}

.ochegs-join-card h3 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-size: 1.1rem !important;
    color: #fff !important;
    margin: 0 !important;
}

.ochegs-join-card p {
    font-size: .86rem;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .ochegs-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
    .ochegs-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ochegs-officers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ochegs-join__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ochegs-sponsor-strip__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .ochegs-sponsor-strip__action {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }
    .ochegs-sponsor-strip__action .ochegs-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;       /* allow long labels to wrap instead of overflowing */
        text-align: center;
    }
}

@media (max-width: 768px) {
    .ochegs-hero {
        min-height: 520px;
    }
    .ochegs-hero__content {
        margin-left: 0;
        padding: 4rem 1.5rem 4rem 2rem;
    }
    .ochegs-hero__red-stripe {
        display: none;
    }
    .ochegs-research-grid {
        grid-template-columns: 1fr;
    }
    .ochegs-news-grid {
        grid-template-columns: 1fr;
    }
    .ochegs-section__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .ochegs-pillars {
        grid-template-columns: 1fr;
    }
    /* Join / Get Involved CTA cards — single column, contained, wrapping buttons. */
    .ochegs-join__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ochegs-join-card {
        padding: 2.25rem 1.5rem;
    }
    .ochegs-join-card .ochegs-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    /* A — Single column: one officer per full-width row (default). */
    .ochegs-officers-grid--m-single {
        grid-template-columns: 1fr;
        gap: 1rem;
        background: transparent;
    }
    .ochegs-officers-grid--m-single .ochegs-officer-card { border-radius: 10px; overflow: hidden; }
    .ochegs-officers-grid--m-single .ochegs-officer-card__photo { height: auto; aspect-ratio: 4 / 3; }
    .ochegs-officers-grid--m-single .ochegs-officer-card__photo img { object-position: center 25%; }

    /* B — Two columns, spaced with rounded separate cards. */
    .ochegs-officers-grid--m-spaced {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        background: transparent;
    }
    .ochegs-officers-grid--m-spaced .ochegs-officer-card { border-radius: 10px; overflow: hidden; }
    .ochegs-officers-grid--m-spaced .ochegs-officer-card__photo { height: 150px; }

    /* C — Directory rows: small photo left, name/role right, one per row. */
    .ochegs-officers-grid--m-directory {
        grid-template-columns: 1fr;
        gap: .75rem;
        background: transparent;
    }
    .ochegs-officers-grid--m-directory .ochegs-officer-card {
        display: grid;
        grid-template-columns: 88px 1fr;
        align-items: center;
        border-radius: 10px;
        overflow: hidden;
    }
    .ochegs-officers-grid--m-directory .ochegs-officer-card__photo {
        height: 100%;
        min-height: 88px;
        aspect-ratio: auto;
    }
    .ochegs-officers-grid--m-directory .ochegs-officer-card__body { padding: .75rem 1rem; }
    .ochegs-officers-grid--m-directory .ochegs-officer-card__research { display: none; }
    .ochegs-hero__ctas {
        flex-direction: column;
    }
    .ochegs-section {
        padding: 3.5rem 0;
    }
    .ochegs-sponsor-strip__action {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   10. Dark mode
   -------------------------------------------------------------------------- */

body.dark-mode .ochegs-section--bg {
    background: #1a1a1a;
}

body.dark-mode .ochegs-pillar,
body.dark-mode .ochegs-news-card,
body.dark-mode .ochegs-officer-card,
body.dark-mode .ochegs-research-card {
    background: #1c1c1c;
}

body.dark-mode .ochegs-pillar:hover,
body.dark-mode .ochegs-news-card:hover {
    background: #222;
}