/*
 * The Open Day page.
 *
 * Loaded on /open-day only, after apiit.css so it can build on the site rather
 * than fight it. Everything here is a component the site has no equivalent of -
 * the countdown, the experience cards, the offer band. Anything the site
 * already has (buttons, headings, the four red squares, the form controls) is
 * used as it is and is NOT restyled here.
 *
 * The palette is the site's, named once so a change is one edit:
 *
 *   --od-red    #C40000  the APIIT red, from apiit.css
 *   --od-navy   #002366  the APIIT navy, from apiit.css
 *   --od-teal   #00B1A5  the highlight in .blue_text
 *
 * No dark-mode block: apiit.lk has one appearance and this page is part of it.
 */

.open_day_page,
:root {
    --od-red: #C40000;
    --od-navy: #002366;
    --od-teal: #00B1A5;
    --od-ink: #212529;
    --od-muted: #5b6570;
    --od-rule: #e3e6ea;
    --od-radius: 6px;
}

/* -------------------------------------------------- the band under the banner */

/*
 * There is no hero stylesheet.
 *
 * The top of this page is #inner-banner - the site's own banner, styled in
 * apiit.css along with every other inner page's. The one exception is the
 * typed line below, which is this page's own content sitting inside it; no
 * rule here touches the banner itself, and none should - that is what would
 * make Open Day the one page whose header is subtly not the site's.
 *
 * Everything else here is under the banner.
 */

/*
 * The line that types itself.
 *
 * .heading is 75px, which is right for the page title under it and too wide
 * for a sentence - on /alsinc the same line runs past the edge of the banner
 * and the last word is clipped. Sized down and given room, so it wraps instead
 * of overflowing.
 */
.open_day_banner_line {
    font-size: 44px;
    line-height: 52px;
    margin-bottom: 4px;
    padding: 0 16px;
}

/*
 * #inner-banner is a fixed 520px with its content absolutely centred in it, so
 * a line that grows taller does not push the banner - it grows out of the top
 * of it and under the header. apiit.css drops .heading to 40px below 991px for
 * exactly this reason; these follow the same scale, one step down, because
 * this line is a sentence rather than a title.
 */
@media (max-width: 991px) {
    .open_day_banner_line {
        font-size: 30px;
        line-height: 36px;
    }
}

@media (max-width: 575px) {
    .open_day_banner_line {
        font-size: 21px;
        line-height: 27px;
        padding: 0 12px;
    }
}

/*
 * The campaign band: black, the site's own bg_black.
 *
 * The two dark bands on this page use the site's two dark grounds - bg_black
 * here and blue_black_bg on the experiences - so the page goes banner, black,
 * light, blue-black, red, light. Both classes come from apiit.css; neither is
 * a colour invented for this page.
 *
 * background-IMAGE, not the background shorthand: the shorthand would reset
 * the colour bg_black sets, and this file loads after apiit.css, so it would
 * win and the class would do nothing.
 */
.open_day_band {
    padding: 56px 0;
    /* A very slight lift towards the top-left, so a tall band of flat black
       has some depth behind the poster. */
    background-image: radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%);
}

/*
 * No font-size on any copy wrapper on this page.
 *
 * apiit.css sets p { font-size: 14px !important; line-height: 22px !important }
 * for the whole site, so the paragraphs an editor writes are 14px here exactly
 * as they are on every other page - which is the point. Declaring 18px on the
 * wrapper would be a rule that never applies and a size nobody gets, and
 * beating it with a second !important would make this page the one that reads
 * differently from the rest of the site.
 */
/*
 * The band's heading.
 *
 * .heading is 75px, which is the page title's size and too loud for a line
 * that sits under one. Sized to lead this band without competing with the
 * banner above it.
 */
.open_day_band .heading {
    font-size: 52px;
    line-height: 58px;
    margin-bottom: 18px;
}

.open_day_band_intro {
    /*
     * No width cap. It had one, on the usual reasoning that long lines are
     * hard to read - but it stopped the paragraph two thirds of the way across
     * a column the heading above it fills, so the two did not line up and the
     * band looked as though the text had run out. The grid column is the
     * constraint, as it is everywhere else on this page.
     */
    margin-bottom: 30px;
}

