/*
CHANGE LOG
File: static/css/recruiting-pictures.css
Purpose: https://prohrhq.com/recruiting-pictures (templates/recruiting-pictures.html): picture-led page. Each graphic fills
         the content width (up to 1360 px), a thin section strip sits under the site header, and the explanations stay
         collapsed under each picture.
How it works: the strip is sticky just under the fixed header on wide screens and scrolls away on phones so it never
         covers a picture. Anchored sections stop below the header and strip (scroll-margin-top). The closing form uses
         the site's .fc-form styles (prohrhq_public.css). "Open the picture full size" shows on phones only.
Version History:
2026-11-07 v3.3 - Desktop column 960 -> 1,160 px, the setting --rpx-column (Michael: "the image is too small, so we
                  need something in the middle"). Shared by Recruiting in pictures, How we manage driver advertising and
                  the driver job explainers. Phones unchanged.
2026-11-06 v3.2 - .rpx-proof: the client-quotes block as a white card on the pale page, same border as the picture cards.
2026-11-06 v3.1 - Also styles the driver job explainers (templates/drive-explainer.html), reused as-is; .rpx-apply for
                  the closing Apply link (Michael).
2026-11-06 v3.0 - Calmer on desktop: pictures in white cards about 960 px wide on a pale blue-gray page (#F2F5F8),
                  subtle border #D9E3EA; phones keep the pictures near full width with 12 px pastel gutters. Michael:
                  "It's too loud ... the background of the picture and the background of the screen match, white on
                  white"; "okay to be loud on the mobile version ... but the background should show". Work orders
                  2026-11-06-0815 and the mobile amendment. --rpx-chapter-gap stays at Michael's 144 px.
2026-11-06 v2.4 - Space before the next picture tripled, 48 -> 144 px, as the setting --rpx-chapter-gap (Michael).
2026-11-06 v2.3 - Each picture and its explanation read as one chapter: the bar under the picture is full width, pale
                  blue (#E8F3FA, navy text #163457, border #C5DDEB), 52 px tall, with a chevron that turns when open and
                  rounded bottom corners; the opened text sits on white inside the same box; 48 px before the next
                  picture. Michael: poor visual segmentation, "a series of distinct visual chapters".
2026-11-06 v2.2 - First picture closer to the strip: wider one-line introduction, smaller first section heading.
2026-11-06 v2.1 - Live check found the pictures held to 1,004 px by the site's 1,100 px content column and the strip
                  pushed down by the breadcrumb row: the page and strip now break out of that column (up to 1,360 px),
                  the breadcrumb row is hidden here, and the strip no longer adds its own top margin.
2026-11-06 v2.0 - Full width, no side column, section strip, collapsed Read more under every picture (Michael: graphics
                  about 1,200-1,400 px wide; "the picture itself should be the dominant element").
2026-11-06 v1.0 - Created (one page with a side widget).
*/
.rpx-strip{ position:sticky; top:var(--navbar-h, 64px); z-index:900; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:.4rem 1.6rem; padding:.45rem 1rem; background:#f4f6fa;
  border-bottom:1px solid var(--color-rule,#d9dee8); font-size:1rem; }
.rpx-strip a{ color:var(--color-navy-deep,#14213d); font-weight:700; text-decoration:none; padding:.3rem .2rem; }
.rpx-strip a:hover, .rpx-strip a:focus-visible{ text-decoration:underline; }
.rpx-strip .rpx-strip-cta{ background:var(--color-green,#3F6657); color:#fff; border-radius:6px; padding:.35rem .9rem; }
.rpx-strip .rpx-strip-cta:hover, .rpx-strip .rpx-strip-cta:focus-visible{ text-decoration:none; filter:brightness(1.1); }
.ph-breadcrumbs{ display:none; }
/* Pale blue-gray page so each white picture card stands apart (this stylesheet loads on this page only). */
body{ background:#F2F5F8; }
/* Desktop: a calm column about 960 px wide. Phones: see the media rule at the end. */
/* Setting: the desktop picture column (Michael 2026-11-07: 1,360 px was too big, 960 px too small; 1,160 px between).
   Wider than the site's 1,052 px content column, so it steps out of it evenly on both sides; never wider than the
   window less 24 px a side. */
:root{ --rpx-column:1160px; }
.rpx-strip, .rpx-page{ width:min(var(--rpx-column), calc(100vw - 48px));
  margin-left:calc(50% - min(var(--rpx-column), calc(100vw - 48px)) / 2); margin-right:0; }
.rpx-strip{ background:#fff; border:1px solid #D9E3EA; border-top:0; border-radius:0 0 8px 8px; }
.rpx-page{ padding:12px 0 96px; }
.rpx-intro{ max-width:1200px; margin:0 auto 6px; text-align:center; }
.rpx-intro h1{ margin:0 0 .2rem; font-size:1.45rem; line-height:1.25; color:var(--color-navy-deep,#14213d); }
.rpx-intro p{ margin:0; font-size:1.02rem; line-height:1.5; }
.rpx-hint{ color:var(--color-text-mute,#556); }
.rpx-series{ scroll-margin-top:calc(var(--navbar-h, 64px) + 52px); }
.rpx-series > h2{ margin:1.6rem 0 .8rem; padding-top:.8rem; border-top:1px solid #D9E3EA; text-align:center;
  font-size:1.5rem; color:var(--color-navy-deep,#14213d); }
/* Setting: space between one picture's explanation bar and the next picture (Michael 2026-11-06: triple, 48 -> 144 px). */
:root{ --rpx-chapter-gap:144px; }
.rpx-item{ margin:0 0 var(--rpx-chapter-gap); scroll-margin-top:calc(var(--navbar-h, 64px) + 52px);
  background:#fff; border:1px solid #D9E3EA; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(20,40,70,.05); }
.rpx-item img{ display:block; width:100%; height:auto; aspect-ratio:1672/941; object-fit:contain; }
.rpx-full{ display:none; }
.rpx-more{ margin:0; border-top:1px solid #D9E3EA; background:#fff; }
.rpx-more > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:52px; padding:14px 20px; background:#E8F3FA; color:#163457; font-size:1.1rem; font-weight:600; }
.rpx-more > summary::-webkit-details-marker{ display:none; }
.rpx-more > summary::after{ content:""; flex:none; width:10px; height:10px; margin-right:4px; border-right:2.5px solid #163457;
  border-bottom:2.5px solid #163457; transform:rotate(45deg); transition:transform .15s; }
.rpx-more[open] > summary::after{ transform:rotate(-135deg); }
.rpx-more > summary:hover{ background:#DCEDF8; }
.rpx-more > summary:focus-visible{ outline:3px solid #163457; outline-offset:-3px; }
.rpx-more[open] > summary{ border-bottom:1px solid #D9E3EA; }
.rpx-more p{ max-width:760px; margin:0 auto; padding:14px 20px 0; font-size:1.05rem; line-height:1.6; color:#1d2a3a; }
.rpx-more p:last-child{ padding-bottom:18px; }
.rpx-close{ max-width:760px; margin:2rem auto 0; padding:1.2rem 1.4rem 1.4rem; background:#fff; border:1px solid #D9E3EA; border-radius:10px;
  scroll-margin-top:calc(var(--navbar-h, 64px) + 52px); }
.rpx-close h2{ margin:0 0 .4rem; font-size:1.35rem; color:var(--color-navy-deep,#14213d); }
.rpx-close > p{ font-size:1.05rem; line-height:1.55; }
@media (max-width: 700px){
  .rpx-strip, .rpx-page{ width:calc(100vw - 24px); margin-left:calc(50% - 50vw + 12px); margin-right:0; }
  .rpx-strip{ position:static; gap:.3rem .9rem; font-size:.95rem; }
  .rpx-page{ padding:10px 0 80px; }
  .rpx-intro h1{ font-size:1.3rem; }
  .rpx-full{ display:inline-block; margin:.6rem 14px .8rem; font-size:.95rem; }
  .rpx-more > summary{ font-size:1.02rem; padding:12px 14px; }
  .rpx-more p{ padding:12px 14px 0; }
}
.rpx-series:first-of-type > h2{ margin:.5rem 0 .5rem; padding-top:0; border-top:0; font-size:1.15rem; }
.rpx-close-links{ font-size:1.05rem; }
.rpx-apply{ font-weight:700; }
.rpx-proof .rp-proof{ background:#fff; border:1px solid #D9E3EA; border-radius:10px; box-shadow:0 1px 3px rgba(20,40,70,.05);
  margin:0 0 2rem; }