/**
 * Friends of Bulgaria - Component Styles
 * Buttons, cards, and form elements.
 * Requirements: 10.4, 11.3
 *
 * Colour contrast notes (WCAG 2.1 AA), against the concept palette:
 * - #FFFFFF on #A8222E (red)      =  8.0:1 (passes 4.5:1 body text)
 * - #FFFFFF on #7C1620 (red-deep) = 11.3:1 (passes 4.5:1 body text)
 * - #A8222E on #FFFFFF            =  8.0:1 (passes 4.5:1 body text)
 * - #5E5A55 on #FFFFFF (ink-soft) =  6.9:1 (passes 4.5:1 body text)
 * - #262421 on #FFFFFF (ink)      = 15.5:1 (passes 4.5:1 body text)
 * - #FFFFFF on #0A7D53 (green)    =  4.6:1 (passes 4.5:1 body text)
 *
 * Touch targets: All interactive elements enforce minimum 44x44px.
 */

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

/**
 * Base button — shared reset and structure.
 * All buttons meet 44x44px minimum touch target.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 14px 28px;
  font-family: var(--fob-font-primary);
  font-size: 0.95rem;
  font-weight: var(--fob-font-weight-semibold);
  line-height: var(--fob-line-height-tight);
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--fob-radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/**
 * Primary button — the concept's solid red CTA.
 * Contrast: #FFFFFF on #A8222E = 8.0:1 ✓
 */
.btn--primary,
.btn--donate {
  background-color: var(--fob-red);
  color: var(--fob-white);
  border-color: var(--fob-red);
}

.btn--primary:hover,
.btn--donate:hover {
  background-color: var(--fob-red-deep);
  border-color: var(--fob-red-deep);
  color: var(--fob-white);
}

.btn--primary:active,
.btn--donate:active {
  background-color: #6a1219;
  border-color: #6a1219;
}

/**
 * Line button — transparent with a currentColor rule. Used on the coloured
 * hero, event and donate bands, where it inherits the band's white text.
 */
.btn--secondary,
.btn--line {
  background-color: transparent;
  color: currentColor;
  border-color: currentColor;
}

.btn--secondary:hover,
.btn--line:hover {
  background-color: rgba(255, 255, 255, 0.14);
  color: currentColor;
}

/**
 * White button — reversed CTA for use on the red and green bands.
 * Contrast: #7C1620 on #FFFFFF = 11.3:1 ✓
 */
.btn--white {
  background-color: var(--fob-white);
  color: var(--fob-red-deep);
  border-color: var(--fob-white);
}

.btn--white:hover {
  background-color: var(--fob-white);
  color: var(--fob-red-deep);
  transform: translateY(-2px);
}

/**
 * Outline variant — red rule on light backgrounds.
 * Contrast: #A8222E on #FFFFFF = 8.0:1 ✓
 */
.btn--outline {
  background-color: transparent;
  color: var(--fob-red);
  border-color: var(--fob-red);
}

.btn--outline:hover {
  background-color: var(--fob-red);
  color: var(--fob-white);
}

.btn--outline:active {
  background-color: var(--fob-red-deep);
  border-color: var(--fob-red-deep);
  color: var(--fob-white);
}

/* =========================================
   Eyebrow — the small tracked-out label above section headings
   ========================================= */

.eyebrow {
  display: block;
  font-family: var(--fob-font-primary);
  font-size: 0.74rem;
  font-weight: var(--fob-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fob-tracking-eyebrow);
  line-height: 1.4;
  color: var(--fob-red);
  margin-bottom: 14px;
}

.eyebrow--on-dark {
  color: var(--fob-red-soft);
}

/* A pill-shaped variant used for the event band's "biggest night" label. */
.eyebrow--pill {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.18);
  padding: 6px 13px;
  border-radius: var(--fob-radius-sm);
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: var(--fob-font-weight-bold);
  margin-bottom: 14px;
}

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

/**
 * Base card — shared structure for all card variants.
 */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-md);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--fob-grey-2);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 26px;
}

.card__title {
  font-family: var(--fob-font-heading);
  font-size: var(--fob-font-size-large);
  font-weight: var(--fob-font-weight-heading);
  letter-spacing: var(--fob-tracking-heading);
  color: var(--fob-color-heading);
  margin-bottom: 0.5rem;
}

.card__meta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
  margin-bottom: 9px;
}

.card__text {
  font-size: 0.95rem;
  color: var(--fob-color-text);
  line-height: var(--fob-line-height-base);
  flex: 1;
}

.card__footer {
  padding: var(--fob-space-md) 24px;
  border-top: 1px solid var(--fob-line);
}

/* Card link — entire card acts as link target */
.card__link {
  display: block;
  min-height: 44px;
  min-width: 44px;
  padding: var(--fob-space-sm) 0;
  font-weight: var(--fob-font-weight-semibold);
  font-size: 0.88rem;
  color: var(--fob-color-primary);
  text-decoration: none;
}

.card__link:hover {
  color: var(--fob-red-deep);
  text-decoration: underline;
}

/* =========================================
   Pillar cards — the "four ways we change a childhood" 2x2 grid.
   Horizontal: fixed-width photo on the left, copy on the right.
   ========================================= */

.card--pillar {
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--fob-radius-lg);
  text-align: left;
}

/* The lift-on-hover belongs to the news/partner cards, not these. */
.card--pillar:hover {
  transform: none;
}

/**
 * Fixed-width media column. The image is taken out of flow inside it so its
 * intrinsic height cannot set the flex line's cross size — as a bare flex
 * child with height:auto and align-self:stretch it stretches the whole card
 * to the photograph's natural height.
 *
 * Card height is therefore driven by the copy, and the photo crops to fit.
 */
