/* =====================================================================
   Chicago Open University — visual polish layer
   Loaded after site.css and sections.css. Raises craft without changing
   any markup: type scale, whitespace, depth, image treatment, motion.
   ===================================================================== */

/* ---------- type ------------------------------------------------------ */
h1{line-height:1.08}
h2{line-height:1.14}
.hero h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.035em}
.section-head h2{margin-bottom:14px}
.section-head p{font-size:17px;line-height:1.65;max-width:620px;margin-inline:auto}

/* a quiet rule under section headings, instead of nothing */
.section-head{position:relative;padding-bottom:6px}

/* lead paragraph treatment */
.section p.lead,.hero-lead{font-size:18.5px;line-height:1.6}

/* ---------- breathing room ------------------------------------------- */
.section{padding:76px 0}
@media(max-width:900px){.section{padding:54px 0}}
@media(max-width:600px){.section{padding:40px 0}}
.section-head{margin-bottom:44px}
@media(max-width:600px){.section-head{margin-bottom:28px}}
.grid{gap:26px}
.split{gap:64px}
@media(max-width:900px){.split{gap:38px}}

/* ---------- depth ----------------------------------------------------- */
.card,.join,.track,.award,.quote,.office,.enquiry{
  box-shadow:0 1px 2px rgba(28,21,23,.04),0 8px 24px -12px rgba(28,21,23,.10);
}
.card:hover,.join:hover,.track:hover,.award:hover{
  box-shadow:0 2px 4px rgba(28,21,23,.05),0 28px 56px -24px rgba(126,3,5,.28);
}
.enquiry{box-shadow:0 2px 6px rgba(28,21,23,.05),0 30px 70px -30px rgba(28,21,23,.28)}

/* ---------- image treatment ------------------------------------------ */
.split img{border-radius:18px}
/* A soft brand wash behind split imagery so photos feel placed, not pasted.
   z-index 0 (not -1) — a negative index would drop it behind the section's
   own background and vanish. The image is lifted above it instead. */
/* Two of these images are portrait illustrations (736x1288 and 682x1024).
   Left at width:100% they rendered ~960px and ~820px tall, dominating their
   sections. Capping the HEIGHT and centring keeps the whole picture — a
   landscape crop would cut the top and bottom off the composition.
   width:fit-content makes the wrapper hug the image so the decorative block
   behind still lines up with its corner. */
.split-media{position:relative;isolation:isolate}
.split-media img{width:100%;max-width:100%}

/* The Strategic Collaboration and Coming Soon artwork is portrait (0.57 and
   0.67), so at full column width it ran ~960px and ~820px tall. Capping the
   height alone fixed that but left them only ~250px wide and looking lost.
   A 5:6 box at 470px is the balance: a medium portrait card that fills the
   column properly, cropping a little top and bottom rather than a lot. */
.split-media img.portrait{
  max-width:470px;aspect-ratio:5/6;object-fit:cover;object-position:center;
  display:block;margin-inline:auto;height:auto;
}
@media(max-width:900px){.split-media img.portrait{max-width:340px}}
/* the offset block behind would sit away from a centred image */
.split-media:has(img.portrait)::after{display:none}
/* On the award pages the right column holds the certificate image AND the
   application card. The decoration is absolutely positioned at z-index 0, so
   it painted straight over that card -- the image stayed visible (it is lifted
   to z-index 1) but the form underneath disappeared. Drop the decoration
   whenever the column carries real content, and lift every child, not just
   the image, for browsers without :has(). */
.split-media:has(.enquiry)::after,
.split-media:has(form)::after{display:none}
.split-media::after{
  content:'';position:absolute;inset:auto -14px -14px auto;width:62%;height:62%;
  background:var(--brand-050);border:1px solid var(--brand-100);
  border-radius:18px;z-index:0;pointer-events:none;
}
.split-media > *{position:relative;z-index:1}
/* not wanted on the dark bands, where a pale block would read as an error */
.section--navy .split-media::after{display:none}
.card-media img,.gal-item img{filter:saturate(1.02)}

/* ---------- hero ------------------------------------------------------ */
.hero{padding:88px 0 96px}
@media(max-width:900px){.hero{padding:56px 0 60px}}
.hero-stats b{font-size:34px}
.hero-stats{gap:44px}

/* subtle grain so the large maroon field is not flat */
.hero::before{
  content:'';position:absolute;inset:0;z-index:2;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:3px 3px;
}

/* ---------- section rhythm ------------------------------------------- */
/* alternate the eyebrow rule so consecutive sections do not look identical */
.section:nth-of-type(even) .section-head .eyebrow{opacity:.95}

/* ---------- buttons --------------------------------------------------- */
.btn{padding:14px 28px;border-radius:10px}
.btn-sm{padding:9px 18px;border-radius:8px}
.btn-maroon{box-shadow:0 2px 10px rgba(126,3,5,.20)}
.btn-maroon:hover{box-shadow:0 10px 26px -6px rgba(126,3,5,.45)}

