/* ==========================================================
   Financials page only
   ----------------------------------------------------------
   Loaded by resources/views/financials.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   REPORT CAROUSEL
   ----------------------------------------------------------
   The covers are not all the same size: eleven are 220x272 and
   the 2023-2024 one is 1080x1350, so at natural size it dwarfed
   the rest and made the carousel jump as it scrolled. One box
   for all of them, with object-fit scaling each cover inside it.
   ---------------------------------------------------------- */
.gallery-area .gallery-item img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 272px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 0;
}

/* Equal height for every slide, so the View Report buttons line up */
.gallery-slider1 .owl-stage {
    display: flex;
    align-items: stretch;
}

.gallery-slider1 .owl-item {
    float: none;
    display: flex;
    flex: 0 0 auto;
}

.gallery-slider1 .gallery-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 30px;
}

.gallery-slider1 .gallery-item .mt-3 {
    margin-top: auto !important;
    padding-top: 15px;
}

/* The theme hides the carousel arrows behind a zero-height .owl-nav; these
   put them back beside the covers. */
.gallery-slider1 .owl-nav {
    overflow: hidden;
    height: 0;
}

.gallery-slider1 .nav-button {
    height: 70px;
    width: 25px;
    cursor: pointer;
    position: absolute;
    top: 110px;
}

.gallery-slider1 .owl-prev {
    left: -35px;
}

.gallery-slider1 .owl-next {
    right: -35px;
}

.gallery-slider1 .owl-prev.disabled,
.gallery-slider1 .owl-next.disabled {
    pointer-events: none;
    opacity: 0.25;
}

.owl-theme .owl-nav [class*="owl-"] {
    color: #ffffff;
    font-size: 39px;
    background: #ff6015;
    border-radius: 3px;
}


/* ----------------------------------------------------------
   ACCREDITATIONS
   ----------------------------------------------------------
   The four logos are different shapes and the old page gave
   each a different width (150, 150, 140, and a malformed
   "150px; height:140px;" that the browser ignored). One box
   each keeps the row even.
   ---------------------------------------------------------- */
.accreditation {
    background-color: #fff !important;
}

.accreditation img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 140px;
    object-fit: contain;
    margin: 0 auto;
}

.accreditation p {
    color: #757575 !important;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Everything below 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 the look it had before.
   ========================================================== */


/* ----------------------------------------------------------
   THE ORANGE RULES UNDER THE HEADINGS
   ----------------------------------------------------------
   An inline style draws each as a 2px line across the whole
   container — about 1300px of flat orange under each of the
   three headings. The theme's own headings sit over a short
   bar instead; these match them.

   The headings are all centred (further down this file), so
   the bar is centred under each of them. The inline style has
   to be beaten with !important — that is what inline means.
   ---------------------------------------------------------- */
body.home-premium .fin-rule {
    width: 72px;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 0 !important;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}


/* ----------------------------------------------------------
   THE REPORT COVERS
   ----------------------------------------------------------
   The covers are photographs of a printed report, so they get
   a hairline edge to sit on — without one, a cover whose own
   border is pale blends into the white card behind it.
   ---------------------------------------------------------- */
body.home-premium .gallery-area .gallery-item img {
    border-radius: 10px;
    border: 1px solid var(--line);

    /* The box is given the artwork's own proportions instead of the 220x272
       fixed height it had. Every cover is 220x272 bar one at 1080x1350 —
       ratios of 0.809 and 0.800 — against a box that was 0.768. That
       mismatch is what made them look uneven: contain letterboxed each one
       by a different amount inside a taller frame.

       With the frame at the artwork's ratio the covers fill it edge to edge,
       and because they all share one width they all come out the same
       height. contain is kept, so nothing is cropped — cover filled the
       frame by cutting about three per cent off every cover instead. */
    height: auto;
    aspect-ratio: 220 / 272;
    object-fit: contain;
}

/* The card the cover sits in, given the same lift as the theme's other
   cards so the row responds the way the rest of the site does. */
body.home-premium .gallery-slider1 .gallery-item {
    padding: 18px 16px 30px;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

body.home-premium .gallery-slider1 .gallery-item:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}


/* ----------------------------------------------------------
   THE ACCREDITATION LOGOS, CENTRED
   ----------------------------------------------------------
   The theme lays .benefit-item out as a flex column with
   align-items: flex-start, then re-centres the children it
   knows about — the icon, the heading, the paragraph, the
   button. The logo here is wrapped in an <a>, which is not on
   that list, so it stayed hard against the left edge: 1px of
   space on the left against 86 to 97px on the right.

   stretch rather than center, so the link fills the card and
   the image's own margin: 0 auto does the centring. That also
   gives all four the same box, instead of each being as wide
   as its own logo.
   ---------------------------------------------------------- */
body.home-premium .accreditation > a {
    align-self: stretch;
    width: 100%;
}


/* ----------------------------------------------------------
   THE SECTION HEADINGS, CENTRED
   ----------------------------------------------------------
   Two of the three were left-aligned and the middle one
   centred. All three are centred now; the bar under each is
   centred where it is defined further up this file.
   ---------------------------------------------------------- */
body.home-premium main h2 {
    text-align: center;
}