.open_day_band_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

/* The campaign artwork. Portrait, so it is capped rather than stretched. */
.open_day_poster {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-left: auto;
    border-radius: var(--od-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Date, time and place, as three chips under the buttons. */

.open_day_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Two class names deep on purpose.
 *
 * apiit.css has `.container ul li { display: list-item; list-style-type: disc;
 * margin-bottom: 20px }` for editor-written prose, which is more specific than
 * a single class - so a one-class rule here lost, and the chips came out as a
 * bulleted list with a 20px gap under each one.
 */
.open_day_chips li.open_day_chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin-bottom: 0;
    border: 0;
    /*
     * Square, like the site's buttons - apiit.css sets border-radius: 0 on
     * both custom_white_btn and custom_black_btn, and these sit directly under
     * a pair of them.
     */
    border-radius: 0;
    padding: 9px 20px 9px 16px;
    /*
     * Solid white, not a tint of the navy behind them.
     *
     * These three are the facts somebody scrolls the page to find - when, what
     * time, where - and translucent white on navy made them the quietest thing
     * in the band. On white they are the loudest, which is what they should be.
     */
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    /*
     * No font-family here, and none anywhere else in this file.
     *
     * The site has two faces and one place each is declared: URW DIN on body,
     * Oswald on .heading and .sub_main_heading in apiit.css. Every heading on
     * this page carries one of those classes, so the face is inherited rather
     * than repeated - and this page cannot end up on a different font from the
     * rest of the site the next time one of them changes.
     *
     * These labels are not headings, so they read in the body face, like the
     * button beside them.
     */
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: var(--od-navy);
}

/* The site's red, as the marker. Drawn rather than typed, so it cannot land on
   a font that has no such glyph. */
.open_day_chips li.open_day_chip::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--od-red);
}

/*
 * An anchor wrapping a button, which is how every call to action on this site
 * is written. inline-block so the two sit side by side and the link is exactly
 * the size of the button rather than the width of the row.
 */
.open_day_btn_link {
    display: inline-block;
    text-decoration: none;
}

.open_day_btn_centred {
    margin: 0 auto;
}

.open_day_btn_centred .custom_white_btn,
.open_day_btn_centred .custom_black_btn {
    margin: 0 auto;
}

/*
 * There is no outlined variant here any more.
 *
 * The second call to action was the white button with its fill removed and its
 * arrow redrawn in white. The arrow is the shared button's own - a bar and a
 * rotated chevron - and recolouring the two halves separately made it read as
 * a paper aeroplane rather than an arrow at the size it is drawn.
 *
 * So both buttons are now the site's, untouched: black filled for register,
 * white filled for the second one. The pair still reads as a step apart, and
 * the arrows are the ones every other button on the site draws.
 */

/* -------------------------------------------------------------- countdown */

.open_day_countdown {
    margin-bottom: 30px;
}

.open_day_countdown_lead {
    /* .sub_main_heading brings the site's heading face and uppercases; this is
       a sentence, so only the case and the size are overridden here. */
    text-transform: none;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 14px;
}

.open_day_countdown_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 460px;
}

/*
 * The corner motif, at this scale.
 *
 * apiit.css has .round_corner_t_l and .round_corner_b_r - one big rounded
 * corner, the rest square - and the site uses them on its panels. Those are
 * 60px, which on a 110px box is a circle; this is the same shape at the size
 * these boxes are, and it is the site's own idea rather than a new one.
 */
.open_day_count {
    text-align: center;
    padding: 16px 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px 0 20px 0;
    background: rgba(255, 255, 255, 0.07);
}

.open_day_count_value {
    display: block;
    font-size: 38px;
    line-height: 1;
    color: #ffffff;
    /*
     * The figures change once a second, and proportional digits make the box
     * jitter as a 1 replaces an 8. Tabular numerals hold the width still.
     */
    font-variant-numeric: tabular-nums;
}

