/* ============================================================================
   cudlc-brand.css — Caleb University Distance Learning Centre
   ----------------------------------------------------------------------------
   Loaded last, after theme.css and cudlc-merged.css, so it wins ties.

   Three things live here:

     A. THE BRAND LOCKUP
        The university logo is used exactly as supplied — the full
        rectangular mark from calebuniversity.edu.ng, uncropped, with its
        own background intact. Nothing is knocked out. Because that mark
        already reads CALEB UNIVERSITY, the text beside it says only what
        this site is: Distance Learning Centre.

     B. THE HERO
        Photographic. The overlay is dialled back so the students are lit
        rather than washed navy, and the Ken-Burns darkening filter is
        relaxed for the same reason.

     C. THE HOMEPAGE
        Reordered and restyled so this site does not read as a copy of
        calebuniversity.edu.ng. The order change is done with flexbox
        `order`, scoped by :has() to the one page that has a hero, so no
        PHP is touched and browsers without :has() simply keep the
        original order.
   ========================================================================== */

:root {
    /* Accent taken from the university's own mark — the cyan in the crest
       panel, darkened to #0F7FA6 so it passes contrast on white. This is
       what separates the Centre from the main site, which is gold-only. */
    --dlc-accent:      #0F7FA6;
    --dlc-accent-deep: #0A5F7E;
    --dlc-accent-soft: rgba(15, 127, 166, 0.12);
}


/* ==========================================================================
   A. BRAND LOCKUP
   ========================================================================== */

body.theme-caleb-cudlc .brand {
    gap: 16px;
    align-items: center;
}

/* The logo, untouched. object-fit:contain (set inline on the element)
   guarantees the full mark is shown and never cropped.

   The supplied mark carries its own white ground. Rather than knock that
   out — which is what broke it before — it is presented on a white card:
   a little padding, a 3px radius, a hairline edge. On the cream header
   that reads as a printed plate rather than a stray white rectangle, and
   the same treatment carries the mark onto the navy footer unchanged. */
body.theme-caleb-cudlc .brand-mark--logo {
    height: 52px;
    width: auto;
    max-width: 232px;
    /* !important is not decoration here: admin/layouts/public.php writes
       style="object-fit:contain;background:transparent" directly on the
       <img>, and an inline declaration beats any stylesheet rule without
       it. Without !important the padding stayed transparent, so the plate
       showed cream inside its border on the header and navy on the
       footer, with the image's own white ground floating in the middle. */
    background: #FFFFFF !important;
    padding: 6px 9px;
    border: 1px solid rgba(14, 42, 94, 0.10);
    border-radius: 3px;
    box-sizing: content-box;
    box-shadow: 0 1px 2px rgba(7, 23, 58, 0.06);
}

/* The wordline sits beside the mark, divided by a hairline rule. */
body.theme-caleb-cudlc .brand-name {
    max-width: 176px;
    padding-left: 16px;
    border-left: 1px solid var(--rule-soft);
    justify-content: center;
}
body.theme-caleb-cudlc .brand-name__main {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--navy);
    /* the base theme clamps this to one line — the wordline needs two */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Footer and any other dark surface — same card, no edge needed. */
body.theme-caleb-cudlc .footer-brand .brand-mark--logo,
body.theme-caleb-cudlc .drawer-brand .brand-mark--logo {
    height: 46px;
    border-color: transparent;
    box-shadow: none;
}
body.theme-caleb-cudlc .footer-brand .brand-name {
    border-left-color: rgba(239, 230, 207, 0.28);
}
body.theme-caleb-cudlc .footer-brand .brand-name__main {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--cream-warm);
}

@media (max-width: 760px) {
    body.theme-caleb-cudlc .brand            { gap: 10px; }
    body.theme-caleb-cudlc .brand-mark--logo { height: 40px; max-width: 138px; }
    body.theme-caleb-cudlc .brand-name       { max-width: 118px; padding-left: 10px; }
    body.theme-caleb-cudlc .brand-name__main { font-size: 9px; letter-spacing: 0.09em; line-height: 1.45; }
    body.theme-caleb-cudlc .footer-brand .brand-mark--logo,
    body.theme-caleb-cudlc .drawer-brand .brand-mark--logo { height: 40px; padding: 6px 8px; }
}
@media (max-width: 400px) {
    /* Below this the mark alone carries the identity. */
    body.theme-caleb-cudlc .public-header .brand-name { display: none; }
    body.theme-caleb-cudlc .brand-mark--logo { height: 38px; max-width: 132px; }
}


/* ==========================================================================
   B. HERO — photographic
   ========================================================================== */

/* The base theme darkens every hero layer for legibility over stock
   photography. These backgrounds are composed on the Caleb navy with the
   text side already clear, so the students only need a light touch. */
