/**
 * Outro Component Styles
 *
 * Styles for the data-driven outro system using BEM methodology
 */

/* Base outro section styling with CSS Grid */
#outro,
.outro-section,
[data-outro] {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "outro";
  position: relative;
  background-image: linear-gradient(to bottom, #fff, #81c4e2);
  min-height: 278px;
  overflow: hidden;
}

/* BEM: Outro Girl Images as Background - Full Stretch */
.outro__girl {
  grid-area: outro;
  z-index: 1;
  pointer-events: none;
  place-self: stretch;
  /* Fill entire grid area */
}

.outro__girl--left {
  background-image: url('/img/footer_left_gal.png');
  background-size: auto 100%;
  /* Full height, auto width */
  background-repeat: no-repeat;
  background-position: left bottom;
  /* Touch left and bottom edges */
}

.outro__girl--right {
  background-image: url('/img/footer_right_gal.png');
  background-size: auto 100%;
  /* Full height, auto width */
  background-repeat: no-repeat;
  background-position: right bottom;
  /* Touch right and bottom edges */
}

/* WebP support override for modern browsers */
@supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
  .outro__girl--left {
    background-image: url('/img/footer_left_gal.webp');
  }

  .outro__girl--right {
    background-image: url('/img/footer_right_gal.webp');
  }
}

/* BEM: Outro Content - Full Stretch with Centered Content */
.outro__content {
  grid-area: outro;
  place-self: stretch;
  /* Fill entire grid area */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-align: center;
}

.outro__content__left {
  grid-area: outro;
  place-self: stretch;
  /* Fill entire grid area */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-align: center;
}

/* Responsive behavior for mobile */
@media (width <=991.98px) {
  .outro__girl {
    display: none;
  }
}

/* Typography */
.outro__content h3,
.outro-section h3 {
  text-align: center;
  margin-bottom: 1rem;
}

.outro__content__left h3,
.outro-section__left h3 {
  text-align: left;
  margin-bottom: 1rem;
}

.outro__content .uppercase,
#outro .uppercase,
.outro-section .uppercase,
[data-outro] .uppercase {
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Button styling */
.outro__content .btn,
#outro .btn,
.outro-section .btn,
[data-outro] .btn {
  margin: 0.25rem;
}

/* Social links styling */
.outro__content .hstack,
#outro .hstack,
.outro-section .hstack,
[data-outro] .hstack {
  flex-wrap: wrap;
}

/* Loading state */
.outro__content .spinner-border,
#outro .spinner-border,
.outro-section .spinner-border,
[data-outro] .spinner-border {
  z-index: 3;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .outro-section *,
  [data-outro] * {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .outro-section,
  [data-outro] {
    background: linear-gradient(to bottom, #fff, #000);
    color: #000;
  }

  .outro-section .btn-outline-secondary,
  [data-outro] .btn-outline-secondary {
    border-color: #000;
    color: #000;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {

  .outro-section,
  [data-outro] {
    background-image: linear-gradient(to bottom, #1a1a1a, #2d5a87);
    color: #fff;
  }
}