/*
Theme Name:  Schützenkompanie Alter Schießstand
Theme URI:   https://github.com/skas
Author:      SKAS
Description: Custom theme for Schützenkompanie Alter Schießstand – Tyrolean rifle corps tradition since 1870. Matches the Figma design with linen background, primary blue navigation, oxblood-red accents and brass highlights.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: skas
*/

/* ==========================================================================
   CSS Custom Properties (design tokens from Figma)
   ========================================================================== */

:root {
  /* Brand colours */
  --primary-blue:  #141A34;
  --oxblood-red:   #9E1213;
  --linen:         #F3EBE0;
  --jet-black:     #272F3A;
  --onyx:          #110D0E;
  --brass-accent:  #B89A3C;
  --white:         #ffffff;
  --muted:         #E5DDD0;
  --muted-fg:      #5A5A5A;
  --border-color:  rgba(20, 26, 52, 0.15);

  /* Semantic aliases */
  --bg:            var(--linen);
  --fg:            var(--primary-blue);
  --card-bg:       var(--white);

  /* Typography */
  --font-serif:    'Source Sans 3', system-ui, sans-serif;
  --font-sans:     'Source Sans 3', system-ui, sans-serif;

  /* Layout */
  --container-max: 80rem;   /* 1280px */
  --container-px:  1.5rem;
  --radius:        0.25rem;

  /* Transition */
  --transition:    150ms ease;
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family:        var(--font-sans);
  background-color:   var(--bg);
  color:              var(--fg);
  line-height:        1.625;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-sans);
  color:        var(--primary-blue);
  line-height:  1.25;
  font-weight:  600;
}

