/*
 * Short Article Listing widget (ADO #124623 — SRS Part 11).
 * Scoped under .sal-widget (one instance per class scope is fine — all styling is class-based).
 *
 * PC (≥768px): title centered, fixed 3-column grid (max 2 rows / 6 items), CTA button below,
 *              center-aligned. Cards do NOT stretch/reflow to fill an incomplete last row
 *              (grid leaves empty slots naturally). Tile height in a row aligns to the tallest.
 * Mobile:      title + CTA text link on one row; single horizontal scroll row with CSS
 *              scroll-snap — 1 full card (274px) + partial 2nd card visible.
 */

/* AB#145757: the public site serves the UMobile Display web font as 'Unbeatable' (coreclient font-face);
   with only "UMobile Display" in the stack the widget fell back to Segoe UI / Arial. */
/* AB#146698: clear: an AEM grid column floated before the widget (SIT about-us/home keeps the old
   general-listing column, float:left, 900px tall, in the same grid) otherwise squeezed the flex header
   beside it: 0px wide at x = viewport on phones, and the desktop title pushed 884px down its own box. */
.sal-widget {
    clear: both;
    padding: 56px 0;
    font-family: "UMobile Display", "Unbeatable", "Segoe UI", Arial, sans-serif;
}

/* AB#146698: the 1248 content box of the site (1280 frame, 16 a side), Figma 2138-65767 (padding 96 on 1440)
   and PROD: cards 96/400 at 1440, 59/400 at 1366, 16/400 at 1280, 16/314.7 at 1024 (was 1240 + 32: 132/376). */
.sal-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Header: PC = centered title only; mobile = title + CTA inline ── */
/* AB#146698: title to cards 35, Figma 2138-65767 (gap 35 under the 40px title line); was 32. */
.sal-header {
    margin-bottom: 35px;
    text-align: center;
    /* AB#134725 / AB#133055 — a title authored with the editor's "Title" format carries
       .utop-rte-title, which sets its own text-align (utop-rte-blocks.css) and would therefore
       out-rank the inherited value from this container, media query included. The custom property
       is how such a container states its intent; it must track the text-align beside it. */
    --utop-rte-align: center;
}

/* #133475 — the widget title is OPTIONAL (config.titleLocalizations can be unset, per-culture), and
   on PC the CTA lives in .sal-cta-row while .sal-cta-inline is display:none. So a title-less header
   renders nothing yet still paid its 32px margin, leaving a blank band above the grid.
   Scoped to PC on purpose: on mobile the inline CTA IS visible and still needs the gap.
   Stated as a subtractive rule so a browser without :has() simply keeps today's spacing
   rather than losing the gap when a title IS present. */
@media (min-width: 768px) {
    .sal-header:not(:has(> .sal-title)) {
        margin-bottom: 0;
    }
}

.sal-title {
    margin: 0;
    font-family: "UMobile Display", "Unbeatable", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #191c24;
}

/* Mobile-only CTA text link (hidden on PC) */
.sal-cta-inline {
    display: none;
    /* #133489 — with no title configured the CTA is the header's only child and must still sit on the
       right. The phone header is a grid since AB#146698 and puts the CTA in column 2 (see the mobile
       block); margin-left:auto keeps it right in a flex or block header as well. */
    margin-left: auto;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.sal-cta-inline--orange { color: #FF7300; }
.sal-cta-inline--white  { color: #ffffff; }

/* ── Grid ── */
.sal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    /* stretch (default) keeps tiles in a row aligned to the tallest; an incomplete
       last row simply leaves empty grid cells — cards never widen to fill them. */
}

.sal-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* #133046 (SRS Part11 §3.1.2) — clickable card variant: the tile itself is the anchor (same
   house pattern as the newsroom listing grid cards) — no pointer-events overlay, text inside
   stays selectable. Undo anchor defaults so the tile looks identical to the plain <article>
   variant, then add the SRS hover/focus affordances: pointer cursor, elevation on hover
   (drop-shadow 0 0 7px @ 12%, 0.2s ease), visible keyboard focus outline. */
a.sal-card--link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

a.sal-card--link:hover {
    /* keep the resting elevation and add the SRS hover glow on top */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 7px rgba(0, 0, 0, 0.12);
}

a.sal-card--link:focus-visible {
    outline: 2px solid #ff7300;
    outline-offset: 2px;
}

.sal-thumb {
    width: 100%;
    aspect-ratio: 400 / 196; /* PC frame 400×196, recommended source 800×392 */
    overflow: hidden;
    background: #f0f1f3;
}

.sal-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills area while maintaining aspect ratio */
    max-width: 100%;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* AB#146500: the image zooms on hover like PROD (coreclient .general-listing-container .card:hover .image,
   scale 1.2 in .3s); Figma has no hover state for this card. .sal-thumb clips it (overflow hidden).
   The card's shadow keeps the SRS #133046 hover layer above, not PROD's darker shadow. */
a.sal-card--link:hover .sal-thumb img {
    transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
    .sal-thumb img { transition: none; }
}

/* AB#146502: card body padding 20 and 12 between category / title / date on every width
   (Figma 2138-65769 desktop, 4821-139776 mobile). Was 16 20 20 (desktop) / 14 16 16 (mobile) and 8. */
.sal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.sal-category {
    /* align-self keeps the box as wide as the text: the gradient tokens below paint the
       background box, so a stretched (full-width) box would only ever show the first stop. */
    align-self: flex-start;
    /* Figma 2138-65769 (desktop) / 4821-139658 (mobile): 16/500, was 14/600 (AB#145763). The upper case
       is the content's own string (Prod is upper case too), so no text-transform here. */
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #FF7300; /* fallback for categories without a colour token */
    margin-bottom: 12px;
}