.open_day_count_label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--od-teal);
}

/* ------------------------------------------------------- why come / reasons */

/*
 * The navy band, which used to be "Open Day experiences" above.
 *
 * The two bands swapped places and their grounds stayed put, so the page still
 * alternates: banner, black, light, NAVY, red.
 *
 * apiit.css has .blue_black_bg, the site's other dark ground - but it is a
 * photograph that is navy down one half and black down the other, meant for a
 * band whose content sits on the left. This is the flat navy instead, with the
 * same faint lift the black band near the top of the page has.
 */
.open_day_reasons {
    background-color: var(--od-navy);
    background-image: radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%);
    color: #ffffff;
}

.open_day_reasons_copy {
    max-width: 46ch;
}

.open_day_reasons_copy p:last-child {
    margin-bottom: 0;
}


.open_day_reason_card {
    padding: 26px 24px;
    border: 1px solid var(--od-rule);
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.open_day_reason_card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(0, 35, 102, 0.12);
}

.open_day_reason_rule {
    display: block;
    width: 42px;
    height: 4px;
    background: var(--od-red);
    margin-bottom: 16px;
}

/*
 * Navy, explicitly, because the band around it is now white-on-navy.
 *
 * .open_day_reasons sets color: #ffffff for its heading and its paragraph, and
 * that cascades into these cards - which are white. The titles went invisible:
 * white type on a white card, with the red rule and the copy still showing, so
 * the cards looked like they had simply lost their headings. The copy survived
 * only because it sets its own colour.
 */
.open_day_reason_card .sub_main_heading {
    font-size: 24px;
    line-height: 26px;
    margin-top: 0;
    color: var(--od-navy);
}

.open_day_reason_copy {
    color: var(--od-muted);
}

.open_day_reason_copy p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------ experiences */

/*
 * The picture is the card. The words sit over the foot of it and lift on hover,
 * which is the interaction the reference page uses - and it degrades to a
 * legible card with the words simply visible when there is no hover, which is
 * every touchscreen.
 */
/*
 * The light band.
 *
 * This band and "More than an Open Day" swapped places, and their grounds
 * stayed where they were - so the page still reads banner, black, LIGHT, navy,
 * red rather than two dark bands in a row. This one is first now, so it is the
 * light one; the navy that used to be here is on .open_day_reasons below.
 *
 * No background at all rather than a white one: the page's own ground is what
 * a light band is, and painting white over it would put a seam at the top and
 * bottom of the section on any page furniture that is not pure white.
 */
.open_day_experiences {
    color: var(--od-ink);
}

.open_day_experiences_intro {
    max-width: 56ch;
}

/*
 * The number.
 *
 * Large, outlined and behind the words - it says how many there are and in
 * what order without taking a line of copy to do it. aria-hidden in the
 * template: a screen reader reading "zero one" before every card is noise.
 */
.open_day_experience_no {
    position: absolute;
    top: 10px;
    left: 16px;
    z-index: 2;
    font-size: 46px;
    line-height: 1;
    color: transparent;
    /*
     * Outlined in the site's navy, not white. It sat on a navy band and sits
     * on the page's light ground now - a white outline there is an invisible
     * number, which is the sort of thing that survives a review because
     * nobody can see it to comment on it.
     *
     * On a card WITH a photograph it still has to read against whatever that
     * photograph is, which is what the shadow under it is for.
     */
    -webkit-text-stroke: 1px rgba(0, 35, 102, 0.55);
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.45);
}

/* Over a photograph it goes back to white - the picture is dark behind it. */
.open_day_experience:not(.open_day_experience_plain) .open_day_experience_no {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/*
 * The card, on the page's light ground.
 *
 * It was a veil of white on navy. On the light ground that veil is invisible,
 * so the card is white with the site's own rule around it - the same treatment
 * the study path cards further down the page use, which is what this band now
 * sits next to in the reading order.
 */
.open_day_experience {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--od-radius);
    background: #ffffff;
    border: 1px solid var(--od-rule);
    min-height: 300px;
    /*
     * Fills its column, so the four in a row are one height whatever is in
     * them. They were all the same until one of them got a photograph: a card
     * with a picture is 300px of picture plus its words, one without is 220,
     * and a row of four where the first is 80px taller than the other three
     * reads as a mistake rather than as a design. The row is already a flex
     * row stretching its columns - this is the card taking the height its
     * column was given.
     */
    height: 100%;
}

