/* ==========================================================================
   Home page layout, and a few rules that reach the rest of the site
   --------------------------------------------------------------------------
   The opening band: welcome text with the notice board beside it, and no
   enquiry form.

   WHY IT IS ONLY CSS. The panels are already siblings in one grid, so they
   can be placed - or taken out of the flow - without touching home.html.
   The markup, the notice autoscroll and the enquiry form's own script are
   left exactly as they are, which means putting the form back is deleting
   one rule rather than restoring markup.

   THE ENQUIRY FORM IS HIDDEN, NOT DELETED. Leads are still captured: the
   same form is in the "Enquiry Now" modal that opens on this page, and the
   enquiry route and its handler are untouched.

   Loaded by base.html on every page. The file keeps its -v2 name from
   when it was a preview; the design it describes is the site's.
   ========================================================================== */

.enquiry-panel { display: none; }

/* The two-tone heading over the welcome text is hidden too, as asked.
   NOTE: it is the only <h1> on this page, so with it gone the homepage has
   none - see the note at the end of this file. */
.welcome__title { display: none; }

@media (min-width: 992px) {
  /* Two columns: the welcome text, and the notice board beside it. It was
     1fr squeezed between a 250px and a 320px panel, so the paragraph measure
     was pinched from both sides. */
  .home-band__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: start;
  }
  .welcome      { grid-column: 1; grid-row: 1; }
  .notice-board { grid-column: 2; grid-row: 1; }
}

/* On a phone the notice board comes first: it is the thing that changes, and
   somebody returning to the site is far more likely to be checking for a
   notice than re-reading the welcome. The welcome text follows it. */
@media (max-width: 991.98px) {
  .home-band__grid { display: flex; flex-direction: column; }
  .notice-board { order: 1; }
  .welcome      { order: 2; }
}

/* ==========================================================================
   OUTSTANDING: this page now has no <h1>
   --------------------------------------------------------------------------
   .welcome__title was the only one. A page with no h1 is a real gap - it is
   what a screen reader announces as the page's subject and what search
   engines weigh most heavily - and on this site it is also the element named
   in the complaint, so having none is conspicuous rather than neutral.

   The fix is to give the hero one. The headline over the video is currently
   a <p>; making it the h1 would put the page's subject where a reader
   actually sees it, and costs one tag in hero markup.
   ========================================================================== */

/* ==========================================================================
   Latest Events  —  story tiles instead of three large cards
   --------------------------------------------------------------------------
   Scoped to .carousel--triple, which is the home page's events row. The same
   .event-card class is used on the event detail page, and this must not
   reach it.

   The carousel works out how many items are in view from their measured
   width, so changing flex-basis is enough - no script to touch.

   THE WHOLE TILE IS THE LINK. The markup's only anchor is the View Details
   button; rather than add one, that anchor is stretched over the card with
   an absolutely positioned ::after and its own label is hidden. Clicking
   anywhere on the tile follows it, and a keyboard still reaches it.
   ========================================================================== */
