/* ==========================================================================
   Cardiff — single role page
   Shared by every position/vacancy page under DESIGN/cardiff/.

   Extracted from cardiff-senior-full-stack-engineer.html, where all of this
   lived as 165 inline style attributes across 57 distinct declaration sets.
   Grouping them collapsed 165 attributes into these 57 classes; the three most
   used carried 19 elements each, all of them parts of one bullet list.

   Every colour and every spacing step is a var(), so those cannot drift from the
   design system. Load it after the tokens.

   Raw px does survive in four places, all of it carried over verbatim from the
   inline styles rather than chosen here: 1px hairline borders, the bullet dot
   diameters (7px and 4px, plus the 8px margin that lines a dot up with its first
   line of text), the pill's own 13px/6px/8px type and padding, and the card
   geometry on .rp-head. Anything below that reads as a bare number is one of
   those — there is no third category to hunt for.

   Site header and footer are NOT here. Those come from careers.css via
   tools/add-chrome-to-page.js, so one change updates every page that shares them.
   ========================================================================== */

/* ── Bridge tokens ──────────────────────────────────────────────────────────
   This file was written against the DESIGN/ token set, which named its scales
   2xl/3xl/shadow-2. The repo's design system uses semantic names and defines
   none of these seven. Without them the browser drops the whole declaration:
   .rp-head and .rp-panel come out with square corners, the panels lose their
   shadow, the bullets turn square, and .rp-lede inherits its parent's size.

   THESE ARE NO LONGER PROVISIONAL. On 2026-08-26 business-line-of-credit.css
   arrived, another DESIGN delivery, carrying its full :root — and all seven
   were in it. These are DESIGN's real values, not our reading of them.

   Of the first provisional reading (2026-08-24) five of seven were right:
   type-h6 and the two family equivalences. The radii left on 2026-09-09: the
   system ladder already carries xl, 2xl and full, and the local ones collided
   with it — the local 2xl was 16px where the system's is 24. The two we got
   wrong are the ones that changed on 2026-08-26:

     --leading-h6   was 28px, DESIGN says 24px
                    affects .rp-lede and .rp-field__v across all 11 postings
     --shadow-2     pointed at --shadow-float, DESIGN carries its own shadow
                    affects .rp-panel

   --radius-circle moves from --radius-pill (999px) to 50%, which is what
   DESIGN says; on a square the effect is identical, it changes for fidelity.
   --font-display still points at --font-sans: DESIGN defines it as
   var(--font-ui), which is the same stack with Inter at the front.

   They live on .rp-page and not in :root on purpose: they are names from the
   DESIGN set and the repo's design system does not have them. If they are ever
   adopted officially, their place is assets/css/tokens/.
   ------------------------------------------------------------------------- */
.rp-page{
  --font-display: var(--font-sans);
}

/* ── Layout ── 
   The page is one column of head plus a wrapping two-column row. The row
   wraps rather than using a media query: below roughly 900px the aside drops
   under the main column on its own, because 560 + 320 + the gap stops fitting. */
/* The site header (newnavbar) is position:fixed and --site-nav-h tall. Without
   this padding-top the .rp-head starts at y=48px and its first 32px sit behind
   the nav. Same token .page-nav uses in careers.css. */
.rp-page{background:var(--surface-page);padding:var(--site-nav-h) var(--space-6) var(--space-24)}
.rp-head{max-width:1440px;margin:var(--space-12) auto;padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-6); background:var(--surface-card); border-radius: var(--radius-2xl);}
.rp-row{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:flex-start}
.rp-main{flex:1 1 560px;display:flex;flex-direction:column;gap:var(--space-16);min-width:0}
/* A top of 96px and not 24: the site navbar is position:fixed and 80 tall
   (--site-nav-h), so a sticky any higher parks underneath it and loses its
   first pixels. 96 = the navbar's 80 plus 16 of air. */
.rp-aside{flex:1 1 320px;max-width:100%;position:sticky;top:var(--space-24);display:flex;flex-direction:column;gap:var(--space-4)}

/* ── Head block ── 
   Eyebrow, title, lede, pills, then the call to action. Not a <header>: the
   site nav holds the banner landmark, and a page gets one. */
