/**
 * Friends of Bulgaria - Homepage Section Styles
 * Styles for all homepage sections not covered by hero.css.
 * Mobile-first approach: base styles for mobile, enhanced at breakpoints.
 * Requirements: 3.3, 3.5, 3.9, 3.11, 3.12, 3.13, 10.1, 10.6
 *
 * Sections covered:
 * - Shared section rhythm and headers (.homepage-section, .section-header)
 * - Event band (.event-strip)
 * - About intro and ledger strip (.about-intro, .ledger)
 * - Pillars grid (.pillar-grid)
 * - Partner flip cards (.partner-card)
 * - SVG Map (.svg-map)
 * - Pull-quote band (.pull-quote)
 * - News scroller (.news-track, .news-nav)
 * - Donate band (.donate-cta)
 * - Generic placeholders (.card__image--placeholder)
 */

/* =========================================
   Shared section rhythm

   Every homepage band runs on the same vertical rhythm, with the tinted
   variants inheriting a light background from the concept.
   ========================================= */

.homepage-section {
  padding: var(--fob-section-pad) 0;
}

/**
 * The primary menu jumps to these sections, and the header is sticky — without
 * a scroll margin the header would sit on top of each section's heading on
 * arrival. Also applied to the footer contact block, the "Contact Us" target.
 */
.homepage-section,
.site-footer__contact {
  scroll-margin-top: calc(var(--fob-header-height) + var(--fob-space-md));
}

/* Bands that supply their own padding must not double up. */
.homepage-section--event-strip,
.homepage-section--donate-cta,
.homepage-section--testimonials {
  padding: 0;
}

/* The About band's ledger strip runs full width, so the band itself
   carries only its top padding. */
.homepage-section--about {
  padding-bottom: 0;
}

/* Tinted bands */
.homepage-section--pillars,
.homepage-section--map {
  background-color: var(--fob-grey-1);
}

/* =========================================
   Section header — eyebrow, heading, optional lede
   ========================================= */

.section-header {
  margin-bottom: 44px;
}

/* The prose sections read as one block: heading sits close to its copy. */
.homepage-section--about .section-header,
.homepage-section--why-it-matters .section-header {
  margin-bottom: 18px;
}

.homepage-section--supporters .section-header {
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: var(--fob-font-size-h2);
}

.section-header__lede,
.section-header > p:not(.eyebrow) {
  color: var(--fob-ink-soft);
  margin-top: 12px;
}

.section-footer {
  margin-top: 30px;
}

/* Standalone red arrow link used throughout the page */
.link-arrow {
  color: var(--fob-red);
  font-weight: var(--fob-font-weight-bold);
  text-decoration: none;
}

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

/* =========================================
   Event band

   The red band beneath the hero: copy left, photograph right.
   ========================================= */

.event-strip {
  width: 100%;
  background-color: var(--fob-red);
  color: var(--fob-white);
  font-family: var(--fob-font-primary);
  line-height: var(--fob-line-height-base);
}

.event-strip__inner {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 42px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}

.event-strip__title {
  font-family: var(--fob-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: var(--fob-font-weight-normal);
  line-height: var(--fob-line-height-tight);
  color: var(--fob-white);
  margin: 0 0 12px;
}

.event-strip__date {
  display: block;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-red-soft);
  margin-bottom: 12px;
}

.event-strip__description {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  margin: 0 0 18px;
  max-width: 52ch;
}

.event-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* A square frame, so a wide banner does not sit in the band as a thin ribbon.
   The artwork is centred in its own image, so cropping to a square drops the
   empty margins either side and the subject itself comes up larger. */
