/* =====================================================================
   PIRT Theme — Round-3 polish
   Combines several small fixes: listing-grid wrappers, nav-menu compact,
   hero→body transition, footer column spacing.
   ===================================================================== */

/* ---- Event programme step list (R5-028) ---- */
.event-programme {
  margin: 32px 0;
}
.event-programme h2 {
  margin-bottom: 16px;
}
.event-programme__days {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-programme__days p,
.event-programme__days li {
  padding: 12px 16px;
  background: rgba(1, 128, 129, 0.05);
  border-left: 3px solid var(--teal, #018081);
  border-radius: 0 8px 8px 0;
  margin: 0;
}

/* ---- R3-003 listing grids: wrap views rows in a card-grid layout ---- */
/* Members + funding + documents views default to a flat
   .views-element-container > .view-content > .views-row stack. We force
   the `.view-content` (the immediate parent of all rows) to be a grid. */
.view-pirt-members-directory .view-content,
.view-pirt-funding-listing .view-content,
.view-pirt-documents .view-content,
.view-pirt-news .view-content,
.view-pirt-speakers .view-content {
  display: grid;
  gap: 16px;
}
.view-pirt-members-directory .view-content,
.view-pirt-funding-listing .view-content,
.view-pirt-news .view-content,
.view-pirt-documents .view-content {
  grid-template-columns: repeat(3, 1fr);
}
.view-pirt-speakers .view-content {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .view-pirt-members-directory .view-content,
  .view-pirt-funding-listing .view-content,
  .view-pirt-news .view-content,
  .view-pirt-documents .view-content,
  .view-pirt-speakers .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .view-pirt-members-directory .view-content,
  .view-pirt-funding-listing .view-content,
  .view-pirt-news .view-content,
  .view-pirt-documents .view-content,
  .view-pirt-speakers .view-content {
    grid-template-columns: 1fr;
  }
}

/* ---- R3-004 nav-menu compact (was wrapping to 2 lines) ---- */
.nav-menu a,
.nav-menu .nav-item.has-dropdown > a {
  padding: 8px 10px !important;
  font-size: 13px !important;
}
/* nav-actions sub-styling now in nav-actions.css */

/* ---- R3-005 hero → body transition: pad first content section ---- */
main[role="main"] {
  padding-top: 32px;
}
.page-header + main,
.page-header ~ main {
  padding-top: 48px;
}
/* Pull stats-strip up so it overlaps the hero, prototype-style */
.region-hero + main .stats,
section.hero + .stats,
section[role="region"][aria-label="Hero"] + .stats,
.stats:first-child {
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

/* ---- R3-013 footer: ensure column h4 styling + 5-col grid ----
   Brand block (description + tagline) takes 1.6fr; the 4 nav columns
   (About / Resources / Conference 2026 / Connect) take 1fr each so they
   align horizontally per the C10 prototype. */
.footer .footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white-70);
  margin: 0 0 12px;
}
.footer h4 + p,
.footer h4 + ul {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .footer .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Skin overrides for the listing-grid SPREP look */
body.skin .view-pirt-members-directory .view-content > *,
body.skin .view-pirt-funding-listing .view-content > *,
body.skin .view-pirt-documents .view-content > *,
body.skin .view-pirt-news .view-content > *,
body.skin .view-pirt-speakers .view-content > * {
  height: 100%;
}

/* ---- R7-010/R7-011: sidebar fact rows ---- */
.sidebar-fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
}
.sidebar-fact__label {
  flex-shrink: 0;
  color: var(--white-70);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 80px;
}

/* ---- R7-011: ORCID social pill ---- */
.social-pill--orcid {
  background: rgba(166, 206, 57, .15);
  border-color: rgba(166, 206, 57, .3);
}
.social-pill--orcid:hover {
  background: rgba(166, 206, 57, .25);
}

/* ---- R7-025: partner logo tile (compact card with monogram + visible name).
   E02 ISSUE-0079 — name was sr-only and monogram only 18px in a 160×80
   tile, so the homepage partner strip rendered as empty teal squares.
   Tile now flex-column with monogram chip on top + name label below. ---- */
.partner-logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s, border-color .15s, transform .15s;
  overflow: hidden;
}
.partner-logo-tile:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--teal);
  transform: translateY(-2px);
}
.partner-logo-tile__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.partner-logo-tile__inner img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* show as white on dark bg */
  opacity: .8;
}
.partner-logo-tile:hover .partner-logo-tile__inner img {
  opacity: 1;
}
/* When no logo: monogram chip — bigger so it reads as a real badge,
   not just a flat teal square. */