/* ---------- cards ----------------------------------------------------- */
.card{border-radius:16px}
.card-body{padding:24px}
.card-body h3{font-size:18.5px;line-height:1.3}
.card-foot{padding-top:16px}

/* ---------- forms ----------------------------------------------------- */
.enquiry{padding:34px;border-radius:18px}
@media(max-width:600px){.enquiry{padding:24px}}
.field input,.field select,.field textarea{padding:13px 15px;border-radius:10px}

/* ---------- scroll reveal -------------------------------------------- */
[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none}
/* stagger children a little */
[data-reveal].in .card:nth-child(2),
[data-reveal].in .join:nth-child(2),
[data-reveal].in .track:nth-child(2){transition-delay:.06s}
[data-reveal].in .card:nth-child(3),
[data-reveal].in .join:nth-child(3),
[data-reveal].in .track:nth-child(3){transition-delay:.12s}
[data-reveal].in .card:nth-child(4),
[data-reveal].in .join:nth-child(4){transition-delay:.18s}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- footer ---------------------------------------------------- */
.foot{padding-top:66px}
.foot-cta{padding:36px 40px;border-radius:18px}
@media(max-width:700px){.foot-cta{padding:26px 24px}}

/* ---------- misc ------------------------------------------------------ */
.empty{border-radius:18px;padding:64px 28px}
.page-head{padding:58px 0}
@media(max-width:600px){.page-head{padding:38px 0}}
.page-head h1{font-size:clamp(28px,4.2vw,46px)}

/* =====================================================================
   Responsive pass
   Fixes found checking every page at 1440 / 1024 / 768 / 390 px.
   ===================================================================== */

/* The highlighted tail of the hero headline is held on one line so the
   underline behind it stays unbroken. "Chicago Open University" at the 34px
   phone size is wider than a 390px screen, which pushed the whole page
   sideways -- let it wrap once the line no longer fits. */
@media(max-width:820px){
  .hero h1 em{white-space:normal}
  .hero h1 em::after{display:none}
}

/* Email addresses, long course names and pasted URLs must not widen a card. */
body{overflow-wrap:break-word}
.card-body h3,.awardee-card-body strong,.foot a,.facts dd,.crumbs{overflow-wrap:anywhere}

/* Editorial tables scroll on their own rather than stretching the page. */
.prose table{display:block;overflow-x:auto;max-width:100%}

/* Award tiles: 4 across is too tight below a laptop, and the citation text
   needs room, so step down rather than squeezing. */
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}

/* Awardee photographs are square award cards -- one per row on a phone reads
   far better than two half-legible ones. */
@media(max-width:640px){
  .awardees{grid-template-columns:1fr}
  .awardee-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(max-width:480px){.awardee-grid{grid-template-columns:1fr}}

/* The hero statistics sat on one line and overflowed once a third was added. */
@media(max-width:600px){
  .hero-stats{gap:26px 30px}
  .hero-stats b{font-size:27px}
}

/* Section headings on a phone: the decorative rules either side of an eyebrow
   ate most of the width on longer labels. */
@media(max-width:480px){
  .eyebrow{font-size:11px;letter-spacing:.14em}
  .section-head .eyebrow::after,.eyebrow::before{width:14px}
}

/* Buttons: nowrap is right on a desktop row, but a long label on a narrow
   screen would otherwise push past the edge. */
@media(max-width:480px){
  .btn{white-space:normal;text-align:center;padding:13px 20px}
  .hero-cta .btn,.foot-cta-actions .btn{width:100%}
}

/* Filter and search rows stack cleanly instead of leaving a stranded button. */
@media(max-width:560px){
  form .field[style*="min-width"]{min-width:100% !important;width:100%}
}

/* The pre-footer stack and the office column both got cramped at tablet size. */
@media(max-width:1000px) and (min-width:601px){
  .foot-grid > div:last-child{grid-column:span 2}
}

/* A long award or programme title in the page header. */
@media(max-width:600px){
  .page-head h1{overflow-wrap:anywhere}
  .crumbs{font-size:12.5px}
}

/* Split columns: on the award pages the certificate image and the application
   card sit in the same column, so give them breathing room when stacked. */
@media(max-width:900px){
  .split-media .enquiry{margin-top:18px}
}

/* =====================================================================
   Refinement pass — density, hierarchy, restraint
   ---------------------------------------------------------------------
   The page read as "template-ish" for three measurable reasons:
     * display type was set far larger than the body (38px h2 against a
       16.5px body), so every section shouted at the same volume;
     * 76px section padding on top of a 44px heading margin left sections
       feeling empty rather than airy;
     * all seventeen sections used the identical centred
       "— EYEBROW —" + big heading + centred paragraph block.
   This layer sets a tighter scale, real vertical rhythm, and a calmer
   section header. It overrides earlier rules in this same file.
   ===================================================================== */

/* ---------- type scale ------------------------------------------------ */
/* A ~1.9x ratio between body and the largest heading, rather than ~2.3x. */
.hero h1{font-size:clamp(32px,4.2vw,50px);letter-spacing:-.03em;line-height:1.06}
h2{font-size:clamp(23px,2.5vw,31px);letter-spacing:-.02em}
h3{font-size:clamp(18px,1.6vw,20px)}
body{font-size:16px}
.hero-lead,.section p.lead{font-size:17.5px;line-height:1.6}
.section-head h2{margin-bottom:10px}

/* ---------- section header: one rule, not two ------------------------- */
/* The trailing dash after every eyebrow was pure decoration repeated
   seventeen times. One leading rule is enough to mark the label. */
.section-head .eyebrow::after{display:none}
.eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:10px}

