/**
 * PalmSHIELD Hero Carousel — Frontend Styles
 * Scoped to .ps-hero-carousel | Zero external dependencies
 * ~4 KB unminified
 */

/* ── Custom properties ─────────────────────────────────────────────────────── */
.ps-hero-carousel {
  --pshc-red:          #e02826;
  --pshc-red-hover:    rgb(116, 33, 26);
  --pshc-light:         #50b8e9;
  --pshc-blue:         #1E335F;
  --pshc-blue-hover:   #142444;
  --pshc-transition:   0.55s cubic-bezier(0.4, 0, 0.2, 1);
  --pshc-radius:       6px;
  --pshc-font-sans-serif:    Bebas Neue, sans-serif;
  --pshc-font-serif:   Poppins, serif;
  --pshc-eyebrow-r:    8px;

  /* Overridden per-instance via inline style on wrapper */
  --pshc-min-height:   520px;
  --pshc-thumb-h:      80px;
  --pshc-strip-bg:     #111111;
  --pshc-content-bg:   #ffffff;

  display:   flex;
  flex-direction: column;
  width:     100%;
  overflow:  hidden;
  font-family: var(--pshc-font-sans-serif);
  box-sizing: border-box;
}

.ps-hero-carousel *,
.ps-hero-carousel *::before,
.ps-hero-carousel *::after {
  box-sizing: inherit;
}

/* ── Stage: image + content side-by-side ──────────────────────────────────── */
.ps-hc__stage {
  display:    grid;
  min-height: var(--pshc-min-height);
  position:   relative;
}

/* Two columns only when the text panel exists; otherwise hero + strip use full width */
.ps-hc__stage--right.ps-hc__stage--has-panel {
  grid-template-columns: 1fr 38%;
}

.ps-hc__stage--left.ps-hc__stage--has-panel {
  grid-template-columns: 38% 1fr;
}

.ps-hc__stage--right:not(.ps-hc__stage--has-panel),
.ps-hc__stage--left:not(.ps-hc__stage--has-panel) {
  grid-template-columns: 1fr;
}

.ps-hc__stage--left .ps-hc__media-col { order: 2; }
.ps-hc__stage--left .ps-hc__content  { order: 1; }

/* Image column: stacks slides + dots + strip so strip aligns with image edge */
.ps-hc__media-col {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  align-self:     stretch;
}

/* ── Slides wrap ──────────────────────────────────────────────────────────── */
.ps-hc__slides-wrap {
  position:   relative;
  overflow:   hidden;
  background: var(--pshc-light);
  flex:       1 1 auto;
  min-height: var(--pshc-min-height);
}

.ps-hc__slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity var(--pshc-transition);
  will-change: opacity;
  pointer-events: none;
}

.ps-hc__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ps-hc__slide img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
}

/* Overlay (optional) */
.ps-hc__overlay {
  position: absolute;
  inset:    0;
  pointer-events: none;
  z-index:  1;
}

/* ── Content panel ────────────────────────────────────────────────────────── */
.ps-hc__content {
  background-color: var(--pshc-content-bg);
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

/* Eyebrow badge */
.ps-hc__eyebrow {
  display:       inline-flex;
  align-self:    flex-start;
  align-items:   center;
  padding:       0.5rem 1rem;
  border-radius: var(--pshc-eyebrow-r);
  font-size:     3.5rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:   1;
  background:    var(--pshc-red);
  color:         #fff;
}

/* Headline */
.ps-hc__headline {
  margin:      0;
  font-size:   clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color:       #1E335F;
}

/* Subheadline */
.ps-hc__subheadline {
  margin:       0;
  font-size:    1.2rem;
  font-weight:  700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:        #444;
  border-top:   2px solid #e5e5e5;
  padding-top:  0.75rem;
}

/* Body text */
.ps-hc__body {
  font-family: var(--pshc-font-serif);
  margin:      0;
  font-size:   0.9375rem;
  line-height: 1.65;
  color:       #444;
}

/* Bullet list */
.ps-hc__bullets {
  margin:      0;
  padding:     0 0 0 1.15em;
  list-style:  disc;
  display:     flex;
  flex-direction: column;
  gap:         0.4rem;
}

.ps-hc__bullet {
  font-family: var(--pshc-font-serif);
  font-size:   0.9375rem;
  line-height: 1.5;
  color:       #5a5a5a;
}

.ps-hc__bullet--bold {
  font-weight: 700;
  color:       #1a1a1a;
}

/* CTA buttons */
.ps-hc__buttons {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.625rem;
  margin-top: 0.5rem;
}

.ps-hc__btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       0.55em 1.2em;
  border-radius: var(--pshc-radius);
  font-size:     1rem;
  letter-spacing: 0.08em;
  font-weight:   600;
  text-decoration: none;
  cursor:        pointer;
  transition:    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space:   nowrap;
}

.ps-hc__btn--primary {
  background: var(--pshc-red);
  color:      #fff;
  border:     2px solid var(--pshc-red);
}
.ps-hc__btn--primary:hover,
.ps-hc__btn--primary:focus-visible {
  background: var(--pshc-red-hover);
  border-color: var(--pshc-red-hover);
}

.ps-hc__btn--secondary {
  background: #50b8e9;
  color:      #fff;
  border:     2px solid var(--pshc-blue);
}

.ps-hc__btn--blue {
  background: var(--pshc-blue);
  color:      #fff;
  border:     2px solid var(--pshc-blue);
}
.ps-hc__btn--blue:hover,
.ps-hc__btn--blue:focus-visible {
  background: var(--pshc-blue-hover);
  border-color: var(--pshc-blue-hover);
}