.event-strip__media img {
  /* Four fifths of its column, so the square reads as an image in the band
     rather than as a panel filling half of it. */
  width: 80%;
  max-width: 100%;
  margin-inline: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--fob-radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

@media (max-width: 760px) {
  .event-strip__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* =========================================
   About Intro + ledger strip
   ========================================= */

/* Runs the full container width — the concept sets max-width:none here. */
.about-intro__content {
  max-width: none;
}

.about-intro__content p {
  color: var(--fob-color-text);
  margin-bottom: 1.1rem;
}

.about-intro__content p strong {
  color: var(--fob-ink);
  font-weight: var(--fob-font-weight-semibold);
}

.about-intro__more {
  margin-top: var(--fob-space-lg);
}

/**
 * Ledger — the tinted full-bleed strip of headline facts. Sits outside the
 * container so the tint runs edge to edge; the inner element re-establishes
 * the measure.
 */
.ledger {
  margin-top: var(--fob-section-pad);
  background-color: var(--fob-grey-1);
  border-top: 1px solid var(--fob-line);
  border-bottom: 1px solid var(--fob-line);
}

.ledger__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 8px;
  padding-top: 26px;
  padding-bottom: 26px;
}

@media (max-width: 860px) {
  .card--stat + .card--stat {
    border-left: 0;
  }
}

/* =========================================
   Pillars — 2x2 grid of horizontal cards
   ========================================= */

.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

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

/* =========================================
   Partner flip cards
   ========================================= */

/**
 * Two across, so the shortlisted partners get the full measure between them.
 * The count is set in partners-grid.php; if it changes, revisit this.
 */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/**
 * Fixed height because the two faces are stacked for the flip, so neither can
 * size the card. Measured at the two-across width: the front face needs 174px
 * and the reverse 154px, so 178px clears both without leaving dead space.
 *
 * Re-measure if the card count, straplines or update copy change materially.
 */
.partner-card {
  display: block;
  height: 178px;
  perspective: 1200px;
  text-decoration: none;
  color: inherit;
}

.partner-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.partner-card:hover .partner-card__inner,
.partner-card:focus-visible .partner-card__inner {
  transform: rotateY(180deg);
}

.partner-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: 6px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.partner-card__face--front {
  justify-content: center;
}

.partner-card__face--back {
  justify-content: center;
  transform: rotateY(180deg);
  background-color: var(--fob-red);
  border-color: var(--fob-red);
}

/**
 * Front face is a two-column row, top-aligned: logo on the left, and the name,
 * city, strapline and hint all in the right column — so nothing sits beneath
 * the logo.
 */
.partner-card__face--front {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
}

/* Two across leaves more room, so the mark can carry more weight. */
.partner-card__logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  width: 118px;
  padding-top: 2px;
}

.partner-card__logo img {
  max-width: 100%;
  max-height: 92px;
  width: auto;
  object-fit: contain;
}

.partner-card__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.partner-card__name {
  font-size: 1.26rem;
  color: var(--fob-ink);
  margin-bottom: 4px;
}

.partner-card__strapline {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fob-ink-soft);
  margin: 10px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.partner-card__city {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  margin: 0;
}

.partner-card__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fob-grey-3);
}

.partner-card__update {
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 14px;
}

.partner-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-white);
}

/* Touch devices cannot hover: show both faces stacked instead of flipping. */
@media (hover: none) {
  .partner-card {
    height: auto;
  }

  .partner-card__inner {
    transition: none;
  }

  .partner-card__face {
    position: static;
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .partner-card__face--front {
    justify-content: flex-start;
  }

  .partner-card__face--back {
    margin-top: 14px;
    justify-content: flex-start;
  }

  .partner-card__hint {
    display: none;
  }
}

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

/* =========================================
   Trust row — the three "how we work" statements
   ========================================= */

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-row__item {
  position: relative;
  padding: 26px 26px 28px;
  background-color: var(--fob-grey-1);
  border: 1px solid var(--fob-line);
  border-radius: var(--fob-radius-lg);
  overflow: hidden;
}

/* Claret cap across the top of each card, echoing the brand rule. */
.trust-row__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-color: var(--fob-red);
}

/* Icon and headings on one row, headings ranged to the right of the icon. */
.trust-row__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.trust-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--fob-red);
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: 50%;
}