/* A section intro is a paragraph, not a headline: cap the measure so it
   never runs to six centred lines, which is where centred text fails. */
.section-head{max-width:660px;margin-bottom:34px}
.section-head p{font-size:16px;line-height:1.6;max-width:56ch;margin-inline:auto}
@media(max-width:600px){.section-head{margin-bottom:24px}}

/* ---------- vertical rhythm ------------------------------------------ */
.section{padding:64px 0}
@media(max-width:900px){.section{padding:48px 0}}
@media(max-width:600px){.section{padding:38px 0}}
.hero{padding:76px 0 84px}
@media(max-width:900px){.hero{padding:52px 0 56px}}
.grid{gap:22px}
.split{gap:56px}

/* ---------- cards: quieter, less lift -------------------------------- */
/* Six-pixel hover lifts with a 48px shadow on every card made the grids
   feel restless. Half the movement, a third of the shadow. */
.card{border-radius:14px}
.card:hover{transform:translateY(-3px)}
.card,.join,.track,.award,.quote,.office{
  box-shadow:0 1px 2px rgba(28,21,23,.04),0 6px 16px -10px rgba(28,21,23,.10);
}
.card:hover,.join:hover,.track:hover,.award:hover{
  box-shadow:0 2px 4px rgba(28,21,23,.05),0 18px 36px -20px rgba(126,3,5,.22);
}
/* Ceremony photographs put faces in the upper third; a dead-centre 16:9 crop
   of a 3:2 original was cutting heads off. Bias the crop upwards. Course
   banners use .card-media--fit (contain) and are left alone. */
.card-media:not(.card-media--fit) img{object-position:center 32%}
.card-body{padding:20px}
.card-body h3{font-size:16.5px;line-height:1.35;margin-bottom:8px}
.card-body p{font-size:14px}
.join:hover,.track:hover{transform:translateY(-3px)}

/* ---------- placeholder artwork -------------------------------------- */
/* Used when a post has no photograph of its own. It should look like a
   designed cover, not a missing image: the crest watermark, a hairline
   frame and the title set properly. */
/* Text sits bottom-left, clear of the date badge in the top-left corner —
   centred text ran straight underneath it — and reads as a designed cover
   rather than a caption floating in the middle of a box. */
.card-media .ph{
  position:relative;flex-direction:column;gap:8px;
  align-items:flex-start;justify-content:flex-end;text-align:left;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(150deg,var(--brand-800) 0%,var(--brand) 60%,var(--brand-700) 100%);
  font-size:15.5px;letter-spacing:-.01em;line-height:1.35;
  padding:56px 22px 20px;
  overflow:hidden;   /* a long label clips rather than spilling out */
}
.card-media .ph::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;pointer-events:none;
}
.card-media .ph::after{
  content:'';position:absolute;right:-26px;bottom:-30px;width:130px;height:130px;
  background:url('../img/chicagoopenuniversity.webp') center/contain no-repeat;
  opacity:.10;filter:grayscale(1) brightness(3);pointer-events:none;
}

/* ---------- awardee tiles -------------------------------------------- */
.awardee-card{border-radius:14px}
.awardee-card:hover{transform:translateY(-3px)}
/* Names and honours wrap to different line counts, so the "View profile"
   link floated at a different height on every tile. Make the body a column
   and push the link to the bottom so the row lines up. */
.awardee-card{height:100%}
.awardee-card-body{
  padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;align-items:flex-start;
}
.awardee-card-body strong{font-size:15.5px}
.awardee-card-body .awardee-honour{flex:1}
.awardee-card-body .link-arrow{margin-top:12px}

/* ---------- forms ----------------------------------------------------- */
.enquiry{padding:28px;border-radius:16px}
.enquiry{box-shadow:0 2px 6px rgba(28,21,23,.05),0 20px 48px -28px rgba(28,21,23,.26)}
@media(max-width:600px){.enquiry{padding:22px}}

/* ---------- footer ---------------------------------------------------- */
.foot{padding-top:56px}
.foot-cta{padding:30px 34px;margin-bottom:38px}