h1 { font-size: clamp(2rem, 5vw, 3rem);   letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

/* Serif headings (apply via class .serif) */
.serif, .serif * { font-family: var(--font-serif) !important; }

p { font-size: 1rem; line-height: 1.75; color: var(--primary-blue); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width:   var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

@media (min-width: 1024px) {
  :root { --container-px: 2rem; }
}

.section { padding-top: 5rem; padding-bottom: 5rem; }
.section--sm { padding-top: 3rem; padding-bottom: 3rem; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px)  { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Brass Divider
   ========================================================================== */

.brass-divider {
  display:    block;
  height:     2px;
  width:      4rem;
  background: var(--brass-accent);
  border:     none;
  margin:     0;
}

.brass-divider--center { margin-left: auto; margin-right: auto; }
.brass-divider--lg     { width: 6rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.625rem 1.5rem;
  font-family:    var(--font-sans);
  font-size:      1rem;
  font-weight:    500;
  line-height:    1.5;
  cursor:         pointer;
  border:         2px solid transparent;
  transition:     background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}

.btn--primary {
  background:   var(--oxblood-red);
  color:        var(--linen);
  border-color: var(--oxblood-red);
}
.btn--primary:hover {
  background:   var(--primary-blue);
  border-color: var(--primary-blue);
}

.btn--outline {
  background:   transparent;
  color:        var(--primary-blue);
  border-color: var(--primary-blue);
}
.btn--outline:hover {
  background:   var(--primary-blue);
  color:        var(--linen);
}

.btn--ghost {
  background:   transparent;
  color:        var(--oxblood-red);
  border-color: transparent;
  padding-left: 0;
}
.btn--ghost:hover { color: var(--primary-blue); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-header {
  background: var(--primary-blue);
  border-bottom: 1px solid rgba(184, 154, 60, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          5rem;
}

.nav-logo {
  display:     flex;
  align-items: center;
  align-self:  stretch;
  padding-block: 0.625rem;
}

/* WP wraps the logo in <a class="custom-logo-link">, make it fill height */
.nav-logo .custom-logo-link {
  display: block;
  height:  100%;
  line-height: 0;
}

.nav-logo img,
.nav-logo svg {
  height:    100%;
  width:     auto;
  max-width: none;   /* override global img reset */
  display:   block;
}

.nav-menu {
  display:         none;
  align-items:     center;
  gap:             0.25rem;
  list-style:      none;
}

@media (min-width: 768px) { .nav-menu { display: flex; } }

.nav-menu a {
  display:    block;
  padding:    0.5rem 1.25rem;
  color:      rgba(243,235,224,.8);
  font-size:  0.9375rem;
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-ancestor > a {
  color:      var(--linen);
  background: var(--oxblood-red);
}

/* Mobile hamburger */
.nav-toggle {
  display:          none;
  flex-direction:   column;
  gap:              5px;
  background:       transparent;
  border:           none;
  cursor:           pointer;
  padding:          0.5rem;
}
.nav-toggle span {
  display:    block;
  width:      24px;
  height:     2px;
  background: var(--linen);
  transition: transform var(--transition), opacity var(--transition);
}
@media (max-width: 767px) { .nav-toggle { display: flex; } }

.nav-mobile {
  display:    none;
  padding:    1rem 0;
  border-top: 1px solid rgba(184,154,60,.2);
}
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display:    block;
  padding:    0.75rem 1rem;
  color:      rgba(243,235,224,.8);
  font-weight: 500;
}
.nav-mobile a:hover,
.nav-mobile .current-menu-item > a {
  color:      var(--linen);
  background: var(--oxblood-red);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background:  var(--onyx);
  color:       var(--linen);
  margin-top:  8rem;
}

.footer-brass-line {
  height:     1px;
  background: var(--brass-accent);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
}

.footer-col h3,.footer-col h4 {
  font-family: var(--font-serif);
  color:       var(--linen);
  margin-bottom: 1rem;
}

.footer-col p,
.footer-col li,
.footer-col address {
  color: rgba(243,235,224,.7);
  line-height: 1.75;
  list-style: none;
  font-size: 0.9375rem;
  font-style: normal;
}

.footer-col a {
  color: rgba(243,235,224,.7);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--brass-accent); }

.footer-bottom {
  padding-top:  2rem;
  border-top:   1px solid rgba(243,235,224,.1);
  text-align:   center;
  font-size:    0.875rem;
  color:        rgba(243,235,224,.5);
}
.footer-bottom p { color: rgba(243,235,224,.5); }
.footer-bottom-links {
  display:     flex;
  justify-content: center;
  gap:         1.5rem;
  margin-top:  0.75rem;
}
.footer-bottom-links a { color: rgba(243,235,224,.5); }
.footer-bottom-links a:hover { color: var(--brass-accent); }
.footer-stats {
  color:       rgba(243,235,224,.45);
  font-size:   .8125rem;
  margin-right: .5rem;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  position: relative;
  background: var(--primary-blue);
  color:      var(--linen);
  overflow:   hidden;
}

.hero::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-size:   cover;
  background-position: center;
  opacity:  0.2;
  background-image: var(--hero-bg, none);
}

.hero-body {
  position:   relative;
  text-align: center;
  padding:    5rem 1.5rem;
}

@media (min-width: 768px) { .hero-body { padding: 8rem 1.5rem; } }

.hero h1 {
  font-family: var(--font-serif);
  color:       var(--linen);
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-size: 1.125rem;
  color:     rgba(243,235,224,.9);
  max-width: 36rem;
  margin:    0 auto;
  line-height: 1.75;
}

/* ==========================================================================
   Section Header
   ========================================================================== */

.section-header { margin-bottom: 3rem; }
.section-header h2 { font-family: var(--font-serif); margin-bottom: 1rem; }
.section-header .section-desc {
  font-size:  1.0625rem;
  color:      rgba(20,26,52,.7);
  max-width:  42rem;
  margin-top: 1rem;
}

/* ==========================================================================
   Article Cards
   ========================================================================== */

.article-card {
  background:   var(--white);
  border:       1px solid var(--border-color);
  overflow:     hidden;
  display:      flex;
  flex-direction: column;
  transition:   box-shadow var(--transition);
}
.article-card:hover { box-shadow: 0 8px 24px rgba(20,26,52,.12); }

.article-card__thumb {
  aspect-ratio: 16 / 9;
  overflow:     hidden;
}
.article-card__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.article-card:hover .article-card__thumb img { transform: scale(1.05); }

.article-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.article-card__meta {
  display:      flex;
  align-items:  center;
  gap:          0.75rem;
  margin-bottom: 0.75rem;
}

.tag {
  padding:     0.25rem 0.75rem;
  font-size:   0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.tag--ausruecken   { background: var(--oxblood-red);  color: var(--linen); }
.tag--ausfluege    { background: var(--primary-blue); color: var(--linen); }
.tag--versammlungen{ background: var(--jet-black);    color: var(--linen); }
.tag--abordnung    { background: var(--brass-accent); color: var(--primary-blue); }
.tag--veranstaltungen { background: var(--jet-black); color: var(--linen); }

.article-card__date {
  font-size: 0.875rem;
  color:     rgba(20,26,52,.6);
}

.article-card__title {
  font-family:   var(--font-serif);
  font-size:     1.375rem;
  font-weight:   600;
  color:         var(--primary-blue);
  margin-bottom: 0.75rem;
  line-height:   1.3;
}
.article-card__title a { color: inherit; }
.article-card__title a:hover { color: var(--oxblood-red); }

.article-card__excerpt {
  color:      rgba(20,26,52,.7);
  font-size:  0.9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.article-card__read-more {
  color:      var(--oxblood-red);
  font-weight: 500;
  transition: color var(--transition);
}
.article-card__read-more:hover { color: var(--primary-blue); }

/* ==========================================================================
   Event Cards
   ========================================================================== */

.event-card {
  background:  var(--white);
  border:      1px solid var(--border-color);
  padding:     1.5rem;
  display:     flex;
  gap:         1.5rem;
  transition:  border-color var(--transition);
}
.event-card:hover { border-color: var(--brass-accent); }
.event-card--jungschuetzen { border-left: 3px solid #2D6A4F; }
.event-card--jungschuetzen .event-card__icon { background: #2D6A4F; }

.event-card__icon {
  flex-shrink: 0;
  width:  4rem;
  height: 4rem;
  background: var(--primary-blue);
  color:     var(--linen);
  display:   flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  gap: 0;
}

.event-card__icon .event-day {
  font-size:   1.5rem;
  font-weight: 700;
  line-height: 1;
}
.event-card__icon .event-month {
  font-size:   0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-card__body { flex: 1; }
.event-card__title {
  font-family:   var(--font-serif);
  font-size:     1.25rem;
  font-weight:   600;
  color:         var(--primary-blue);
  margin-bottom: 0.5rem;
}
.event-card__badge {
  display:      inline-block;
  font-size:    .7rem;
  font-weight:  600;
  vertical-align: middle;
  margin-left:  .35rem;
}
.event-card__badge--jung {
  color: #2D6A4F;
}

.event-card__info {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem 1rem;
  font-size: 0.875rem;
  color:     rgba(20,26,52,.6);
  margin-bottom: 0.75rem;
}

.event-card__desc {
  font-size:  0.9375rem;
  color:      rgba(20,26,52,.7);
  line-height: 1.6;
}

/* ==========================================================================
   Termine list (Alle Termine / year view)
   ========================================================================== */

.termine-list {
  border: 1px solid var(--border-color);
  background: var(--white);
}
.termine-list__row {
  display:     grid;
  grid-template-columns: 7rem 1fr auto auto;
  align-items: center;
  gap:         .5rem 1.25rem;
  padding:     .75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  color:       var(--primary-blue);
  text-decoration: none;
  transition:  background var(--transition);
}
.termine-list__row:last-child { border-bottom: none; }
.termine-list__row.is-past { color: rgba(20,26,52,.5); }
.termine-list__row.is-linked { cursor: pointer; }
.termine-list__row.is-linked:hover { background: var(--linen); color: var(--primary-blue); }
.termine-list__row.is-jung .termine-list__date { color: #2D6A4F; }
.termine-list__row.is-past.is-jung .termine-list__date { color: rgba(45,106,79,.5); }

.termine-list__date {
  font-size:   .875rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.termine-list__title {
  font-size:  .9375rem;
  font-weight: 500;
  display:    flex;
  align-items: center;
  gap:        .5rem;
  flex-wrap:  wrap;
}
.termine-list__time {
  font-size:  .75rem;
  font-weight: 400;
  color:      rgba(20,26,52,.5);
}
.is-past .termine-list__time { color: rgba(20,26,52,.35); }
.termine-list__loc {
  font-size:  .8125rem;
  color:      rgba(20,26,52,.5);
  text-align: right;
  min-width:  0;
}
.termine-list__link-icon {
  font-size:  1rem;
  color:      var(--brass-accent);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .termine-list__row {
    grid-template-columns: 6rem 1fr auto;
  }
  .termine-list__loc { display: none; }
}

/* ==========================================================================
   Filter Bar
   ========================================================================== */

.filter-bar {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  margin-bottom: 2.5rem;
}

.filter-bar label {
  font-size:   0.875rem;
  font-weight: 500;
  color:       rgba(20,26,52,.6);
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.filter-bar select {
  padding:        0.375rem 2rem 0.375rem 0.75rem;
  font-size:      0.9375rem;
  background:     var(--white);
  border:         1px solid var(--border-color);
  color:          var(--primary-blue);
  cursor:         pointer;
  appearance:     none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23141A34' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color var(--transition);
}
.filter-bar select:focus { outline: none; border-color: var(--brass-accent); }

/* Search input in filter bar */
.filter-bar__search {
  flex:       1 1 12rem;
  min-width:  10rem;
  max-width:  22rem;
  position:   relative;
}
.filter-bar__search::before {
  content: '';
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .45;
  pointer-events: none;
}
.filter-bar__search input[type="search"] {
  width:       100%;
  padding:     0.375rem 0.75rem 0.375rem 2.1rem;
  font-size:   0.9375rem;
  background:  var(--white);
  border:      1px solid var(--border-color);
  color:       var(--primary-blue);
  transition:  border-color var(--transition);
  appearance:  none;
  -webkit-appearance: none;
}
.filter-bar__search input[type="search"]:focus {
  outline:      none;
  border-color: var(--brass-accent);
}
.filter-bar__search input[type="search"]::placeholder { color: rgba(20,26,52,.4); }

/* ==========================================================================
   Calendar (Termine page)
   ========================================================================== */

.calendar-widget {
  background: var(--white);
  border:     1px solid var(--border-color);
}

.calendar-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.25rem;
  border-bottom:   1px solid var(--border-color);
}
.calendar-nav h3 {
  font-family: var(--font-serif);
  font-size:   1.125rem;
  font-weight: 600;
}

.calendar-nav-btn {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       2rem;
  height:      2rem;
  background:  none;
  border:      1px solid var(--border-color);
  cursor:      pointer;
  color:       var(--primary-blue);
  font-size:   1.25rem;
  line-height: 1;
  transition:  background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.calendar-nav-btn:hover {
  background:   var(--linen);
  border-color: var(--brass-accent);
}

/* Header row: Mo Di Mi Do Fr Sa So */
.calendar-header-row {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom:         1px solid var(--border-color);
}
.calendar-day-name {
  text-align:    center;
  font-size:     0.6875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:         rgba(20,26,52,.55);
  padding:       .5rem 0;
  font-weight:   700;
}
.calendar-day-name.weekend { color: var(--oxblood-red); }

/* Day grid */
.calendar-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar-day {
  min-height:     6rem;
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  padding:        .375rem .4rem .4rem;
  border-right:   1px solid var(--border-color);
  border-bottom:  1px solid var(--border-color);
  color:          var(--primary-blue);
  transition:     background var(--transition);
  overflow:       hidden;
}
/* Remove double borders on right/bottom edges */
.calendar-day:nth-child(7n)   { border-right: none; }

.calendar-day.other-month { background: rgba(20,26,52,.03); }
.calendar-day.weekend .calendar-day-num { color: var(--oxblood-red); }
.calendar-day:hover { background: #faf7f2; }

/* Day number */
.calendar-day-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;
  height:          1.625rem;
  font-size:       .8125rem;
  font-weight:     500;
  line-height:     1;
  border-radius:   50%;
  flex-shrink:     0;
  margin-bottom:   .25rem;
  align-self:      flex-start;
}
.calendar-day.today .calendar-day-num {
  background:  var(--brass-accent);
  color:       var(--white);
  font-weight: 700;
}

/* Event chip inside a day cell */
.calendar-event-label {
  display:         flex;
  align-items:     center;
  gap:             .25rem;
  font-size:       .6875rem;
  line-height:     1.3;
  padding:         .15rem .4rem;
  border-radius:   3px;
  background:      var(--oxblood-red);
  color:           var(--linen);
  text-decoration: none;
  overflow:        hidden;
  white-space:     nowrap;
  text-overflow:   ellipsis;
  margin-bottom:   .2rem;
  cursor:          pointer;
  transition:      background var(--transition);
}
.calendar-event-label:hover { background: #7a0e0e; color: var(--linen); }
.calendar-event-label--jung            { background: #2D6A4F; }
.calendar-event-label--jung:hover      { background: #1f4d38; }
.calendar-event-time {
  font-weight:  600;
  opacity:      .9;
  flex-shrink:  0;
  font-size:    .625rem;
}

.calendar-legend {
  margin-top:  0;
  padding:     .875rem 1.25rem;
  border-top:  1px solid var(--border-color);
  padding-top: 1.5rem;
  border-top:  1px solid var(--border-color);
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  font-size:   0.875rem;
  color:       rgba(20,26,52,.7);
}
.calendar-legend-dot {
  width:  1rem;
  height: 1rem;
  background: var(--oxblood-red);
  flex-shrink: 0;
}

/* ==========================================================================
   Gallery (Medien page)
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-item {
  aspect-ratio: 1;
  overflow:   hidden;
  border:     1px solid var(--border-color);
  cursor:     pointer;
  transition: border-color var(--transition);
  background: var(--muted);
}
.gallery-item:hover { border-color: var(--brass-accent); }
.gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.gallery-item:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(17,13,14,.95);
  z-index:         1000;
  align-items:     center;
  justify-content: center;
  padding:         1.5rem;
}
.lightbox.is-open { display: flex; }

.lightbox-close {
  position:   absolute;
  top:        1.5rem;
  right:      1.5rem;
  background: none;
  border:     none;
  color:      var(--linen);
  cursor:     pointer;
  font-size:  2rem;
  line-height: 1;
  transition: color var(--transition);
}
.lightbox-close:hover { color: var(--brass-accent); }

.lightbox-content { max-width: 64rem; width: 100%; text-align: center; }
.lightbox-content img {
  max-height: 75vh;
  width:      auto;
  max-width:  100%;
  object-fit: contain;
  margin-bottom: 1.5rem;
}
.lightbox-title {
  font-family: var(--font-serif);
  font-size:   1.375rem;
  color:       var(--linen);
  margin-bottom: 0.25rem;
}
.lightbox-meta { color: rgba(243,235,224,.6); font-size: 0.9rem; }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
  display:        flex;
  justify-content: center;
  align-items:    center;
  gap:            0.5rem;
  margin-top:     3rem;
}

.pagination .page-numbers {
  display:     flex;
  align-items: center;
  justify-content: center;
  min-width:   2.5rem;
  height:      2.5rem;
  padding:     0 0.5rem;
  border:      1px solid var(--border-color);
  color:       var(--primary-blue);
  font-size:   0.9375rem;
  transition:  background var(--transition), color var(--transition);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background:   var(--primary-blue);
  color:        var(--linen);
  border-color: var(--primary-blue);
}

/* ==========================================================================
   Single Post / Page
   ========================================================================== */

.post-hero {
  background: var(--primary-blue);
  padding:    4rem 1.5rem;
  color:      var(--linen);
}
.post-hero h1 { font-family: var(--font-serif); color: var(--linen); }

.post-body {
  max-width: 52rem;
  margin:    0 auto;
  padding:   3rem var(--container-px);
}

.post-body h2,.post-body h3,.post-body h4 { font-family: var(--font-serif); margin: 2rem 0 0.75rem; }
.post-body p  { margin-bottom: 1.25rem; }
.post-body ul,.post-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-body li { margin-bottom: 0.5rem; }
.post-body img { border: 1px solid var(--border-color); margin: 1.5rem 0; }
.post-body blockquote {
  border-left:    4px solid var(--brass-accent);
  padding:        1rem 1.5rem;
  margin:         1.5rem 0;
  background:     var(--muted);
  font-style:     italic;
}

/* ==========================================================================
   About page
   ========================================================================== */

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px)  { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

.value-item { text-align: center; }
.value-icon {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:  4rem;
  height: 4rem;
  background: var(--primary-blue);
  color:      var(--linen);
  margin-bottom: 1rem;
}
.value-icon svg { width: 2rem; height: 2rem; }
.value-item h3 { font-family: var(--font-serif); margin-bottom: 0.75rem; font-size: 1.5rem; }
.value-item p  { color: rgba(20,26,52,.7); }

.leadership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .leadership-grid { grid-template-columns: repeat(2, 1fr); } }

.leadership-card {
  background: var(--white);
  border:     1px solid var(--border-color);
  padding:    1.5rem;
  display:    flex;
  gap:        1rem;
}
.leadership-avatar {
  width:  3rem;
  height: 3rem;
  background: var(--primary-blue);
  flex-shrink: 0;
}
.leadership-role { font-size: 0.875rem; color: var(--oxblood-red); margin-bottom: 0.25rem; }
.leadership-name { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0.5rem; }
.leadership-desc { font-size: 0.875rem; color: rgba(20,26,52,.7); }

/* ==========================================================================
   404 / Search
   ========================================================================== */

.error-page {
  min-height:  60vh;
  display:     flex;
  align-items: center;
  justify-content: center;
  text-align:  center;
  padding:     4rem var(--container-px);
}
.error-page h1 { font-size: 6rem; color: var(--primary-blue); opacity: 0.15; line-height: 1; }
.error-page h2 { font-family: var(--font-serif); margin-bottom: 1rem; }
.error-page p  { color: rgba(20,26,52,.7); margin-bottom: 2rem; }

/* ==========================================================================
   WordPress generated content (gallery blocks, etc.)
   ========================================================================== */

.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.alignwide  { margin-left: -2rem; margin-right: -2rem; }
.alignfull  { margin-left: -var(--container-px); margin-right: -var(--container-px); }

/* admin bar offset */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }