/* =====================================================================
   PIRT Theme — Skin layer (SPREP Pacific palette)
   Ported from C10-prototypes/prototype-2/common/skin.css.
   Loaded AFTER css/styles.css. Activated by body.skin class
   (applied in pirt_theme.theme:pirt_theme_preprocess_html). Per ADR-002.
   ===================================================================== */

:root {
  /* SPREP palette */
  --sp-primary:#018081; --sp-primary-d:#015e5f;
  --sp-secondary:#0054A4; --sp-secondary-d:#002242;
  --sp-peach:#EEB092; --sp-rose:#B5538E; --sp-purple:#8B5CD7;
  --sp-mint:#5BC2A9; --sp-red:#CE3836; --sp-amber:#F59E0B;
  --sp-bg:#fafbfb; --sp-surface:#fff;
  --sp-text:#002242; --sp-muted:#606060;
  --sp-line:#E6E9EB; --sp-line-2:#D8DCE0;
}

/* Remap the glassmorphism vars so any rule using them automatically adopts
   SPREP colour. This alone repaints most of the components that rely on
   variables. Explicit overrides below handle rules that hard-code colours. */
body.skin {
  --blue-deep:var(--sp-secondary-d);
  --blue-dark:var(--sp-secondary);
  --blue-mid:var(--sp-secondary);
  --blue-primary:var(--sp-primary);
  --blue-light:var(--sp-secondary);
  --teal:var(--sp-primary);
  --green:var(--sp-mint);
  --green-light:var(--sp-mint);
  --orange:var(--sp-peach);
  --purple:var(--sp-purple);
  --red:var(--sp-red);
  --white:var(--sp-text);
  --white-90:var(--sp-text);
  --white-70:var(--sp-muted);
  --white-50:var(--sp-muted);
  --white-20:var(--sp-line);
  --white-10:var(--sp-line);
  --white-05:var(--sp-bg);
  --glass-bg:var(--sp-surface);
  --glass-bg-light:var(--sp-surface);
  --glass-border:var(--sp-line);
  --shadow-sm:0 2px 8px rgba(0,34,66,.06);
  --shadow-md:0 8px 24px rgba(0,34,66,.08);
  background:var(--sp-bg);
  color:var(--sp-text);
  font-family:'Lexend','Inter',-apple-system,sans-serif;
  font-weight:400;
}

body.skin h1, body.skin h2, body.skin h3, body.skin h4, body.skin h5, body.skin h6 {
  color:var(--sp-secondary-d);
}

/* ===== PAGE BG — flat light ===== */
body.skin .page-bg {
  background:var(--sp-bg) !important;
  min-height:auto;
}

/* ===== GLASS → solid white surface ===== */
body.skin .glass,
body.skin .glass-light {
  background:var(--sp-surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--sp-line) !important;
  box-shadow:0 2px 10px rgba(0,34,66,.04);
  border-radius:6px;
}

/* ===== NAV — white with SPREP top rainbow bar ===== */
body.skin .nav {
  position:sticky !important;
  top:0;
  height:auto;
  background:var(--sp-surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--sp-line);
  box-shadow:0 1px 0 rgba(0,34,66,.03);
}
body.skin .nav::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--sp-primary) 0%,var(--sp-secondary) 50%,var(--sp-peach) 100%);
  z-index:2;
}
body.skin .nav-inner { height:78px; padding-top:4px; }
body.skin .nav-logo { color:var(--sp-secondary-d); font-weight:700; }
body.skin .nav-logo svg circle,
body.skin .nav-logo svg path { stroke:var(--sp-primary) !important; }
/* Stretch the menu + its wrappers so active underline aligns with nav bottom */
body.skin .nav-menu,
body.skin .nav-menu > div,
body.skin .nav-menu > div > nav { align-self:stretch; }
body.skin .nav-menu a {
  color:var(--sp-text);
  font-weight:500;
  position:relative;
}
/* Top-level links only: stretch to full nav height so underline sits flush */
body.skin .nav-menu > div > nav > a,
body.skin .nav-menu > div > nav > .nav-item > a {
  display:inline-flex;
  align-items:center;
  align-self:stretch;
  padding-top:4px; /* offset for rainbow bar so text is visually centred */
}
/* Submenu links stay stacked */
body.skin .nav-menu .nav-submenu a {
  display:block !important;
  align-self:auto;
  padding-top:8px;
}
/* (Hover/active state moved to proto-default.css to match prototype's
   teal-pill background — see body.skin .nav-menu rules there.) */