.open_day_experience_img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.open_day_experience:hover .open_day_experience_img {
    transform: scale(1.06);
}

.open_day_experience_body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
}

/*
 * White over a photograph, navy on a card without one.
 *
 * The template used to write white_text on this heading, which was right while
 * every card sat on a navy band. On the light ground it is only right where
 * there IS a picture under it - a plain card would have been white words on a
 * white card. So the colour is decided here, by which kind of card it is,
 * rather than asserted once in the markup.
 */
.open_day_experience_body .sub_main_heading {
    font-size: 22px;
    line-height: 24px;
    margin: 0;
    color: #ffffff;
}

.open_day_experience_plain .open_day_experience_body .sub_main_heading {
    color: var(--od-navy);
}

.open_day_experience_plain .open_day_experience_copy {
    color: var(--od-muted);
}

/*
 * Hidden until hover on a pointer, and always shown without one. A phone has
 * no hover, so hiding the copy there would hide it for good.
 */
.open_day_experience_copy {
    color: rgba(255, 255, 255, 0.86);
    margin-top: 6px;
}

.open_day_experience_copy p:last-child {
    margin-bottom: 0;
}

/*
 * A card with no picture yet.
 *
 * The words are then the card rather than an overlay on a photograph, so they
 * are laid out inside it and always shown - a dark box that stays empty until
 * you hover it is not a card, it is a bug report waiting to be written.
 */
.open_day_experience_plain {
    display: flex;
    align-items: flex-end;
    min-height: 220px;
}

.open_day_experience_plain .open_day_experience_body {
    background: none;
}

.open_day_experience_plain .open_day_experience_body {
    position: static;
    width: 100%;
    background: none;
}

@media (hover: hover) and (pointer: fine) {
    .open_day_experience_plain .open_day_experience_copy {
        max-height: none;
        opacity: 1;
        margin-top: 6px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .open_day_experience_copy {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
    }

    .open_day_experience:hover .open_day_experience_copy,
    .open_day_experience:focus-within .open_day_experience_copy {
        max-height: 160px;
        opacity: 1;
        margin-top: 6px;
    }
}

/* ------------------------------------------------------------------ offer */

/*
 * APIIT red, not navy.
 *
 * This is the one band on the page that is an offer rather than information,
 * and red is the colour this site shouts in - the four squares over every
 * heading, the Apply Now block in the header. Navy read as another content
 * band; red reads as the thing it is.
 */
.open_day_offer {
    background: var(--od-red);
    color: #ffffff;
    padding: 60px 0;
}

.open_day_offer_label {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 14px;
}

/* A div, not a p - see the note in the template. */
.open_day_offer_figure {
    font-size: 130px;
    line-height: 0.95;
    margin: 0;
    color: #ffffff;
    /* The figure is the loudest thing on the page, so it gets the one piece of
       weight the rest of the design does not use. */
    font-weight: 600;
}

.open_day_offer_headline {
    margin: 6px 0 14px;
}

.open_day_offer_terms {
    color: rgba(255, 255, 255, 0.86);
    max-width: 52ch;
}

.open_day_offer_terms p:last-child {
    margin-bottom: 0;
}

/*
 * The call to action, on white.
 *
 * A button on a red ground is either red on red or a second colour fighting
 * it. Lifting it onto a white card keeps the site's own black button working
 * exactly as it does everywhere else.
 */
.open_day_offer_card {
    background: #ffffff;
    color: var(--od-ink);
    border-radius: var(--od-radius);
    padding: 30px 28px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
}

.open_day_offer_card .sub_main_heading {
    margin: 0;
    color: var(--od-navy);
}

.open_day_offer_card_line {
    margin-top: 10px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--od-muted);
}

