/* ==========================================================================
   Press Release details page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:69658 "Press Releases Details"). Uses the --hr-* tokens
   declared globally in layout-revamp.css.

   Loaded alongside press-releases-revamp.css: the hero/breadcrumb liquid
   gradient background, the pill filters and the article card reused in
   "Related Articles" are the same components as on the listing and are not
   duplicated here.
   ========================================================================== */

/* The band dies just above the article title, same rule as the listing.

   This was a flat 704px, on the reading that Figma runs the band through the
   title block as well as the breadcrumb hero. Whatever the artboard does, at
   704px the tail reached 605px while the title sits at 376px - the whole
   heading rendered inside the green. Stopping above it was asked for
   explicitly, so the Figma-parity reading is dropped here in favour of it.

   Derived, not fixed: hero-banner.svg is fully transparent at 86% of its own
   box, so scaling to 1/0.86006 = 1.16271x the distance to cover lands the last
   trace of teal on the far edge of it. The distance is the hero (--pr-hero-h,
   set on .press-releases-revamp, which this page also carries) plus .prd-head's
   padding-top, less 14px of clearance. Both inputs change at the breakpoints -
   and at DIFFERENT ones, the hero at 1200/768 and the padding at 992 - so a
   single retuned pixel value would be wrong at three widths out of four.

   This override still has to exist: press-releases-revamp.css sizes the band
   for the listing, whose band ends with the breadcrumb because it has no title
   block inside it. */
.prd-revamp {
    --prd-head-pad: 120px;
    background: var(--hr-cream-400) var(--pr-hero-bg) no-repeat top center;
    background-size: 100% calc((var(--pr-hero-h) + var(--prd-head-pad) - 14px) * 1.16271);
}

/* ---------- Title block ---------- */
/* 160px gutters + a 1600px cap, which is the column every other revamp page
   uses (.pr-listing / .pr-listing-inner on the listing right next door) and the
   same span as the header: at 1920 both resolve to 160 -> 1760, so the title's
   left edge lands on the logo's and its right edge on the header actions pill.
   This block was on 24px gutters with a 1400px cap, which floated it ~100px
   inside the header on both sides. */
.prd-head { padding: var(--prd-head-pad) 160px 0; }
.prd-head-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.prd-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
.prd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.prd-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hr-cream-900, #696862);
    white-space: nowrap;
}
.prd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: var(--hr-brown-300);
    white-space: nowrap;
}
.prd-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ---------- Cover image ---------- */
/* Full-bleed to the viewport edges, same as the Blog details page's cover
   (.blgd-cover) - not boxed/inset to the title's content column. */
.prd-cover {
    margin-top: 60px;
}
.prd-cover-inner {
    height: 600px;
    overflow: hidden;
    background: #fff;
}
.prd-cover-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Article body ---------- */
/* 120px, which is Figma's own figure: in node 40001286:69658 the "Article Body
   Column" sits at y=120 inside "Main Content Workspace".

   This was raised to 200px to stop the prose running under .prd-body-motif (the
   teal corner, 176px tall and pinned to this section's top-right), which at
   120px does overlap the first ~56px of the column. But that bought the
   clearance with 80px of dead space on EVERY viewport to fix a collision that,
   measured, does not exist at the width the design is drawn for:

       viewport   1920   1600   1440   1250
       overlap       0     99    179    274   (px of the column's right end)

   At 1920 the column ends at 1556 and the motif starts at ~1620 - 64px clear.
   The collision is purely an artefact of narrower viewports, where the column
   is capped at 1192 and centred while the motif stays 300px pinned to the
   viewport's right edge. So the padding goes back to Figma's 120 and the
   collision is handled where it actually happens, by the float below. */
