/* ============================================
   HERO SUBPAGE - SHARED STYLES
   Used by: programs.html, gallery.html, about.html, contact.html
   ============================================ */

/* Base Hero Subpage Styles */
.hero--subpage {
  min-height: clamp(180px, calc(34vw - 60px), 360px) !important;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

.hero--subpage .hero__bg {
  inset: -12px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% calc(46% + 17px);
}

.hero--subpage .hero__content {
  transform: translateY(14px);
  padding-top: calc(7rem - 20px);
  padding-bottom: calc(7rem - 20px);
}

/* Force single-line title and centered */
.hero--subpage .hero__title {
  white-space: nowrap;
  max-width: none;
  font-size: calc(clamp(2.6rem, 7.9vw, 4.8rem) + 3px);
}

.hero--subpage .hero__title span {
  display: inline !important;
  white-space: inherit !important;
}

.hero--subpage .hero__title span + span {
  margin-left: .25em;
}

/* Safari fix: avoid clipping of italic overhang */
.hero--subpage .hero__title em {
  padding-right: .08em;
}

/* Typography: DM Sans + Playfair Display italic */
.hero--subpage .hero__title {
  font-family: 'DM Sans', Inter, system-ui, sans-serif;
  font-weight: 400;
}

.hero--subpage .hero__title em {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-weight: 400;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero--subpage {
    align-items: center !important;
    justify-items: center !important;
    min-height: clamp(280px, calc(64vw - 20px), 400px) !important;
  }

  .hero--subpage > .container {
    padding-inline: calc(var(--space) + 18px) !important;
  }

  .hero--subpage .hero__content {
    margin-top: 0 !important;
    text-align: center !important;
    padding-top: calc(2rem - 20px) !important;
    padding-bottom: calc(3rem - 20px) !important;
    padding-inline: 0 !important;
    /* Default: no transform, will be overridden for specific viewports */
  }

  .hero--subpage .hero__title {
    font-size: calc(clamp(2.2rem, calc(11.8vw - 7px), 4.6rem) + 3px) !important;
    line-height: 1.04;
    letter-spacing: -0.012em;
    max-width: none;
    text-wrap: balance;
  }

  .hero--subpage .hero__bg {
    top: -16px;
    left: -16px;
    right: -16px;
    bottom: -16px;
    background-position: 0 0, 50% calc(48% + 8px);
    background-size: 100% 100%, cover;
    background-repeat: no-repeat, no-repeat;
    transform: none !important;
    animation: none !important;
  }

  /* Force 2-line hero title - shared across all subpages */
  .hero--subpage .hero__title {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    white-space: normal !important;
    line-height: 1.0;
    /* Safari iOS fix: prevent extra spacing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .hero--subpage .hero__title span + span {
    margin-left: 0 !important;
  }

  /* Vertical centering adjustment for mobile - applies to all mobile viewports */
  .hero--subpage .hero__content {
    transform: translateY(6px) !important;
  }
}

/* Fine-tune for iPhone 8 and similar (375x667) */
@media (max-width: 400px) and (min-height: 640px) {
  .hero--subpage .hero__title {
    font-size: 40px !important;
    letter-spacing: -0.012em;
  }

  .hero.hero--subpage .hero__content {
    transform: translateY(4px) !important;
  }
}

@media (max-width: 414px) {
  .hero--subpage .hero__title {
    font-size: clamp(2rem, calc(12.6vw - 7px), 4.8rem) !important;
  }

  .hero.hero--subpage .hero__content {
    transform: translateY(6px) !important;
  }
}

/* iPhone 11/12/13 (390px width) and similar */
@media (min-width: 376px) and (max-width: 414px) {
  .hero.hero--subpage .hero__content {
    transform: translateY(8px) !important;
  }
}

@media (min-width: 769px) {
  .hero--subpage .hero__bg {
    inset: -12px !important;
    transform: none !important;
    animation: none !important;
    background-position: 50% 0, 50% calc(46% + 7px);
  }
}

/* Shared Hero Slide Animations (for About & Contact pages) */
@keyframes heroSlideFromLeft {
  0% {
    opacity: .22;
  }
  20% {
    opacity: .6;
  }
  60% {
    opacity: .96;
  }
  85% {
    opacity: .99;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroSlideFromRight {
  0% {
    opacity: .22;
  }
  20% {
    opacity: .6;
  }
  60% {
    opacity: .96;
  }
  85% {
    opacity: .99;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Hero Title Slide Animation Setup */
.hero--animated .hero__title {
  position: relative;
}

.hero--animated .hero__title span {
  display: inline-block !important;
  will-change: transform, opacity;
}

.hero--animated .hero__title span:first-child {
  opacity: 0;
  transform-origin: 0% 50%;
  transform: translateX(-9vw) scale(.985);
  animation: heroSlideFromLeft 1.9s cubic-bezier(.23, 1, .32, 1) .05s forwards;
}

.hero--animated .hero__title span:last-child {
  opacity: 0;
  transform-origin: 100% 50%;
  transform: translateX(9vw) scale(.985);
  animation: heroSlideFromRight 1.9s cubic-bezier(.23, 1, .32, 1) .20s forwards;
}

/* Mobile: shorter travel and duration */
@media (max-width: 768px) {
  .hero--animated .hero__title span:first-child {
    transform: translateX(-6.5vw) scale(.99);
    animation-duration: 1.4s;
  }

  .hero--animated .hero__title span:last-child {
    transform: translateX(6.5vw) scale(.99);
    animation-duration: 1.4s;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero--animated .hero__title span {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}