/* ============================================================
   Veterans Spotlight Block Styles
   Unified background effect matching text-4-columns-block:
   - Base background: #E9F7F8 (light teal)
   - Background image opacity: 0.24
   ============================================================ */

.veterans-spotlight-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 80px 64px;
  /* Do not clip the rotated coral frame; body overflow-x contains the page */
  overflow: visible;
  /* Base light teal background - unified with text-4-columns-block */
  background: #E9F7F8;
}

/* Tinted background image filling the entire section - unified effect */
.veterans-spotlight-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.veterans-spotlight-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24; /* Unified opacity with text-4-columns-block */
}

/* ---- Header: label, title, subtitle ---- */
.veterans-spotlight-header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1280px;
  margin-bottom: 56px;
}

/* Theme typography; keep vertical rhythm and subtitle width from original layout */
.veterans-spotlight-header .es-section-title {
  margin: 16px 0;
}

.veterans-spotlight-header .es-section-subtitle {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* ---- Two-column feature row (photo + text) ---- */
.veterans-spotlight-feature {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
  margin-bottom: 56px;
}

/*
 * Main portrait + Figma coral frame (same as static homepage).
 * aspect-ratio 519/633 locks the frame; uploads of any size are cropped inside
 * with object-fit:cover so layout does not jump or distort.
 */
.veterans-spotlight-photo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 548px;
  max-width: 100%;
  aspect-ratio: 519 / 633;
  overflow: visible;
}

.veterans-spotlight-photo-card {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: -14px;
  right: 6px;
  bottom: 4px;
  background-color: var(--orange);
  border-radius: 12px;
  transform-origin: center center;
  transform: rotate(6deg) translateZ(0);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(229, 116, 64, 0.22);
}

.veterans-spotlight-photo {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

/* Text column */
.veterans-spotlight-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.veterans-spotlight-vetfran {
  margin-bottom: 20px;
}

.veterans-spotlight-text p {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--smith-grey);
  margin: 0 0 16px;
}

/* ---- Photo carousel ---- */
/*
 * Full-bleed trick: in a flex-column with align-items:center, a negative
 * margin on one side alone shifts the element off-center, creating a gap
 * on the opposite side. Using equal negative margins on BOTH sides keeps
 * the element perfectly symmetric so it starts and ends at the section edges.
 * Formula: width = 100% + (padding-left + padding-right), margins = -padding each side.
 */
.veterans-spotlight-carousel {
  position: relative;
  z-index: 1;
  width: calc(100% + 160px); /* 80px section padding × 2 sides */
  margin-left: -80px;
  margin-right: -80px; /* equal margin keeps carousel flush on both sides */
  max-width: none;
  overflow: hidden; /* clips the scrolling track */
}

/* Sliding track: flex row; JS translates this */
.veterans-spotlight-carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s ease;
}

/* Individual slide — larger to fill the wider container */
.veterans-spotlight-slide {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
}

.veterans-spotlight-slide img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 0;
}

/* Short orange bar under each photo */
.veterans-spotlight-slide-bar {
  width: 40px;
  height: 3px;
  background: var(--orange);
  margin-top: 12px;
}

.veterans-spotlight-slide-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark);
  margin-top: 8px;
}

/* ---- Carousel controls: dots left, arrows right ---- */
.veterans-spotlight-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin-top: 24px;
}

.veterans-spotlight-dots {
  display: flex;
  gap: 8px;
}

.veterans-spotlight-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d8d8d8;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.veterans-spotlight-dot.active {
  background: var(--orange);
}

.veterans-spotlight-arrows {
  display: flex;
  gap: 12px;
}