/* --------------------------------------------------------------- register */

.open_day_register {
    padding: 70px 0;
    background: #f6f7f9;
}

.open_day_register_intro {
    color: var(--od-muted);
}

/*
 * The three ticked lines.
 *
 * The tick is drawn - two borders rotated - rather than typed, for the same
 * reason the chips' dot is: a check character lands on whatever glyph the
 * loaded font happens to have.
 *
 * Two class names deep, because apiit.css has `.container ul li { display:
 * list-item; list-style-type: disc; margin-bottom: 20px }` for editor-written
 * prose and that beats a single class.
 */
.open_day_register_points ul {
    margin: 22px 0 0;
    padding: 0;
}

.open_day_register_points ul li {
    position: relative;
    display: block;
    list-style: none;
    margin-bottom: 14px;
    padding-left: 32px;
}

.open_day_register_points ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 7px;
    height: 12px;
    border: solid var(--od-red);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* "Prefer to speak with us?" */
.open_day_register_call {
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid var(--od-rule);
    border-radius: 20px 0 20px 0;
    background: #ffffff;
}

.open_day_register_call strong {
    display: block;
    color: var(--od-navy);
    margin-bottom: 4px;
}

.open_day_register_call a {
    font-weight: 600;
    color: var(--od-red);
    text-decoration: none;
}

.open_day_register_call a:hover {
    text-decoration: underline;
}

/*
 * The form itself, on a card.
 *
 * The band is a light grey; lifting the fields onto white separates the thing
 * somebody has to fill in from the words explaining why.
 */
.open_day_form_card {
    background: #ffffff;
    border-radius: 20px 0 20px 0;
    padding: 34px 32px 30px;
    box-shadow: 0 18px 44px rgba(0, 35, 102, 0.10);
}

.open_day_form_heading {
    text-transform: none;
    font-size: 26px;
    line-height: 32px;
    color: var(--od-navy);
    margin: 0 0 6px;
}

.open_day_form_note {
    color: var(--od-muted);
    margin-bottom: 24px;
}

@media (max-width: 575px) {
    .open_day_form_card {
        padding: 24px 20px 20px;
    }
}

/*
 * The site's form controls, given the room this form needs. apiit.css styles
 * .form-control already; only the height and the invalid state are set here,
 * and the invalid colour is the site's own red.
 */
.open_day_register .form-control,
.open_day_register .form-select {
    padding: 12px 14px;
    border-radius: 0;
}

.open_day_register .form-control:focus,
.open_day_register .form-select:focus {
    border-color: var(--od-navy);
    box-shadow: 0 0 0 0.18rem rgba(0, 35, 102, 0.12);
}

.open_day_register .is-invalid {
    border-color: var(--od-red);
}

.open_day_register .form-label {
    font-size: 14px;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.open_day_register .form-check-input:checked {
    background-color: var(--od-navy);
    border-color: var(--od-navy);
}

/* ----------------------------------------------------------- study paths */

.open_day_paths_copy {
    margin-bottom: 20px;
}

.open_day_paths_copy p:last-child {
    margin-bottom: 0;
}


.open_day_path {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--od-rule);
    border-radius: var(--od-radius);
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.open_day_path:hover,
a.open_day_path:focus-visible {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(0, 35, 102, 0.14);
}

a.open_day_path:focus-visible {
    outline: 3px solid var(--od-navy);
    outline-offset: 2px;
}

.open_day_path_img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

/*
 * A red square, the site's own mark.
 *
 * Four of them run above every heading on this site; one of them marks a card.
 * It is the same 12px the four in that row are drawn at, so the two read as
 * the same thing at two sizes rather than as two different devices.
 */
.open_day_path::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: var(--od-red);
}

.open_day_path_body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 34px 20px 18px;
}

.open_day_path_text {
    min-width: 0;
}

.open_day_path_title {
    display: block;
    font-size: 21px;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--od-navy);
}