.card--pillar .card__media {
  position: relative;
  flex: 0 0 150px;
  width: 150px;
  align-self: stretch;
  overflow: hidden;
  background-color: var(--fob-grey-2);
}

.card--pillar .card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Keeps a sensible band of colour when no photo has been chosen yet. */
.card--pillar .card__media--placeholder {
  min-height: 150px;
  background-image: linear-gradient(
    135deg,
    var(--fob-grey-1) 0%,
    var(--fob-grey-2) 100%
  );
}

.card--pillar .card__body {
  justify-content: center;
  padding: 22px 26px;
}

.card--pillar .card__number {
  display: block;
  font-family: var(--fob-font-primary);
  font-size: 0.78rem;
  font-weight: var(--fob-font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--fob-red);
  margin-bottom: 0;
}

.card--pillar .card__title {
  font-size: 1.15rem;
  margin: 8px 0;
}

.card--pillar .card__title a {
  color: var(--fob-ink);
  text-decoration: none;
}

.card--pillar .card__title a:hover {
  color: var(--fob-red);
  text-decoration: underline;
}

.card--pillar .card__text {
  flex: 0 1 auto;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .card--pillar .card__media {
    flex-basis: 115px;
    width: 115px;
  }
}

/* =========================================
   News cards — horizontal snap carousel
   ========================================= */

.card--news {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-radius: var(--fob-radius-xl);
}

.card--news:hover {
  transform: none;
}

.card--news .card__image {
  aspect-ratio: 16 / 9;
  transition: transform 0.4s ease;
}

.card--news:hover .card__image {
  transform: scale(1.05);
}

.card--news .card__body {
  padding: 18px 20px 20px;
}

.card--news .card__title {
  font-size: 1.04rem;
  margin-bottom: 8px;
}

.card--news .card__text {
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card--news .card__link {
  margin-top: auto;
}

@media (max-width: 760px) {
  .card--news {
    flex-basis: 80vw;
  }
}

/* =========================================
   Stat cards — the ledger strip beneath the mission copy
   ========================================= */

.card--stat {
  flex: 1 1 150px;
  text-align: center;
  padding: 0 var(--fob-space-sm);
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

.card--stat:hover {
  transform: none;
}

.card--stat + .card--stat {
  border-left: 1px solid var(--fob-line);
}

.card--stat .card__value {
  display: block;
  font-family: var(--fob-font-heading);
  font-size: 1.9rem;
  font-weight: var(--fob-font-weight-heading);
  line-height: 1;
  color: var(--fob-red);
  margin-bottom: var(--fob-space-sm);
}

.card--stat .card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fob-ink-soft);
  font-weight: var(--fob-font-weight-semibold);
}

/* =========================================
   Form Elements
   ========================================= */

/**
 * Form group — wrapper for label + input + error message.
 */
.form-group {
  margin-bottom: var(--fob-space-lg);
}

.form-group label,
.form-label {
  display: block;
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
  margin-bottom: var(--fob-space-xs);
}

/**
 * Text inputs, textareas, selects.
 * All enforce 44px minimum height for touch targets.
 * Contrast: #333333 text on #FFFFFF = 12.6:1 ✓
 * Contrast: border #4A4A4A on #FFFFFF = 6.4:1 ✓ (exceeds 3:1 UI)
 */
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--fob-space-sm) var(--fob-space-md);
  font-family: var(--fob-font-primary);
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-normal);
  line-height: var(--fob-line-height-base);
  color: var(--fob-dark);
  background-color: var(--fob-white);
  border: 2px solid var(--fob-grey);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  border-color: var(--fob-red);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.15);
  outline: none;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #999999;
  opacity: 1;
}

/**
 * Textarea — allows vertical resizing.
 */
textarea {
  min-height: 120px;
  resize: vertical;
}

/**
 * Select — custom arrow indicator.
 */
select {
  padding-right: var(--fob-space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234A4A4A' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--fob-space-md) center;
  background-size: 16px;
}

/**
 * Checkbox and radio — custom styling with 44x44px touch target.
 */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--fob-space-sm);
  min-height: 44px;
  padding: var(--fob-space-sm) 0;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--fob-grey);
  border-radius: 3px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--fob-white);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  /* Touch target padding — actual interactive area is parent .form-check (44px tall) */
}

.form-check input[type="radio"] {
  border-radius: 50%;
}

.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
  background-color: var(--fob-red);
  border-color: var(--fob-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23FFFFFF' d='M11.5 3.5L5.5 10.5L2.5 7.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.form-check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 3px var(--fob-white);
}

.form-check input[type="checkbox"]:focus-visible,
.form-check input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 2px var(--fob-white), 0 0 0 5px var(--fob-red);
}

.form-check label {
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-normal);
  color: var(--fob-color-text);
  line-height: var(--fob-line-height-base);
  cursor: pointer;
}

/**
 * Validation states.
 */
.form-input--error,
.is-invalid {
  border-color: var(--fob-red);
}

.form-input--error:focus,
.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.2);
}

.form-error {
  display: block;
  font-size: var(--fob-font-size-small);
  color: var(--fob-red);
  margin-top: var(--fob-space-xs);
  font-weight: var(--fob-font-weight-medium);
}

.form-success {
  display: block;
  font-size: var(--fob-font-size-base);
  color: #2d7a3a;
  background-color: #e8f5e9;
  padding: var(--fob-space-md);
  border-radius: 4px;
  margin-top: var(--fob-space-md);
  font-weight: var(--fob-font-weight-medium);
}

