/* PIOUS Foundation — assets/css/hero.css */
/* 
   FULL-SCREEN CAROUSEL HERO
   
   Oxpins uses Swiper.js for the main slider — already in the theme.
   The original layout puts the image on the RIGHT half only (width:50%).
   We convert this to a TRUE full-screen background image carousel:
   - Image covers 100% width and height of the slide
   - Dark overlay for text legibility
   - Text content centred / left-aligned over the full image
   - Works identically on desktop and mobile
   - Navigation arrows on left side (oxpins default position, kept)
*/


/* ============================================================
   SLIDER CONTAINER — full viewport height
   ============================================================ */

.main-slider {
  position: relative;
  display: block;
  z-index: 91;
  background-color: var(--color-primary) !important;
}

.main-slider .swiper-slide {
  position: relative;
  background-color: var(--color-primary);
  /* Full viewport height — subtract header height (~130px) */
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
}

@media (max-width: 1199px) {
  /* On mobile, header is ~70px */
  .main-slider .swiper-slide {
    min-height: calc(100vh - 70px);
  }
}

@media (max-width: 767px) {
  .main-slider .swiper-slide {
    min-height: 85vh;   /* reliable on mobile browsers with address bar */
    align-items: flex-start;   /* push content up so founder image has room below */
  }
}


/* ============================================================
   FULL-SCREEN BACKGROUND IMAGE
   
   Oxpins puts the image in .image-layer as a background-image
   on a div that's positioned right:0, width:50%.
   We convert it to cover the full slide.
   ============================================================ */

.main-slider .image-layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;        /* was: right:-20px, width:50% */
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;    /* full width */
  background-size: cover !important;
  background-position: center top !important;   /* keep faces in frame instead of centering the crop */
  background-repeat: no-repeat !important;
  mix-blend-mode: normal !important;   /* remove luminosity — show real colours */
  transform: scale(1);
  transition: transform 7000ms ease, opacity 1500ms ease-in !important;
  z-index: 1;
}

.main-slider .swiper-slide-active .image-layer {
  transform: scale(1.06) !important;   /* subtle Ken Burns — less aggressive than 1.15 */
}


/* ============================================================
   DARK OVERLAY — legibility over any image
   ============================================================ */

.main-slider .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Strong left fade: text is left-aligned, image detail shows on right */
  background: linear-gradient(
    100deg,
    rgba(2, 1, 73, 0.88) 0%,
    rgba(2, 1, 73, 0.60) 55%,
    rgba(2, 1, 73, 0.25) 100%
  ) !important;
  z-index: 2;
}

@media (max-width: 767px) {
  /* On mobile, full overlay — text stacks centrally */
  .main-slider .swiper-slide::before {
    background: rgba(2, 1, 73, 0.75) !important;
  }
}


/* ============================================================
   CONTENT CONTAINER — sits above image and overlay
   ============================================================ */

.main-slider .container {
  position: relative;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  z-index: 30 !important;
}

.main-slider__content {
  position: relative;
  display: block;
  text-align: left;
  max-width: 680px;
  z-index: 30 !important;
}

@media (max-width: 767px) {
  .main-slider__content {
    max-width: 100%;
    text-align: center;
  }

  .main-slider .container {
    padding-top: 28px !important;
    padding-bottom: 50px !important;
  }
}


/* ============================================================
   TAGLINE / SUB-TITLE
   ============================================================ */

.main-slider__sub-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  color: yellow !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  margin-bottom: var(--space-xs) !important;
  /* Oxpins entrance animation — leave intact */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40px);
  text-shadow: 1px 2px black;
  transition-delay: 1000ms;
  transition: opacity 1200ms ease, transform 1200ms ease;
}

.main-slider .swiper-slide-active .main-slider__sub-title {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ============================================================
   MAIN TITLE
   ============================================================ */

.main-slider__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;  /* fluid — never overflows */
  line-height: 1.15 !important;
  color: var(--color-white) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-top: var(--space-sm) !important;
  margin-bottom: var(--space-md) !important;
  /* Entrance animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40px);
  transition-delay: 1000ms;
  transition: opacity 1200ms ease, transform 1200ms ease;
  text-shadow: 1px 2px black;
}

.main-slider .swiper-slide-active .main-slider__title {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (max-width: 767px) {
  .main-slider__title {
    font-size: clamp(1.6rem, 7vw, 2.25rem) !important;
  }
}


/* ============================================================
   BUTTON ROW
   ============================================================ */

.main-slider__btn-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* Entrance animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition-delay: 1000ms;
  transition: opacity 1200ms ease, transform 1200ms ease;
}