/*
 * The line under the title, in the page's black rather than the grey the rest
 * of the small copy uses - it is the second half of the card's name, not an
 * aside, so it wants to read at a glance from across the row.
 *
 * The paragraph margin has to go explicitly. apiit.css sets `p` globally with
 * !important font-size and line-height, so the size below is written on the
 * <p> itself rather than inherited from here, or the global rule wins.
 */
.open_day_path_desc {
    margin-top: 8px;
    color: var(--od-ink);
}

.open_day_path_desc p {
    margin: 0;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--od-ink);
}

/*
 * The arrow: a red tile with a white diagonal in it.
 *
 * Drawn rather than typed. A glyph - \2197 or an emoji arrow - sits wherever
 * the font decides to put it and is a different weight in every face that
 * might be the fallback, which is the fault the pop-up close button had. Two
 * borders and a rule are the same in every browser.
 *
 * Only cards that go somewhere have one. A tile that looks like a button on a
 * card that does nothing is a promise the card cannot keep.
 */
.open_day_path_arrow {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--od-red);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

/* The shaft, corner to corner. */
.open_day_path_arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* The head, on the top right of it. */
.open_day_path_arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    /* No rotation. border-top + border-right at rest already points up and to
       the right, which is the direction this arrow goes; rotating it 45deg
       either way would point it along an axis instead. */
    transform: translate(-3px, -6px);
}

a.open_day_path:hover .open_day_path_arrow,
a.open_day_path:focus-visible .open_day_path_arrow {
    transform: translate(3px, -3px);
    background: var(--od-navy);
}

/* ------------------------------------------------------------------ video */

.open_day_video_frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px 0 20px 0;
    overflow: hidden;
}

.open_day_video_frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*
 * The fallback, UNDER the frame, and it stays under it.
 *
 * It used to be raised over the player while the frame loaded, as a poster.
 * That was the black card with a play button on it that people were seeing
 * instead of the video: Facebook's player draws the video's OWN preview frame
 * the moment it renders, and covering it with a black card of ours hid the
 * very thing the band is for. Nothing covers the player now.
 *
 * It is raised in exactly one case - .is-blocked, a frame the
 * Content-Security-Policy refused - where there is no player underneath and
 * this is the whole band.
 */
.open_day_video_live {
    background: #000000;
}

.open_day_video_fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    display: block;
    border: 0;
    /* Its own ground, not the container's. When this is raised it is raised
       OVER the frame, and a blocked frame is not transparent - it is the
       browser's own grey empty document. Without a background here the picture
       sits on that. */
    background: #000000;
    color: #ffffff;
}

.open_day_video_live.is-blocked .open_day_video_fallback {
    z-index: 2;
}

/*
 * The red button, over everything.
 *
 * Above the frame AND above the poster, because it is the one control this
 * page has either way: with the video playing it opens it on Facebook full
 * size; with the frame blocked it is what a visitor presses to reach it at
 * all. One button in both states rather than two that look identical.
 *
 * It cannot start the video in place, and that is not a shortcut - the player
 * is in Facebook's frame, and no page can reach into another origin's frame to
 * press its controls.
 *
 * Sized to the button and no larger. An <a> stretched over the frame would sit
 * on top of Facebook's own controls along the bottom of the player and swallow
 * every press meant for them.
 */
.open_day_video_open {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
}

.open_day_video_open:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 6px;
    border-radius: 50%;
}

/*
 * Pressed, and gone.
 *
 * A play button sitting over a video somebody has just started is a control
 * that means nothing, and it covers the picture. It does not come back - the
 * player's own controls are in the frame from that point.
 *
 * Faded rather than switched off, because it disappears while the press is
 * still under the visitor's finger and a mark that blinks out reads as a
 * glitch. visibility follows opacity so it is gone to a keyboard too, rather
 * than an invisible tab stop.
 */