/**
 * Help text below form inputs.
 */
.form-help {
  display: block;
  font-size: var(--fob-font-size-small);
  color: var(--fob-grey);
  margin-top: var(--fob-space-xs);
}

/**
 * Form fieldset and legend.
 */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--fob-space-lg) 0;
}

legend {
  font-size: var(--fob-font-size-large);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin-bottom: var(--fob-space-md);
  padding: 0;
}


/* =========================================
   Gallery Grid
   ========================================= */

/**
 * Photo gallery grid — used on single project and single partner pages.
 * Responsive: 1 column on mobile, 2 columns on tablet, 3 columns on desktop.
 */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fob-space-md);
  margin-top: var(--fob-space-lg);
}

@media (min-width: 576px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.gallery-grid__item {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f5f5f5;
}

.gallery-grid__item a {
  display: block;
  line-height: 0;
}

.gallery-grid__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-grid__item a:hover img,
.gallery-grid__item a:focus img {
  transform: scale(1.05);
}

.gallery-grid__caption {
  padding: var(--fob-space-sm) var(--fob-space-md);
  font-size: var(--fob-font-size-small);
  color: var(--fob-grey);
  text-align: center;
}

/* =========================================
   Single Project
   ========================================= */

/**
 * Single project page layout and spacing.
 */
/* Date, partner and status, sitting under the title in the page-head band. */
.single-project__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fob-space-sm) var(--fob-space-md);
  margin-top: var(--fob-space-sm);
  font-size: var(--fob-font-size-small);
  color: var(--fob-ink-soft);
}

/* A photograph above the text, when an entry has one. */
.single-project__image {
  margin: var(--fob-space-lg) 0 0;
}

.single-project__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fob-radius-md);
}

.single-project__partner a {
  color: var(--fob-red);
  text-decoration: none;
  font-weight: var(--fob-font-weight-semibold);
}

.single-project__partner a:hover {
  text-decoration: underline;
}

.single-project__gallery {
  padding-bottom: var(--fob-space-xl);
}

.single-project__gallery h2 {
  font-size: var(--fob-font-size-h2);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin-bottom: var(--fob-space-md);
}


/* =========================================
   Detail pages — shared article body
   =========================================

   `.prose` wraps the_content() on detail templates. It had no rules, so
   post bodies rendered at browser defaults. Typography here matches the
   single-project pattern and uses the theme tokens throughout.
   ========================================= */

.prose {
  font-size: var(--fob-font-size-base);
  line-height: var(--fob-line-height-loose);
  color: var(--fob-color-text);
}

.prose > * + * {
  margin-top: var(--fob-space-md);
}

.prose h2 {
  font-size: var(--fob-font-size-h2);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin-top: var(--fob-space-xl);
  line-height: var(--fob-line-height-tight);
}

.prose h3 {
  font-size: var(--fob-font-size-h3);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
  margin-top: var(--fob-space-lg);
  line-height: var(--fob-line-height-tight);
}

.prose a {
  color: var(--fob-red);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--fob-red-deep);
}

/* base.css clears the markers from every list, which is right for navigation
   and card grids and wrong for a list inside a piece of writing. */
.prose ul {
  padding-left: var(--fob-space-lg);
  list-style: disc;
}

.prose ol {
  padding-left: var(--fob-space-lg);
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--fob-space-xs);
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fob-radius-md);
}

.prose blockquote {
  margin-left: 0;
  padding-left: var(--fob-space-md);
  border-left: 3px solid var(--fob-red);
  color: var(--fob-grey);
  font-style: italic;
}


/* =========================================
   Single news article
   =========================================

   fob_news had no single template at all and fell back to index.php,
   which printed only the title and excerpt. See single-fob_news.php.
   ========================================= */

/* No padding above: the breadcrumb opens the page, as on every other page,
   and brings its own spacing. The 64px that sat on top of it left the crumb
   floating a hand's width below the header. */
.single-news {
  padding-block: 0 var(--fob-space-xxl);
}

.single-news__header {
  margin-bottom: var(--fob-space-xl);
  padding-bottom: var(--fob-space-lg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.single-news__title {
  font-size: var(--fob-font-size-h1);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin-bottom: var(--fob-space-md);
  line-height: var(--fob-line-height-tight);
}

.single-news__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fob-space-md);
  font-size: var(--fob-font-size-base);
  color: var(--fob-grey);
}

/* Date, time and place, under the title in the band. */
.single-event__meta {
  margin-top: var(--fob-space-sm);
  font-size: var(--fob-font-size-small);
  color: var(--fob-ink-soft);
}

.single-news__meta p {
  margin: 0;
}

.single-news__image,
/* Half the column and centred: the party banners are wide, decorative strips,
   and full width they pushed the invitation below the fold. */
.single-event__image {
  width: 50%;
  margin: 0 auto var(--fob-space-md);
}

/* The title band and the prose each brought a full section's padding to the
   same junction, with only a line of date between them. */
.single-event .page-head {
  padding: var(--fob-space-lg) 0 var(--fob-space-md);
}

.single-event .context-prose {
  padding-top: var(--fob-space-md);
}

@media (max-width: 640px) {
  .single-event__image {
    width: 100%;
  }
}

.single-news__image img,
.single-event__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fob-radius-lg);
}

.single-news__content {
  margin-bottom: var(--fob-space-xxl);
}