.main-slider .swiper-slide-active .main-slider__btn-box {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (max-width: 767px) {
  .main-slider__btn-box {
    justify-content: center;
  }
}

/* Hero button — inherits .thm-btn from components.css */
.main-slider__btn {
  /* thm-btn styles apply — these are overrides specific to the hero */
  font-size: 13px !important;
}

.main-slider__btn:before {
  background-color: var(--color-white) !important;
}

.main-slider__btn:hover {
  color: var(--color-primary) !important;
}


/* ============================================================
   NAVIGATION ARROWS
   ============================================================ */

.main-slider__nav {
  position: absolute;
  top: 50%;
  left: 30px;
  z-index: 100;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: 0;
  line-height: 0;
}

.main-slider__nav .swiper-button-prev,
.main-slider__nav .swiper-button-next {
  position: relative;
  top: auto; left: auto; right: auto; bottom: auto;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.60) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 400ms ease !important;
}

.main-slider__nav .swiper-button-prev {
  margin-bottom: 10px !important;
}

.main-slider__nav .swiper-button-prev:hover,
.main-slider__nav .swiper-button-next:hover {
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
  background-color: var(--color-accent) !important;
}

/* Swiper injects ::after with text — suppress it */
.main-slider__nav .swiper-button-prev::after,
.main-slider__nav .swiper-button-next::after {
  display: none !important;
}

@media (max-width: 767px) {
  /* Move arrows to bottom-centre on mobile */
  .main-slider__nav {
    top: auto !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 12px;
    height: auto;
    line-height: normal;
  }

  .main-slider__nav .swiper-button-prev {
    margin-bottom: 0 !important;
  }
}


/* ============================================================
   SWIPER PAGINATION DOTS (if used)
   ============================================================ */

.main-slider .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.40) !important;
  width: 8px !important;
  height: 8px !important;
  opacity: 1 !important;
  transition: var(--transition);
}

.main-slider .swiper-pagination-bullet-active {
  background-color: var(--color-accent) !important;
  width: 24px !important;
  border-radius: 4px !important;
}


/* ============================================================
   PAGE HEADER — inner pages (breadcrumb banner)
   ============================================================ */

.page-header {
  position: relative;
  background-color: var(--color-primary) !important;
  padding-block: var(--space-2xl) !important;
  overflow: hidden;
}

.page-header-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.12 !important;
  filter: grayscale(100%);
}

.page-header__inner h2 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-3xl) !important;
  color: var(--color-white) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
  margin-top: var(--space-xs);
}

.thm-breadcrumb {
  margin-bottom: var(--space-xs);
}

.thm-breadcrumb li {
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.thm-breadcrumb li a {
  color: rgba(255, 255, 255, 0.70) !important;
}

.thm-breadcrumb li a:hover {
  color: var(--color-accent) !important;
}

.thm-breadcrumb li.active {
  color: var(--color-accent) !important;
}


/* ============================================================
   PIOUS CAROUSEL PATCH — Mobile carousel image fix
   Forces .image-layer to ALWAYS display on every screen size.
   Oxpins default hides it at max-width:767px — we override that.
   ============================================================ */
@media only screen and (max-width: 767px) {
  .main-slider .image-layer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Make the slide taller on mobile so the image has room to breathe */
  .main-slider .swiper-slide {
    min-height: 88vh !important;
    align-items: flex-start !important;
  }

  /* Ensure content text stays visible over the image */
  .main-slider .container {
    position: relative;
    z-index: 30 !important;
    padding-top: 28px !important;
    padding-bottom: 60px !important;
  }
}


/* ============================================================
   PIOUS CAROUSEL PATCH — Directional slide animation
   Replaces fade with a smooth left-to-right pan per slide.
   ============================================================ */

.main-slider .swiper-slide-active .image-layer {
  animation: kenBurnsPan 8000ms ease forwards !important;
}

@keyframes kenBurnsPan {
  0%   { transform: scale(1.08) translateX(2%);  }
  100% { transform: scale(1.0)  translateX(-2%); }
}

.main-slider .swiper-slide-active .main-slider__content {
  animation: slideContentIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes slideContentIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.main-slider .swiper-slide-active .main-slider__sub-title {
  animation: slideContentIn 800ms 150ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.main-slider .swiper-slide-active .main-slider__title {
  animation: slideContentIn 800ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.main-slider .swiper-slide-active .main-slider__btn-box {
  animation: slideContentIn 800ms 500ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}