@media (min-width: 992px) {
  /* Six across where three were. */
  .carousel--triple .carousel__item { flex-basis: calc((100% - 60px) / 6); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .carousel--triple .carousel__item { flex-basis: calc((100% - 24px) / 3); }
}
@media (max-width: 767.98px) {
  .carousel--triple .carousel__item { flex-basis: calc((100% - 12px) / 2); }
}

.carousel--triple .event-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* Tall, like a story. The poster artwork these events use is portrait
   anyway, so 3:4 crops it far less than the old 4:3 did. */
.carousel--triple .event-card__media {
  aspect-ratio: 3 / 4;
  border-radius: 0;
}

/* The text sits on the picture rather than under it, which is what keeps the
   tile short enough to be worth calling a story. */
.carousel--triple .event-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 12px 12px;
  background: linear-gradient(0deg, rgba(12, 12, 14, .92) 18%,
                                    rgba(12, 12, 14, .55) 58%,
                                    rgba(12, 12, 14, 0) 100%);
}
.carousel--triple .event-card__date {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  opacity: .85;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.carousel--triple .event-card__title {
  margin: 0;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  /* Three lines then an ellipsis: titles here run to 130 characters and
     would otherwise cover half the picture. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The button becomes the tile's hit area rather than a button. */
.carousel--triple .event-card__footer { margin: 0; padding: 0; }
.carousel--triple .event-card__footer .btn {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  font-size: 0;          /* the label is carried by the title above it */
  line-height: 0;
}
.carousel--triple .event-card__footer .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.carousel--triple .event-card__footer .btn:focus-visible::after {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* ==========================================================================
   Enquiry modal  —  red and white
   --------------------------------------------------------------------------
   The modal's own styles live in a <style> block inside home.html and colour
   both the title band and the Submit button with var(--gold). In this palette
   --gold IS white, so both lost their fill and the dialog came out as plain
   white with black text - which is what it looked like.

   Overridden here rather than in that block, so the live page keeps its gold
   version until this design is adopted. THE #enquiry-modal PREFIX IS LOAD
   ORDER, NOT STYLE: that <style> block sits in the body, after this file in
   the <head>, so at equal specificity it wins. The id outranks it.

   TWO REDS AGAIN, for the same reason as everywhere else: the title is large
   so it can carry the bright one, the button's label is 16px and needs the
   deeper one to clear 4.5:1 against white.
   ========================================================================== */
/* No band behind the title - it sits on the dialog's own white, with the red
   left to the one thing that should carry it, the Submit button. */
#enquiry-modal .enquiry-modal__title {
  background: none;
  color: var(--ink);
}

/* The close button was a white disc, which is invisible now the band behind
   it has gone. A quiet grey disc instead, darkening on hover. */
#enquiry-modal .enquiry-modal__close {
  background: #f1f2f4;
  color: var(--ink);
}
#enquiry-modal .enquiry-modal__close:hover { background: #e4e6ea; color: var(--accent-deep); }

#enquiry-modal .lead-form__button {
  background: var(--accent-deep);
  color: #fff;
  transition: background var(--transition);
}
#enquiry-modal .lead-form__button:hover { background: var(--cta-hover, var(--ink)); color: #fff; }
#enquiry-modal .lead-form__button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The fields pick the accent up on focus, so the dialog reads as one piece. */
#enquiry-modal .lead-form__input:focus,
#enquiry-modal select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}


/* ==========================================================================
   Chancellor's message  —  a slider over the four leadership messages
   --------------------------------------------------------------------------
   The band is unchanged; what is inside it is now the shared carousel, one
   slide at a time, looping, advancing itself every 7s. Longer than the other
   rows on the page because this one has to be read rather than glanced at.

   NO ARROWS, DOTS ONLY. .chancellor carries overflow: hidden, and the arrows
   are positioned outside the track at wide widths - inside this box they
   would be clipped in half. The dots sit inside the padding and say how many
   messages there are, which is what the controls are for here.

   EQUAL HEIGHT, PORTRAIT ALIGNED. Flex items already stretch to the tallest
   slide, so the box does not resize as it rotates. What that alone does not
   do is line the portraits up: a short message would leave its photograph
   floating in the middle of the slide while the next one sat at the bottom.
   The inner block is a column and the divider takes the slack, so the rule
   and the person below it are at the same height on every slide.
   ========================================================================== */
/* The heading sits outside the track now, so it needs the stacking context
   the slides get from .chancellor__inner - without it the bookshelf image
   behind the band paints over it. */
.chancellor__title--fixed {
  position: relative;
  z-index: 2;
}

/* The quotation mark is set at 2.4rem on a line-height of .5, so half the
   glyph hangs above its own line box. That was fine when it sat under the
   heading - the overflow fell into the heading's margin - but it is the first
   thing in the slide now, and .carousel__track clips vertically, which took
   the top off it. Given its own line here instead of borrowing one. */
.chancellor__slider .chancellor__quote-mark {
  line-height: 1;
  margin-bottom: 2px;
}

.chancellor__slider .carousel__nav { display: none !important; }

/* ONE SLIDE AT A TIME. .carousel__item is flex: 0 0 100% by default, but
   main.css widens it to a half, a third and then a quarter as the window
   grows - that is what gives the schools row four cards across, and it caught
   this slider too, dealing all four messages out side by side. The base is
   restored here, and !important because those rules live in media queries
   further down main.css and win on order at equal specificity. */