.single-news__nav,
.single-event__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fob-space-md);
  padding-top: var(--fob-space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* =========================================
   Single event
   =========================================

   Markup existed in single-fob_event.php but no stylesheet defined these
   classes, so the page rendered unstyled.
   ========================================= */

.single-event__date,
.single-event__time,
.single-event__location {
  display: inline-flex;
  align-items: center;
}

.single-event__location::before {
  content: "·";
  margin-right: var(--fob-space-md);
  color: var(--fob-grey-2);
}

.single-event__description {
  font-size: var(--fob-font-size-base);
  line-height: var(--fob-line-height-loose);
  color: var(--fob-color-text);
  margin-bottom: var(--fob-space-xl);
}

.single-event__description > * + * {
  margin-top: var(--fob-space-md);
}

.single-event__booking {
  background-color: var(--fob-red-soft);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--fob-radius-lg);
  padding: var(--fob-space-lg);
  margin-bottom: var(--fob-space-xl);
}

.single-event__price {
  font-size: var(--fob-font-size-large);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
  margin: 0 0 var(--fob-space-md);
}

/* =========================================
   Single partner
   =========================================

   Same fault as the event template: correct markup, no styles.
   ========================================= */

.single-partner__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fob-space-lg);
}

.single-partner__logo img {
  display: block;
  max-width: 160px;
  height: auto;
}

.single-partner__title-block h1 {
  font-size: var(--fob-font-size-h1);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin: 0 0 var(--fob-space-xs);
  line-height: var(--fob-line-height-tight);
}

.single-partner__city {
  color: var(--fob-grey);
  margin: 0 0 var(--fob-space-xs);
}

.single-partner__website a {
  color: var(--fob-red);
  font-weight: var(--fob-font-weight-semibold);
  text-decoration: none;
}

.single-partner__website a:hover {
  text-decoration: underline;
}

.single-partner__description {
  font-size: var(--fob-font-size-base);
  line-height: var(--fob-line-height-loose);
  margin-bottom: var(--fob-space-xl);
}

.single-partner__description > * + * {
  margin-top: var(--fob-space-md);
}

.single-partner__update {
  background-color: var(--fob-grey-3);
  border-left: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-md);
  padding: var(--fob-space-lg);
  margin-bottom: var(--fob-space-xl);
}

.single-partner__projects {
  margin-bottom: var(--fob-space-xxl);
}

.single-partner__projects h2 {
  font-size: var(--fob-font-size-h2);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin-bottom: var(--fob-space-md);
}

.single-partner__gallery {
  margin-bottom: var(--fob-space-xxl);
}

.single-partner__gallery-scroll {
  display: flex;
  gap: var(--fob-space-md);
  overflow-x: auto;
  padding-bottom: var(--fob-space-sm);
}

.single-partner__gallery-item {
  flex: 0 0 auto;
  margin: 0;
  max-width: 280px;
}

.single-partner__gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fob-radius-md);
}

.single-partner__back-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fob-space-md);
  padding-top: var(--fob-space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* Detail pages — narrow screens */
@media (max-width: 640px) {
  .single-news,
  .single-event,
  .single-partner {
    padding-block: var(--fob-space-xl);
  }

  .single-partner__header {
    gap: var(--fob-space-md);
  }

  .single-event__location::before {
    content: none;
  }
}


/* A partner's formal name, sitting under the page heading: the heading carries
   the name people use, this carries the one on the paperwork. */
.prose__subtitle {
  margin-top: calc(var(--fob-space-xs) * -1);
  margin-bottom: var(--fob-space-md);
  font-size: var(--fob-font-size-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fob-grey);
}

/* Image captions carried over from the live site's article markup.
   They arrived as inline 10pt spans; import-live-article-text.php converts
   them to this class. */
.prose__caption {
  display: block;
  font-size: var(--fob-font-size-small);
  line-height: var(--fob-line-height-base);
  color: var(--fob-grey);
  margin-top: var(--fob-space-xs);
}

/* Imported article images: responsive, and spaced when they sit inline.
   Held to 480px, and never past their own size. Nothing capped these before,
   so the Christmas party summaries showed 2,500px photographs at the full
   width of the column, one under another. */
.prose p > img {
  display: inline-block;
  width: auto;
  max-width: min(480px, 100%);
  height: auto;
  border-radius: var(--fob-radius-md);
  margin-right: var(--fob-space-sm);
  margin-bottom: var(--fob-space-sm);
}


/* =========================================
   Summer trip cards
   =========================================

   The live page runs the trips together as one column of prose with
   full-width photographs, which buries each account and lets the pictures
   dominate. Here each year is a card in a horizontal scroll track — the same
   scroll-snap approach the news section uses — with its photographs reduced to
   a compact strip so the writing leads.
   ========================================= */

/* A column, with the controls pulled above the track by order rather than
   positioned absolutely. Absolute positioning put them in a padding area where
   they could sit under the heading above and be missed entirely. */
.trip-scroller {
  display: flex;
  flex-direction: column;
  margin: var(--fob-space-lg) 0 var(--fob-space-xxl);
}

.trip-track {
  display: flex;
  align-items: flex-start;
  gap: var(--fob-space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--fob-space-md);
  scrollbar-width: thin;
}

.trip-track:focus-visible {
  outline: 2px solid var(--fob-red);
  outline-offset: 4px;
}

/* One year fills the track, so a trip is read on its own rather than
   competing with the edge of the next. */
.trip-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-left: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-md);
  padding: var(--fob-space-lg);
}



/* The year is the story's title, so it reads as a heading rather than a label. */
.trip-card__year {
  font-size: var(--fob-font-size-h3);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  margin: 0 0 var(--fob-space-md);
  line-height: var(--fob-line-height-tight);
}