.partner-logo-tile .member-monogram {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lexend', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #2abfb3, #018081);
}
/* Visible partner name under the monogram. */
.partner-logo-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  font-family: 'Lexend', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--white-70, rgba(255,255,255,.7));
  word-break: break-word;
}
/* Accent variants */
.partner-logo-tile.accent-teal  { border-color: rgba(42,191,179,.2); }
.partner-logo-tile.accent-navy  { border-color: rgba(0,84,164,.2); }
.partner-logo-tile.accent-peach { border-color: rgba(238,176,146,.2); }
.partner-logo-tile.accent-rose  { border-color: rgba(206,56,54,.2); }
.partner-logo-tile.accent-green { border-color: rgba(91,194,169,.2); }
/* Accent gradients for monogram chip — keeps each tile visually distinct
   when no real logo is uploaded yet. */
.partner-logo-tile.accent-teal  .member-monogram { background: linear-gradient(135deg,#2abfb3,#018081); }
.partner-logo-tile.accent-navy  .member-monogram { background: linear-gradient(135deg,#1a73e8,#0054a4); }
.partner-logo-tile.accent-peach .member-monogram { background: linear-gradient(135deg,#eeb092,#e69b75); color:#5b2a14; }
.partner-logo-tile.accent-rose  .member-monogram { background: linear-gradient(135deg,#e89a9a,#ce3836); }
.partner-logo-tile.accent-green .member-monogram { background: linear-gradient(135deg,#5bc2a9,#047857); }

/* Skin (white theme) logo tile overrides */
body.skin .partner-logo-tile {
  background: var(--sp-surface);
  border-color: var(--sp-line);
}
body.skin .partner-logo-tile:hover {
  border-color: var(--sp-primary);
  background: var(--sp-bg);
}
body.skin .partner-logo-tile__inner img {
  filter: none; /* show actual logo colours on white background */
  opacity: .9;
}
body.skin .partner-logo-tile__name {
  color: var(--sp-secondary-d, #002242);
}

/* ---- R7-022: PIELA past laureates list ---- */
.piela-laureates {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.piela-laureate {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.07);
}
.piela-laureate__year {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  min-width: 36px;
}
.piela-laureate__body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.piela-laureate__body p.meta {
  width: 100%;
  margin: 4px 0 0;
}
.piela-laureate__cat {
  font-size: 11px;
  padding: 2px 8px;
}
.piela-cat-card__prev {
  font-size: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ---- R7-021: venue card two-column layout ---- */
.venue-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 32px;
  align-items: start;
}
.venue-info h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
.venue-map iframe {
  border-radius: 8px;
}
@media (max-width: 768px) {
  .venue-card { grid-template-columns: 1fr; }
}

/* ---- R7-019/R7-024: page TOC sidebar ---- */
.page-toc__heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--white-70);
  margin: 0 0 12px;
}
.page-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-toc__item {
  margin: 0;
}
.page-toc__item--h3 {
  padding-left: 12px;
}
.page-toc__link {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--white-70);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color .15s, border-color .15s;
}
.page-toc__link:hover,
.page-toc__link.active {
  color: var(--teal);
  border-left-color: var(--teal);
}

/* ---- R7-018: get-involved timeline ---- */
.key-dates-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid rgba(255,255,255,.12);
  padding-left: 24px;
  margin: 24px 0 40px 12px;
}
.timeline-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
.timeline-dot {
  position: absolute;
  left: -32px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--navy);
}
.timeline-dot--past {
  background: var(--teal);
}
.timeline-item--past .timeline-date,
.timeline-item--past .timeline-label {
  opacity: .5;
  text-decoration: line-through;
}
.timeline-date {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  min-width: 50px;
}
.timeline-label {
  font-size: 14px;
}
.submission-card__deadline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.submission-card__status {
  font-size: 11px;
  padding: 2px 8px;
}

/* ---- R7-016: programme day grouping ---- */
.programme-day {
  margin-bottom: 40px;
}
.programme-day__heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--teal);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 16px;
}
.programme-day__sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-cost {
  font-size: 14px;
  margin-bottom: 12px;
}
.event-location-widget p {
  font-size: 14px;
}

/* ---- R7-014: news card grid already in polish.css above.
   Ensure news-thumb–date renders correctly in the grid. ---- */
.news-thumb--date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  aspect-ratio: 16/9;
  gap: 2px;
}
.news-thumb--date .month {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--teal);
}
.news-thumb--date .day {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}