body.theme-caleb-cudlc .hero-bg__layer {
    filter: contrast(1.02) brightness(0.97);
}
/* Vertical placement is left to the slide's own bg_position (the controller
   writes it inline, which beats any rule here). 'center' keeps the head in
   frame on the rare short-and-wide viewport where cover has to crop
   vertically at all; on ordinary window shapes nothing is cropped. */

/* Keep the copy clear of the figure without strangling it. A percentage
   alone was far too tight — at 1440 it left the headline on three lines
   and the standfirst on six. These are measures, not fractions: the
   headline gets a generous line, the standfirst stops at a comfortable
   reading width, and the percentage is only the outer guard so nothing
   ever reaches the figure on a very wide window. */
@media (min-width: 900px) {
    body.theme-caleb-cudlc .hero-content { max-width: var(--container-max); }
    body.theme-caleb-cudlc .hero-eyebrow { max-width: 700px; }
    body.theme-caleb-cudlc .hero-title   { max-width: 700px; }
    body.theme-caleb-cudlc .hero-sub     { max-width: 600px; }
    body.theme-caleb-cudlc .hero-cta-row { max-width: 700px; }

    /* The base size tops out at 68px, which put the longest of the three
       titles — "A Globally Competitive Computer Science Degree, Delivered
       Anywhere." — on four lines and pushed the buttons off the fold.
       56px holds it to three and still leads the page comfortably. */
    body.theme-caleb-cudlc .hero-title {
        font-size: clamp(2.25rem, 4vw, 3.5rem);
        line-height: 1.08;
    }
}
@media (min-width: 1500px) {
    /* the base theme caps the whole content column at 720px; on a wide
       window there is room for a longer line before the figure begins */
    body.theme-caleb-cudlc .hero-content { grid-template-columns: minmax(0, 820px); }
    body.theme-caleb-cudlc .hero-title   { max-width: 800px; }
    body.theme-caleb-cudlc .hero-sub     { max-width: 660px; }
}

/* On phones the figure is bottom-anchored in its own portrait crop and the
   copy — including the buttons — is held above it, so nothing is ever set
   over somebody's face. */
@media (max-width: 760px) {
    /* the mobile layer is forced to `center center` by the base theme, which
       is right — the portrait crop already holds the figure at its foot */
    body.theme-caleb-cudlc .hero,
    body.theme-caleb-cudlc .hero-track,
    body.theme-caleb-cudlc .hero-slide { min-height: 92vh; }
    body.theme-caleb-cudlc .hero-content {
        justify-content: flex-start;
        align-content: start;
        padding-top: 2.25rem;
        padding-bottom: 19rem;
    }
    body.theme-caleb-cudlc .hero-sub { margin-bottom: 1.5rem; }
}

body.theme-caleb-cudlc .hero-eyebrow { color: #7FD4EE; }
body.theme-caleb-cudlc .hero-eyebrow::before { background: #7FD4EE; }

/* The floating "For God and Humanity · Imota, Lagos" block sat over the
   figure's shoulder in white-on-light and collided with the chat buttons.
   The motto is already in the footer and on the crest; it goes. */
body.theme-caleb-cudlc .hero-meta { display: none; }


/* ==========================================================================
   C. HOMEPAGE — Centre-led order and treatment
   ========================================================================== */

/* Scoped to the one page that carries a hero. Browsers without :has()
   ignore the whole block and keep the original document order. */
main#main:has(> section.hero) {
    display: flex;
    flex-direction: column;
}
main#main:has(> section.hero) > section.hero             { order: 1; }
main#main:has(> section.hero) > section.editorial        { order: 2; }
main#main:has(> section.hero) > section.numbers          { order: 3; }
main#main:has(> section.hero) > section.programmes       { order: 4; }
main#main:has(> section.hero) > section.director-section { order: 5; }
main#main:has(> section.hero) > section.testimonials     { order: 6; }
main#main:has(> section.hero) > section.vc-section       { order: 7; }
main#main:has(> section.hero) > section.cta-strip        { order: 8; }
main#main:has(> section.hero) > *                        { order: 9; }

/* --- The editorial band becomes "how studying here works", as steps ----- */
body.theme-caleb-cudlc .editorial-columns { counter-reset: dlcstep; }
body.theme-caleb-cudlc .editorial-column  { counter-increment: dlcstep; position: relative; }
body.theme-caleb-cudlc .editorial-column::before {
    content: counter(dlcstep, decimal-leading-zero);
    display: block;
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--dlc-accent);
    opacity: 0.85;
    margin-bottom: 0.85rem;
    letter-spacing: -0.02em;
}
body.theme-caleb-cudlc .editorial-column__link { color: var(--dlc-accent-deep); }
body.theme-caleb-cudlc .editorial-column__link:hover { color: var(--dlc-accent); }