/* Photographs as a compact strip, not a column of full-width images. */
/* A single column down the left with the text running around it. One image
   wide, stacked — not a block two across, which read as a grid competing with
   the prose rather than a margin of pictures beside it. */
.trip-card__media {
  float: left;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--fob-space-sm);
  margin: 0 var(--fob-space-lg) var(--fob-space-md) 0;
}

.trip-card__media img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--fob-radius-sm);
  display: block;
  margin: 0;
}

/* Contain the float so it cannot escape the card and push the next one down. */
.trip-card::after {
  content: "";
  display: block;
  clear: both;
}

.trip-card__body {
  font-size: 0.95rem;
  line-height: var(--fob-line-height-loose);
  color: var(--fob-color-text);
}

.trip-card__body > * + * {
  margin-top: var(--fob-space-md);
}

.trip-card__body strong {
  color: var(--fob-color-heading);
}

/* As in .prose: a list of what a camp did reads as a list, with markers. */
.trip-card__body ul {
  padding-left: var(--fob-space-lg);
  list-style: disc;
}

.trip-card__body ol {
  padding-left: var(--fob-space-lg);
  list-style: decimal;
}

.trip-card__body li + li {
  margin-top: var(--fob-space-xs);
}

/* A card can hold more than one piece of a year — a camp report and a personal
   story both belong to 2015 — so each gets a run-in title under the year. */
.trip-card__sub {
  font-size: 0.95rem;
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-color-heading);
  line-height: var(--fob-line-height-tight);
}

/* Top right, so the next trip is one click away without reading to the
   bottom of a long card first. */
.trip-nav,
.scroll-nav {
  order: -1;
  display: flex;
  gap: var(--fob-space-sm);
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--fob-space-md);
}

.trip-nav__btn,
.scroll-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--fob-red);
  border-radius: 50%;
  background-color: var(--fob-white);
  color: var(--fob-red);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.trip-nav__btn:hover:not([disabled]),
.scroll-nav__btn:hover:not([disabled]) {
  background-color: var(--fob-red);
  color: var(--fob-white);
}

.trip-nav__btn:focus-visible,
.scroll-nav__btn:focus-visible {
  outline: 2px solid var(--fob-red);
  outline-offset: 2px;
}

.trip-nav__btn[disabled],
.scroll-nav__btn[disabled] {
  opacity: .4;
  cursor: default;
  border-color: var(--fob-line);
  color: var(--fob-ink-soft);
}

@media (max-width: 640px) {
  .trip-card {
    flex-basis: 88%;
    padding: var(--fob-space-md);
  }

  /* Too narrow to wrap text beside the pictures — stack them instead. */
  .trip-card__media {
    float: none;
    width: auto;
    margin: 0 0 var(--fob-space-md);
  }

  .trip-card__media img {
    width: 84px;
    height: 84px;
  }
}


/* Dots are created by trip-scroller.js rather than stored in the page, so the
   imported content stays plain HTML and the count can never fall out of step
   with the number of cards. */
.trip-dots,
.scroll-dots {
  display: flex;
  gap: var(--fob-space-sm);
  align-items: center;
  margin-right: var(--fob-space-sm);
}

.trip-dots__dot,
.scroll-dots__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--fob-rule, var(--fob-line));
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.trip-dots__dot:hover,
.scroll-dots__dot:hover {
  background-color: var(--fob-red);
}

.trip-dots__dot[aria-current="true"],
.scroll-dots__dot[aria-current="true"] {
  background-color: var(--fob-red);
  transform: scale(1.35);
}

.trip-dots__dot:focus-visible,
.scroll-dots__dot:focus-visible {
  outline: 2px solid var(--fob-red);
  outline-offset: 3px;
}




/* The ZOV Children's Club photograph is a single composite — three scenes
   across in one file. Floated small to the left with the account running
   around it, rather than a full-width band that interrupts the reading. */
.zov-club-photo {
  float: left;
  width: 280px;
  max-width: 45%;
  margin: var(--fob-space-xs) var(--fob-space-lg) var(--fob-space-sm) 0;
}

.zov-club-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fob-radius-sm);
}

/* Only a top-level heading clears a float. An h3 clearing as well cut the wrap
   short after a single paragraph and left a column of white beside the rest of
   the picture; sub-headings now flow around it with the text. */
.context-prose h2 {
  clear: both;
}

@media (max-width: 640px) {
  .zov-club-photo {
    float: none;
    width: 100%;
    max-width: none;
    margin: var(--fob-space-md) 0;
  }
}

.zov-club-photo figcaption {
  margin-top: var(--fob-space-xs);
  font-size: var(--fob-font-size-small);
  color: var(--fob-grey);
}


/* =========================================
   Context sub-page footers and inline images
   ========================================= */

.trip-scroller {
  margin-bottom: var(--fob-space-lg);
}

/* Images that came across inside imported prose — the Karin Dom photograph,
   for one — arrive with no wrapper and no class, so they ran the full width.
   Floated small to the left with the text around them, matching how the
   photographs are handled elsewhere on these pages.
   Scoped to images inside a paragraph so it cannot touch the trip card strips
   or the Children's Club composite, which have their own treatment. */
/* Headings as well as paragraphs: the old site used h6 for a lead paragraph,
   so on the Don Robinson page the photograph sits inside one, where a rule
   about paragraphs never reached it. */