.ps-hc__btn--secondary:hover,
.ps-hc__btn--secondary:focus-visible {
  background: var(--pshc-blue);
  border-color: var(--pshc-light);
}

.ps-hc__btn--outline {
  background: transparent;
  color:      var(--pshc-red);
  border:     2px solid var(--pshc-red);
}
.ps-hc__btn--outline:hover,
.ps-hc__btn--outline:focus-visible {
  background: var(--pshc-red);
  color:      #fff;
}

/* ── Dot row (below hero, above thumbnails) ──────────────────────────────── */
.ps-hc__dots-row {
  display:         flex;
  justify-content: center;
  align-items:     center;
  padding:         0.5rem 0.75rem 0.35rem;
  background:      var(--pshc-strip-bg);
}

/* ── Carousel strip ───────────────────────────────────────────────────────── */
.ps-hc__strip {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0.5rem 0.75rem 0.625rem;
  background:  var(--pshc-strip-bg);
  position:    relative;
}

/* ── Arrow buttons ──────────────────────────────────────────────────────── */
.ps-hc__arrow {
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          36px;
  height:         36px;
  border-radius:  50%;
  background:     var(--pshc-red);
  color:          #fff;
  border:         none;
  cursor:         pointer;
  transition:     background 0.2s ease, transform 0.15s ease;
  z-index:        2;
  padding:        0;
}
.ps-hc__arrow:hover,
.ps-hc__arrow:focus-visible {
  background: var(--pshc-red-hover);
  transform:  scale(1.08);
}
.ps-hc__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.ps-hc__arrow svg {
  width:  18px;
  height: 18px;
  pointer-events: none;
}

/* ── Thumbnail track ──────────────────────────────────────────────────────── */
.ps-hc__thumb-track {
  flex:       1 1 0;
  overflow:   hidden;
  min-width:  0;
}

.ps-hc__thumb-list {
  display:    flex;
  gap:        6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
  padding:    2px 0;
}
.ps-hc__thumb-list::-webkit-scrollbar { display: none; }

.ps-hc__thumb {
  flex-shrink:   0;
  display:       block;
  padding:       0;
  background:    none;
  border:        2px solid transparent;
  border-radius: var(--pshc-radius);
  cursor:        pointer;
  transition:    border-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  overflow:      hidden;
  aspect-ratio:  16 / 10;
  height:        var(--pshc-thumb-h);
  width:         auto;
  opacity:       0.6;
}

.ps-hc__thumb:hover {
  opacity:        0.9;
  border-color:   rgba(255,255,255,0.5);
  transform:      translateY(-2px);
}

.ps-hc__thumb.is-active {
  border-color: var(--pshc-red);
  opacity:      1;
  transform:    translateY(-2px);
}

.ps-hc__thumb:focus-visible {
  outline:      2px solid #fff;
  outline-offset: 2px;
}

.ps-hc__thumb img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  pointer-events: none;
}

/* ── Dot navigation ───────────────────────────────────────────────────────── */
.ps-hc__dots {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}

.ps-hc__dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--pshc-light);
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background 0.2s ease, transform 0.15s ease;
}
.ps-hc__dot.is-active {
  background: var(--pshc-red);
  transform:  scale(1.3);
}
.ps-hc__dot:hover {
  background: var(--pshc-blue);
}
.ps-hc__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ps-hc__empty {
  padding:    2rem;
  text-align: center;
  color:      #888;
  font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* NOTE: .has-panel variants must be repeated here — the base .ps-hc__stage--right/left
     rule (0,1,0 specificity) cannot override the .has-panel rules above (0,2,0 specificity)
     just by appearing later in a media query. Specificity always beats source order. */
  .ps-hc__stage--right,
  .ps-hc__stage--left,
  .ps-hc__stage--right.ps-hc__stage--has-panel,
  .ps-hc__stage--left.ps-hc__stage--has-panel {
    grid-template-columns: 1fr;
    grid-template-rows:    auto auto;
  }

  .ps-hc__stage--left .ps-hc__media-col,
  .ps-hc__stage--right .ps-hc__media-col {
    order: 1;
  }

  .ps-hc__stage--left .ps-hc__slides-wrap,
  .ps-hc__stage--right .ps-hc__slides-wrap {
    min-height: 280px;
  }

  .ps-hc__stage--left .ps-hc__content,
  .ps-hc__stage--right .ps-hc__content {
    order: 2;
  }

  .ps-hc__slides-wrap {
    min-height: 280px;
  }

  .ps-hc__content {
    padding: 1.75rem 1.25rem;
    gap: 0.75rem;
  }

  .ps-hc__strip {
    padding: 0.5rem 0.5rem 0.4rem;
  }

  .ps-hc__dots-row {
    padding: 0.4rem 0.5rem 0.25rem;
  }

  /* On mobile, hide dots row — thumbs + arrows are enough */
  .ps-hc__dots-row { display: none; }
}

@media (max-width: 480px) {
  .ps-hc__arrow { width: 30px; height: 30px; }
  .ps-hc__arrow svg { width: 15px; height: 15px; }
  .ps-hc__thumb { height: 56px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ps-hc__slide     { transition: none; }
  .ps-hc__thumb,
  .ps-hc__arrow,
  .ps-hc__dot       { transition: none; }
  .ps-hc__thumb-list { scroll-behavior: auto; }
}