.trust-row__icon svg {
  width: 21px;
  height: 21px;
}

.trust-row__headings {
  min-width: 0;
}

/* The figure each statement turns on, set in the display serif. */
.trust-row__lead {
  font-family: var(--fob-serif);
  font-size: 1.35rem;
  font-weight: var(--fob-font-weight-heading);
  line-height: 1.1;
  letter-spacing: var(--fob-tracking-heading);
  color: var(--fob-red);
  margin: 0 0 2px;
}

.trust-row__title {
  font-family: var(--fob-sans);
  font-size: 0.74rem;
  font-weight: var(--fob-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fob-ink);
  margin: 0;
}

.trust-row__copy {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fob-ink-soft);
  margin: 0;
}

@media (max-width: 860px) {
  .trust-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =========================================
   Where we work — copy beside an inline map
   ========================================= */

.where-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.where-grid__lede {
  color: var(--fob-ink-soft);
}

.where-grid__copy p + p {
  margin-top: 14px;
}

.svg-map__svg {
  width: 100%;
  height: auto;
  display: block;
}

.svg-map__label {
  font-family: var(--fob-sans);
}

@media (max-width: 760px) {
  .where-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* =========================================
   Testimonials
   Blockquote styling, attribution, and
   carousel track for testimonial items.
   Requirements: 3.11
   ========================================= */

.homepage-section--testimonials {
  background-color: var(--fob-green-quote);
  color: var(--fob-white);
}

.pull-quote {
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;
}

.pull-quote__mark {
  display: block;
  font-family: var(--fob-serif);
  font-size: 3rem;
  line-height: 0.2;
  color: var(--fob-red-2);
  margin-bottom: 22px;
}

/**
 * All quotes occupy the same grid cell so the band keeps the height of the
 * tallest and the inactive ones cross-fade beneath.
 */
.pull-quote__stack {
  display: grid;
}

.pull-quote__item {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease;
}

.pull-quote__item.is-active {
  opacity: 1;
  visibility: visible;
}

.pull-quote__text {
  font-family: var(--fob-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: var(--fob-font-weight-normal);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-style: normal;
  color: var(--fob-white);
}

.pull-quote__cite {
  display: block;
  font-family: var(--fob-sans);
  font-style: normal;
  font-size: 0.92rem;
  font-weight: var(--fob-font-weight-medium);
  letter-spacing: 0.03em;
  color: var(--fob-red-soft);
  margin-top: 28px;
}

.pull-quote__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
}

.pull-quote__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pull-quote__dot:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.pull-quote__dot.is-active {
  background-color: var(--fob-red-2);
}

/* The dots are 8px visually; widen the hit area to meet the 44px target
   without disturbing the layout. */
.pull-quote__dot::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-18px, -18px);
}

.pull-quote__dot {
  position: relative;
}

/* =========================================
   News scroller

   A horizontal scroll-snap track of news cards with the previous/next
   controls sitting in the section header, as in the concept.
   ========================================= */

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 22px;
}

.news-nav {
  display: flex;
  gap: 8px;
}

.news-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--fob-ink);
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-nav__btn:hover {
  background-color: var(--fob-red);
  border-color: var(--fob-red);
  color: var(--fob-white);
}

.news-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 16px;
}

.news-track::-webkit-scrollbar {
  height: 8px;
}

.news-track::-webkit-scrollbar-track {
  background: transparent;
}

.news-track::-webkit-scrollbar-thumb {
  background-color: var(--fob-line);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .news-track {
    scroll-behavior: auto;
  }
}
/* =========================================
   Donate CTA
   Full-width background strip with centered
   text and button spacing.
   Requirements: 3.13
   ========================================= */

/**
 * A compact red band, not a tall centred panel: copy left, actions right,
 * wrapping to stacked rows on narrow screens.
 */
.homepage-section--donate-cta {
  background-color: var(--fob-red);
}