.context-prose p > img,
.context-prose h1 > img,
.context-prose h2 > img,
.context-prose h3 > img,
.context-prose h4 > img,
.context-prose h5 > img,
.context-prose h6 > img,
.context-prose li > img,
.context-prose > img {
  float: left;
  /* Never enlarged past its own size. Thirty-one of these are smaller than the
     column — Sir Donald Logan's portrait is 179px, Don Robinson's 80px — and
     stretched to 500px they turned to mush and left no room for the text to
     run beside them. */
  width: auto;
  max-width: min(500px, 60%);
  /* Each photograph starts below the last rather than beside it. Two floats in
     a row left the Kichevo camp article with a column of text one word wide
     between the picture and the page edge. */
  clear: left;
  height: auto;
  margin: var(--fob-space-xs) var(--fob-space-lg) var(--fob-space-sm) 0;
  border-radius: var(--fob-radius-sm);
}

/* A 500px float needs more room beside it than a 280px one did, so it stops
   floating sooner. */
@media (max-width: 900px) {
  .context-prose p > img,
  .context-prose h1 > img,
  .context-prose h2 > img,
  .context-prose h3 > img,
  .context-prose h4 > img,
  .context-prose h5 > img,
  .context-prose h6 > img,
  .context-prose li > img,
  .context-prose > img {
    float: none;
    width: auto;
    max-width: 100%;
    margin: var(--fob-space-md) 0;
  }
}


/* =========================================
   Project sites
   =========================================

   Was a four-column table, then boxed cards. Now an editorial list: grouped
   into current and past so the status needs no pill, and two columns per site
   so the eye can run down the places and stop only where it wants the detail.

   The partner and project line is the one people scan for, so it carries the
   weight; the written record is set smaller beneath it.
   ========================================= */

.site-group + .site-group {
  margin-top: var(--fob-space-xl);
}

.site-group__label {
  font-size: var(--fob-font-size-small);
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: var(--fob-tracking-eyebrow, .08em);
  text-transform: uppercase;
  color: var(--fob-red);
  margin: 0 0 var(--fob-space-md);
  /* Room above the label as well as below it, and the same left inset as the
     rows beneath so the whole block lines up. */
  padding: var(--fob-space-md) 0 var(--fob-space-sm) var(--fob-space-md);
  border-bottom: 2px solid var(--fob-red);
}

.site-rows {
  margin: 0;
}

.site-row {
  display: grid;
  gap: 2px var(--fob-space-lg);
  /* Padded off the left edge so a place name never sits against the rule. */
  padding: var(--fob-space-sm) var(--fob-space-sm) var(--fob-space-sm) var(--fob-space-md);
  border-bottom: 1px solid var(--fob-line);
}

@media (min-width: 760px) {
  .site-row {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
  }
}

.site-row__place {
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
  line-height: 1.4;
  margin: 0;
}

.site-row__detail {
  margin: 0;
}

/* The line people scan for: who runs it and what it is. */
.site-row__lead {
  margin: 0 0 2px;
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
  line-height: 1.4;
}

.site-row__lead a {
  color: var(--fob-red);
  text-decoration: none;
}

.site-row__lead a:hover {
  text-decoration: underline;
}

.site-row__sep {
  margin: 0 var(--fob-space-xs);
  color: var(--fob-grey-2, var(--fob-line));
  font-weight: var(--fob-font-weight-normal);
}

/* The record itself — present, but stepped back from the line above it. */
.site-row__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--fob-ink-soft, var(--fob-grey));
  max-width: 46rem;
}

/* Past work is distinguished from current by colour, not by being faded out.
   Greying the label made it hard to read while barely reading as a different
   group; the ink colour with a dark rule is legible and unmistakably not the
   red of the section above. */
.site-group--past .site-group__label {
  color: var(--fob-color-heading);
  border-bottom-color: var(--fob-color-heading);
}

.site-group--past .site-row__place {
  color: var(--fob-color-heading);
  font-weight: var(--fob-font-weight-semibold);
}


/* =========================================
   About timeline
   =========================================

   Nine entries in a column buried their own ending. As a scroll track the
   timeline reads as a sequence you move through — which is what it is — and
   uses the same controls as the ZOV summer camps.
   ========================================= */

.timeline-scroller {
  display: flex;
  flex-direction: column;
  margin-top: var(--fob-space-lg);
}

.timeline-scroller .scroll-nav {
  order: -1;
  margin-bottom: var(--fob-space-md);
}

.timeline-track {
  display: flex;
  align-items: stretch;
  gap: var(--fob-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--fob-space-md);
  scrollbar-width: thin;
}

.timeline-track:focus-visible {
  outline: 2px solid var(--fob-red);
  outline-offset: 4px;
}

.timeline-card {
  flex: 0 0 min(84%, 20rem);
  scroll-snap-align: start;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-top: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-md);
  padding: var(--fob-space-lg);
}

/* The year is the thing you scan for when moving along a timeline. */
.timeline-card__year {
  display: block;
  font-family: var(--fob-sans, inherit);
  font-size: var(--fob-font-size-large);
  font-weight: var(--fob-font-weight-bold);
  color: var(--fob-red);
  line-height: 1.1;
  margin-bottom: var(--fob-space-xs);
}

.timeline-card__title {
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-color-heading);
  margin: 0 0 var(--fob-space-xs);
  line-height: 1.35;
}

.timeline-card__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--fob-ink-soft, var(--fob-grey));
}


/* Five residents, five sentences. Full width they read as five near-identical
   paragraphs with two photographs floated 500px wide among them; side by side
   they read as five people. */
/* Six columns. The two people with a photograph take three each and fill the
   top row; the three without take two each and fill the row below, so neither
   row is ragged. Grey rather than outlined: the page already carries the
   memorial box and a row of red-edged year cards. */
.story-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--fob-space-md);
  margin: var(--fob-space-md) 0 var(--fob-space-lg);
  clear: both;
}