.prd-body {
    position: relative;
    padding: 120px 24px 80px;
}
.prd-body-inner {
    max-width: 1192px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* Green/blue corner mark at the top-right of the workspace, reusing the same
   generic brand motif as the Blog details page. */
/* Figma node 40004073:55241, exported as body-corner-motif.svg: the teal sweep
   with its two diamonds, drawn as one path at its natural 300.078 x 175.676.

   This page no longer borrows blog-detail/corner-motif.svg. That asset is the
   Blog details page's motif and is still used there, so it is left alone - only
   this rule was repointed. It also had to be clipped to be usable here (a 196x152
   box with overflow:hidden over a 188x235 pseudo-element, cutting 83px off the
   bottom) and mirrored with scaleX(-1); the new asset is drawn at the size and
   orientation it is meant to render at, so the box, the clip and the pseudo-
   element all go with it. */
.prd-body-motif {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 300px;
    height: 176px;
    background: url("../images/press-releases-revamp/body-corner-motif.svg") no-repeat top center / 100% 100%;
    pointer-events: none;
}
/* inset-inline-end already moves it to the other corner in RTL; this mirrors the
   artwork with it, so the sweep still opens toward the page's centre rather than
   pointing off the edge. Same convention as .pr-hero-decor. */
[dir="rtl"] .prd-body-motif { transform: scaleX(-1); }
/* The ornament only fits beside the article column on very wide viewports, so
   it is shown only where it fits rather than the article being pushed down to
   make room for it everywhere (see the note on .prd-body).

   It is 300px pinned to the viewport's right edge while the column is capped at
   1192 and centred, so the column's right edge reaches it as soon as
       (100vw + 1192)/2 > 100vw - 300   ->   100vw < 1824px
   Measured overlap: 0 at 1920, 99 at 1600, 179 at 1440, 274 at 1250.

   Below 1824 it is hidden, which just widens the existing display:none that
   already applies under 1200 - it costs a decorative shape on mid-size screens
   and costs the prose nothing. A float to wrap the text around it is NOT an
   option here: .prd-prose is a flex column, and a float in a flex container is
   ignored while the ::before becomes a flex item - which silently added 56px
   plus the 24px column gap above the first line. */
/* Below 1824 it scales instead of disappearing, so the ornament is present on
   every screen rather than only on a >=1824 monitor.

   The collision it used to be hidden for is HORIZONTAL - a fixed 300px pinned to
   the viewport's right edge, against a prose column capped at 1192 and centred,
   so the column's right end reaches it under 1824. Rather than fight for gutter
   room that does not exist below ~1300, the shape is bounded by HEIGHT instead:
   .prd-body carries 120px of empty top padding, and 204px at this aspect ratio
   is 119.7px tall, so the motif ends just above where the prose begins. It may
   now sit over the column's horizontal band, but never over any text - which is
   what the old display:none was really protecting.

   16vw keeps it proportional on the way down (204 is reached at 1275 and holds
   above that); aspect-ratio carries the asset's own 300x176. */
@media (max-width: 1823.98px) {
    .prd-body-motif {
        width: min(204px, 16vw);
        height: auto;
        aspect-ratio: 300 / 176;
    }
}

/* ---------- Admin-authored story HTML ---------- */
.prd-prose {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-brown-300);
}
.prd-prose > :first-child { margin-top: 0; }
.prd-prose > :last-child { margin-bottom: 0; }
.prd-prose p { margin: 0; }
.prd-prose p:empty { display: none; }
.prd-prose strong,
.prd-prose b { color: var(--hr-brown-900); font-weight: 700; }
.prd-prose a { color: var(--hr-blue-500, #005087); text-decoration: underline; }
.prd-prose h2,
.prd-prose h3,
.prd-prose h4 {
    color: var(--hr-brown-900);
    font-weight: 700;
    margin: 0;
}
.prd-prose h2 { font-size: 40px; line-height: 48px; }
.prd-prose h3 { font-size: 32px; line-height: 40px; }
.prd-prose h4 { font-size: 24px; line-height: 32px; }
.prd-prose ul,
.prd-prose ol { margin: 0; padding-inline-start: 24px; }
.prd-prose li + li { margin-top: 12px; }
.prd-prose img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}
.prd-prose table { width: 100%; border-collapse: collapse; }
.prd-prose td,
.prd-prose th { border: 1px solid rgba(0, 0, 0, .1); padding: 12px; }

/* ---------- Tags / share footer ---------- */
.prd-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.prd-foot-label {
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-300);
    white-space: nowrap;
}
.prd-tags,
.prd-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prd-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .05);
    font-size: 16px;
    line-height: 24px;
    color: #161616;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}
.prd-tag:hover { background: rgba(0, 0, 0, .1); color: #161616; text-decoration: none; }
.prd-share { gap: 8px; }
.prd-share .prd-foot-label { margin-inline-end: 4px; }
.prd-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .05);
    color: #161616;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.prd-share-link:hover { background: var(--hr-green-500); color: var(--hr-cream-50); text-decoration: none; }

/* ---------- Divider closing the article ---------- */
/* Diamond clusters at each end of a full-bleed rule, as on the Blog page. */
.prd-divider {
    position: relative;
    display: block;
    height: 28px;
}
.prd-divider-line {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background: rgba(243, 217, 176, .6);
}
/* The clusters sit at the two ends of this box, so it has to be the same
   logo-to-menubar column as .prd-head and .prd-related - otherwise the diamonds
   float inside the title above them. Same "column + 2x gutter" idiom this rule
   already used (it was 1400 + 2x24 = 1448, pinned to the old 1400px column):
   1600 + 2x160 = 1920, which below a 1920 viewport is just 100% wide and so
   resolves to exactly the gutters the other two sections use.

   .prd-divider-line is left alone - it is absolutely positioned against
   .prd-divider, not this box, so the rule stays full-bleed behind the clusters
   as the design has it. */
.prd-divider-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding: 0 160px;
}
.prd-divider-cluster { display: flex; flex-shrink: 0; }
/* Figma (node 40001286:69697): solid yellow/yellow-100 (#f3d9b0), full
   opacity - not the washed-out yellow-400-at-50% used before (same fix
   already applied to the Blog details page's matching divider). */