.veterans-spotlight-arrow {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.veterans-spotlight-arrow img {
  width: 15px;
  height: 11px;
  display: block;
}

/* ============================================================
   Tablet Responsive - 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .veterans-spotlight-block {
    padding: 64px 32px 48px;
  }

  .veterans-spotlight-feature {
    flex-direction: column;
    align-items: center;
  }

  .veterans-spotlight-photo-wrap {
    width: 100%;
    max-width: 420px;
  }

  .veterans-spotlight-text {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* Carousel full-width: section padding is 32px each side at 1024px */
  .veterans-spotlight-carousel {
    width: calc(100% + 64px); /* 32px × 2 */
    margin-left: -32px;
    margin-right: -32px; /* equal margin keeps carousel flush on both sides */
    overflow: hidden; /* Keep hidden to prevent body scroll issues */
  }

  /* Track: add left padding to center the first slide */
  .veterans-spotlight-carousel-track {
    gap: 24px; /* Must match JS gap value for correct positioning */
    padding-left: calc((100vw - 320px) / 2); /* Center: 320px is slide width for tablet */
    padding-right: 0;
  }

  .veterans-spotlight-slide {
    flex: 0 0 320px;
  }

  .veterans-spotlight-slide img {
    width: 320px;
    height: 320px;
  }

  /* Orange bar under image */
  .veterans-spotlight-slide-bar {
    width: 48px;
    height: 4px;
    background: var(--orange);
    margin-top: 16px;
  }

  /* Label below the orange bar */
  .veterans-spotlight-slide-label {
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
    color: var(--dark);
  }

  /* Controls: dots on left, arrows on right */
  .veterans-spotlight-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin-top: 24px;
  }

  .veterans-spotlight-dots {
    display: flex;
    gap: 8px;
  }

  .veterans-spotlight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8d8d8;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
  }

  .veterans-spotlight-dot.active {
    background: var(--orange);
  }

  .veterans-spotlight-arrows {
    display: flex;
    gap: 1px;
    align-items: center;
  }

  .veterans-spotlight-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
  }
}

/* ============================================================
   Mobile Responsive - 768px
   ============================================================ */
@media (max-width: 768px) {
  .veterans-spotlight-block {
    padding: 48px 20px 40px;
  }

  .veterans-spotlight-photo-wrap {
    width: 100%;
    max-width: 320px;
  }

  /* Carousel full-width: section padding is 20px each side at 768px
   * Mobile carousel: single centered slide with peek of next slide
   * Figma reference: node 801-1672 - shows one main image with partial next image visible
   *
   * Strategy: slides take up 72% of viewport, leaving ~28% for peek of next slide.
   * Track padding-left centers the first slide in the viewport.
   */
  .veterans-spotlight-carousel {
    width: calc(100% + 40px); /* 20px × 2 */
    margin-left: -20px;
    margin-right: -20px; /* equal margin keeps carousel flush on both sides */
    overflow: hidden; /* Keep hidden to prevent body scroll issues */
  }

  /* Track: add left padding to center the first slide
   * This creates the effect of the active slide being centered with peek visible
   * IMPORTANT: gap must stay 24px to match JS calculation (veterans-carousel.js line 57)
   */
  .veterans-spotlight-carousel-track {
    gap: 24px; /* Must match JS gap value for correct positioning */
    padding-left: calc((100vw - 264px) / 2); /* Center: 264px is slide width */
    padding-right: 0;
  }

  /* Slide: 264px width shows one slide with peek of next on typical mobile (~375px viewport) */
  .veterans-spotlight-slide {
    flex: 0 0 264px; /* Width that allows peek of next slide */
  }

  .veterans-spotlight-slide img {
    width: 264px;
    height: 264px;
    object-fit: cover;
  }

  /* Orange bar under image - wider for mobile */
  .veterans-spotlight-slide-bar {
    width: 48px;
    height: 4px;
    background: var(--orange);
    margin-top: 16px;
  }

  /* Label below the orange bar */
  .veterans-spotlight-slide-label {
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
    color: var(--dark);
  }

  /* Controls: dots on left, arrows on right (same as desktop layout)
   * Updated sizes for mobile while keeping original positioning
   */
  .veterans-spotlight-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Dots left, arrows right */
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin-top: 24px;
  }

  /* Dots: smaller for mobile */
  .veterans-spotlight-dots {
    display: flex;
    gap: 8px;
  }

  .veterans-spotlight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8d8d8;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
  }

  .veterans-spotlight-dot.active {
    background: var(--orange);
  }

  /* Arrows: match newsroom block sizing */
  .veterans-spotlight-arrows {
    display: flex;
    gap: 1px;
    align-items: center;
  }

  .veterans-spotlight-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
  }
}