.story-strip__item {
  grid-column: span 2;
  padding: var(--fob-space-md);
  background-color: var(--fob-grey-1);
  border-radius: var(--fob-radius-md);
}

/* Photograph left, words right. Both pictures are close to square, so run
   across the top of the card they had to be cropped to a letterbox. */
.story-strip__item--photo {
  grid-column: span 3;
  display: flex;
  align-items: flex-start;
  gap: var(--fob-space-md);
}

.context-prose .story-strip__item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: var(--fob-line-height-base);
}

.context-prose .story-strip__photo {
  float: none;
  display: block;
  flex: 0 0 150px;
  width: 150px;
  max-width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--fob-radius-sm);
  margin: 0;
}

/* Two across, then one, as the column narrows — the two-then-three
   arrangement needs the width to hold. */
@media (max-width: 900px) {
  .story-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-strip__item,
  .story-strip__item--photo {
    grid-column: auto;
  }

  /* Half the column is too little to hold a 150px photograph and a readable
     measure beside it, so the picture goes back above the words. */
  .story-strip__item--photo {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .story-strip {
    grid-template-columns: 1fr;
  }

  /* One card to the full column: room for the pair side by side again. */
  .story-strip__item--photo {
    flex-direction: row;
  }
}

/* A pointer to a page that carries someone's story, left where their story
   used to sit. */
.memorial {
  clear: both;
  margin: var(--fob-space-lg) 0;
  padding: var(--fob-space-md) var(--fob-space-lg);
  border: 1px solid var(--fob-line);
  border-left: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-md);
  background-color: var(--fob-grey-1);
}

.context-prose .memorial__label {
  margin: 0;
  font-size: var(--fob-font-size-small);
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: var(--fob-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fob-grey);
}

.context-prose .memorial__title {
  margin: var(--fob-space-xs) 0 0;
  font-family: var(--fob-font-heading);
  font-size: var(--fob-font-size-medium);
  font-weight: var(--fob-font-weight-bold);
  line-height: var(--fob-line-height-tight);
}

.memorial__title a {
  color: var(--fob-color-heading);
  text-decoration: none;
}

.memorial__title a:hover,
.memorial__title a:focus-visible {
  text-decoration: underline;
}

.context-prose .memorial__text {
  margin: var(--fob-space-xs) 0 0;
  font-size: var(--fob-font-size-small);
  color: var(--fob-ink-soft);
}

/* Two portraits at the head of a page: a pair floated left with the text
   running around them, rather than each floated 500px wide down the left of
   the same paragraph, or a full-width band pushing the text below the fold. */
.portrait-row {
  float: left;
  display: flex;
  gap: var(--fob-space-sm);
  width: 340px;
  max-width: 55%;
  margin: var(--fob-space-xs) var(--fob-space-lg) var(--fob-space-md) 0;
}

.context-prose .portrait-row img {
  float: none;
  display: block;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 210px;
  object-fit: cover;
  margin: 0;
  border-radius: var(--fob-radius-sm);
}

/* Below this the column is too narrow for a float to leave a readable measure
   beside it. */
@media (max-width: 700px) {
  .portrait-row {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 var(--fob-space-lg);
  }
}

/* The classic WordPress gallery markup, which came across with the imported
   pages and has no styles of its own in this theme. */
.context-prose .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fob-space-md);
  margin: var(--fob-space-lg) 0;
  clear: both;
}

.context-prose .gallery-item,
.context-prose .gallery-icon {
  margin: 0;
}

.context-prose .gallery-icon img {
  float: none;
  display: block;
  width: 100%;
  max-width: none;
  height: 200px;
  object-fit: cover;
  margin: 0;
  border-radius: var(--fob-radius-sm);
}

.context-prose .gallery-caption {
  margin-top: var(--fob-space-xs);
  font-size: var(--fob-font-size-small);
  line-height: var(--fob-line-height-base);
  color: var(--fob-grey);
}

/* Back to the page this one was lifted out of. */
.context-prose .prose__back {
  clear: both;
  margin-top: var(--fob-space-xl);
  font-weight: var(--fob-font-weight-semibold);
}


/* The project entries as a record: a title and a line beneath it, ruled off
   from the next. Reads without photographs, which is as well — none of these
   entries has one. */
.project-rows {
  list-style: none;
  margin: var(--fob-space-lg) 0 0;
  padding: 0;
  border-top: 1px solid var(--fob-line);
}

.project-row {
  /* Padded off the left edge so a title never sits against the rule. */
  padding: var(--fob-space-sm) var(--fob-space-sm) var(--fob-space-sm) var(--fob-space-md);
  border-bottom: 1px solid var(--fob-line);
}

/* The line people scan for, and the link itself — so it takes the site's link
   colour rather than reading as a heading that happens to be clickable. */
.project-row__title {
  display: block;
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red);
  line-height: 1.4;
  text-decoration: none;
}

