/*
CHANGE LOG
File: static/css/recruiting-advertising.css
Purpose: https://prohrhq.com/recruiting-advertising (templates/recruiting-advertising.html). Only the pieces the
         Recruiting in pictures layout does not have; everything else comes from static/css/recruiting-pictures.css.
How it works: .rma-cap is the visible title and caption under each picture (this page's art has no words in it).
         .rma-proof is the grey panel of real Indeed screens; screens show at their own size up to the card width
         (the picture rule in recruiting-pictures.css forces 16:9, so it is undone here). Each screen links to its full-size image. .rma-costs is the three-costs table; on phones each
         row stacks.
Version History:
  2026-11-07 v5.1 - .rma-tours: live tour buttons (open in a new tab), shared with the platform page.
  2026-11-07 v5.0 - Two picture shapes (rma-art-1200 / rma-art-1448); gallery button and thumbnails.
  2026-11-07 v4.0 - .rma-art sized for the 1200x660 teaching diagrams; .rma-split removed (now a diagram).
  2026-11-07 v3.0 - .rma-split: the 75/25 advertising budget bar (site accent blue, warm yellow).
  2026-11-07 v2.0 - .rma-art: the rebuilt page's 4:3 pictures keep their own shape.
  2026-11-07 v1.0 - Created (managed advertising page, Michael).
*/
.rpx-item img.rma-art-1200{ aspect-ratio:1200/660; }   /* teaching diagrams */
.rpx-item img.rma-art-1448{ aspect-ratio:1448/1086; }  /* illustrations */
.rma-gallery{ max-width:820px; margin:0 auto 16px; padding:0 22px; text-align:center; }
.rma-gallery-btn{ font:inherit; font-weight:700; font-size:1.05rem; padding:.7rem 1.4rem; border:0; border-radius:8px; background:var(--color-green,#3F6657); color:#fff; cursor:pointer; }
.rma-gallery-btn:focus-visible{ outline:3px solid #163457; outline-offset:2px; }
.rma-thumbs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:14px; text-align:left; }
.rma-thumb{ margin:0; }
.rpx-item .rma-thumb img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border:1px solid #D9E3EA; border-radius:6px; cursor:zoom-in; }
.rma-thumb figcaption{ font-size:.88rem; margin-top:.3rem; color:var(--color-text-mute,#4a5872); }
.rma-cap{ max-width:820px; margin:0 auto; padding:18px 22px 6px; }
.rma-cap h2{ margin:0 0 .35rem; font-size:1.35rem; line-height:1.25; color:var(--color-navy-deep,#14213d); }
.rma-cap p{ margin:0 0 .6rem; font-size:1.08rem; line-height:1.55; }
.rma-proof{ margin:10px 18px 18px; padding:12px 14px 6px; background:#F2F5F8; border:1px solid #D9E3EA; border-radius:8px; }
.rma-proof-tag{ margin:0 0 .2rem; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-mute,#4a5872); }
.rma-tap{ margin:0 0 .5rem; font-size:.85rem; color:var(--color-text-mute,#4a5872); }
.rma-shots{ display:flex; flex-direction:column; gap:12px; }
.rma-shot{ margin:0 0 6px; }
a.rma-open{ display:block; }
.rpx-item .rma-shot img{ display:block; width:auto; max-width:100%; height:auto; aspect-ratio:auto; object-fit:initial;
  margin:0 auto; background:#fff; border:1px solid #D9E3EA; border-radius:6px; cursor:zoom-in; }
a.rma-open:focus-visible{ outline:3px solid #163457; outline-offset:2px; }
.rma-shot figcaption{ margin:.4rem 0 .3rem; font-size:.95rem; color:var(--color-text,#2b2f33); }
.rma-note{ margin:.2rem 0 .6rem; font-size:.9rem; color:var(--color-text-mute,#4a5872); }
.rma-tablewrap{ overflow-x:auto; margin:6px 18px 18px; }
.rma-costs{ width:100%; border-collapse:collapse; font-size:1rem; }
.rma-costs th, .rma-costs td{ text-align:left; vertical-align:top; padding:.6rem .7rem; border-bottom:1px solid var(--color-rule,#d9dee8); }
.rma-costs thead th{ background:#E8F3FA; color:#163457; }
.rma-costs tbody th{ color:var(--color-navy-deep,#14213d); white-space:nowrap; }
.rma-tours{ list-style:none; max-width:820px; margin:4px auto 14px; padding:0 22px; }
.rma-tours li{ margin:.35rem 0; }
.rma-tours a{ display:inline-block; font-weight:700; padding:.45rem .9rem; border-radius:8px; background:var(--color-green,#3F6657); color:#fff; text-decoration:none; }
.rma-tours a:hover{ filter:brightness(1.08); }
.rma-tours a:focus-visible{ outline:3px solid #163457; outline-offset:2px; }
.rma-tour-what{ display:inline-block; margin-left:.5rem; color:var(--color-text-mute,#4a5872); }
.rma-tours-close{ padding:0; }
@media (max-width: 700px){
  .rma-tours{ padding:0 10px; }
  .rma-tour-what{ display:block; margin:.25rem 0 0; }
    .rma-cap{ padding:14px 14px 4px; }
  .rma-cap h2{ font-size:1.2rem; }
  .rma-proof, .rma-tablewrap{ margin:8px 10px 14px; }
  .rma-costs thead{ display:none; }
  .rma-costs tr{ display:block; padding:.5rem 0; border-bottom:1px solid var(--color-rule,#d9dee8); }
  .rma-costs th, .rma-costs td{ display:block; border:0; padding:.15rem .4rem; }
}