.chancellor__slider .carousel__item {
  display: flex;
  flex: 0 0 100% !important;
}
.chancellor__slider .chancellor__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Pushes the rule and the person to the foot of the slide. */
.chancellor__slider .chancellor__divider { margin-top: auto; }

/* The button sits on its own line above the rule and should not stretch to
   the slide's width the way a flex column child otherwise would. */
.chancellor__slider .btn { align-self: flex-start; }

/* Inside the band's own padding rather than below it, and light enough to
   read on the dark ground. */
.chancellor__slider .carousel__dots {
  position: relative;
  z-index: 2;
  margin-top: 18px;
}
.chancellor__slider .carousel__dots button { border-color: rgba(255, 255, 255, .55); }
.chancellor__slider .carousel__dots button.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

/* The track's own gap would show as a sliver of the next slide at the moment
   it settles; the slides are full width here, so it has nothing to space. */
.chancellor__slider .carousel__track { gap: 0; padding-bottom: 0; }

/* ==========================================================================
   Our Schools / Latest Events / Campus Stories  —  centred headings
   --------------------------------------------------------------------------
   BY ID, AND ON PURPOSE. These are the three the change was asked for; the
   other section titles on this page - Appreciations, Testimonials, the
   recruiters band - are left where they are. A blanket .section-title rule
   would have moved those too, and this file is loaded on every page under
   the preview flag, so it would have reached every section title on the site.

   main.css already has .section-title--center, which centres the text and
   re-centres the 62px rule under it. Rather than add that class in home.html
   - a live template - the same two declarations are applied here, so the
   public page is untouched. Adopting this means putting the class on those
   three headings and deleting this block.
   ========================================================================== */
#schools-heading,
#events-heading,
#videos-heading {
  text-align: center;
}
#schools-heading.section-title--underline::after,
#events-heading.section-title--underline::after,
#videos-heading.section-title--underline::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   Enquiry Now  —  in the band the Message Desk used to fill
   --------------------------------------------------------------------------
   Painted like the popup, because it is the same form and should not look
   like a different one: white card, the title centred over it, the accent on
   Submit alone.

   IT IS NOT THE POPUP THOUGH, so none of the #enquiry-modal overrides further
   up this file reach it and it is styled from scratch here. The only thing
   shared is includes/lead_form.html, which carries no styling of its own -
   each place it appears paints it.
   ========================================================================== */
.home-enquiry {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 26px 24px 28px;
}
.home-enquiry__title {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  text-align: center;
}

/* The fields are unstyled in the partial; this is the popup's treatment. */
.home-enquiry .lead-form__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
}
.home-enquiry .lead-form__input::placeholder { color: var(--muted); }
.home-enquiry .lead-form__input:focus,
.home-enquiry select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* THE DEEP RED, NOT THE BRIGHT ONE. The label is 16px and white; #FA0D0D is
   4.10:1 against white and misses the 4.5:1 a label that size needs, so this
   uses the same step down the rest of the site's text-bearing red uses. */
.home-enquiry .lead-form__button {
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-deep);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--transition);
}
.home-enquiry .lead-form__button:hover { background: var(--cta-hover, var(--ink)); }
.home-enquiry .lead-form__button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .home-enquiry .lead-form__button { transition: none; }
}

/* ==========================================================================
   The band's two columns  —  reweighted
   --------------------------------------------------------------------------
   main.css splits this 52/48 at >=992px, which was right when the left-hand
   side was the Chancellor's message: two blocks of comparable weight. It is a
   five-field form now, and a form does not get better at half the width of
   the page - it just gets wider boxes. The appreciation cards do get better,
   because they are photographs of handwritten notes and the writing has to be
   legible.

   So 36/64. The form still has room for its labels and the note beside it
   gains about 230px at 1440.

   Same breakpoint as the rule it overrides, so there is no width at which one
   applies and the other does not.
   ========================================================================== */