.donate-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 24px;
  padding-bottom: 24px;
  color: var(--fob-white);
}

.donate-cta__headline {
  font-family: var(--fob-serif);
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-white);
  line-height: var(--fob-line-height-tight);
  margin: 0;
}

.donate-cta__text {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: var(--fob-line-height-base);
  max-width: 64ch;
  margin: 5px 0 0;
}

.donate-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The line button inherits the band's white text. */
.donate-cta .btn--line {
  color: var(--fob-white);
}

@media (max-width: 575px) {
  .donate-cta__actions {
    width: 100%;
  }

  .donate-cta__actions .btn {
    flex: 1 1 auto;
  }
}

/* =========================================
   Generic Placeholder
   Background placeholder for cards with
   missing featured images.
   Requirements: 10.8
   ========================================= */

.card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--fob-grey-2);
  background-image: linear-gradient(135deg, var(--fob-grey-1) 0%, var(--fob-grey-2) 100%);
  color: var(--fob-grey-3);
  font-size: var(--fob-font-size-small);
  font-weight: var(--fob-font-weight-medium);
  text-align: center;
}

.card__image--placeholder::after {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =========================================
   Map site markers and tooltip
   ========================================= */

.svg-map {
  position: relative;
}

.svg-map__site {
  cursor: pointer;
}

.svg-map__dot {
  transition: r 0.15s ease;
}

.svg-map__site:hover .svg-map__dot,
.svg-map__site.is-active .svg-map__dot {
  r: 5.6;
}

.svg-map__site:focus {
  outline: none;
}

.svg-map__site:focus-visible .svg-map__dot {
  r: 5.6;
  stroke: var(--fob-ink);
  stroke-width: 2.4;
}

/**
 * Positioned as a percentage of the map container, which the SVG fills, so it
 * tracks the pin at any width. Translated up and centred by default; the
 * modifiers flip it near the edges so it never leaves the map.
 */
.svg-map__tip {
  position: absolute;
  z-index: 5;
  width: 232px;
  transform: translate(-50%, calc(-100% - 16px));
  background-color: var(--fob-white);
  border: 1px solid var(--fob-line);
  border-left: 3px solid var(--fob-red);
  border-radius: var(--fob-radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 12px 14px;
  pointer-events: none;
}

.svg-map__tip[hidden] {
  display: none;
}

.svg-map__tip.is-left {
  transform: translate(-14px, calc(-100% - 16px));
}

.svg-map__tip.is-right {
  transform: translate(calc(-100% + 14px), calc(-100% - 16px));
}

.svg-map__tip.is-below {
  transform: translate(-50%, 16px);
}

.svg-map__tip.is-left.is-below {
  transform: translate(-14px, 16px);
}

.svg-map__tip.is-right.is-below {
  transform: translate(calc(-100% + 14px), 16px);
}

.svg-map__tip-town {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fob-font-weight-semibold);
  color: var(--fob-grey-3);
  margin-bottom: 4px;
}

.svg-map__tip-partner {
  display: block;
  font-family: var(--fob-serif);
  font-size: 1.02rem;
  font-weight: var(--fob-font-weight-heading);
  color: var(--fob-ink);
  line-height: 1.2;
}

.svg-map__tip-project {
  display: block;
  margin-top: 5px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--fob-ink-soft);
}

.where-grid__hint {
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--fob-grey-3);
}

@media (max-width: 600px) {
  .svg-map__tip {
    width: 200px;
  }
}

/* A past site stays on the map but is drawn hollow, so present-tense reach is
   not overstated. */
.svg-map__site--past .svg-map__dot {
  fill: var(--fob-white);
  stroke: var(--fob-grey-3);
  stroke-width: 2;
}

.svg-map__site--past text {
  fill: var(--fob-grey-3);
}

.svg-map__tip.is-past {
  border-left-color: var(--fob-grey-3);
}

.svg-map__tip.is-past .svg-map__tip-town::after {
  content: " · past";
  color: var(--fob-grey-3);
}