.rp-eyebrow{display:flex;align-items:center;gap:var(--space-3);font-size:var(--type-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:700;color:var(--c-700)}
.rp-eyebrow__dot{width:7px;height:7px;background:var(--brand);border-radius:var(--radius-full);flex-shrink:0}
.rp-title{margin:0;font-family:var(--font-display);font-size:var(--type-h1);line-height:var(--leading-h1);letter-spacing:var(--tracking-h1);font-weight:var(--weight-heavy);color:var(--text-heading)}
.rp-lede{margin:0;font-size:var(--type-h6);line-height:var(--leading-h6);font-weight:var(--weight-medium);color:var(--c-900);text-wrap:pretty}
.rp-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.rp-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--type-xs);font-weight:500;line-height:1.3;background:var(--brand-soft);border:1px solid var(--brand-soft-line);color:var(--c-700)}
.rp-pill--plain{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--type-xs);font-weight:500;line-height:1.3;background:var(--white);border:1px solid var(--brand-soft-line);color:var(--c-700)}
.rp-inline-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-2)}
.rp-inline-row--wide{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-2)}
.rp-note{margin-top:var(--space-2);font-size:var(--type-sm);line-height:var(--leading-sm);color:var(--text-secondary)}

/* ── Sections ── */
.rp-section{display:flex;flex-direction:column;gap:var(--space-6)}
.rp-section--ruled{display:flex;flex-direction:column;gap:var(--space-6);border-top:1px solid var(--border-default);padding-top:var(--space-12)}
.rp-h2{margin:0;font-size:var(--type-h4);line-height:var(--leading-h4);letter-spacing:var(--tracking-tight);font-weight:var(--weight-bold);color:var(--text-heading)}

/* ── Prose ── 
   Measures are capped in ch, which is what keeps a line readable regardless of
   the viewport. 68ch for body, 62 where the column is narrower, 60 for the lede. */
.rp-p{margin:0;max-width:68ch;font-size:var(--type-base);line-height:var(--leading-base);color:var(--text-body);text-wrap:pretty}
.rp-p--lead{margin:0;max-width:68ch;font-size:var(--type-base);line-height:var(--leading-base);color:var(--text-heading);font-weight:var(--weight-medium);text-wrap:pretty}
.rp-p--narrow{margin:0;max-width:62ch;font-size:var(--type-base);line-height:var(--leading-base);color:var(--text-body)}
.rp-p--narrow-pretty{margin:0;font-size:var(--type-base);line-height:var(--leading-base);color:var(--text-body);text-wrap:pretty}
.rp-p--accent{margin:0;font-size:var(--type-base);line-height:var(--leading-base);font-weight:var(--weight-bold);color:var(--c-700)}
.rp-strong{font-size:var(--type-base);line-height:var(--leading-base);color:var(--text-heading);font-weight:var(--weight-medium)}

/* ── Lists ── 
   A bullet list is three parts: the row, the dot, and the text. The dot carries
   margin-top rather than align-items:center, so it lines up with the first line
   of text instead of drifting to the middle of a wrapped paragraph. */
.rp-list{display:flex;flex-direction:column;gap:var(--space-5);max-width:68ch}
.rp-list__item{display:flex;gap:var(--space-4);align-items:flex-start}
/* Divider between items. It uses the adjacent-sibling selector (+) so it never
   appears above the first or below the last: it separates, it does not enclose.
   The padding-top repeats .rp-list's gap so the line sits centred in the space
   (20px above from the gap, 20px below from the padding) instead of hugging the
   text that follows. Same weight and colour as .rp-rule. */
.rp-list__item + .rp-list__item{border-top:1px solid var(--border-default);padding-top:var(--space-5)}
.rp-list__dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--brand);flex-shrink:0;margin-top:var(--space-2)}
.rp-list__text{font-size:var(--type-base);line-height:var(--leading-base);color:var(--text-body)}
.rp-dot-sm{width:4px;height:4px;border-radius:var(--radius-full);background:var(--brand);flex-shrink:0}
.rp-step{display:flex;gap:var(--space-3);align-items:baseline;font-size:var(--type-sm);line-height:var(--leading-sm);color:var(--ink-2)}
.rp-step__n{font-size:var(--type-sm);font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}

