/* Leadership + National Structure.
 *
 * These rules exist in the WordPress reference (plu-theme/style.css:1668-1677)
 * but were dropped from the port. Without them .plu-roles-layout and
 * .plu-groups-layout stop being two-column grids, the role chips lose their
 * flex row and CSS bullet, and each unstyled chip stretched to ~1312px square,
 * taking the page from 3,305px to 16,737px tall.
 *
 * Loaded after plu.css via {% block page_css %}, so the two mobile overrides
 * further down have to be repeated here: plu.css declares them at line 1200
 * (<=1020px) and 1227 (<=520px), which now come BEFORE these base rules in the
 * cascade and would otherwise lose to them and leave the grids two-up on a
 * phone. Media queries add no specificity - only order decides.
 */

.plu-roles-layout,
.plu-groups-layout { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 20px; }
.plu-roles-intro { padding: 28px; color: #fff; background: #050505; border-radius: 4px; }
.plu-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.plu-role-grid article { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 4px; }
.plu-role-grid article > span { width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid var(--plu-red); border-radius: 50%; position: relative; }
.plu-role-grid article > span::after { content: ''; position: absolute; inset: 4px; background: var(--plu-red); border-radius: 50%; }
.plu-role-grid b { font-size: 14px; line-height: 1.25; font-weight: 900; }

/* Repeated from plu.css:1200 - see the note above. */
@media (max-width: 1020px) {
  .plu-roles-layout,
  .plu-groups-layout { grid-template-columns: 1fr; }
}

/* Repeated from plu.css:1227 - see the note above. */
@media (max-width: 520px) {
  .plu-role-grid { grid-template-columns: 1fr; }
}

/* Repeated from plu.css:1234. .plu-roles-intro moved into this file, which
 * loads later, so without this the base 28px beat the reference's 22px on a
 * phone. */
@media (max-width: 520px) {
  .plu-roles-intro { padding: 22px; }
}


/* --- Regional Leadership -------------------------------------------------
 *
 * Ported from the reference at plu-theme/style.css:1731-1747. Only
 * `.plu-regional-leadership-content .plu-section-title-row` was carried over
 * in the original port; the other sixteen rules are the design.
 *
 * The `.dashicons` span is deliberately empty. The reference names a
 * WordPress admin icon font that is never enqueued on the front end, so the
 * glyph does not render there either - the rule only reserves a 52px box,
 * which collapses to nothing below 620px.
 */
.plu-regional-leadership-page { width:100%; background:#fff; color:#050505; }
.plu-regional-leadership-content { width:100%; max-width:1376px; margin:0 auto; padding:48px 32px 90px; }
.plu-regional-leader-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.plu-regional-leader-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid rgba(0,0,0,.14); border-radius:6px; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.04); }
.plu-regional-leader-card__photo { height:330px; overflow:hidden; padding:7px; border-bottom:4px solid var(--plu-yellow); background:#f4f4f1; }
.plu-regional-leader-card__photo img { width:100%; height:100%; object-fit:cover; object-position:var(--plu-leader-focus-x,50%) var(--plu-leader-focus-y,25%); }
.plu-regional-leader-card__content { flex:1; padding:20px; }
.plu-regional-leader-card__content .plu-eyebrow { margin:0 0 10px; color:#d82020; }
.plu-regional-leader-card h3 { margin:0 0 8px; font-size:21px; line-height:1.2; font-weight:900; }
.plu-regional-leader-card strong { display:block; font-size:15px; line-height:1.45; font-weight:900; }
.plu-regional-leadership-empty { display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; align-items:start; padding:34px; border-left:5px solid var(--plu-yellow); background:#f4f4f1; }
.plu-regional-leadership-empty .dashicons { width:52px; height:52px; font-size:52px; color:#050505; }
.plu-regional-leadership-empty h2 { margin:0 0 8px; font-size:26px; }
.plu-regional-leadership-empty p { margin:0; line-height:1.6; }
@media(max-width:980px){.plu-regional-leader-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plu-regional-leader-card__photo{height:400px}}
@media(max-width:620px){.plu-regional-leadership-content{padding:34px 16px 64px}.plu-regional-leader-grid{grid-template-columns:1fr}.plu-regional-leader-card__photo{height:320px}.plu-regional-leadership-empty{grid-template-columns:1fr;padding:24px}.plu-regional-leadership-empty .dashicons{display:none}}