.prd-divider-cluster .pr-diamond {
    width: 20px;
    height: 20px;
    margin-inline: 4px;
    background: #f3d9b0;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ---------- Related articles ---------- */
.prd-related {
    position: relative;
    /* Same logo-to-menubar column as .prd-head above. */
    padding: 120px 160px;
    overflow: hidden;
}
/* Oversized geometric watermark bleeding off the section's bottom-left,
   reusing the same generic brand motif as the Blog details page. */
/* The mark's height tracks its width instead of being pinned at 687px.

   The asset is 2219.28x687.421 - aspect 3.228 - and `background-size: 100% 100%`
   stretches it to whatever box it is given. With width fluid (115.6% of the
   section) and height fixed at 687, the box only held that aspect at about the
   1920 it was drawn for: at 390px it came out 451x687, i.e. the artwork
   stretched 4.9x vertically, which is what read as a grey blob behind the cards.

   35.81vw is the same thing expressed proportionally - 1.156 x 100vw / 3.228 -
   so the box keeps the asset's own ratio at every width and resolves to 685px at
   1920, unchanged. bottom follows the same scale (-211/687 = -30.7% of the
   mark's height = -11vw), so the overhang stays the same share of the shape
   rather than swallowing it whole once it is shorter. */
.prd-related-motif {
    position: absolute;
    /* Floored at 975x302 - the asset's own 3.2284 ratio - so the flourish stays
       WIDE on a phone and is cropped by .prd-related's overflow:hidden, the way
       a cover background behaves. Fitting the whole 3.23-ratio artwork into a
       390px viewport instead made it 451x140: correct in proportion, but so
       small it read as a smudge rather than the pattern.

       Both floors cross the design values at the same viewport (~843px), since
       975/302 is the asset ratio - so the size is continuous, never jumps at a
       breakpoint, and above 843 it scales exactly as designed (2213x688 at
       1920, unchanged).

       bottom keeps the design's overhang as a share of the mark's own height
       (-211/687 = -30.7%), floored alongside it at -93px, so the same portion
       hangs below the section at every width. */
    bottom: min(-11vw, -93px);
    inset-inline-start: -7.82%;
    width: max(115.6%, 975px);
    height: max(35.81vw, 302px);
    background: url("../images/blog-detail/related-bg-motif.svg") no-repeat center / 100% 100%;
    pointer-events: none;
}
/* The -7.82% start is kept at EVERY width, including where the mark is cropped.
   All of the asset's ink lives in its left 44% - the big angular form runs x=0
   to 976 of 2219, and the small diamond 851 to 976 - and the right 56% is empty.
   Centring the crop on a phone therefore framed x=30%..70%, i.e. almost nothing
   but the empty half, which is why the pattern looked absent there. Anchored
   left, a 390px viewport frames x=3%..43% and so keeps the shape itself. */
[dir="rtl"] .prd-related-motif { transform: scaleX(-1); }
.prd-related-inner {
    position: relative;
    max-width: 1600px;
    margin-inline: auto;
}
.prd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.prd-related-head h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
.prd-view-all { padding: 16px 24px; font-size: 16px; }
.prd-related-list { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .prd-title { font-size: 44px; line-height: 54px; }
    .prd-cover-inner { height: 420px; }
    .prd-body { padding-top: 80px; }
    /* Was display:none. The top padding halves to 80 here, so the motif's cap
       comes down with it - 136px is 79.8px tall, still landing just above the
       prose. Kept visible rather than dropped, so tablets and phones get the
       ornament too. */
    .prd-body-motif { width: min(136px, 16vw); }
    .prd-related { padding: 80px 40px; }
    .prd-divider-inner { padding-inline: 40px; }
    /* Steps down with .pr-hero/.pr-listing on the listing page, so the two
       pages keep the same gutters at every breakpoint. */
    .prd-head { padding-inline: 40px; }
}
@media (max-width: 991.98px) {
    /* On .prd-revamp, not .prd-head: the band above is sized off this too. */
    .prd-revamp { --prd-head-pad: 80px; }
    .prd-title { font-size: 34px; line-height: 44px; }
    .prd-cover { margin-top: 40px; }
    .prd-cover-inner { height: 300px; }
    .prd-prose { font-size: 20px; line-height: 28px; gap: 20px; }
    .prd-body-inner { gap: 32px; }
    .prd-related-head h2 { font-size: 30px; line-height: 40px; }
}
@media (max-width: 767.98px) {
    .prd-cover-inner { height: 240px; }
    .prd-foot { flex-direction: column; align-items: flex-start; }
    .prd-head { padding-inline: 16px; }
    .prd-related { padding-inline: 16px; }
    .prd-divider-inner { padding-inline: 16px; }
    /* .prd-related-motif is deliberately NOT hidden here.

       It was briefly dropped at this breakpoint, on the reading that even at
       the correct ratio it is only a faint wash behind the cards on a phone.
       That left the pattern missing from the responsive layout, which is not
       what the design wants - the flourish belongs on every width. It now just
       scales: the base rule sizes it at 35.81vw tall against a 115.6% width,
       which holds the asset's own 3.228 ratio all the way down (about 451x140
       on a 390px screen) instead of the 451x687 stretch that made it read as a
       grey blob in the first place. */
}