/* ==========================================================
   Our COVID-19 Response page only
   ----------------------------------------------------------
   Loaded by resources/views/our-covid-19-response.blade.php
   via @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   PHOTOGRAPHS
   ----------------------------------------------------------
   The old page put height="400px" on one of these as an HTML
   attribute with a unit, which browsers ignore — it rendered at
   its own 1200px. These cap them instead.
   ---------------------------------------------------------- */
.covid-hero {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px;
}

.covid-photo {
    display: block;
    max-width: 100%;
    max-height: 400px;
    width: auto;
    margin: 20px auto 0;
    border-radius: 5px;
}

/* The two press notes down the side */
.covid-note {
    margin-bottom: 30px;
}

.covid-note img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px 5px 0 0;
}

.covid-note p {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   WHAT WE DID: the list
   ----------------------------------------------------------
   The old page spaced these with <br> between the items.
   ---------------------------------------------------------- */
.covid-list {
    padding-left: 20px;
}

.covid-list li {
    margin-bottom: 16px;
    line-height: 1.8;
}


/* ----------------------------------------------------------
   THE WORKSHEET PACKS
   ----------------------------------------------------------
   Three covers of different heights, so one box levels them and
   .card-foot puts the three buttons on the same line.
   ---------------------------------------------------------- */
.covid-pack {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: contain;
    background-color: #fff;
}


/* ----------------------------------------------------------
   VIDEO
   ----------------------------------------------------------
   A 16:9 box that keeps its shape at any width, so the embeds
   need no fixed height.
   ---------------------------------------------------------- */
.video-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Applies only while the page carries the premium theme
   (body.home-premium, set by the @section in the Blade file).
   Drop that one line and the page returns to how it was.
   ========================================================== */


/* ----------------------------------------------------------
   THE ORANGE RULES UNDER THE HEADINGS
   ----------------------------------------------------------
   The theme turns an inline orange divider into a short
   gradient bar, but only when it is a direct child of
   .section-title. This page uses plain containers rather than
   .section-title, so four of its five dividers sat outside one
   and stayed as 2px lines drawn across 856px and 1296px.

   Same declarations as the theme's own, so every divider on
   the page matches; the theme's rule is the more specific, so
   the one that is inside a section title keeps its own.
   ---------------------------------------------------------- */
body.home-premium main div[style*="border-bottom: 2px solid #ff6015"] {
    border-bottom: 0 !important;
    width: 72px;
    height: 5px;
    margin: 20px auto 22px !important;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}


/* ----------------------------------------------------------
   THE SECTION HEADINGS, CENTRED
   ----------------------------------------------------------
   All four of this page's headings were ranged left while the
   orange bar under each was already centred by the rule above,
   which gives every divider margin: ... auto. Centring the
   headings puts the two back together, and matches how
   Financials sets its own section headings.

   The careers band at the foot of the page carries the only
   other h2, and the theme already centres that one, so this
   changes nothing there.
   ---------------------------------------------------------- */
body.home-premium main h2 {
    text-align: center;
}