/* --- The figures band is inverted: navy ground, accent hairlines -------- */
body.theme-caleb-cudlc .numbers {
    background: var(--navy-deep);
    color: var(--paper);
    border-top: 3px solid var(--dlc-accent);
    border-bottom: 0;
}
body.theme-caleb-cudlc .numbers .number { border-color: rgba(255, 255, 255, 0.12); }
body.theme-caleb-cudlc .numbers .number__figure { color: #FFFFFF; }
body.theme-caleb-cudlc .numbers .number__figure sup { color: var(--gold-light); }
body.theme-caleb-cudlc .numbers .number__label {
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.16em;
}

/* --- The Director and Vice-Chancellor portraits ------------------------
   Two faults were visible on the live page.

   1. The reversed grid put the photograph in the wrong column. With
      `direction: rtl` on .voices-grid--reverse, the FIRST declared column
      lands on the right — and the base theme declares
      `minmax(280px, 360px) 1fr`. The first DOM child is the text, so the
      text got the 280–360px column and the photograph got the 1fr, which
      is why the Director's picture ballooned past 600px while his
      biography was squeezed into a gutter. Swapping the track order fixes
      it: the photograph takes the bounded column, the prose takes the
      flexible one.

   2. The frame was a bare 1.5px gold stroke, which read as a hairline
      round a snapshot. It is replaced with a proper editorial frame: a
      crisp edge on the image, a solid offset block behind it, and a soft
      drop. All of it is box-shadow — deliberately no pseudo-element,
      because the theme's own comments record three separate releases
      where a ::before matte ended up covering the portraits.
   ---------------------------------------------------------------------- */
body.theme-caleb-cudlc .voices-grid--reverse {
    grid-template-columns: 1fr minmax(260px, 330px);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}
body.theme-caleb-cudlc .vc-section .voices-grid {
    grid-template-columns: minmax(260px, 330px) 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

body.theme-caleb-cudlc .voices-photo {
    border-radius: 2px;
    background-position: center top;   /* keep the face, crop the jacket */
    box-shadow:
        0 0 0 1px rgba(7, 23, 58, 0.14) inset,
        16px 16px 0 0 rgba(15, 127, 166, 0.20),
        0 22px 44px -20px rgba(7, 23, 58, 0.38);
}
body.theme-caleb-cudlc .voices-photo:hover {
    box-shadow:
        0 0 0 1px rgba(7, 23, 58, 0.20) inset,
        12px 12px 0 0 rgba(184, 148, 31, 0.22),
        0 26px 52px -20px rgba(7, 23, 58, 0.42);
}
body.theme-caleb-cudlc .director-section .voices-photo,
body.theme-caleb-cudlc .vc-section .voices-photo { border-radius: 2px; }

/* The Director's block sits on the left, so its offset falls the other way
   and does not push into the text column. */
body.theme-caleb-cudlc .director-section .voices-photo {
    box-shadow:
        0 0 0 1px rgba(7, 23, 58, 0.14) inset,
        -16px 16px 0 0 rgba(15, 127, 166, 0.20),
        0 22px 44px -20px rgba(7, 23, 58, 0.38);
}
body.theme-caleb-cudlc .director-section .voices-photo:hover {
    box-shadow:
        0 0 0 1px rgba(7, 23, 58, 0.20) inset,
        -12px 12px 0 0 rgba(184, 148, 31, 0.22),
        0 26px 52px -20px rgba(7, 23, 58, 0.42);
}

/* Give the prose a real measure now that it has the flexible column. */
body.theme-caleb-cudlc .director-body,
body.theme-caleb-cudlc .voices-quote { max-width: 34em; }

@media (max-width: 900px) {
    body.theme-caleb-cudlc .voices-grid--reverse,
    body.theme-caleb-cudlc .vc-section .voices-grid { grid-template-columns: 1fr; }
    body.theme-caleb-cudlc .voices-photo {
        width: 100%; max-width: 320px; margin: 0 auto;
        box-shadow:
            0 0 0 1px rgba(7, 23, 58, 0.14) inset,
            0 18px 36px -18px rgba(7, 23, 58, 0.38);
    }
    body.theme-caleb-cudlc .director-section .voices-photo {
        box-shadow:
            0 0 0 1px rgba(7, 23, 58, 0.14) inset,
            0 18px 36px -18px rgba(7, 23, 58, 0.38);
    }
}

/* --- Section marks pick up the Centre accent --------------------------- */
body.theme-caleb-cudlc .section-mark__num   { color: var(--dlc-accent); }
body.theme-caleb-cudlc .section-mark__rule  { background: var(--dlc-accent); opacity: 0.4; }
body.theme-caleb-cudlc .numbers .section-mark__num { color: var(--gold-light); }