.project-row__title:hover,
.project-row__title:focus-visible {
  color: var(--fob-red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-row__text {
  margin: 2px 0 0;
  font-size: 0.84rem;
  line-height: var(--fob-line-height-base);
  color: var(--fob-ink-soft);
}


/* A partner's logo, what they do and what they are doing now, at the head of
   their page. The three come from the fob_partner post, which until now showed
   them only on the homepage card where they flip out of sight. */
.partner-head {
  padding: var(--fob-space-xl) 0 0;
}

.partner-head__inner {
  display: grid;
  gap: var(--fob-space-lg);
  align-items: start;
  padding: var(--fob-space-lg);
  background-color: var(--fob-grey-1);
  border-radius: var(--fob-radius-md);
}

@media (min-width: 760px) {
  .partner-head__inner {
    grid-template-columns: 200px 1fr;
    gap: var(--fob-space-xl);
  }
}

.partner-head__logo img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

.partner-head__city {
  margin: var(--fob-space-sm) 0 0;
  font-size: var(--fob-font-size-small);
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: var(--fob-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fob-grey);
}

.partner-head__label {
  margin: 0;
  font-family: var(--fob-font-primary);
  font-size: 0.74rem;
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: var(--fob-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fob-red);
}

.partner-head__body {
  margin: var(--fob-space-xs) 0 0;
  font-size: var(--fob-font-size-base);
  line-height: var(--fob-line-height-base);
  color: var(--fob-color-text);
}

.partner-head__body p {
  margin: 0;
}

/* The second pair needs air between it and the first. */
.partner-head__body + .partner-head__label {
  margin-top: var(--fob-space-md);
}

/* What we funded with this partner, at the foot of their page. */
.partner-projects {
  padding: 0 0 var(--fob-space-xl);
}

.partner-projects h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: var(--fob-space-sm);
  color: var(--fob-color-heading);
}


/* A project entry has no lede under its title, only the month and the partner,
   so the head's 40px tail and the prose's 56px lead left the better part of a
   hundred pixels of blank column between them. */
.single-project .page-head {
  padding-bottom: var(--fob-space-md);
}

.single-project .context-prose {
  padding-top: var(--fob-space-lg);
}


/* Contain the floats: a tall photograph at the end of an article would
   otherwise hang past the prose and over whatever follows it. */
.context-prose .container::after {
  content: "";
  display: block;
  clear: both;
}


/* A strip of photographs that arrived as one paragraph of images and nothing
   else. Floated in a column each was blown up to 500px, and several of these
   are 150px files that turned to mush at that size. Fixed cells instead, laid
   across the column. */
.photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fob-space-sm);
  margin: var(--fob-space-lg) 0;
  clear: both;
}

.context-prose .photo-strip img,
.prose .photo-strip img {
  float: none;
  display: block;
  width: 200px;
  max-width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0;
  border-radius: var(--fob-radius-sm);
}

/* A strip that keeps each photograph's own proportions, for a set that shares
   one shape — the six summer dance pictures are all 3:2 — where a square crop
   would cut the sides off every one of them. */
.context-prose .photo-strip--keep img,
.prose .photo-strip--keep img {
  width: 300px;
  height: auto;
}

/* Two tall photographs side by side and centred, held by height so a portrait
   does not tower over the words above it. */
.photo-strip--pair {
  justify-content: center;
  gap: var(--fob-space-lg);
}

.context-prose .photo-strip--pair img,
.prose .photo-strip--pair img {
  width: auto;
  max-width: 45%;
  height: 300px;
  object-fit: contain;
}

/* A pair of pictures beside an account rather than a set in their own right. */
.context-prose .photo-strip--small img,
.prose .photo-strip--small img {
  width: 200px;
}


/* A photograph inside a supporter's card — the horo picture that sits with
   this list on the live site belongs to Prince Kyril. Square, on the left,
   with the name and the text beside it. */
.supporter-card__figure {
  float: left;
  width: 130px;
  margin: 0 var(--fob-space-md) var(--fob-space-sm) 0;
}

.supporter-card__figure img {
  display: block;
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--fob-radius-sm);
}

.supporter-card__figure figcaption {
  margin-top: var(--fob-space-xs);
  font-size: 0.72rem;
  line-height: var(--fob-line-height-base);
  color: var(--fob-grey);
}

/* Contain the float so it cannot run past the card. */
.supporter-card::after {
  content: "";
  display: block;
  clear: both;
}



/* Photographs two across, each with its own caption: a set of pictures from
   one evening, rather than a column of them one under another. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fob-space-lg);
  margin: var(--fob-space-lg) 0;
  clear: both;
}

.photo-grid__item {
  margin: 0;
}

/* Shown whole, not cropped to a band: these are near-identical 3:2 landscapes,
   so the rows line up anyway, and a crop was cutting people and notice boards
   out of the frame. */
.prose .photo-grid__item img,
.context-prose .photo-grid__item img {
  float: none;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--fob-radius-sm);
}

.photo-grid__item figcaption {
  margin-top: var(--fob-space-xs);
  font-size: var(--fob-font-size-small);
  line-height: var(--fob-line-height-base);
  color: var(--fob-grey);
}

/* An empty caption still holds its row's height steady; no need for a gap. */
.photo-grid__item figcaption:empty {
  display: none;
}

/* Two, one, two: the third takes the full width, so the set does not end on a
   lone picture beside a gap. Scoped to the third of four figures, which is the
   shape of the 2025 summary — two singles, the wide one, then the pair. */
.photo-grid__item:nth-child(3):nth-last-child(2) {
  grid-column: 1 / -1;
}

/* The one that spans both columns would tower over the rest at full width, so
   it is held to the height of a row and centred. */
.prose .photo-grid__item:nth-child(3):nth-last-child(2) img,
.context-prose .photo-grid__item:nth-child(3):nth-last-child(2) img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin-inline: auto;
}

/* Two photographs of one moment, under the caption they share: the medal
   presentation on the 2025 summary is shown twice, and the caption describes
   both. The pair takes the full width so the caption can run under both. */
.photo-grid__item--pair {
  grid-column: 1 / -1;
}

.photo-grid__pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fob-space-lg);
  align-items: start;
}

@media (max-width: 560px) {
  .photo-grid__pair {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}