/* Targeted additions to version 15; the original visual system stays intact. */
/* Six matching, edge-to-edge windows next to the opening message. */
.hero-wide .hero-side.hero-photo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  align-items: start;
  align-content: center;
  min-width: 0;
}
.hero-wide .hero-side.hero-photo-grid > img {
  display: block;
  width: 100%;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: center 10% !important;
  filter: none;
  transform: none;
}
/* Keep the portrait and meeting subjects visible within the matching frames. */
.hero-wide .hero-side.hero-photo-grid > img:nth-child(1) { object-position: center 50% !important; }
.hero-wide .hero-side.hero-photo-grid > img:nth-child(4) { object-position: center 80% !important; }

.story-grid article {
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
.story-grid img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: contain !important;
  object-position: center !important;
}

/* Local Instagram covers: no embedded feed, internal scrolling or autoplay. */
.instagram-static,
.instagram-photos .insta-images .instagram-static {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  background: #061b31;
  color: #fff;
  text-decoration: none;
}
.instagram-static img,
.instagram-photos .insta-images .instagram-static img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none !important;
}
.reel-static img { aspect-ratio: 9 / 16; }
.photo-static img { aspect-ratio: auto; }
.instagram-static .instagram-badge,
.instagram-photos .insta-images .instagram-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: block;
  padding: 6px 8px;
  border: 1px solid #ffffff66;
  background: #04182de8;
  color: #fff;
  font: 700 10px/1.4 Manrope, Arial, sans-serif;
}
.instagram-static:focus-visible,
.bank-section a:focus-visible,
.bank-section button:focus-visible,
.bank-section summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.instagram-static:hover .instagram-badge { color: var(--yellow); }

/* Full Instagram photos retain their native proportions, with no overlays. */
.instagram-photos .insta-images.top-photo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.instagram-photos .top-photo-grid > article {
  display: block;
  min-width: 0;
  border: 1px solid var(--line);
  background: #061b31;
}
.instagram-photos .top-photo-grid .photo-static {
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
}
.instagram-photos .top-photo-grid .photo-static img {
  width: 100%;
  height: auto !important;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: center;
}
.instagram-photos .top-photo-grid .photo-static .instagram-badge {
  position: static;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: right;
}
.instagram-photos .top-photo-grid > article > p { margin: 0; padding: 12px; line-height: 1.6; }
@media (max-width: 760px) {
  .instagram-photos .insta-images.top-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .instagram-photos .top-photo-grid > article > p { padding: 10px; }
}

/* Full Lato 2.015 webfonts include Cyrillic and all five site languages. */
@font-face {
  font-family: Lato;
  src: url('/fonts/lato/Lato-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Lato;
  src: url('/fonts/lato/Lato-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* One content typeface; only profile names use the bold weight. */
body,
body *,
body *::before,
body *::after {
  font-family: Lato, Arial, sans-serif !important;
  font-weight: 400 !important;
}
.denys-section .section-title h2,
.denys-section .section-title h2 * {
  font-weight: 700 !important;
}

/* Preserve existing wordmarks separately from the unified content typeface. */
.ribbon-brand strong { font-family: Days, Georgia, serif !important; }
.topbar .mobile-brand { font-family: 'Playfair Display', Georgia, serif !important; }

/* Additional volunteers follow the same balanced portrait layout. */
.serhii-section { background: #082442; }
.pavlo-section { background: #051c34; }
.team-person-section .denys-card > img { aspect-ratio: 1 / 1; min-height: 0; object-fit: contain !important; }
.team-person-section .denys-card > div { align-self: center; }

/* Six document cards, including the original brandbook. */
.document-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.document-grid a,
.document-grid a:last-child {
  min-width: 0;
  grid-column: auto;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.document-grid a:nth-child(3n) { border-right: 0; }
.document-grid a:nth-last-child(-n+3) { border-bottom: 0; }

/* Compact bank cards use the typography and colours of version 15. */
.bank-section { border-bottom: 1px solid var(--line); background: #06203a; }
.bank-heading { margin-bottom: 22px; }
.bank-heading h2 {
  margin: 0;
  color: var(--white);
  font: 32px/1.1 'Playfair Display', Georgia, serif;
}
.bank-heading > p:last-child {
  margin: 12px 0 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.bank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bank-card { min-width: 0; padding: 20px; border: 1px solid var(--line); background: #061b31; }
.bank-card .bank-currency { margin: 0 0 9px; color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: .8px; }
.bank-card h3 { margin: 0 0 18px; color: var(--white); font: 23px/1.15 'Playfair Display', Georgia, serif; }
.bank-card .iban-label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.bank-card .bank-iban {
  display: block;
  margin: 0 0 12px;
  color: #fff;
  font: 600 12px/1.6 Manrope, Arial, sans-serif;
  overflow-wrap: anywhere;
  user-select: all;
}
.copy-iban {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ffd40080;
  background: transparent;
  color: var(--yellow);
  font: 700 11px/1.4 Manrope, Arial, sans-serif;
  cursor: pointer;
}
.bank-section.copy-ready .copy-iban { display: flex; }
.copy-iban:hover { background: #ffd40014; }
.copy-status { display: block; min-height: 18px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.bank-card details { margin-top: 12px; border-top: 1px solid var(--line); }
.bank-card summary { padding: 14px 0 8px; color: var(--yellow); font-size: 11px; line-height: 1.6; font-weight: 700; cursor: pointer; }
.bank-card dl { margin: 10px 0 0; }
.bank-card dt { margin: 13px 0 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.bank-card dd { margin: 0; color: #fff; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-grid a:nth-child(n) { grid-column: auto; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .document-grid a:nth-child(2n) { border-right: 0; }
  .document-grid a:nth-last-child(-n+2) { border-bottom: 0; }
  .bank-heading h2 { font-size: 29px; }
  .bank-grid { grid-template-columns: 1fr; }
  .bank-card { padding: 20px; }
}
/* Five language options remain accessible without horizontal overflow. */
@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
  }
  .topbar .mobile-brand { max-width: calc(100% - 122px); }
  .topbar .language-menu {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin: 0;
  }
  .topbar .language-menu + .donate-top { margin-left: auto; }
  .topbar .language-menu a,
  .topbar .language-menu strong { min-width: 44px; height: 36px; }
}