/* ── Per-category colour tokens ──
   Figma node 2138:65769 paints the label with a left-to-right gradient (dark → bright).
   The solid `color` stays as the fallback for engines without background-clip:text — the
   same values the production newsroom listing uses (Uop.CMS.Widgets/NewsroomListing).
   Shared verbatim with the Related Article widget so both widgets stay consistent. */
.sal-category--corporate  { color: #3558c9; }
.sal-category--commercial { color: #7a2a22; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sal-category--corporate,
    .sal-category--commercial {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .sal-category--corporate {
        background-image: linear-gradient(90deg, #08132c 0%, #6184d5 100%);
    }

    .sal-category--commercial {
        background-image: linear-gradient(90deg, #4b0e09 0%, #cd4135 63%);
    }
}

.sal-card-title {
    margin: 0 0 12px;
    font-family: "UMobile Display", "Unbeatable", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    color: #000; /* AB#146501: Figma 2138-65769 / 4821-139776 "color: black" (a plain String field, no editor) */
    /* Max 2 lines, ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sal-date {
    margin-top: auto; /* pinned to the bottom of the tile content area */
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #666d7d;
}

/* ── CTA button below the grid (PC) ── */
.sal-cta-row {
    margin-top: 40px;
    text-align: center;
}

.sal-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    /* AB#148895 — Figma basebutton-Default 2138:65808: 48 high, padding 12/16, label-to-icon gap 4. */
    min-height: 48px;
    padding: 12px 16px;
    gap: 4px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.sal-btn:hover { opacity: 0.85; }

/* Chevron after the label — same 16x16 svg (viewBox "4 4 16 16", 6x12 glyph, 1.5 stroke) as
   FeaturedTile / _CardItems. Inherits currentColor so the orange (white glyph) and white
   (orange glyph) variants both stay correct. Mobile uses the inline text link, no chevron. */
.sal-btn svg { flex: none; width: 16px; height: 16px; }

/* 'Orange Button' — filled orange */
.sal-btn--orange {
    background: #FF7300;
    border: 1px solid #FF7300;
    color: #ffffff;
}

/* 'White Button' — white, outlined */
.sal-btn--white {
    background: #ffffff;
    border: 1px solid #FF7300;
    color: #FF7300;
}

/* ── Mobile ── (AB#146502: Figma 4821-139658 frame 393: gutter 20, header to cards 24, cards 20 apart) */
@media (max-width: 767px) {
    .sal-widget { padding: 40px 0; }
    .sal-inner  { padding: 0 20px; }

    /* Title + CTA text link on the same row: title left, CTA right.
       AB#146698 (user decision 14/10): the CTA stays on the title row whatever the title's alignment, as Figma
       4821-139658 composes it (title at the start, "View all" at the end, centred on the cross axis). The title box
       is as wide as its text, so its first glyph sits on the 20px gutter above the cards and its own text-align only
       shows if it wraps. Grid rather than flex so the title column takes its one-line width first and the CTA column
       (1fr, never under its longest word) wraps instead: newsroom at 360 keeps "Latest News" on one line and breaks
       "View All Press Release" into two right-aligned lines (32px, inside the 32.9 title line); a flex row broke the
       title instead. Measured on SIT: a title stretched over the room left of the CTA and centred in it put the
       text 29.5 / 84.8 from the left at 393 (newsroom / about-us home), off the gutter; a centred title on a row of
       its own pushed the CTA under it, title to cards 52.9 instead of Figma's 24. */
    .sal-header {
        display: grid;
        grid-template-columns: auto minmax(min-content, 1fr);
        align-items: center;
        gap: 12px;
        text-align: left;
        --utop-rte-align: left;   /* see the desktop rule */
        margin-bottom: 24px;
    }

    /* AB#146698: the widget-info editor title is content, so it follows PROD: the page h2 scale on phones,
       26/600, line-height 1.2667 (32.93px), as the feature tile and USP titles. Only the CMS String title
       (no editor, .sal-title--plain) keeps Figma 4821-139658's 24/28. */
    .sal-title {
        font-size: 26px;
        line-height: 1.2666667;
    }
    .sal-title--plain {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.01em;
    }

    /* Column 2 even without a title (#133489: the CTA stays right), hugging its text at the end of the column.
       AB#152391: the phone CTA is Figma 4821-139658's text link, 14/600 line-height 18 (was the PC 16/1). Its size is
       the view's, not content's, so it follows Figma; the editor title above keeps PROD's 26 (AB#146698). */
    .sal-cta-inline {
        display: inline-block;
        grid-column: 2;
        justify-self: end;
        white-space: normal;
        text-align: right;
        font-size: 14px;
        line-height: 18px;
    }

    /* Single horizontal scroll row — 1 full card + partial 2nd (cards fixed 274px).
       Pure CSS scroll-snap, no JS. */
    .sal-grid {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        /* let the row bleed to the right edge so the partial card hints more content */
        margin-right: -20px;
        padding-right: 20px;
        scrollbar-width: none; /* Firefox */
    }
    .sal-grid::-webkit-scrollbar { display: none; }

    .sal-card {
        flex: 0 0 274px;
        width: 274px;
        scroll-snap-align: start;
        /* Mobile: tile height is independent (no row alignment) — flex items still
           stretch to the row; keep content top-anchored and let date stay at bottom. */
    }

    .sal-thumb { aspect-ratio: 274 / 153; } /* mobile frame 274×153 */

    /* CTA button row is replaced by the inline text link on mobile */
    .sal-cta-row { display: none; }
}