@media (min-width: 992px) {
  .chancellor-grid { grid-template-columns: 36% 64%; }

  /* A little air between them now that they are not equal halves - at 52/48
     they met near the middle and the gap read as deliberate. */
  .home-enquiry { margin-right: 22px; }
}

/* ==========================================================================
   Scroll reveal  —  a little more travel for the cards
   --------------------------------------------------------------------------
   main.css fades a [data-reveal] block up by 22px, which is right for a whole
   band. The cards inside one are smaller and several arrive in sequence, so
   they carry a slightly longer rise and a hair of scale - enough to read as
   arriving rather than as the page settling.

   The band itself keeps the 22px from main.css; only its children are
   changed, which is why this is scoped to [data-reveal] [data-reveal].
   ========================================================================== */
.js-reveal [data-reveal] [data-reveal] {
  transform: translateY(30px) scale(.985);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.22, .7, .3, 1);
}
/* REVEALED BY THE BAND, NOT BY A CLASS OF THEIR OWN. home-v2.js adds
   .is-revealed to the section only; this brings everything marked inside it
   up with it. That is what makes a carousel's cloned items work - a clone
   copies data-reveal and its inline delay, and no script has to know it was
   ever created. Specificity 0,3,1 beats the 0,2,1 of the base rule it is
   overriding in main.css, so the order of the two files does not matter. */
.js-reveal [data-reveal].is-revealed [data-reveal] {
  opacity: 1;
  transform: none;
}

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

/* ==========================================================================
   Two-tone section titles  —  both halves the same weight
   --------------------------------------------------------------------------
   main.css sets .h-accent to font-weight: 400 while the first half inherits
   the heading's 700, so "OUR RECRUITERS" read as one bold word followed by a
   lighter one rather than as a single title in two colours.

   inherit rather than a number, so it tracks whatever weight the heading is
   set at wherever it is used - the testimonials band already sets both halves
   to 800 and keeps it, being more specific than this.

   Weight is not a contrast problem here: the accent is #8A6F22 at 37px, which
   is 4.80:1 on white against the 3:1 large text needs, and bolder only helps.
   ========================================================================== */
.section-title .h-accent { font-weight: inherit; }

/* ==========================================================================
   In their words  —  the same card, shorter
   --------------------------------------------------------------------------
   The design is main.css's own, untouched: navy panel down the left, round
   portrait bridging the join, campus silhouette, ivory card. The only thing
   changed here is how tall it is.

   WHERE THE HEIGHT ACTUALLY CAME FROM. min-height was 306px but the card
   measured 338 - so the floor was not what was setting it. Carousel items
   stretch to the tallest of them, and the longest of the three quotes was
   driving all three. Lowering min-height alone would have done nothing;
   the padding and the quote's leading had to come in with it.

   The portrait is 31% of the card's WIDTH, so it is unaffected by this and
   still has room: 170px tall inside a 282px card at 1440.
   ========================================================================== */
@media (min-width: 992px) {
  .testimonial {
    min-height: 0;
    padding: 22px 26px 20px 46%;
  }
  .testimonial__quote {
    margin-bottom: .9rem;
    line-height: 1.36;
  }
  .testimonial__divider,
  .testimonial__caption::before { margin-bottom: 9px; }
  .testimonial__footer { padding-top: 10px; }
}

/* The band's own padding, so the section tightens with the card rather than
   leaving the same gap above and below a shorter one. */
.testimonials { padding: 42px 0 34px; }

/* The line under the Voices of SVU heading. --tst-meta is the band's own
   muted colour, from main.css; on the band's #fbfaf6 it measures 4.57:1,
   which clears the 4.5 body text needs. */
.testimonials .section-title { margin-bottom: .55rem; }
.testimonials__sub {
  margin: 0 0 24px;
  color: var(--tst-meta);
  text-align: center;
  font-size: clamp(.95rem, .9rem + .25vw, 1.06rem);
  letter-spacing: .01em;
}

/* The Our Offerings tiles are <div>s rather than <a>s for now, so the pointer
   should not promise a link that is not there. Everything else about the tile
   - the label, the hover lift, the ratio - is main.css's and unchanged. */
.life-tile--static { cursor: default; }