/* Custom Hero Slider Styles (scoped to .custom-hero-slider)
   Uses variables from jt-child/assets/css/freelance-template/global.css */


.hero-section {
    background-color: var(--color-background);
}
   

.custom-hero-slider {
  position: relative;
  width: 100vw; /* full-bleed */
  margin-left: calc(-50vw + 50%); /* break out of content container */
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-text);
}

/* Swiper container */
.custom-hero-slider .swiper {
  position: relative; /* anchor absolute children like pagination */
  width: 100%;
  height: 100vh; /* full viewport height */
}

@media (min-width: 1280px) {
    /* cancel full-bleed negative margin 
    .custom-hero-slider {
    width: var(--container-xl);
    margin-left: auto;  
    margin-right: auto;
    }
    */
    .custom-hero-slider .swiper { height: 100vh; }
}




/* Slides fill the container */
.custom-hero-slider .swiper-wrapper,
.custom-hero-slider .swiper-slide {
  width: 100%;
  height: 100%;
  background: var(--color-white);
}

/* Split layout container inside each slide */
.custom-hero-slider .slide-content.split {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-white);
}

/* Content area */
/* Centered container with two columns: image left, text right */
.custom-hero-slider .split-container {
  width: 95vw;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* balanced so text has more room */
  gap: var(--spacing-xl);
  align-items: center;
}

/* Logo */
.custom-hero-slider .slide-logo-container {
  align-self: start;
  justify-self: start;
  text-align: left;
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.custom-hero-slider .slider-hero-logo-large {
  max-height: var(--hero-logo-size-desktop); /* controlled from global */
  width: auto;
  display: block;
  margin: 0; /* align left */
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}

/* Position the logo at top-left on desktop, aligned with the content container */
@media (min-width: 1280px) {
  /* Only the active slide should show its fixed logo to avoid duplicates */
  .custom-hero-slider .swiper-slide:not(.swiper-slide-active) .slide-logo-container { display: none; }

  .custom-hero-slider .swiper-slide.swiper-slide-active .slide-logo-container {
    position: fixed;
    top: var(--spacing-sm);
    /* Center over the right overlay toolbar column */
    left: calc(
      /* toolbar right edge */
      ((100vw - 95vw) / 2 + var(--spacing-xl))
      /* move to toolbar center: + half toolbar width (fab size + padding*2) */
      + ((var(--fab-size-desktop) + 2 * var(--spacing-sm)) / 2)
      /* back by half logo width to center the logo itself */
      - (var(--hero-logo-size-desktop) / 2)
      /* optional fine-tune */
      + var(--hero-logo-nudge-x, 0px)
    );
    margin-bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;  /* stack caption under logo */
    align-items: center;      /* center logo + text */
  }
  .custom-hero-slider .swiper-slide.swiper-slide-active .slide-logo-container .slide-logo-caption {
    margin-top: 2px; /* very tight space under logo */
    display: grid;
    gap: 1px; /* minimal gap between title and description */
    text-align: center;
    color: var(--color-text);
  }
  /* Override default margins on WP header helpers output */
  .custom-hero-slider .slide-logo-caption .site-title,
  .custom-hero-slider .slide-logo-caption .site-description { margin: 0; }
  .custom-hero-slider .slide-logo-caption .site-title a {
    font-family: var(--font-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    text-decoration: none;
    line-height: 1.15;
  }
  .custom-hero-slider .slide-logo-caption .site-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
    line-height: 1.1;
    margin-top: 1px; /* ultra-tight separation from title */
  }
}

/* Text */
.custom-hero-slider .split-text .slide-text-container {
  max-width: 80%; /* give the text enough width on desktop */
  width: 100%;
  display: grid;
  gap: var(--spacing-xl);
  justify-self: start;
  text-align: left;
}

/* Ensure the logo block sits above the text and is not overlapped */
.custom-hero-slider .split-text { position: relative; z-index: 1; }
.custom-hero-slider .split-text .slide-logo-container { margin-bottom: var(--spacing-xl); }

/* Use hero-title/hero-subtitle styles from hero.css for text appearance */

/* No dedicated secondary class needed; using .hero-subtitle */

/* Media block (left column) */
.custom-hero-slider .split-media {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible; /* no cropping */
}
.custom-hero-slider .split-media img {
  display: block;
  /*width: clamp(620px, 46vw, 1000px);  width-driven sizing, preserves ratio with height:auto */
  height: auto; /* preserve native ratio */
  object-fit: contain; /* no cropping */
  object-position: 50% 50%;
  transform: none; /* remove zoom */
}

/* Pagination (bullets) */
.custom-hero-slider .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-lg) !important;
  text-align: center;
  z-index: 10; /* above image/overlay */
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.custom-hero-slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--color-primary-light);
  opacity: 1;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.custom-hero-slider .swiper-pagination-bullet-active {
  background: var(--color-primary);
  transform: scale(1.2);
}

/* Navigation arrows */
.custom-hero-slider .swiper-button-prev,
.custom-hero-slider .swiper-button-next {
  color: var(--color-white);
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(2px);
}

.custom-hero-slider .swiper-button-prev:after,
.custom-hero-slider .swiper-button-next:after {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
}

.custom-hero-slider .swiper-button-prev:hover,
.custom-hero-slider .swiper-button-next:hover {
  background: rgba(0,0,0,0.45);
}

/* Mobile tweaks */
@media (max-width: 1280px) {
  /* Let the slide grow to fit image + text */
  .custom-hero-slider .swiper { height: auto; }
  /* Offset under the fixed header (push the whole slider down) */
  .custom-hero-slider { --mobile-header-offset: -50px; margin-top: var(--mobile-header-offset); }
  .custom-hero-slider .slide-content.split { padding-top: 0; }

  /* Stack vertically: image first, then text */
  .custom-hero-slider .split-container {
    width: 100vw;
    margin: 0;
    padding: 0 var(--spacing-md);
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    justify-items: center; /* center children horizontally */
  }

  /* Hide logo on mobile */
  .custom-hero-slider .slide-logo-container { display: none; }

  /* Friendly image sizing on small screens */
  .custom-hero-slider .split-media { height: auto; }
  .custom-hero-slider .split-media img {
    width: min(92vw, 636px);
    height: auto;
    max-height: none;
    object-fit: contain;
    margin-top: var(--spacing-sm);
  }

  /* Center the text block horizontally while keeping text left-aligned */
  .custom-hero-slider .split-text { display: flex; justify-content: center; width: 100%; }
  .custom-hero-slider .split-text .slide-text-container {
    width: 100%;
    max-width: 520px; /* slightly narrower for visual centering */
    margin: 0 auto;
    justify-self: center; /* override desktop */
    text-align: left; /* left-align inner content */
  }

  /* Tighten text vertical rhythm */
  .custom-hero-slider .split-text .slide-text-container { gap: var(--spacing-sm); }
  .custom-hero-slider .hero-title { margin-top: 0; margin-bottom: var(--spacing-sm); }
  .custom-hero-slider .cta-button { margin-top: var(--spacing-sm); justify-self: start; }

  /* Bring dots closer */
  .custom-hero-slider .swiper-pagination { bottom: var(--spacing-sm) !important; }

  .custom-hero-slider .slider-hero-logo-large { max-height: 72px; }
  .custom-hero-slider .swiper-button-prev,
  .custom-hero-slider .swiper-button-next { display: none; }
}


/* Mobile tweaks */
@media (max-width: 768px) {
  .custom-hero-slider { --mobile-header-offset: 20px; margin-top: var(--mobile-header-offset); }
}


/* Ensure slider sits under fixed header */
.custom-hero-slider { z-index: 0; }