/* ── Grids ── 
   auto-fit with a minmax floor, so the column count follows the space instead
   of a breakpoint. The three floors are the three densities the page needs. */
.rp-grid--260{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:var(--space-3)}
.rp-grid--240{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:var(--space-4)}
.rp-grid--200{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--space-4);margin-top:var(--space-2)}

/* ── Surfaces ── */
.rp-panel{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-card-sm);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6)}
.rp-panel--raised{background:var(--c-100);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)}
.rp-panel--brand{background:var(--brand-soft);border:1px solid var(--brand-soft-line);border-radius:var(--radius-xl);padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-4)}
.rp-tile{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.rp-tile--flat{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5)}
.rp-chip{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);font-size:var(--type-sm);line-height:var(--leading-sm);color:var(--ink-2)}
.rp-rule{height:1px;background:var(--border-default)}

/* ── Aside data ── 
   Label, then either a stacked field or a key/value row. Figures use
   tabular-nums so digits line up down the column. */
.rp-label{font-size:var(--type-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:700;color:var(--mute)}
.rp-label--brand{font-size:var(--type-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:700;color:var(--c-700)}
.rp-field{display:flex;flex-direction:column;gap:var(--space-1)}
.rp-field__k{font-size:var(--type-sm);color:var(--text-secondary)}
.rp-field__v{font-size:var(--type-h6);line-height:var(--leading-h6);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);color:var(--text-heading);font-variant-numeric:tabular-nums}
.rp-figure{font-size:var(--type-h5);line-height:var(--leading-h5);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-tight);color:var(--text-heading);font-variant-numeric:tabular-nums}
.rp-kv{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--type-sm);line-height:var(--leading-sm)}
.rp-kv__k{color:var(--text-secondary)}
.rp-kv__v{color:var(--text-heading);font-weight:500;text-align:right}
.rp-meta{font-size:var(--type-sm);line-height:var(--leading-sm);color:var(--text-secondary)}

/* ── Utilities ── 
   These were utilities inline and stay utilities here. Naming them anything
   more semantic would be a lie about what they do. */
.rp-stack-3{display:flex;flex-direction:column;gap:var(--space-3)}
.rp-stack-5{display:flex;flex-direction:column;gap:var(--space-5)}
/* ── Boton de aplicar ───────────────────────────────────────────────────────
   Same styling as the homepage "quick start" CTA
   (_layouts/home.html: rounded-full bg-cardiff-600 text-white text-[13.5px]
   font-bold py-3): 13.5px / 700 / 12px 20px / radio completo.

   El .btn base de careers.css no trae fondo, tamano de letra ni padding: solo
   inherits them, so without this the buttons come out with no body. It is
   scoped to .rp-page on purpose, so the 5 buttons on the careers landing are
   not restyled — they share the same .btn class from careers.css.

   The homepage's bg-cardiff-600 is rgb(37 99 235), the same value as --brand
   (--c-600: #2563EB), so the token is used rather than repeating the hex. */
.rp-page .btn{
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--text-on-brand);
  border-color: transparent;
}
.rp-page .btn:hover{background: var(--brand-hover); color: var(--text-on-brand)}

.rp-btn-full{width:100%}
.rp-plain-link{text-decoration:none}
.rp-mute{color:var(--mute)}
.rp-accent{color:var(--accent-word)}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── 640: phone ──
   .rp-head is a card now, and 64px of padding on a 390px screen leaves the
   headline about 260px to live in. 24px is written as --space-6 rather than the
   literal because they are the same value and this file holds no raw numbers —
   that is what lets it follow the token layer without a second thought.

   Worth knowing it stacks: .rp-page already insets 24px horizontally, so the
   copy sits 48px from the viewport edge. That reads as a card inset inside a
   padded page, which is the intent, but it is the number to revisit if the
   measure ever feels cramped. */
@media (max-width:640px){
  .rp-head{padding:var(--space-6)}
}