/* ==========================================================================
   Annual Report 2026 - page styles
   Scoped under .ar2026-page so nothing here can leak into AR2025 or the rest
   of the site. Add new AR2026 sections at the bottom of this file.
   ========================================================================== */

.ar2026-page {
    /* Design tokens from the AR2026 Figma library.
       Brambles Blue / CHEP Blue / Dark Blue / Stroke already exist as global
       vars in bramblesv2/s_style.css - duplicated locally so this page stays
       self-contained. Twilight and Pine are new in AR2026. */
    --ar26-brambles-blue: #001C66;
    --ar26-chep-blue: #0079FF;
    --ar26-twilight: #8F29FC;
    --ar26-pine: #677447;
    --ar26-dark-blue: #0A142D;
    --ar26-stroke: #C7CFDC;
    --ar26-white: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Section shell
   Figma: 80px vertical padding, white background, 1140px content column
   (Bootstrap .container gives exactly 1170 - 30 = 1140 at >=1200px)
   -------------------------------------------------------------------------- */
.ar2026-page .ar2026-section {
    padding-block: 80px;
    background-color: var(--ar26-white);
    font-family: 'Segoe UI', 'Segoe UI Historic', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Intro: text column + circle diagram
   -------------------------------------------------------------------------- */
.ar2026-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 127px;
}

.ar2026-intro__text {
    flex: 0 1 458px;
    max-width: 458px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.page p.ar2026-intro__lead {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.24px;
    font-weight: 400;
    color: var(--ar26-brambles-blue);
}

.ar2026-intro__body p {
    margin: 0 0 0px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.16px;
    color: var(--ar26-dark-blue);
}

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

.ar2026-intro__diagram {
    flex: 0 0 555px;
    max-width: 555px;
}

    .ar2026-intro__diagram img {
        display: block;
        width: 100%;
        height: auto;
    }

/* --------------------------------------------------------------------------
   Strategic priority cards ("Accordion" component in Figma)
   Coloured heading block + body copy, 2 columns on desktop
   -------------------------------------------------------------------------- */
.ar2026-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 64px;
}

.ar2026-card {
    display: flex;
    flex-direction: column;
}

.ar2026-card__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 8px;
}

.ar2026-card__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
}

    .ar2026-card__icon img {
        display: block;
        width: 32px;
        height: 32px;
    }

.ar2026-card__heading-text {
    flex: 1 1 0;
    min-width: 0;
}

.page h2.ar2026-card__title {
    margin: 0 0 0px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.36px;
    color: var(--ar26-white);
}

.page p.ar2026-card__subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.16px;
    color: var(--ar26-white);
}
    .ar2026-card__subtitle:last-child{
        padding-bottom:0px;
    }
.ar2026-card__body p:first-child {
    padding-top: 0px;
}
.ar2026-card__body p:last-child{
    padding-bottom:0px;
}
.ar2026-card__body {
    padding: 20px;
}

    .ar2026-card__body p {
        margin: 0 0 0px;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.16px;
        color: var(--ar26-dark-blue);
    }

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

/* Heading colour variants */
.ar2026-card--brambles-blue .ar2026-card__head {
    background-color: var(--ar26-brambles-blue);
}

.ar2026-card--chep-blue .ar2026-card__head {
    background-color: var(--ar26-chep-blue);
}

.ar2026-card--twilight .ar2026-card__head {
    background-color: var(--ar26-twilight);
}

.ar2026-card--pine .ar2026-card__head {
    background-color: var(--ar26-pine);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Bootstrap md: .container = 970px, diagram has to give way */
@media (max-width: 1199px) {
    .ar2026-intro {
        gap: 60px;
    }

    .ar2026-intro__diagram {
        flex: 0 1 460px;
        max-width: 460px;
    }
}

/* Stack the intro before the columns get too narrow to read */
@media (max-width: 991px) {
    .ar2026-intro {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .ar2026-intro__text {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .ar2026-intro__diagram {
        flex: 0 0 auto;
        width: 100%;
        max-width: 555px;
    }
}

/* Mobile - Figma 390px frame: 48px section padding, single column, 20px gap */
@media (max-width: 767px) {
    .ar2026-page .ar2026-section {
        padding-block: 48px;
    }

    .ar2026-intro {
        gap: 30px;
    }

    .ar2026-intro__text {
        gap: 32px;
    }

    .ar2026-intro__diagram {
        max-width: 350px;
    }

    .ar2026-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 48px;
    }
    .item-top-page h1{
        font-size:28px;
    }
    .ar2026-intro__body p{
        font-size:14px;
    }
    .page p.ar2026-intro__lead{
        font-size:20px;
    }
    .page h2.ar2026-card__title{
        font-size:14px;
    }
    .page p.ar2026-card__subtitle{
        font-size:14px;
        padding-top:4px;
    }
    .ar2026-card__body p{
        font-size:14px;
    }
}
/* Dong ghi chu cuoi trang — Figma: 1140 Fill x 28 Hug, cach khoi tren 64px */
.ar2026-page .ar2026-further {
    margin: 64px 0 0;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px; /* Figma ghi -1% */
    color: #001C66;
    padding-left:0px;
    padding-bottom:0px;
}

    .ar2026-page .ar2026-further a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .ar2026-page .ar2026-further a:hover,
        .ar2026-page .ar2026-further a:focus {
            color: #0079FF;
            text-decoration: underline;
        }

@media (max-width: 767px) {
    .ar2026-page .ar2026-further {
        margin-top: 40px;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.16px;
    }
}