body.skin .lang-toggle {
  display:inline-flex; align-items:center;
  background:var(--sp-bg);
  border:1px solid var(--sp-line);
  padding:3px; border-radius:6px;
  gap:2px;
}
body.skin .lang-toggle span,
body.skin .lang-toggle a {
  color:var(--sp-muted); font-weight:600; font-size:12px;
  padding:4px 10px; border-radius:3px;
  text-decoration:none; line-height:1;
}
body.skin .lang-toggle a:hover { color:var(--sp-text); background:var(--sp-line); }
body.skin .lang-toggle span.active { background:var(--sp-primary); color:#fff; cursor:default; }

/* ===== BUTTONS — flat squared SPREP ===== */
body.skin .btn {
  border-radius:6px; font-family:'Lexend',sans-serif; font-weight:600;
  letter-spacing:.2px; transition:all .15s;
}
body.skin .btn-primary { background:var(--sp-primary) !important; color:#fff !important; border:none; }
body.skin .btn-primary:hover { background:var(--sp-primary-d) !important; }
body.skin .btn-outline {
  background:transparent !important; color:var(--sp-secondary) !important;
  border:1.5px solid var(--sp-secondary) !important;
}
body.skin .btn-outline:hover { background:var(--sp-secondary) !important; color:#fff !important; }
body.skin .btn-white { background:#fff; color:var(--sp-secondary-d); }

/* ===== HERO — SPREP navy→teal gradient with peach glow ===== */
body.skin .hero {
  min-height:auto !important;
  padding:90px 0 110px;
  display:block !important;
  text-align:left !important;
  background:linear-gradient(135deg,var(--sp-secondary-d) 0%,var(--sp-secondary) 60%,var(--sp-primary) 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
}
body.skin .hero-bg { display:none !important; }
body.skin .hero::before {
  content:''; position:absolute; top:-50%; right:-15%; width:700px; height:700px;
  background:radial-gradient(circle,rgba(238,176,146,.18) 0%,transparent 60%);
  pointer-events:none;
}
body.skin .hero::after {
  content:''; position:absolute; bottom:-30px; left:0; right:0; height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q300,0 600,30 T1200,30 L1200,60 L0,60 Z' fill='%23fafbfb'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}
body.skin .hero-inner,
body.skin .hero-content {
  position:relative; z-index:1;
  max-width:920px !important; padding:0 24px; margin:0 auto;
  text-align:left !important;
}
body.skin .hero-badge {
  display:inline-flex; background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:50px !important; color:#fff;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}
body.skin .dot {
  width:7px !important; height:7px !important;
  background:var(--sp-peach) !important;
  box-shadow:0 0 8px rgba(238,176,146,.6);
}
body.skin .hero h1,
body.skin .hero .hero-title {
  font-size:56px; font-weight:700; letter-spacing:-1.5px; line-height:1.1;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  max-width:680px;
  margin-bottom:22px;
  text-wrap:balance;
}
body.skin .hero-sub {
  color:var(--sp-peach) !important; font-weight:500;
  font-size:18px; letter-spacing:.5px; margin-bottom:14px;
}
body.skin .hero-meta {
  color:rgba(255,255,255,.85) !important;
  font-weight:300; font-size:18px; justify-content:flex-start !important;
  max-width:600px;
}
body.skin .hero-actions { justify-content:flex-start !important; }
body.skin .hero .btn-primary {
  background:var(--sp-peach) !important;
  color:var(--sp-secondary-d) !important;
}
body.skin .hero .btn-primary:hover { background:#e69b75 !important; }
body.skin .hero .btn-outline {
  color:#fff !important; border-color:rgba(255,255,255,.6) !important;
}
body.skin .hero .btn-outline:hover {
  background:#fff !important; color:var(--sp-secondary) !important;
}
body.skin .countdown { justify-content:flex-start !important; }
body.skin .countdown-num {
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
  backdrop-filter:blur(8px) !important;
  border-radius:6px;
  font-family:'Lexend',sans-serif;
}
body.skin .countdown-label { color:rgba(255,255,255,.8) !important; letter-spacing:1.5px; }

/* ===== STATS — colour-block cards (SPREP signature) ===== */
body.skin .stat-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  box-shadow:0 4px 20px rgba(0,34,66,.08);
  border-radius:6px !important;
  text-align:left !important;
  padding:24px 22px 22px !important;
  transition:transform .2s, box-shadow .2s;
}
body.skin .stat-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,34,66,.12);
}
body.skin .stats-grid > *:nth-child(2) { border-top-color:var(--sp-secondary) !important; }
body.skin .stats-grid > *:nth-child(3) { border-top-color:var(--sp-peach) !important; }
body.skin .stats-grid > *:nth-child(4) { border-top-color:var(--sp-rose) !important; }
body.skin .stat-icon {
  width:44px !important; height:44px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:rgba(1,128,129,.08) !important; margin:0 0 14px !important;
  font-size:24px; border-radius:10px !important;
  /* Inline SVGs use stroke="currentColor"; the base .stat-icon ships with
     color:#fff (against the dark-blue homepage hero) — that white stroke
     becomes invisible on the SPREP light-tinted skin background, so re-tint
     to the primary brand colour here. */
  color:var(--sp-primary) !important;
  line-height:1;
}
body.skin .stats-grid > *:nth-child(2) .stat-icon { background:rgba(0,84,164,.10) !important; }
body.skin .stats-grid > *:nth-child(3) .stat-icon { background:rgba(238,176,146,.18) !important; }
body.skin .stats-grid > *:nth-child(4) .stat-icon { background:rgba(206,56,54,.10) !important; }
body.skin .stat-num {
  font-family:'Lexend',sans-serif; font-size:38px; font-weight:700;
  color:var(--sp-secondary-d) !important;
  letter-spacing:-1px; line-height:1;
  margin-bottom:6px;
}
body.skin .stat-label {
  color:var(--sp-muted) !important; font-weight:500; font-size:13px;
  letter-spacing:.2px;
}

/* ===== SECTIONS ===== */
body.skin .section { padding:56px 0; }
/* The first .section that follows the stats row sits right under it, so
   tighten its top padding — stats already provide visual separation. */
body.skin .stats + .section { padding-top:40px; }
/* Avoid double padding when main.section already wraps block-based sections
   (homepage). Inner pages where the main is the only section keep padding. */
body.skin main.section:has(> .container .stats),
body.skin main.section:has(> .container > .content-main > section.section),
body.skin main.section:has(> .container > .content-main > section.cta-section) {
  padding:0;
}
body.skin .section-header { text-align:left !important; max-width:780px; margin-bottom:32px; }
body.skin .section-tag {
  color:var(--sp-primary) !important; font-weight:700; font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
}
body.skin .section-title {
  color:var(--sp-secondary-d) !important;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:38px; letter-spacing:-.75px;
}
body.skin .section-desc {
  color:var(--sp-muted) !important; font-size:16px;
  max-width:620px; line-height:1.65;
}
body.skin .homepage-section__header {
  margin-bottom:20px;
}
body.skin .homepage-section__cta {
  display:flex;
  justify-content:center;
  margin-top:28px;
}
body.skin .homepage-section__cta-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body.skin .homepage-section__cta-arrow {
  transition:transform .2s ease;
}
body.skin .homepage-section__cta-link:hover .homepage-section__cta-arrow {
  transform:translateX(2px);
}

/* ===== NEWS + EVENTS ===== */
body.skin .news-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
  display:grid !important;
  grid-template-columns:120px 1fr;
  overflow:hidden;
  min-height:128px;
}
body.skin .news-card:hover {
  border-color:var(--sp-primary) !important;
  box-shadow:0 6px 20px rgba(1,128,129,.1);
  transform:none !important;
}
body.skin .news-thumb {
  min-height:128px; height:100% !important; border-radius:0 !important;
  background:linear-gradient(135deg,var(--sp-secondary),var(--sp-primary)) !important;
}
body.skin .news-grid .news-card:nth-child(even) .news-thumb {
  background:linear-gradient(135deg,var(--sp-peach),var(--sp-rose)) !important;
}
body.skin .news-thumb--date {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; gap:2px; padding:12px;
}
body.skin .news-thumb--date .month {
  font-family:'Lexend',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:1.2px; line-height:1.1; text-transform:uppercase; opacity:.95;
}
body.skin .news-thumb--date .day {
  font-family:'Lexend',sans-serif; font-size:30px; font-weight:700;
  line-height:1; letter-spacing:-1px;
}
body.skin .news-placeholder,
body.skin .news-emoji {
  background:none !important; font-size:48px;
  display:flex; align-items:center; justify-content:center; height:100%;
  color:#fff;
}
body.skin .news-tag {
  background:var(--sp-surface) !important;
  color:var(--sp-secondary-d) !important;
  font-weight:700; letter-spacing:.5px;
  backdrop-filter:none !important;
  padding:4px 12px; border-radius:3px;
}
body.skin .news-body {
  padding:18px 22px;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  /* E02 ISSUE-0078 — grid item default `min-width:auto` keeps the body wider
     than its 1fr column when the title is long enough to not wrap, which
     pushed the start of the title behind the date thumb. Setting min-width:0
     lets the body shrink to 1fr and forces the title to wrap inside. */
  min-width:0;
}
body.skin .news-grid > .views-element-container {
  width:100%;
}
body.skin .news-grid > .views-element-container > * {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
body.skin .news-grid .views-row {
  height:100%;
  margin:0;
}
body.skin .news-date {
  color:var(--sp-muted) !important; font-weight:600;
  text-transform:uppercase; letter-spacing:1px; font-size:11px;
  margin:0;
}
body.skin .news-title {
  color:var(--sp-secondary-d) !important;
  font-family:'Lexend',sans-serif; font-weight:600; font-size:17px;
  line-height:1.3; margin:0;
  min-height:calc(1.3em * 2);
}
body.skin .news-title a {
  color:inherit;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.skin .news-title a:hover { color:var(--sp-primary) !important; }
body.skin .news-excerpt {
  color:var(--sp-muted) !important; font-size:13.5px; line-height:1.5;
  margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

body.skin .events-sidebar h3,
body.skin .events-col .events-title,
body.skin .events-title {
  font-family:'Lexend',sans-serif; font-weight:700;
  color:var(--sp-primary) !important;
  font-size:14px; text-transform:uppercase; letter-spacing:1.5px;
  border-bottom:2px solid var(--sp-primary); padding-bottom:10px; margin-bottom:18px;
}
body.skin .event-item {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
}
body.skin .event-item:hover {
  background:var(--sp-surface) !important;
  border-color:var(--sp-primary) !important;
}
body.skin .event-date-box {
  background:var(--sp-primary) !important;
  border-radius:6px !important;
  color:#fff;
}
body.skin .events-grid > .views-element-container {
  width:100%;
}
body.skin .events-grid > .views-element-container > * {
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.skin .events-grid .views-row {
  margin:0;
}
/* E02 ISSUE-0036 — session teaser reuses .event-date-box but renders the
   start time (e.g. "14:30"), which is 5 characters wide vs. the date box's
   1–2-digit day, so the default 20px / weight-800 font overshoots the 52 px
   square and clips the digits at the corners. Shrink the typography only
   when the box appears inside a session card. */
body.skin .session-detail .event-date-box .day,
body.skin .list-item .event-date-box .day,
body.skin article[class*="session"] .event-date-box .day {
  font-size:14px;
  letter-spacing:-0.3px;
}
body.skin .event-info h4 { color:var(--sp-secondary-d) !important; }
body.skin .event-info p { color:var(--sp-muted) !important; }

/* ===== MEMBERS / PARTNERS STRIP ===== */
body.skin .member-placeholder,
body.skin .member-chip {
  width:auto !important; height:auto !important;
  padding:10px 22px !important;
  background:var(--sp-bg) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
  color:var(--sp-secondary-d) !important;
  font-family:'Lexend',sans-serif; font-weight:600; font-size:13px;
}

/* Modern partner-card grid: monogram badge + truncated name. Renders as a
   responsive grid so the chips line up cleanly without orphan rows. */
body.skin .members-track {
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
  justify-content:initial !important;
}
/* The homepage members view renders `header`, `footer`, and `.views-row`
   directly under `.view-members-track`, without an intermediate
   `.view-content` wrapper. Make the outer view a grid and let the semantic
   header/footer span the full width so the logo tiles can fill the rows. */
body.skin .view-members-track {
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
body.skin .view-members-track > header,
body.skin .view-members-track > footer {
  grid-column:1 / -1;
}
body.skin .view-members-track .views-row {
  margin: 0;
}
body.skin .view-members-track .partner-logo-tile {
  width:100%;
  min-height:88px;
}
body.skin .member-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:8px;
  text-decoration:none;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
body.skin .member-card:hover {
  border-color:var(--sp-primary);
  box-shadow:0 4px 14px rgba(1,128,129,.12);
  transform:translateY(-1px);
}
body.skin .member-monogram {
  flex:0 0 auto;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.5px;
  color:#fff;
  background:linear-gradient(135deg,var(--sp-primary),var(--sp-secondary));
}
body.skin .member-card.accent-teal  .member-monogram { background:linear-gradient(135deg,#2abfb3,#018081); }
body.skin .member-card.accent-navy  .member-monogram { background:linear-gradient(135deg,#0054a4,#002242); }
body.skin .member-card.accent-peach .member-monogram { background:linear-gradient(135deg,#eeb092,#e69b75); color:#5b2a14; }
body.skin .member-card.accent-rose  .member-monogram { background:linear-gradient(135deg,#e89a9a,#ce3836); }
body.skin .member-card.accent-green .member-monogram { background:linear-gradient(135deg,#5bc2a9,#047857); }
body.skin .member-name {
  flex:1 1 auto; min-width:0;
  font-family:'Lexend',sans-serif; font-weight:600;
  font-size:13.5px; line-height:1.3;
  color:var(--sp-secondary-d);
  /* 2-line clamp so long org names like "Birdlife International (Pacific)"
     fit fully without mid-word truncation. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
body.skin .member-card { min-height:64px; align-items:center; }
body.skin .member-card--more {
  border-style:dashed;
  background:var(--sp-bg);
}
body.skin .member-card--more .member-monogram {
  background:linear-gradient(135deg,#94a3b8,#64748b) !important;
  color:#fff !important;
}
body.skin .members-track__cta {
  text-align:center; margin-top:28px;
}

/* Center the partner section header (overrides the left-aligned default). */
body.skin .section-header.section-header--center {
  text-align:center !important; max-width:none; margin-left:auto; margin-right:auto;
}
body.skin .section-header.section-header--center .section-desc {
  margin-left:auto; margin-right:auto;
}

/* ===== ABOUT PAGE BODY ===== */
body.skin .about-body { max-width:880px; }
body.skin .about-section { margin-bottom:48px; }
body.skin .about-section h2 {
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:28px; color:var(--sp-secondary-d) !important;
  margin:0 0 16px;
}
body.skin .about-body .about-section p {
  font-size:16px; color:var(--sp-text); line-height:1.65;
}
body.skin .about-how-cards .card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:8px !important;
  padding:22px 20px !important;
  text-align:left !important;
}
body.skin .about-how-cards .card-icon {
  width:auto; height:auto; background:none !important;
  border-radius:0; margin:0 0 12px;
  font-size:30px;
}
body.skin .about-how-cards .card h3 {
  font-family:'Lexend',sans-serif; font-weight:700;
  color:var(--sp-secondary-d) !important; font-size:17px;
  margin:0 0 8px;
}
body.skin .about-how-cards .card p {
  color:var(--sp-muted) !important; font-size:14px;
  line-height:1.55; margin:0;
}
body.skin .about-how-cards .card-link {
  display:inline-block; margin-top:12px;
  color:var(--sp-primary) !important; font-weight:600;
  font-size:13px; text-decoration:none;
}
body.skin .about-how-cards .card-link:hover { text-decoration:underline; }

/* History timeline with vertical line + dot per row (R5-039). */
body.skin .history-timeline {
  list-style:none; padding:0; margin:0;
  position:relative;
}
body.skin .history-row {
  position:relative;
  padding:18px 0 18px 80px;
  border-bottom:1px solid var(--sp-line);
}
body.skin .history-row:last-child { border-bottom:none; }
body.skin .history-row::before {
  content:''; position:absolute;
  left:55px; top:0; bottom:0; width:2px;
  background:var(--sp-line);
}
body.skin .history-row::after {
  content:''; position:absolute;
  left:50px; top:24px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--sp-primary);
  box-shadow:0 0 0 3px var(--sp-bg);
}
body.skin .history-row:first-child::before { top:24px; }
body.skin .history-row:last-child::before { height:24px; }
body.skin .history-row__year {
  position:absolute; left:0; top:18px;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:16px; color:var(--sp-primary);
  width:48px;
}
body.skin .history-row__body strong {
  display:block; font-family:'Lexend',sans-serif;
  font-weight:600; font-size:15px;
  color:var(--sp-secondary-d) !important;
  margin-bottom:4px;
}
body.skin .history-row__body p {
  margin:0; color:var(--sp-muted) !important;
  font-size:14px; line-height:1.55;
}

/* Bottom CTA row — tight gap, no orphan whitespace before it (R5-040). */
body.skin .about-cta {
  display:flex; gap:12px; flex-wrap:wrap;
  margin:32px 0 24px;
}

/* ===== LISTING VIEWS — multi-column grids (R5-004, R5-022) ===== */
/* News listing: 3-up at desktop, 2 at tablet, 1 at mobile. */
body.skin .view-news .view-content,
body.skin .view-id-news .view-content {
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
  margin-top:8px;
}
body.skin .view-news .view-content > .views-row {
  margin:0;
}
/* Speakers listing: 3-up grid (R5-022 / E02 ISSUE-0040 — design calls for
   exactly three balanced columns rather than auto-fill, which produced four
   on >=1100 px viewports). */
body.skin .view-speakers .view-content,
body.skin .view-id-speakers .view-content,
body.skin .view-id-pirt-speakers .view-content,
body.skin .view-pirt-speakers .view-content {
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:900px) {
  body.skin .view-speakers .view-content,
  body.skin .view-id-speakers .view-content,
  body.skin .view-id-pirt-speakers .view-content,
  body.skin .view-pirt-speakers .view-content {
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:600px) {
  body.skin .view-speakers .view-content,
  body.skin .view-id-speakers .view-content,
  body.skin .view-id-pirt-speakers .view-content,
  body.skin .view-pirt-speakers .view-content {
    grid-template-columns:1fr;
  }
}
/* Members listing keeps row layout but tightens row padding (R5-012). */
body.skin .view-members .view-content,
body.skin .view-id-members .view-content {
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Clickable news tag — link styling override on top of .tag */
body.skin .news-tag.tag {
  text-decoration:none; transition:filter .15s;
}
body.skin .news-tag.tag:hover { filter:brightness(0.95); }

/* Tag colour palette tweaks for skin so the badges read on white. */
body.skin .tag-teal { background:rgba(1,128,129,.10) !important; color:var(--sp-primary) !important; }
body.skin .tag-blue { background:rgba(0,84,164,.10) !important; color:var(--sp-secondary) !important; }
body.skin .tag-green { background:rgba(91,194,169,.18) !important; color:#047857 !important; }
body.skin .tag-orange { background:rgba(245,158,11,.15) !important; color:#b45309 !important; }
body.skin .tag-purple { background:rgba(139,92,246,.15) !important; color:#6d28d9 !important; }
body.skin .tag-red { background:rgba(206,56,54,.10) !important; color:var(--sp-red) !important; }

/* ===== MEMBER LISTING ROWS (R5-012) — tighter, no overgrown padding ===== */
body.skin .member-row {
  display:grid;
  grid-template-columns:60px 1fr auto;
  align-items:center;
  gap:18px;
  padding:14px 18px;
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:6px;
  transition:border-color .2s, box-shadow .2s;
}
body.skin .member-row:hover {
  border-color:var(--sp-primary);
  box-shadow:0 4px 14px rgba(1,128,129,.08);
}
body.skin .member-row__logo {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:var(--sp-bg);
  color:var(--sp-secondary-d);
  font-family:'Lexend',sans-serif;
  font-weight:700; font-size:13px;
  letter-spacing:.5px;
}
body.skin .member-row__logo--monogram {
  background:linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
  color:#fff;
}
body.skin .member-row__main { min-width:0; }
body.skin .member-row__title {
  margin:0 0 6px;
  font-family:'Lexend',sans-serif; font-weight:600;
  font-size:15px; line-height:1.3;
}
body.skin .member-row__title a {
  color:var(--sp-secondary-d); text-decoration:none;
}
body.skin .member-row__title a:hover { color:var(--sp-primary); }
body.skin .member-row__meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12.5px;
}
body.skin .member-row__country {
  color:var(--sp-muted);
}
body.skin .member-row__link {
  color:var(--sp-primary) !important;
  font-weight:600; font-size:13px; text-decoration:none;
  white-space:nowrap;
}
body.skin .member-row__link:hover { text-decoration:underline; }

/* ===== MEMBER HERO (R5-013) ===== */
body.skin .member-hero {
  padding:calc(var(--nav-height) + 32px) 0 36px;
}
body.skin .page-header__back a {
  color:rgba(255,255,255,.85); text-decoration:none;
  font-size:13px; font-weight:500;
}
body.skin .page-header__back a:hover { color:#fff; text-decoration:underline; }
body.skin .member-hero__row {
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin-top:14px;
}
body.skin .member-hero__logo {
  width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:'Lexend',sans-serif;
  font-weight:700; font-size:28px;
  letter-spacing:1px;
  flex-shrink:0;
}
body.skin .member-hero__logo--monogram {
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.25);
}
body.skin .member-hero__info { min-width:0; flex:1 1 auto; }
body.skin .member-hero__info .badge { margin-bottom:8px; }
body.skin .member-hero__title {
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:38px; line-height:1.1; letter-spacing:-1px;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  background:none !important; -webkit-background-clip:initial !important;
  margin:6px 0 8px;
}
body.skin .member-hero__meta {
  color:rgba(255,255,255,.85);
  font-size:15px; margin:0;
  display:flex; align-items:center; gap:8px;
}
body.skin .member-detail__body { margin-top:32px; }

/* ===== CONTACT PAGE ===== */
body.skin .contact-page-body {
  display:grid !important;
  grid-template-columns:2fr 1fr !important;
  gap:32px !important;
  align-items:start;
  margin-top:32px;
}
body.skin .contact-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:8px !important;
  padding:32px !important;
}
body.skin .contact-card form .form-item { margin-bottom:18px; }
body.skin .contact-card form label {
  display:block; font-weight:600; font-size:13px;
  color:var(--sp-text); margin-bottom:6px;
}
body.skin .contact-card form input.form-input,
body.skin .contact-card form textarea.form-input,
body.skin .contact-card form input[type="text"],
body.skin .contact-card form input[type="email"],
body.skin .contact-card form textarea {
  width:100%;
  padding:12px 14px;
  background:var(--sp-bg) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px;
  color:var(--sp-text) !important;
  font-size:14px;
}
body.skin .contact-card form input.form-input:focus,
body.skin .contact-card form textarea.form-input:focus,
body.skin .contact-card form input:focus,
body.skin .contact-card form textarea:focus {
  outline:none;
  border-color:var(--sp-primary) !important;
  box-shadow:0 0 0 3px rgba(1,128,129,.12);
}
body.skin .contact-card form .form-actions {
  display:flex; justify-content:flex-end;
  margin-top:8px; padding-top:18px;
  border-top:1px solid var(--sp-line);
}

/* Sidebar widgets on contact page */
body.skin .contact-sidebar .sidebar-widget {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line);
  border-radius:8px;
  padding:18px 22px;
  margin-bottom:16px;
}
body.skin .contact-sidebar .sidebar-widget h3 {
  font-family:'Lexend',sans-serif; font-weight:700;
  color:var(--sp-secondary-d) !important;
  font-size:13px; text-transform:uppercase; letter-spacing:1.5px;
  margin:0 0 12px;
}
body.skin .contact-sidebar .sidebar-widget p {
  margin:0 0 8px; color:var(--sp-text); font-size:14px; line-height:1.55;
}
body.skin .contact-sidebar .sidebar-widget a {
  color:var(--sp-primary); text-decoration:none;
}
body.skin .contact-sidebar .sidebar-widget a:hover { text-decoration:underline; }

/* Static OSM map (R5-017) */
body.skin .contact-map {
  display:block; border-radius:6px; overflow:hidden;
  margin:0 -22px;
}
body.skin .contact-map img { display:block; width:100%; height:auto; }
body.skin .contact-map__cta {
  margin:8px 0 0 !important;
  font-size:13px;
}

/* Social pills (R5-049) */
body.skin .follow-row {
  display:flex; flex-wrap:wrap; gap:8px;
}
body.skin .social-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--sp-bg);
  border:1px solid var(--sp-line);
  border-radius:50px;
  text-decoration:none;
  font-size:13px; font-weight:600;
  color:var(--sp-text);
  transition:border-color .15s, color .15s;
}
body.skin .social-pill:hover {
  border-color:var(--sp-primary);
  color:var(--sp-primary);
}
body.skin .social-pill__glyph {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  font-weight:700; font-size:11px;
  border-radius:4px;
  background:var(--sp-line);
  color:var(--sp-secondary-d);
}
body.skin .social-pill--twitter:hover { color:#1da1f2; border-color:#1da1f2; }
body.skin .social-pill--facebook:hover { color:#1877f2; border-color:#1877f2; }
body.skin .social-pill--linkedin:hover { color:#0a66c2; border-color:#0a66c2; }
body.skin .social-pill--youtube:hover { color:#ff0000; border-color:#ff0000; }

/* Contact FAQ accordion (R5-050) */
body.skin .contact-faq {
  margin-top:24px;
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:8px;
  padding:24px 28px;
}
body.skin .contact-faq__title {
  font-family:'Lexend',sans-serif; font-weight:700;
  color:var(--sp-secondary-d) !important;
  font-size:14px; text-transform:uppercase; letter-spacing:1.5px;
  margin:0 0 16px;
}
body.skin .faq-item {
  border-top:1px solid var(--sp-line);
  padding:14px 0;
}
body.skin .faq-item:first-of-type { border-top:none; padding-top:0; }
body.skin .faq-item summary {
  cursor:pointer; font-weight:600; font-size:15px;
  color:var(--sp-secondary-d);
  list-style:none;
  padding-right:24px;
  position:relative;
}
body.skin .faq-item summary::-webkit-details-marker { display:none; }
body.skin .faq-item summary::after {
  content:'+';
  position:absolute; right:0; top:0;
  font-weight:400; font-size:20px; line-height:1;
  color:var(--sp-primary);
  transition:transform .2s;
}
body.skin .faq-item[open] summary::after {
  content:'−';
}
body.skin .faq-item p {
  margin:8px 0 0; padding-right:24px;
  color:var(--sp-muted); font-size:14px; line-height:1.6;
}

@media (max-width:1024px) {
  body.skin .contact-page-body {
    grid-template-columns:1fr !important;
  }
}

/* ===== CTA CARDS ===== */
body.skin .cta-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  border-radius:6px !important;
  display:flex;
  flex-direction:column;
  text-align:left !important;
  padding:32px 26px !important;
  height:100%;
}
body.skin .cta-grid > *:nth-child(2) { border-top-color:var(--sp-secondary) !important; }
body.skin .cta-grid > *:nth-child(3) { border-top-color:var(--sp-peach) !important; }
body.skin .cta-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,34,66,.08);
}
body.skin .cta-card .icon,
body.skin .cta-card .cta-icon {
  width:auto !important; height:auto !important;
  background:none !important; border-radius:0 !important;
  margin:0 0 14px !important; font-size:36px;
}
body.skin .cta-card h3 {
  color:var(--sp-secondary-d) !important;
  font-family:'Lexend',sans-serif; font-weight:700; font-size:20px;
}
body.skin .cta-card p {
  color:var(--sp-muted) !important;
  font-size:14px;
  margin-bottom:0;
}
body.skin .cta-link {
  color:var(--sp-primary) !important;
  font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  margin-top:auto;
  padding-top:18px;
}

/* ===== FOOTER — SPREP deep navy ===== */
body.skin .footer {
  background:var(--sp-secondary-d) !important;
  color:rgba(255,255,255,.85);
  border-top:none !important;
  position:relative;
  padding:60px 0 28px;
}
body.skin .footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--sp-primary) 0%,var(--sp-secondary) 50%,var(--sp-peach) 100%);
}
body.skin .footer .nav-logo,
body.skin .footer-brand .nav-logo { color:#fff !important; }
body.skin .footer .nav-logo svg circle,
body.skin .footer .nav-logo svg path,
body.skin .footer-brand .nav-logo svg circle,
body.skin .footer-brand .nav-logo svg path { stroke:var(--sp-peach) !important; }
body.skin .footer-brand p { color:rgba(255,255,255,.7); font-weight:300; }
body.skin .footer-col h4 {
  color:var(--sp-peach) !important;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
}
body.skin .footer-col a { color:rgba(255,255,255,.7) !important; font-weight:300; }
body.skin .footer-col a:hover { color:#fff !important; }
body.skin .footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
}
body.skin .partner-placeholder {
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:none;
}

/* ===== FOOTER POLISH — match C10 phase-1 prototype =====
   `pirt_core_site_footer` emits .container > .footer-grid + .footer-bottom
   inside <footer class="footer">. Existing styles.css + skin.css rules
   above (.footer-grid columns, .footer-col h4 colour, .footer .nav-logo
   stroke colour) handle the main layout. These rules add the polished
   bottom strip — partner pills + flex justify. */
body.skin .footer .footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  margin-bottom:0;
  padding-top:24px;
  font-size:13px;
}
body.skin .footer-partners {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
body.skin .footer-partners > span:first-child {
  color:rgba(255,255,255,.55); font-size:12.5px;
}
body.skin .partner-placeholder {
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px;
  border-radius:50px;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:1px;
  text-transform:uppercase;
  width:auto !important; height:auto !important;
}
body.skin .footer .nav-logo {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:18px; color:#fff;
  margin-bottom:14px;
}
@media (max-width:640px) {
  body.skin .footer .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== BADGES — SPREP palette ===== */
body.skin .badge {
  border-radius:3px !important; font-weight:700; letter-spacing:.3px;
  padding:3px 10px; font-size:11px; text-transform:uppercase;
}
body.skin .badge-green { background:rgba(91,194,169,.15) !important; color:#047857 !important; }
body.skin .badge-blue  { background:rgba(0,84,164,.12)  !important; color:var(--sp-secondary) !important; }
body.skin .badge-orange{ background:rgba(245,158,11,.15) !important; color:#b45309 !important; }
body.skin .badge-red   { background:rgba(206,56,54,.12) !important; color:var(--sp-red) !important; }

/* ===== GENERIC CARDS ===== */
body.skin .card,
body.skin .hotel-card,
body.skin .member-card,
body.skin .award-card,
body.skin .funding-card,
body.skin .category-card,
body.skin .speaker-card,
body.skin .session-card,
body.skin .doc-row,
body.skin .auth-card,
body.skin .content-sidebar {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text);
  border-radius:6px;
  box-shadow:0 2px 10px rgba(0,34,66,.04);
}
body.skin .card { padding:22px; }
body.skin .member-card, body.skin .award-card, body.skin .funding-card, body.skin .category-card,
body.skin .speaker-card, body.skin .session-card, body.skin .hotel-card, body.skin .auth-card {
  padding:22px;
}
body.skin .member-card:hover, body.skin .award-card:hover, body.skin .funding-card:hover,
body.skin .category-card:hover, body.skin .speaker-card:hover, body.skin .hotel-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,34,66,.08);
  border-color:var(--sp-primary) !important;
}
body.skin .card-icon {
  width:auto !important; height:auto !important; border-radius:0 !important;
  background:none !important; font-size:32px; margin:0 0 10px !important;
}
body.skin .card-link { color:var(--sp-primary) !important; font-weight:700; }
body.skin .member-logo {
  background:var(--sp-bg) !important;
  color:var(--sp-secondary-d) !important;
  border:1px solid var(--sp-line);
}
body.skin .hotel-thumb { background:linear-gradient(135deg,var(--sp-secondary),var(--sp-primary)) !important; color:#fff; }

/* ===== FORMS ===== */
body.skin .form-group label,
body.skin .form-check label { color:var(--sp-text) !important; font-weight:500; }
body.skin .form-input,
body.skin .form-group input,
body.skin .form-group select,
body.skin .form-group textarea {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
  border-radius:6px;
  font-family:'Lexend',sans-serif;
}
body.skin .form-input:focus,
body.skin .form-group input:focus,
body.skin .form-group select:focus,
body.skin .form-group textarea:focus {
  border-color:var(--sp-primary) !important;
  box-shadow:0 0 0 3px rgba(1,128,129,.12) !important;
  outline:none;
}
body.skin .filter-btn {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  padding:6px 14px; border-radius:6px;
  color:var(--sp-secondary-d) !important; font-weight:600; font-size:13px;
}
body.skin .filter-btn:hover { border-color:var(--sp-primary) !important; color:var(--sp-primary) !important; }
body.skin .filter-btn.active {
  background:var(--sp-primary) !important;
  border-color:var(--sp-primary) !important;
  color:#fff !important;
}

/* ===== ADMIN ===== */
body.skin.admin-body { background:var(--sp-bg); color:var(--sp-text); }
body.skin .admin-sidebar {
  background:var(--sp-secondary-d) !important;
  color:rgba(255,255,255,.85);
  border-right:none;
}
body.skin .admin-brand, body.skin .admin-section-label {
  color:rgba(255,255,255,.55) !important; font-weight:700;
}
body.skin .admin-menu a {
  color:rgba(255,255,255,.75) !important;
  border-radius:6px;
}
body.skin .admin-menu a:hover,
body.skin .admin-menu a.active {
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}
body.skin .admin-menu a.active { border-left:3px solid var(--sp-primary); }
body.skin .admin-topbar {
  background:var(--sp-surface) !important;
  border-bottom:1px solid var(--sp-line);
  color:var(--sp-text);
}
body.skin .admin-main { background:var(--sp-bg); }
body.skin .admin-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,34,66,.04);
  color:var(--sp-text);
}
body.skin .admin-table {
  background:var(--sp-surface) !important;
  border-radius:6px; border:1px solid var(--sp-line) !important;
}
body.skin .admin-table thead { background:var(--sp-bg) !important; color:var(--sp-secondary-d); }
body.skin .admin-table th { color:var(--sp-secondary-d) !important; font-weight:700; border-bottom:1px solid var(--sp-line) !important; }
body.skin .admin-table td { border-bottom:1px solid var(--sp-line) !important; color:var(--sp-text) !important; }
body.skin .admin-table tr:hover td { background:var(--sp-bg) !important; }

/* ===== BREADCRUMB ===== */
body.skin .breadcrumb { color:var(--sp-muted); font-size:13px; }
body.skin .breadcrumb a { color:var(--sp-primary); }
body.skin .breadcrumb a:hover { text-decoration:underline; }

/* ===== 404 / ERR ===== */
body.skin .err-page { background:var(--sp-bg); color:var(--sp-text); }
body.skin .err-box {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  color:var(--sp-text); border-radius:6px;
}

/* ===== HUB (prototype-2/index page intro) ===== */
body.skin .hub-head {
  background:linear-gradient(135deg,var(--sp-secondary-d) 0%,var(--sp-secondary) 100%);
  color:#fff;
  padding:72px 0 48px;
  border-bottom:none;
  position:relative;
}
body.skin .hub-head::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--sp-primary) 0%,var(--sp-secondary) 50%,var(--sp-peach) 100%);
}
body.skin .hub-eyebrow {
  background:rgba(238,176,146,.2) !important;
  color:var(--sp-peach) !important;
}
body.skin .hub-title {
  color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  -webkit-text-fill-color:#fff !important;
}
body.skin .hub-desc { color:rgba(255,255,255,.75) !important; }
body.skin .hub-stat .n { color:var(--sp-peach) !important; }
body.skin .hub-stat .l { color:rgba(255,255,255,.6) !important; }
body.skin .hub-btn {
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
  border-radius:6px !important;
}
body.skin .hub-btn:hover {
  background:rgba(255,255,255,.15) !important;
  border-color:rgba(255,255,255,.35) !important;
}

/* ===== PROTO INDEX — light card list instead of dark glass ===== */
body.skin .proto-hero { background:var(--sp-bg); }
body.skin .proto-hero h1 {
  color:var(--sp-secondary-d) !important;
  background:none !important;
  -webkit-text-fill-color:var(--sp-secondary-d) !important;
}
body.skin .proto-hero p { color:var(--sp-muted) !important; }
body.skin .proto-hero .phase-pill {
  background:rgba(1,128,129,.12) !important; color:var(--sp-primary) !important;
}
body.skin .proto-hero .phase2-pill {
  background:rgba(238,176,146,.2) !important; color:#b4583a !important;
}
body.skin .proto-link {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px;
}
body.skin .proto-link:hover {
  background:var(--sp-surface) !important;
  border-color:var(--sp-primary) !important;
  box-shadow:0 6px 16px rgba(0,34,66,.06);
}
body.skin .proto-link .num {
  background:var(--sp-primary) !important;
  color:#fff;
}
body.skin .proto-link h3 { color:var(--sp-secondary-d) !important; }
body.skin .proto-link p { color:var(--sp-muted) !important; }
body.skin .proto-section-label { color:var(--sp-muted) !important; }

/* ===== Dev toolbar is inline in each HTML; no overrides needed here ===== */

/* ===== RESPONSIVE touch-ups ===== */
@media (max-width:1024px) {
  body.skin .news-events { grid-template-columns:1fr; }
  body.skin .stats-grid { grid-template-columns:repeat(2,1fr); }
  body.skin .cta-grid { grid-template-columns:1fr; }
  body.skin .footer-grid { grid-template-columns:1fr 1fr; }
  body.skin .footer-grid > .region-footer-third { grid-column:span 2; grid-template-columns:1fr 1fr; }
  body.skin .news-grid > .views-element-container > * { grid-template-columns:1fr !important; }
  body.skin .news-card { grid-template-columns:1fr !important; }
  body.skin .news-thumb { min-height:160px; }
}
@media (max-width:640px) {
  body.skin .stats-grid { grid-template-columns:1fr; }
  body.skin .countdown { flex-wrap:wrap; }
  body.skin .hero h1, body.skin .hero .hero-title { font-size:36px !important; }
  body.skin .footer-grid { grid-template-columns:1fr; }
  body.skin .footer-grid > .region-footer-third { grid-column:span 1; grid-template-columns:1fr 1fr; gap:32px; }
  body.skin .nav-menu { display:none !important; }
}

/* =====================================================================
   PROTOTYPE-2 ADDITIONAL OVERRIDES — covers classes used across inner
   pages that the first block didn't touch. All styles scoped to body.skin.
   Goal: full SPREP visual consistency, no more dark-glass leaks.
   ===================================================================== */

/* ===== VENUE CARD (E02 ISSUE-0083) =====
   The conference venue card was rendering as plain stacked content with the
   OSM iframe on the right showing a generic loading icon — felt unfinished
   on a flagship public page. Style it as a branded 2-column card with a
   gradient backdrop on the map area so the iframe loading state looks
   intentional, plus a clear info column on the left. */
body.skin .venue-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 34, 66, 0.06);
}
body.skin .venue-card .venue-info {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, rgba(1, 128, 129, 0.04), rgba(0, 84, 164, 0.04));
}
body.skin .venue-card .venue-info h3 {
  margin: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--sp-secondary-d);
}
body.skin .venue-card .venue-info p {
  margin: 0;
  color: var(--sp-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
body.skin .venue-card .venue-info p:nth-of-type(1) {
  color: var(--sp-secondary);
  font-weight: 600;
  font-size: 13px;
}
body.skin .venue-map {
  position: relative;
  min-height: 280px;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Branded loading state — shown until the OSM iframe paints over it.
   A subtle radial glow + venue label stops the area from feeling like a
   browser broken-image icon when the screenshot tool captures pre-load. */
body.skin .venue-map::before {
  content: '📍 Map loading…';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Lexend', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 0;
}
body.skin .venue-map iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  display: block;
  background: transparent;
}
@media (max-width: 768px) {
  body.skin .venue-card { grid-template-columns: 1fr; }
  body.skin .venue-map { min-height: 220px; }
}

/* ===== Page-header band (about, members, events, news, search…) ===== */
body.skin .page-header {
  background:linear-gradient(135deg,var(--sp-secondary-d) 0%,var(--sp-secondary) 60%,var(--sp-primary) 100%) !important;
  color:#fff !important;
  padding:80px 0 50px !important;
  position:relative;
  overflow:hidden;
}
body.skin .page-header::before {
  content:''; position:absolute; top:-50%; right:-15%; width:600px; height:600px;
  background:radial-gradient(circle,rgba(238,176,146,.15) 0%,transparent 60%);
  pointer-events:none;
}
body.skin .page-header h1 {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:44px; letter-spacing:-1px;
}
body.skin .page-header p,
body.skin .page-header .section-tag {
  color:rgba(255,255,255,.85) !important;
}
body.skin .page-header .section-tag { color:var(--sp-peach) !important; }

/* E02 ISSUE-0091 — optional stat pills under intro for listing pages.
   PageHeaderBlock sinh ra `<ul class="page-header__stats">` khi `stats_kind`
   được set. 3-4 pill nằm inline, value bold lớn + label nhỏ. */
body.skin .page-header__stats {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
body.skin .page-header__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px 8px 0;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  padding-left: 16px;
}
body.skin .page-header__stat:first-child {
  border-left-color: var(--sp-peach);
}
body.skin .page-header__stat-value {
  font-family: 'Lexend', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
body.skin .page-header__stat-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 640px) {
  body.skin .page-header__stats { gap: 16px; }
  body.skin .page-header__stat-value { font-size: 22px; }
}

/* ===== Prose (article body, long content) ===== */
body.skin .prose { color:var(--sp-text) !important; }
body.skin .prose h2,
body.skin .prose h3 { color:var(--sp-secondary-d) !important; }
body.skin .prose a:not(.btn) {
  color:var(--sp-primary) !important;
  border-bottom:1px solid transparent;
}
body.skin .prose a:not(.btn):hover { border-bottom-color:var(--sp-primary); }
body.skin .prose blockquote {
  border-left:4px solid var(--sp-primary) !important;
  background:var(--sp-bg) !important;
  color:var(--sp-text) !important;
}

/* ===== List items (events list, generic list) ===== */
body.skin .list-item {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
  color:var(--sp-text) !important;
}
body.skin .list-item:hover {
  background:var(--sp-surface) !important;
  border-color:var(--sp-primary) !important;
  box-shadow:0 4px 12px rgba(0,34,66,.06);
}
body.skin .list-item h3 { color:var(--sp-secondary-d) !important; }
body.skin .list-item p,
body.skin .list-item .meta { color:var(--sp-muted) !important; }
body.skin .list-item-icon {
  background:var(--sp-primary) !important; color:#fff !important;
  border-radius:6px !important;
}

/* ===== Calendar ===== */
body.skin .calendar-grid,
body.skin .calendar-header { border:1px solid var(--sp-line); background:var(--sp-surface); }
body.skin .calendar-day {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
}
body.skin .calendar-day.has-event {
  background:rgba(1,128,129,.08) !important;
  color:var(--sp-secondary-d) !important;
  font-weight:600;
}
body.skin .calendar-day.has-event:hover {
  background:rgba(1,128,129,.15) !important;
}
body.skin .calendar-day.today {
  background:var(--sp-primary) !important;
  color:#fff !important;
  font-weight:700;
}

/* ===== Pagination ===== */
body.skin .pagination a,
body.skin .pagination span {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
  border-radius:6px !important;
}
body.skin .pagination a:hover {
  background:var(--sp-bg) !important;
  color:var(--sp-primary) !important;
  border-color:var(--sp-primary) !important;
}
body.skin .pagination .active {
  background:var(--sp-primary) !important;
  color:#fff !important;
  border-color:var(--sp-primary) !important;
}

/* ===== Tabs ===== */
body.skin .tab-btn {
  color:var(--sp-muted) !important;
  border-bottom:2px solid transparent !important;
  font-weight:600;
}
body.skin .tab-btn:hover { color:var(--sp-secondary-d) !important; }
body.skin .tab-btn.active {
  color:var(--sp-primary) !important;
  border-bottom-color:var(--sp-primary) !important;
}

/* ===== Category cards (registration wizard) ===== */
body.skin .category-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
  border-radius:6px !important;
}
body.skin .category-card:hover {
  border-color:var(--sp-primary) !important;
  background:var(--sp-surface) !important;
  box-shadow:0 4px 12px rgba(1,128,129,.08);
}
body.skin .category-card.selected {
  border:2px solid var(--sp-primary) !important;
  background:rgba(1,128,129,.06) !important;
}
body.skin .category-card .price {
  color:var(--sp-primary) !important;
  font-family:'Lexend',sans-serif;
}
body.skin .category-card .label { color:var(--sp-secondary-d) !important; }
body.skin .category-card .desc { color:var(--sp-muted) !important; }

/* ===== Search input ===== */
body.skin .search-input {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
  border-radius:6px !important;
}
body.skin .search-input:focus {
  border-color:var(--sp-primary) !important;
  box-shadow:0 0 0 3px rgba(1,128,129,.12) !important;
  outline:none;
}
body.skin .search-input::placeholder { color:var(--sp-muted) !important; }
body.skin .search-bar {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
}

/* ===== KPI cards (admin dashboards) ===== */
body.skin .kpi-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  border-radius:6px !important;
  color:var(--sp-text) !important;
}
body.skin .kpi-grid > *:nth-child(2) { border-top-color:var(--sp-secondary) !important; }
body.skin .kpi-grid > *:nth-child(3) { border-top-color:var(--sp-peach) !important; }
body.skin .kpi-grid > *:nth-child(4) { border-top-color:var(--sp-rose) !important; }
body.skin .kpi-card .lbl {
  color:var(--sp-muted) !important;
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
}
body.skin .kpi-card .val {
  color:var(--sp-secondary-d) !important;
  font-family:'Lexend',sans-serif;
  font-size:32px; font-weight:700; letter-spacing:-.5px;
}
body.skin .kpi-card .delta {
  color:var(--sp-mint) !important;
  font-size:12px; font-weight:600;
}
body.skin .kpi-card .delta.neg { color:var(--sp-red) !important; }

/* ===== Trend chart bars ===== */
body.skin .trend-chart .bar {
  background:linear-gradient(180deg,var(--sp-primary),var(--sp-secondary)) !important;
}

/* ===== Dot badge (notification count) ===== */
body.skin .dot-badge {
  background:var(--sp-peach) !important;
  color:var(--sp-secondary-d) !important;
  border-radius:10px;
  font-size:11px; font-weight:700;
  padding:1px 7px; margin-left:auto;
}

/* ===== Profile page (phase-2/profile.html) ===== */
body.skin .profile-head {
  background:linear-gradient(135deg,var(--sp-secondary-d),var(--sp-primary)) !important;
  color:#fff !important;
  border-radius:6px !important;
}
body.skin .profile-avatar {
  background:var(--sp-peach) !important;
  color:var(--sp-secondary-d) !important;
}
body.skin .profile-info h2 { color:#fff !important; }
body.skin .profile-info p { color:rgba(255,255,255,.85) !important; }

/* ===== Programme board (conference-programme) ===== */
body.skin .prog-board {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
}
body.skin .prog-col { border-right:1px solid var(--sp-line) !important; }
body.skin .prog-col h3 {
  color:var(--sp-secondary-d) !important;
  background:var(--sp-bg) !important;
  border-bottom:2px solid var(--sp-primary) !important;
}
body.skin .prog-session {
  background:var(--sp-surface) !important;
  border-left:3px solid var(--sp-primary) !important;
  border-radius:4px !important;
  color:var(--sp-text) !important;
}
body.skin .prog-session:hover {
  background:var(--sp-bg) !important;
  box-shadow:0 2px 8px rgba(0,34,66,.06);
}
body.skin .session-meta { color:var(--sp-muted) !important; }
body.skin .session-list { gap:10px; }

/* ===== Hotel cards (conference-venue) ===== */
body.skin .hotel-thumb {
  background:linear-gradient(135deg,var(--sp-secondary),var(--sp-primary)) !important;
  color:#fff !important;
}
body.skin .hotel-body {
  background:var(--sp-surface) !important;
  color:var(--sp-text) !important;
}
body.skin .hotel-rating { color:var(--sp-amber) !important; }
body.skin .facilities span {
  background:var(--sp-bg) !important;
  color:var(--sp-muted) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:3px !important;
}

/* ===== Funding cards (phase-2/funding) ===== */
body.skin .funding-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  color:var(--sp-text) !important;
  border-radius:6px !important;
}
body.skin .funding-card .amount {
  color:var(--sp-primary) !important;
  font-family:'Lexend',sans-serif; font-weight:700;
}
body.skin .funding-deadline,
body.skin .deadline {
  background:rgba(238,176,146,.15) !important;
  color:#b4583a !important;
  border:1px solid rgba(238,176,146,.3);
  border-radius:3px;
}
body.skin .funding-stat { color:var(--sp-secondary-d) !important; }
body.skin .funding-stat .n {
  color:var(--sp-primary) !important;
  font-family:'Lexend',sans-serif;
}

/* ===== Awards (phase-2/awards) ===== */
body.skin .awards-grid .award-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-peach) !important;
  color:var(--sp-text) !important;
}
body.skin .level-badge {
  background:var(--sp-peach) !important;
  color:var(--sp-secondary-d) !important;
  font-weight:700;
  border-radius:3px;
  padding:3px 10px;
}
body.skin .badges { color:var(--sp-muted) !important; }

/* ===== Auth pages (login, register-user) ===== */
body.skin .auth-wrap {
  background:var(--sp-bg) !important;
  color:var(--sp-text) !important;
  min-height:100vh;
}
body.skin .auth-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  color:var(--sp-text) !important;
  border-radius:6px !important;
  box-shadow:0 8px 30px rgba(0,34,66,.08);
}
body.skin .auth-card h1 { color:var(--sp-secondary-d) !important; }
body.skin .auth-footer {
  color:var(--sp-muted) !important;
}
body.skin .auth-footer a { color:var(--sp-primary) !important; }

/* ===== Hero badge fallback (inner-page compact heros) ===== */
body.skin .hero-badge {
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}

/* ===== Doc row / library ===== */
body.skin .doc-row {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
}
body.skin .doc-row:hover {
  border-color:var(--sp-primary) !important;
  background:var(--sp-surface) !important;
}
body.skin .doc-icon {
  background:var(--sp-primary) !important;
  color:#fff !important;
  border-radius:6px !important;
}
body.skin .doc-title { color:var(--sp-secondary-d) !important; }
body.skin .doc-meta,
body.skin .doc-size { color:var(--sp-muted) !important; }

/* ===== Wizard stepper (conference-register) ===== */
body.skin .wizard-step .num {
  background:var(--sp-bg) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-muted) !important;
}
body.skin .wizard-step.active .num {
  background:var(--sp-primary) !important;
  color:#fff !important;
  border-color:var(--sp-primary) !important;
}
body.skin .wizard-step.done .num {
  background:var(--sp-mint) !important;
  color:#fff !important;
  border-color:var(--sp-mint) !important;
}
body.skin .wizard-step .label { color:var(--sp-muted) !important; }
body.skin .wizard-step.active .label { color:var(--sp-secondary-d) !important; font-weight:700; }
body.skin .wizard-step.done .label { color:var(--sp-mint) !important; }
body.skin .wizard-step .line { background:var(--sp-line) !important; }
body.skin .wizard-step.done .line { background:var(--sp-mint) !important; }

/* ===== Miscellaneous content utilities ===== */
body.skin .section-tag { color:var(--sp-primary) !important; }
body.skin .breadcrumb a:hover { color:var(--sp-primary) !important; }
body.skin .err-page .code {
  color:var(--sp-primary) !important;
  font-family:'Lexend',sans-serif;
}

/* ===== Ensure plain generic text inside .page-bg is dark ===== */
body.skin p,
body.skin li,
body.skin td,
body.skin label,
body.skin span { /* fallback for plain inline spans */ }

/* ===== FINAL SWEEP — programme rows, speaker avatar, sidebar, status, submissions, tags ===== */
body.skin .session-row,
body.skin .speaker-row {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:6px !important;
  color:var(--sp-text) !important;
}
body.skin .session-row:hover,
body.skin .speaker-row:hover {
  border-color:var(--sp-primary) !important;
  box-shadow:0 2px 8px rgba(0,34,66,.06);
}
body.skin .session-time { color:var(--sp-primary) !important; font-weight:700; }
body.skin .session-title { color:var(--sp-secondary-d) !important; font-weight:600; }
body.skin .session-track { color:var(--sp-muted) !important; }
body.skin .session-room { color:var(--sp-muted) !important; }

body.skin .speaker-avatar {
  background:linear-gradient(135deg,var(--sp-secondary),var(--sp-primary)) !important;
  color:#fff !important;
  font-weight:700;
}

/* Sidebar widgets on inner pages */
body.skin .sidebar-widget {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  color:var(--sp-text) !important;
  border-radius:6px;
}
body.skin .sidebar-widget h3,
body.skin .sidebar-widget h4 { color:var(--sp-secondary-d) !important; }
body.skin .sidebar-link {
  color:var(--sp-primary) !important;
  border-bottom:1px solid var(--sp-line);
}
body.skin .sidebar-link:hover { background:var(--sp-bg) !important; }

/* Status chips */
body.skin .status-ok,
body.skin .status-pending,
body.skin .status-missing {
  border-radius:3px !important;
  font-weight:700;
  padding:2px 10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
body.skin .status-ok     { background:rgba(91,194,169,.15) !important; color:#047857 !important; }
body.skin .status-pending{ background:rgba(245,158,11,.15) !important; color:#b45309 !important; }
body.skin .status-missing{ background:rgba(206,56,54,.15) !important; color:var(--sp-red) !important; }

/* Submission cards (conference-get-involved) */
body.skin .submission-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-top:4px solid var(--sp-primary) !important;
  border-radius:6px !important;
  color:var(--sp-text) !important;
}
body.skin .submission-grid > *:nth-child(2) { border-top-color:var(--sp-secondary) !important; }
body.skin .submission-grid > *:nth-child(3) { border-top-color:var(--sp-peach) !important; }
body.skin .submission-grid > *:nth-child(4) { border-top-color:var(--sp-rose) !important; }
body.skin .submission-grid > *:nth-child(5) { border-top-color:var(--sp-mint) !important; }
body.skin .submission-grid > *:nth-child(6) { border-top-color:var(--sp-purple) !important; }

/* Filter tags / filter chips */
body.skin .tag,
body.skin .tag-teal,
body.skin .tag-orange,
body.skin .tag-red,
body.skin .tag-green,
body.skin .tag-blue {
  border-radius:3px !important;
  font-size:11px; font-weight:700;
  padding:3px 10px; letter-spacing:.3px;
  text-transform:uppercase;
  background:rgba(1,128,129,.12) !important;
  color:var(--sp-primary) !important;
}
body.skin .tag-orange { background:rgba(238,176,146,.2) !important; color:#b4583a !important; }
body.skin .tag-red    { background:rgba(206,56,54,.12) !important;  color:var(--sp-red) !important; }
body.skin .tag-green  { background:rgba(91,194,169,.15) !important; color:#047857 !important; }
body.skin .tag-blue   { background:rgba(0,84,164,.12) !important;   color:var(--sp-secondary) !important; }

/* Countdown item wrapper */
body.skin .countdown-item { text-align:center; }

/* Hotel grid + funding grid + card grid — just ensure gap/grid unchanged */

/* ===== CONFERENCE SUB-NAV (R5-036) ===== */
body.skin .conference-subnav {
  background:var(--sp-surface);
  border-bottom:1px solid var(--sp-line);
  position:sticky; top:0; z-index:5;
}
body.skin .conference-subnav__inner {
  display:flex; gap:4px; flex-wrap:wrap;
  padding:0;
  overflow-x:auto;
}
body.skin .conference-subnav__item {
  display:inline-flex; align-items:center;
  padding:14px 18px;
  font-size:14px; font-weight:600;
  color:var(--sp-muted);
  text-decoration:none;
  border-bottom:3px solid transparent;
  transition:color .15s, border-color .15s;
  white-space:nowrap;
}
body.skin .conference-subnav__item:hover {
  color:var(--sp-secondary-d);
}
body.skin .conference-subnav__item.is-active {
  color:var(--sp-primary);
  border-bottom-color:var(--sp-primary);
}

/* ===== FUNDING DETAIL (R5-010, R5-045) ===== */
body.skin .funding-hero {
  padding:calc(var(--nav-height) + 32px) 0 36px;
}
body.skin .funding-hero h1 {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important; -webkit-background-clip:initial !important;
  margin:8px 0 14px;
}
body.skin .funding-hero__meta {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:8px;
}
body.skin .funding-detail__body { margin-top:32px; }
body.skin .funding-key-facts p {
  margin:0 0 10px; padding-bottom:10px;
  border-bottom:1px solid var(--sp-line);
  font-size:14px;
}
body.skin .funding-key-facts p:last-child { border-bottom:none; padding-bottom:0; }
body.skin .funding-key-facts strong {
  display:block;
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--sp-muted); font-weight:700;
  margin-bottom:2px;
}
body.skin .funding-apply-widget {
  background:var(--sp-primary) !important;
  border:none !important;
  text-align:center;
  border-radius:6px;
  padding:14px 18px !important;
}
body.skin .funding-apply-widget a {
  color:#fff !important; font-weight:700; text-decoration:none;
  display:block;
}

/* ===== SPEAKER DETAIL (R5-043) ===== */
body.skin .speaker-hero__avatar {
  width:120px; height:120px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-family:'Lexend',sans-serif;
  font-weight:700; font-size:36px;
  letter-spacing:1.5px;
  flex-shrink:0;
}
body.skin .speaker-socials {
  display:flex; gap:8px; flex-wrap:wrap;
  margin:12px 0 0;
}

/* ===== EVENT REGISTER SIDEBAR (R5-027) ===== */
body.skin .event-register-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-primary) !important;
  border-radius:8px !important;
  padding:18px 20px !important;
}
body.skin .event-register-card h3 {
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:14px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--sp-primary) !important;
  margin:0 0 14px;
}
body.skin .event-register-card .btn { width:100%; margin-bottom:8px; }

/* ===== EMPTY STATE (R5-058) ===== */
body.skin .empty-state {
  text-align:center;
  padding:48px 24px;
  background:var(--sp-surface);
  border:1px dashed var(--sp-line);
  border-radius:8px;
  margin:24px 0;
}
body.skin .empty-state__icon { font-size:36px; margin:0 0 8px; opacity:.5; }
body.skin .empty-state h3 {
  font-family:'Lexend',sans-serif; font-weight:600;
  color:var(--sp-secondary-d) !important;
  font-size:18px; margin:0 0 8px;
}
body.skin .empty-state p {
  color:var(--sp-muted); font-size:14px;
  margin:0 0 16px;
}

/* ===== WORKING GROUPS GRID (R5-009) ===== */
body.skin .working-groups-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
  margin-top:16px;
}
body.skin .working-group-card {
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-top:4px solid var(--sp-primary);
  border-radius:8px;
  padding:20px 22px;
  text-decoration:none;
  transition:box-shadow .2s, transform .2s;
}
body.skin .working-group-card:hover {
  box-shadow:0 8px 20px rgba(0,34,66,.08);
  transform:translateY(-2px);
}
body.skin .working-group-card:nth-child(2) { border-top-color:var(--sp-secondary); }
body.skin .working-group-card:nth-child(3) { border-top-color:var(--sp-peach); }
body.skin .working-group-card:nth-child(4) { border-top-color:var(--sp-rose); }
body.skin .working-group-card:nth-child(5) { border-top-color:#5bc2a9; }
body.skin .working-group-card:nth-child(6) { border-top-color:#f59e0b; }
body.skin .working-group-card__icon { font-size:30px; margin-bottom:10px; }
body.skin .working-group-card__title {
  font-family:'Lexend',sans-serif; font-weight:700;
  color:var(--sp-secondary-d); font-size:16px;
  margin:0 0 6px;
}
body.skin .working-group-card__desc {
  color:var(--sp-muted); font-size:13.5px; line-height:1.55; margin:0;
}

/* ===== CONFERENCE STATS OVERLAP (R5-062) ===== */
body.skin .conference-hero + .stats,
body.skin .hero[data-countdown] + .stats {
  margin-top:-24px;
  margin-bottom:24px;
}

/* ===== CONFERENCE PAGE: hide duplicate hero (R5-035) =====
   /conference renders a custom HeroBlock that already shows title +
   countdown + CTAs. The legacy page-header (the small dark strip with
   "Pacific Islands Conference / Safeguarding Pacific Biodiversity, …")
   becomes a duplicate. Hide it on this route only. */
body.skin.path-conference .page-header:not(.event-hero):not(.member-hero):not(.funding-hero):not(.speaker-hero):not(.wizard-page),
body.skin[class*="page-conference"] .page-header:not(.event-hero):not(.member-hero):not(.funding-hero):not(.speaker-hero):not(.wizard-page) {
  display:none;
}
/* But keep the page-header visible on sub-pages (programme/speakers). */
body.skin.path-conference-programme .page-header,
body.skin.path-conference-speakers .page-header {
  display:block;
}
/* E02 ISSUE-0043 — on /conference/register the WizardForm renders its own
   per-step `<section class="wizard-page page-header">` (Pick your category,
   Your details, …). The `pirt_pageheader_register` block adds a second
   hero with static "Conference registration" / "Five quick steps · USD
   150–750 depending on category." text — that's the "nội dung bị trùng
   nhau" complaint. Keep the dynamic wizard hero, suppress the static
   pageheader block on every register path. */
body.skin.path-conference-register .page-header.wizard-page,
body.skin.path-conference-register-step .page-header.wizard-page {
  display:block !important;
}
body.skin.path-conference-register .page-header:not(.wizard-page),
body.skin.path-conference-register-step .page-header:not(.wizard-page) {
  display:none !important;
}

/* ===== NEWS BYLINE (R5-059) ===== */
body.skin .news-hero {
  padding:calc(var(--nav-height) + 32px) 0 36px;
}
body.skin .news-hero h1 {
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  background:none !important; -webkit-background-clip:initial !important;
  margin:8px 0 14px;
}
body.skin .news-hero__tag {
  display:inline-block; margin-bottom:14px;
  text-decoration:none;
}
body.skin .news-byline {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14px; color:rgba(255,255,255,.85); margin:8px 0 0;
}
body.skin .news-byline .byline-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-family:'Lexend',sans-serif;
  font-weight:700; font-size:12px;
  letter-spacing:.5px;
}
body.skin .news-byline .byline-name a { color:#fff; text-decoration:underline; }
body.skin .news-byline .byline-meta { color:rgba(255,255,255,.75); }
body.skin .news-detail__body { margin-top:32px; }

/* ===== EVENT TEASER META (R5-016) ===== */
body.skin .event-info__meta {
  display:flex; flex-wrap:wrap; gap:12px;
  margin:6px 0;
  font-size:12.5px; color:var(--sp-muted);
}
body.skin .event-info__meta-item { white-space:nowrap; }

/* ===== FUNDING TEASER CARD (R5-024, R5-045) ===== */
body.skin .funding-card {
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-left:4px solid var(--sp-primary);
  border-radius:6px !important;
  padding:20px 24px !important;
}
body.skin .funding-card[data-status="closing_soon"] { border-left-color:#b45309; }
body.skin .funding-card[data-status="closed"] { border-left-color:var(--sp-red); }
body.skin .funding-card__amount {
  font-family:'Lexend',sans-serif; font-weight:700;
  font-size:20px; color:var(--sp-secondary-d) !important;
  letter-spacing:-.5px; margin-bottom:6px;
}
body.skin .funding-card__title {
  font-family:'Lexend',sans-serif; font-weight:600;
  color:var(--sp-secondary-d) !important; font-size:17px;
  margin:8px 0 6px;
}
body.skin .funding-card__title a {
  color:inherit; text-decoration:none;
}
body.skin .funding-card__title a:hover { color:var(--sp-primary) !important; }
body.skin .funding-card__deadline {
  font-size:13px; color:var(--sp-muted) !important;
  margin:4px 0 10px;
}
body.skin .funding-card__urgent {
  color:var(--sp-red) !important; font-weight:600;
}

/* ===== PIELA NOMINATE CARD (R5-029) ===== */
body.skin .piela-nominate-card {
  max-width:720px; margin:0 auto;
  text-align:center; padding:42px 28px !important;
  background:var(--sp-surface) !important;
  border:1px solid var(--sp-line) !important;
  border-radius:12px !important;
}
body.skin .piela-nominate-card__title {
  font-family:'Lexend',sans-serif; font-weight:700;
  color:var(--sp-secondary-d) !important;
  font-size:28px; margin:12px 0 12px;
}
body.skin .piela-nominate-card__intro {
  color:var(--sp-muted) !important; font-size:15px;
  line-height:1.6; max-width:560px; margin:0 auto 24px;
}
body.skin .piela-nominate-card__actions {
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}

/* ===== Detail-page hero full-bleed (E02 ISSUE-0018/0037/0041/0055/0063) =====
   Node detail templates (member, speaker, document, funding, programme item)
   render their `<header class="page-header X-hero">` markup inside the
   per-node `.content-main` wrapper, which page.html.twig itself nests inside
   `<div class="container">` (max-width 1240px). That clamping makes the hero
   look narrower than the section-tag landing pages, where the page-header
   block is placed in a region outside the main container.

   The breakout pattern below pulls the hero band back to the viewport width
   while keeping the `<div class="container">` inside the hero centring the
   text. `box-sizing: border-box` is implicit globally so padding stays put. */
body.skin .page-header.member-hero,
body.skin .page-header.speaker-hero,
body.skin .page-header.event-hero,
body.skin .page-header.funding-hero,
body.skin .page-header.programme-hero,
body.skin .page-header.session-hero,
body.skin .page-header.news-hero,
body.skin .page-header.document-hero {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* E02 ISSUE-0047 — submission card status badge + deadline meta were
   floating with mixed baselines because they sat as inline children of a
   `<p>`. Switch to a flex row so the pill and the "Deadline: …" text always
   share the same vertical center, with a small gap between them. */
body.skin .submission-card__deadline {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}
body.skin .submission-card__deadline .badge,
body.skin .submission-card__status {
  margin: 0;
  flex-shrink: 0;
}
body.skin .submission-card__deadline .meta {
  margin: 0;
  font-size: 12px;
  color: var(--sp-muted);
}

/* E02 ISSUE-0017 — the members listing collapses filter rows tightly to the
   first member row, breaking visual hierarchy. Add a clear separator gap
   between the filter chrome and the listing rows below. */
body.skin .view-members + .filter-bar,
body.skin .view-id-members + .filter-bar,
body.skin .view-id-pirt-members .filter-bar,
body.skin .view-pirt-members .filter-bar,
body.skin .view-pirt-members-directory .filter-bar,
body.skin main .filter-bar {
  margin: 16px 0 28px;
}
body.skin .view-members .view-content,
body.skin .view-id-members .view-content,
body.skin .view-id-pirt-members .view-content,
body.skin .view-pirt-members .view-content {
  margin-top: 8px;
}

/* E02 ISSUE-0085 — `/members` listing rendered 18 partner rows full-width
   stacked vertically (page ~3000px). Stable9 base theme doesn't wrap rows
   in `.view-content`, so the existing `.view-content` grid never matched.
   Promote the view container to a 3-up responsive grid; each `.views-row`
   already wraps a styled `.member-card`. */
body.skin .view-pirt-members-directory {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
body.skin .view-pirt-members-directory > header,
body.skin .view-pirt-members-directory > footer {
  grid-column: 1 / -1;
}
body.skin .view-pirt-members-directory > .views-row {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
body.skin .view-pirt-members-directory > .views-row > .member-card {
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px 18px 16px;
  text-align: left;
}
body.skin .view-pirt-members-directory .member-card__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.skin .view-pirt-members-directory .member-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
body.skin .view-pirt-members-directory .member-card__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sp-secondary-d);
  margin: 0;
}
body.skin .view-pirt-members-directory .member-card__name a {
  color: inherit;
}
body.skin .view-pirt-members-directory .member-card__country {
  font-size: 12.5px;
  color: var(--sp-muted);
  margin: 0;
}
body.skin .view-pirt-members-directory .member-card__cta {
  align-self: flex-start;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
body.skin .view-pirt-members-directory .member-logo--monogram {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: 'Lexend', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
  flex: 0 0 auto;
}

/* E02 ISSUE-0054 — funding listing view defaults to single-column block
   markup (`.view-id-pirt-funding-listing .view-content > .views-row`); the
   design calls for the 2-up grid the legacy `.funding-grid` already
   provides. Promote the Views container to the same grid. */
body.skin .view-id-pirt-funding-listing .view-content,
body.skin .view-pirt-funding-listing .view-content {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 720px) {
  body.skin .view-id-pirt-funding-listing .view-content,
  body.skin .view-pirt-funding-listing .view-content {
    grid-template-columns: 1fr;
  }
}
body.skin .view-id-pirt-funding-listing .views-row,
body.skin .view-pirt-funding-listing .views-row {
  margin: 0;
}

/* E02 ISSUE-0026 — push the "View detail" CTA to the right and align it
   with the badge on the same row. */
body.skin .event-item__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
body.skin .event-item__cta .badge {
  margin: 0;
}
body.skin .event-item__cta .event-item__detail {
  margin: 0;
  white-space: nowrap;
  border-color: var(--sp-primary) !important;
  color: var(--sp-primary) !important;
}
body.skin .event-item__cta .event-item__detail:hover {
  background: var(--sp-primary) !important;
  color: #fff !important;
}

/* E02 ISSUE-0062 — documents listing: the document teaser renders as a
   bare `.card.glass-light` with an icon, title, date and a file link, but
   the listing view didn't get a grid layout, so cards stacked one per row.
   Promote `.view-id-pirt-documents .view-content` to a 3-up grid (with
   responsive fallbacks) and tighten the card chrome. */
body.skin .view-id-pirt-documents .view-content,
body.skin .view-pirt-documents .view-content {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  body.skin .view-id-pirt-documents .view-content,
  body.skin .view-pirt-documents .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  body.skin .view-id-pirt-documents .view-content,
  body.skin .view-pirt-documents .view-content {
    grid-template-columns: 1fr;
  }
}
body.skin .view-id-pirt-documents .views-row,
body.skin .view-pirt-documents .views-row {
  margin: 0;
}
body.skin .document-detail .card.glass-light,
body.skin .view-id-pirt-documents .card.glass-light,
body.skin .view-pirt-documents .card.glass-light {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  height: 100%;
}
body.skin .view-id-pirt-documents .card.glass-light .card-icon,
body.skin .view-pirt-documents .card.glass-light .card-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 128, 129, 0.08);
  border-radius: 10px;
  color: var(--sp-primary);
}
body.skin .view-id-pirt-documents .card.glass-light h3,
body.skin .view-pirt-documents .card.glass-light h3 {
  font-size: 16px;
  margin: 0;
  color: var(--sp-secondary-d);
}
body.skin .view-id-pirt-documents .card.glass-light .meta,
body.skin .view-pirt-documents .card.glass-light .meta {
  font-size: 12px;
  color: var(--sp-muted);
}

/* E02 ISSUE-0042 — speaker detail (and other detail pages) put their
   sidebar widgets inside `.content-sidebar`, which the skin only styled in
   `body.skin .contact-sidebar` scope. That left the speaker detail widgets
   inheriting the dark-theme glass look on a light page, looking unstyled
   ("xấu"). Apply the same surface card styling to every `.content-sidebar
   .sidebar-widget`. */
body.skin .content-sidebar .sidebar-widget {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 34, 66, 0.04);
}
body.skin .content-sidebar .sidebar-widget h3 {
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  color: var(--sp-secondary-d) !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 12px;
}
body.skin .content-sidebar .sidebar-link {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--sp-text);
  border-bottom: 1px solid var(--sp-line);
  transition: color .2s, padding-left .2s;
  text-decoration: none;
}
body.skin .content-sidebar .sidebar-link:hover {
  color: var(--sp-primary);
  padding-left: 4px;
}
body.skin .content-sidebar .sidebar-link:last-child {
  border-bottom: none;
}
body.skin .content-sidebar .sidebar-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--sp-line);
  margin: 0;
}
body.skin .content-sidebar .sidebar-fact:last-child { border-bottom: none; }
body.skin .content-sidebar .sidebar-fact__label {
  color: var(--sp-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* E02 ISSUE-0020 — "Other members" related-cards block on member detail
   pages renders a `.card-grid.card-grid-3 > .member-card`. The card itself
   (`.member-card`) was already styled by the global skin rule, but the
   wrapper had no margin tuning so the cards collided with the surrounding
   text and lost a clear hover affordance. Tighten spacing + add a subtle
   border-top accent so each card reads as a related entity. */
body.skin .related-section .card-grid {
  gap: 14px;
  margin-top: 16px;
}
body.skin .related-section .member-card {
  border-top: 3px solid var(--sp-primary) !important;
  border-radius: 8px !important;
  padding: 18px;
}

/* E02 ISSUE-0019 — member detail body + sidebar were sometimes mis-aligned
   because the wrapper used the legacy `.member-detail__body` class without
   a sticky-sidebar fallback. Match the alignment used by the rest of the
   detail templates (top-aligned grid, sidebar sticks to top in scroll). */
body.skin .member-detail__body {
  align-items: start;
}
body.skin .member-detail__body .content-main {
  min-width: 0;
}
@media (min-width: 980px) {
  body.skin .member-detail__body .content-sidebar {
    position: sticky;
    top: calc(var(--nav-height, 70px) + 24px);
  }
}

/* E02 ISSUE-0022 — news listing cards were already styled via `.news-card`
   but the listing wrapper (`.view-id-pirt-news .view-content`) didn't
   carry an explicit grid, so when the view was placed on /news the cards
   stacked single-column. Promote it to the same auto-fill grid the legacy
   listing used. (Mirrors the existing `body.skin .view-news .view-content`
   rule but adds the actual ID Drupal renders for the `pirt_news` view.) */
body.skin .view-id-pirt-news .view-content,
body.skin .view-pirt-news .view-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
body.skin .view-id-pirt-news .views-row,
body.skin .view-pirt-news .views-row {
  margin: 0;
}

/* E02 ISSUE-0053 — funding stats reused the homepage `.stats-grid` but
   with 3 tiles instead of 4 (`grid-template-columns:repeat(3,1fr)` set
   inline in the block). The tiles inherited the homepage `.stat-card`
   styling which is sized for 4-up, so on funding (3-up) they looked
   over-padded and the icons sat off-centre. Rebalance specifically on the
   funding context. */
body.skin .funding-stats .stats-grid,
body.skin section.stats:has(+ .funding-grid) .stats-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px;
}
body.skin .funding-stats .stat-card,
body.skin section.stats:has(+ .funding-grid) .stat-card {
  padding: 20px 24px;
}

/* E02 ISSUE-0039 — speakers page leaves no breathing room between the
   page-header banner and the full-text search input. Drop in a small top
   margin when the search bar is the first child of the speakers main. */
body.skin.path-conference-speakers .filter-bar,
body.skin .view-id-pirt-speakers + .filter-bar,
body.skin .view-pirt-speakers + .filter-bar,
body.skin.path-conference-speakers main .search-bar:first-child {
  margin-top: 28px;
}
body.skin.path-conference-speakers main .filter-bar {
  margin: 24px 0 32px;
}

/* E02 ISSUE-0021 — news page: tighten the gap between the search button +
   filter row and the page-header banner, then re-flow the listing under it.
   Mirror the spacing used on /speakers (ISSUE-0039). */
body.skin.path-news .filter-bar,
body.skin.path-en-news .filter-bar,
body.skin.path-fr-news .filter-bar,
body.skin .view-id-pirt-news + .filter-bar,
body.skin .view-pirt-news + .filter-bar {
  margin: 24px 0 28px;
}
body.skin.path-news main .view-content,
body.skin.path-en-news main .view-content,
body.skin.path-fr-news main .view-content {
  margin-top: 12px;
}

/* E02 ISSUE-0025 — events page: same pattern. The "Filter by category"
   chips block sits between the banner and the events list and was flush
   against both. */
body.skin.path-events .filter-bar,
body.skin.path-en-events .filter-bar,
body.skin.path-fr-events .filter-bar,
body.skin .view-id-pirt-events + .filter-bar,
body.skin .view-pirt-events + .filter-bar {
  margin: 24px 0 28px;
}
body.skin.path-events main .view-content,
body.skin.path-en-events main .view-content,
body.skin.path-fr-events main .view-content {
  margin-top: 12px;
}
/* Events list — promote the views container to a 2-up grid (auto-fill so
   it collapses on narrow viewports). */
body.skin .view-id-pirt-events .view-content,
body.skin .view-pirt-events .view-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}
body.skin .view-id-pirt-events .views-row,
body.skin .view-pirt-events .views-row {
  margin: 0;
}