/* ============================================================
   SMCU Layout — Container, Sections, Grids, Heroes
   Saint Mary's Christian University
   Inspired by open.ac.uk — generous whitespace, card-based, modern
   ============================================================ */

/* ============================================================
   1. Container
   ============================================================ */
.smcu-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   2. Sections
   ============================================================ */
.smcu-section {
    padding: 80px 0;
}

.smcu-section--alt {
    background-color: var(--smcu-gray-100);
}

.smcu-section--navy {
    background-color: var(--smcu-navy-700);
    color: var(--smcu-white);
}

.smcu-section--navy h2,
.smcu-section--navy h3,
.smcu-section--navy h4 {
    color: var(--smcu-white);
}

.smcu-section--navy p,
.smcu-section--navy .smcu-lead {
    color: rgba(255, 255, 255, 0.85);
}

.smcu-section--navy .smcu-eyebrow {
    color: var(--smcu-gold-400);
}

.smcu-section--dark {
    background-color: var(--smcu-navy-900);
    color: var(--smcu-white);
}

.smcu-section--dark h2,
.smcu-section--dark h3,
.smcu-section--dark h4 {
    color: var(--smcu-white);
}

.smcu-section--dark p,
.smcu-section--dark .smcu-lead {
    color: rgba(255, 255, 255, 0.8);
}

.smcu-section--dark .smcu-eyebrow {
    color: var(--smcu-gold-400);
}

/* --- Section header group -------------------------------- */
.smcu-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.smcu-section-header h2 {
    text-align: center;
}

.smcu-section-header p.smcu-lead {
    text-align: center;
}

/* ============================================================
   3. Grid System (CSS Grid, gap 2rem)
   ============================================================ */
.smcu-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.smcu-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.smcu-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* ============================================================
   4. Hero — General (subpages)
   ============================================================ */
.smcu-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-color: var(--smcu-navy-700);
    overflow: hidden;
}

.smcu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.88) 0%,
        rgba(21, 46, 84, 0.75) 100%
    );
    z-index: 1;
}

.smcu-hero-content {
    position: relative;
    z-index: 2;
    color: var(--smcu-white);
}

.smcu-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--smcu-white);
    line-height: 1.2;
}

.smcu-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    line-height: 1.7;
}

/* --- Small hero (shorter for interior subpages) ---------- */
.smcu-hero--small {
    min-height: 280px;
}

/* ============================================================
   5. Home Hero (homepage specific)
   ============================================================ */
.smcu-home-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-color: var(--smcu-navy-700);
    overflow: hidden;
}

.smcu-home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.92) 0%,
        rgba(21, 46, 84, 0.80) 100%
    );
    z-index: 1;
}

.smcu-home-hero__content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.smcu-home-hero__title {
    font-family: var(--smcu-font-accent);
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--smcu-white);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.smcu-home-hero__subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.smcu-home-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================================
   6. Content Layout (main + sidebar)
   ============================================================ */
.smcu-content-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
    align-items: start;
}

.smcu-sidebar-sticky {
    position: sticky;
    top: 100px;
}

/* ============================================================
   Additional layout utilities (used by templates)
   ============================================================ */
.smcu-container--narrow { max-width: 800px; }
.smcu-content-layout__main { min-width: 0; }
.smcu-content-layout__aside { min-width: 0; }

.smcu-section--white { background: var(--smcu-white); }
.smcu-section--gray { background: var(--smcu-gray-100); }
.smcu-section--tint { background: var(--smcu-navy-50); }
.smcu-section--gold { background: var(--smcu-gold-100); }
.smcu-section--no-top { padding-top: 0; }

.smcu-hero--short { min-height: 240px; }
.smcu-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.smcu-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,22,40,0.88), rgba(21,46,84,0.75)); z-index: 1; }
.smcu-hero__content { position: relative; z-index: 2; }

.smcu-grid-center { justify-items: center; }
.smcu-gap-sm { gap: 1rem; }
.smcu-gap-lg { gap: 2.5rem; }
.smcu-gap-xl { gap: 3rem; }

.smcu-divider { width: 60px; height: 3px; background: var(--smcu-gold-500); margin: 1.5rem auto; border-radius: 2px; }
.smcu-divider--left { margin-left: 0; }

.smcu-mt-4 { margin-top: 2rem; }
.smcu-mt-5 { margin-top: 3rem; }
.smcu-mt-8 { margin-top: 5rem; }
.smcu-mx-auto { margin-left: auto; margin-right: auto; }
.smcu-p-5 { padding: 2rem; }
.smcu-p-6 { padding: 2.5rem; }

.smcu-heading-navy { color: var(--smcu-navy-700); }
.smcu-content { line-height: 1.8; color: var(--smcu-gray-700); }

/* ============================================================
   Hero with <img> background (BEM variant used by some templates)
   ============================================================ */
.smcu-hero {
    overflow: hidden;
}

.smcu-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.smcu-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* BEM-style aliases (some templates use double underscore) */
.smcu-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.88), rgba(21, 46, 84, 0.75));
    z-index: 1;
}

.smcu-hero__content {
    position: relative;
    z-index: 2;
    color: var(--smcu-white);
}

.smcu-hero__content h1 {
    color: var(--smcu-white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0.75rem;
}

.smcu-hero__content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    max-width: 600px;
}

/* Ensure hero with inline background-image also works */
.smcu-hero[style*="background-image"] {
    background-size: cover;
    background-position: center;
}