.open_day_video_open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.open_day_video_live.is-played .open_day_video_open {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/*
 * The button NEVER takes the press, unless there is no player to take it.
 *
 * A click cannot be forwarded into another origin's frame, so the only way a
 * press plays the video in place is for the press to reach Facebook's player
 * itself. The red circle is a mark; the click goes straight through it.
 *
 * This used to be the other way round - the button took clicks until the
 * frame's load event said there was a player, and only then got out of the
 * way. Two things were wrong with that, and both sent people to Facebook when
 * they wanted the video HERE: a press that landed before load navigated away,
 * and on a browser whose load never arrived every press did.
 *
 * So the default is inert and .is-blocked is what turns it on: a frame the
 * policy refused, where there is genuinely nothing on this page to play and
 * opening the video where it lives is the only thing left.
 *
 * A browser that never runs the script therefore has a decorative button - and
 * a working player under it, which is the thing that matters. "Watch on
 * Facebook" sits beside the band for anybody who does want to leave.
 */
.open_day_video_open {
    pointer-events: none;
}

/*
 * A video this site serves is different: the button IS the control.
 *
 * There is no cross-origin frame to press through - the element is in this
 * page - so the button takes the click and calls play() on it. It is a
 * <button> in the markup for the same reason, rather than the link the
 * Facebook band uses.
 */
.open_day_video_native .open_day_video_open {
    pointer-events: auto;
    border: 0;
    background: none;
    padding: 0;
}

/*
 * And the band takes the SHAPE OF THE FILM, rather than forcing 16:9 on it.
 *
 * The frame above is 16:9 because an embedded player is. A file somebody
 * uploads need not be, and the first one is 720x900 - portrait, the shape a
 * phone shoots. Cropping that to 16:9 would have cut the top and bottom off
 * every person in it and shown a letterbox slice of the middle, which is worse
 * than any framing decision I could make on somebody's behalf.
 *
 * So: no aspect-ratio, the film sized by its own, centred on black, and capped
 * at 70% of the window so a tall one cannot push the rest of the page off the
 * screen. The shape is held before the metadata arrives by the width and
 * height attributes the template writes onto the element, read out of the file
 * - so nothing here needs a min-height to reserve the space.
 *
 * There WAS one, of 320px, and it was wrong the moment a landscape film went
 * in: on a phone a 16:9 film in a 366px column is 206px tall, so the box stood
 * 320 and put black bars above and below a video that filled its width
 * perfectly well. A minimum height set for one film's shape is a bug for every
 * other one.
 */
.open_day_video_native {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.open_day_video_media {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    background: #000000;
}

.open_day_video_live.is-blocked .open_day_video_open {
    pointer-events: auto;
}

/* The play triangle, drawn - a glyph sits wherever the font puts it. */
.open_day_video_play {
    position: relative;
    /* A span is inline, and an inline box ignores width and height. This was
       a flex child until the button moved into its own overlay, and flex
       blockified it; on its own it collapsed to nothing and left the white
       triangle floating on the video with no red circle behind it. */
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--od-red);
    transition: transform 0.25s ease;
}

.open_day_video_open:hover .open_day_video_play,
.open_day_video_open:focus-visible .open_day_video_play {
    transform: scale(1.06);
}

.open_day_video_play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #ffffff;
}

/*
 * The still, if one is uploaded, is the ground of that fallback.
 *
 * The navy wash that used to sit over it has gone with the navy card. What
 * keeps white type legible on somebody's photograph now is a plain darkening -
 * black rather than navy, because this layer is only ever seen where a video
 * would have been.
 */
.open_day_video_still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55);
}

/*
 * The line under the button, on the poster only.
 *
 * Placed against the centre of the frame rather than laid out beside the
 * button, because the button is no longer in this layer - it is the overlay
 * above, centred on the frame. 56px clears the lower half of the 76px button
 * and leaves a gap under it.
 *
 * Absolute also keeps it above the still, which is absolute too: a static
 * element beside a positioned one paints underneath it whatever the DOM order,
 * which is how this label went missing the moment a picture was uploaded.
 */
.open_day_video_facade_label {
    position: absolute;
    top: calc(50% + 56px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.open_day_video_copy {
    margin-bottom: 22px;
}

.open_day_video_copy p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------- event information */

/*
 * The facts on navy, the map beside them.
 *
 * The card takes the same corner as the counters and the form, so the page has
 * one shape rather than three.
 */
.open_day_where_card {
    background: var(--od-navy);
    border-radius: 20px 0 20px 0;
    padding: 34px 32px;
    color: #ffffff;
}

.open_day_where_date {
    font-size: 42px;
    line-height: 48px;
    text-transform: none;
    margin: 6px 0 4px;
}

.open_day_where_list {
    margin: 18px 0 26px;
}

.open_day_where_row {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.open_day_where_row:last-child {
    border-bottom: 0;
}

.open_day_where_row dt {
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    color: #ffffff;
}

.open_day_where_row dd {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.open_day_where_row dt a {
    color: #ffffff;
    text-decoration: none;
}

.open_day_where_row dt a:hover {
    color: var(--od-teal);
}

.open_day_map {
    position: relative;
    height: 100%;
    min-height: 420px;
    border-radius: 20px 0 20px 0;
    overflow: hidden;
}

.open_day_map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.open_day_where_img {
    border-radius: 20px 0 20px 0;
    object-fit: cover;
    max-height: 420px;
}

@media (max-width: 767px) {
    .open_day_map {
        min-height: 300px;
    }
}

/* ---------------------------------------------------------------- closing */

.open_day_closing {
    background: var(--od-red);
    padding: 70px 0;
}

.open_day_closing .heading {
    color: #ffffff;
}

.open_day_closing_copy {
    margin-bottom: 26px;
}

.open_day_closing_copy p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------- scroll animation */

/*
 * The reveal. Held at rest until the script marks it shown, which it does on
 * scroll - and immediately, for everything already on screen, so the first
 * frame of the page is never blank.
 *
 * .no-js is set by nothing: if the script does not run, these elements never
 * get is-shown, so the default has to be visible and the SCRIPT has to hide
 * them. That is what open-day.js does on load, and it is why there is no
 * opacity: 0 sitting in this file.
 */
.open_day_reveal_ready .open_day_reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.open_day_reveal_ready .open_day_reveal.is-shown {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .open_day_reveal_ready .open_day_reveal,
    .open_day_reveal_ready .open_day_reveal.is-shown {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .open_day_experience_img,
    .open_day_reason_card,
    .open_day_path,
    .open_day_path_arrow {
        transition: none;
    }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px) {
    .open_day_band {
        padding: 40px 0;
    }

    /*
     * After the base rule, not before it. An earlier @media block with the
     * same specificity loses to a later plain one - which is how this was
     * written the first time, and why the heading stayed at 52px on a phone.
     */
    .open_day_band .heading {
        font-size: 32px;
        line-height: 38px;
    }

    .open_day_poster {
        margin: 30px auto 0;
    }

    .open_day_offer_figure {
        font-size: 96px;
    }
}

@media (max-width: 767px) {
    .open_day_countdown_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .open_day_count_value {
        font-size: 34px;
    }

    /*
     * Both buttons, not one of them.
     *
     * This rule named .custom_white_btn and not .custom_black_btn, so on a
     * phone the white "Explore Study Paths" stretched to the column and the
     * black "Register For Open Day" above it stayed the width of its own
     * words. Two stacked calls to action at two different widths read as one
     * of them being broken - and it is the REGISTER one that looked wrong,
     * which is the button this page exists for.
     */
    .open_day_band_actions .open_day_btn_link,
    .open_day_band_actions .custom_white_btn,
    .open_day_band_actions .custom_black_btn {
        width: 100%;
        justify-content: center;
    }

    /*
     * And the three facts under them, one per line and all the same width.
     *
     * They are inline-flex chips that wrap, which on a wide screen is exactly
     * right - three pills in a row. On a phone there is only ever room for one
     * per line, so wrapping produced a ragged left-aligned column of three
     * different widths under two buttons that now agree. Full width lines them
     * up with the buttons and with each other.
     */
    .open_day_chips {
        flex-direction: column;
    }

    .open_day_chips li.open_day_chip {
        width: 100%;
    }

}