/**
 * @file
 * Hero SCAND — paragraph-hero-scand component styles.
 *
 * All selectors are scoped under .hero-scand to prevent any bleed.
 * Design tokens are set as CSS custom properties on .hero-scand (not :root),
 * so they are local to this component and cannot leak out.
 *
 * Light variant is the default.
 * Dark variant: add class hero-scand--dark on the <section>.
 *
 * Mobile-first breakpoints:
 *   Base          → single-column, compact padding
 *   ≥ 600px       → tablet: bump padding, restore stat spacing
 *   ≥ 1024px      → desktop: two-column grid, show right visual panel
 *
 * Design reference:
 *   designs/hero-light.html  (light default)
 *   designs/hero-dark.html   (dark modifier)
 *
 * Keyframe names are prefixed hs- to avoid global collisions.
 */

/* ==========================================================================
   1. Design tokens (scoped to .hero-scand)
   ========================================================================== */

.hero-scand {
  /* Light palette (default) */
  --hs-orange:          #ff5c00;
  --hs-orange-dim:      rgba(255, 92, 0, .08);
  --hs-orange-border:   rgba(255, 92, 0, .3);

  --hs-bg:              #f4f7fb;
  --hs-bg-card:         #ffffff;
  --hs-bg-node:         #eef2f8;

  --hs-title-color:     #0d1f35;
  --hs-lead-color:      rgba(13, 31, 53, .65);
  --hs-muted-color:     rgba(13, 31, 53, .40);

  --hs-border:          rgba(13, 31, 53, .12);
  --hs-border-light:    rgba(13, 31, 53, .07);
  --hs-stat-sep-bg:     rgba(13, 31, 53, .15);

  --hs-cta-sec-color:   rgba(13, 31, 53, .65);
  --hs-cta-sec-bg:      #ffffff;

  --hs-card-bg:         #ffffff;
  --hs-card-bar-title:  rgba(13, 31, 53, .40);
  --hs-delivery-bg:     #eef2f8;
  --hs-delivery-items:  rgba(13, 31, 53, .40);
  --hs-dot-grid:        rgba(13, 31, 53, .06);
  --hs-glow:            rgba(255, 92, 0, .04);
  --hs-top-edge:        rgba(255, 92, 0, .35);
  --hs-bottom-edge:     rgba(255, 92, 0, .25);
  --hs-card-shadow:     drop-shadow(0 8px 32px rgba(13, 31, 53, .10));
}

/* Dark palette overrides */
.hero-scand--dark {
  --hs-orange-dim:      rgba(255, 92, 0, .12);
  --hs-orange-border:   rgba(255, 92, 0, .4);

  --hs-bg:              #020c18;
  --hs-bg-card:         #051828;
  --hs-bg-node:         #0a2540;

  --hs-title-color:     #ffffff;
  --hs-lead-color:      rgba(255, 255, 255, .70);
  --hs-muted-color:     rgba(255, 255, 255, .40);

  --hs-border:          rgba(255, 255, 255, .12);
  --hs-border-light:    rgba(255, 255, 255, .06);
  --hs-stat-sep-bg:     rgba(255, 255, 255, .12);

  --hs-cta-sec-color:   rgba(255, 255, 255, .70);
  --hs-cta-sec-bg:      transparent;

  --hs-card-bg:         #051828;
  --hs-card-bar-title:  rgba(255, 255, 255, .40);
  --hs-delivery-bg:     #0a2540;
  --hs-delivery-items:  rgba(255, 255, 255, .40);
  --hs-dot-grid:        rgba(255, 255, 255, .05);
  --hs-glow:            rgba(255, 92, 0, .06);
  --hs-top-edge:        rgba(255, 92, 0, .40);
  --hs-bottom-edge:     rgba(255, 92, 0, .30);
  --hs-card-shadow:     none;
}

/* ==========================================================================
   2. Box-sizing reset — scoped, does not affect outside elements
   ========================================================================== */

.hero-scand *,
.hero-scand *::before,
.hero-scand *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   3. Hero wrapper
   ========================================================================== */

.hero-scand {
  position: relative;
  background: var(--hs-bg);
  border-left: 3px solid var(--hs-orange);
  overflow: hidden;
  min-height: auto; /* grows with content on mobile; set to 560px at desktop */
  display: flex;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Dot-grid background texture */
.hero-scand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--hs-dot-grid) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Warm radial glow from the left edge */
.hero-scand::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: radial-gradient(
    ellipse 60% 80% at 0% 50%,
    var(--hs-glow) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Top hairline */
.hero-scand__top-edge {
  position: absolute;
  top: 0;
  left: 3px;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--hs-top-edge),
    transparent 60%
  );
  z-index: 1;
}

/* Bottom hairline */
.hero-scand__bottom-edge {
  position: absolute;
  bottom: 0;
  left: 3px;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--hs-bottom-edge),
    transparent 60%
  );
  z-index: 1;
}

/* ==========================================================================
   4. Inner grid — mobile: single column
   ========================================================================== */

/* max-width / margin / padding delegated to Bootstrap container-xl */
.hero-scand__inner {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* ==========================================================================
   5. Left column: content
   ========================================================================== */

.hero-scand__content {
  display: flex;
  flex-direction: column;
}

/* ── Eyebrow ────────────────────────────────────────────────── */

.hero-scand__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--hs-orange);
  margin-bottom: 20px;
}

.hero-scand__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hs-orange);
  box-shadow: 0 0 8px var(--hs-orange);
  animation: hs-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes hs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

/* ── Headline ───────────────────────────────────────────────── */

.hero-scand__title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hs-title-color);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 24px;
}

/* Inline emphasis (e.g. <em>Delivered.</em> wrapping an accented word) */
.hero-scand__title em {
  font-style: normal;
  color: var(--hs-orange);
  position: relative;
}

.hero-scand__title em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--hs-orange);
  opacity: .4;
}

/* ── Body copy ──────────────────────────────────────────────── */

.hero-scand__lead {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--hs-lead-color);
  margin: 0 0 36px;
}

/* ── CTAs ───────────────────────────────────────────────────── */

.hero-scand__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-scand__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--hs-orange);
  padding: 14px 28px;
  text-decoration: none;
  border: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  line-height: 1;
}

.hero-scand__cta-primary:hover,
.hero-scand__cta-primary:focus-visible {
  background: #e65200;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 92, 0, .30);
  outline: none;
}

.hero-scand__cta-primary svg {
  flex-shrink: 0;
  transition: transform .2s ease;
}

.hero-scand__cta-primary:hover svg,
.hero-scand__cta-primary:focus-visible svg {
  transform: translateX(3px);
}

.hero-scand__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hs-cta-sec-color);
  border: 1px solid var(--hs-border);
  background: var(--hs-cta-sec-bg);
  padding: 13px 28px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  line-height: 1;
}

.hero-scand__cta-secondary:hover,
.hero-scand__cta-secondary:focus-visible {
  color: var(--hs-orange);
  border-color: var(--hs-orange);
  background: var(--hs-orange-dim);
  text-decoration: none;
  outline: none;
}

.hero-scand__cta-secondary svg {
  flex-shrink: 0;
}

/* ── Stats bar ──────────────────────────────────────────────── */

.hero-scand__stats {
  display: flex;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--hs-border-light);
}

.hero-scand__stat {
  padding: 0 20px 0 0;
}

.hero-scand__stat:first-child {
  padding-left: 0;
}

.hero-scand__stat-num {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--hs-orange);
  line-height: 1;
  margin-bottom: 4px;
}

.hero-scand__stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hs-muted-color);
}

.hero-scand__stat-sep {
  display: block;
  width: 1px;
  height: 36px;
  background: var(--hs-stat-sep-bg);
  margin: 0 20px 0 0;
  flex-shrink: 0;
}

/* ==========================================================================
   6. Right column: visual panel (hidden on mobile)
   ========================================================================== */

.hero-scand__visual {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Hero image (when field_image is set) ───────────────────── */

.hero-scand__image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-scand__img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: cover;
}

/* ── Delivery stack card (design fallback) ──────────────────── */

.hero-scand__arch-card {
  background: var(--hs-card-bg);
  border: 1px solid var(--hs-border);
  border-top: 2px solid var(--hs-orange);
  padding: 24px;
  position: relative;
  filter: var(--hs-card-shadow);
}

.hero-scand__arch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hs-border-light);
}

.hero-scand__arch-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hero-scand__arch-bar-dot:nth-child(1) { background: #ff5f57; }
.hero-scand__arch-bar-dot:nth-child(2) { background: #febc2e; }
.hero-scand__arch-bar-dot:nth-child(3) { background: #28c840; }

.hero-scand__arch-bar-title {
  margin-left: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hs-card-bar-title);
}

/* Delivery grid: 2-column inside the card */
.hero-scand__delivery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hs-border-light);
  border: 1px solid var(--hs-border);
}

.hero-scand__delivery-cell {
  background: var(--hs-delivery-bg);
  padding: 12px 14px;
}

.hero-scand__delivery-cell--accent {
  background: rgba(255, 92, 0, .05);
  border: 1px solid rgba(255, 92, 0, .15);
}

.hero-scand--dark .hero-scand__delivery-cell--accent {
  background: rgba(255, 92, 0, .12);
}

.hero-scand__delivery-label {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hs-orange);
  margin-bottom: 6px;
}

.hero-scand__delivery-items {
  font-size: 9.5px;
  color: var(--hs-delivery-items);
  letter-spacing: .03em;
  line-height: 1.5;
}

/* Green status pulse on delivery cells */
.hero-scand__delivery-cell {
  position: relative;
}

.hero-scand__delivery-cell::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 4px rgba(40, 200, 64, .5);
  animation: hs-ping 2s ease-in-out infinite;
}

@keyframes hs-ping {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* ==========================================================================
   7. Tablet (≥ 600px) — bump padding, restore stat spacing
   ========================================================================== */

@media (min-width: 600px) {
  .hero-scand__inner {
    padding: 60px 32px 52px;
  }

  .hero-scand__ctas {
    margin-bottom: 44px;
  }

  .hero-scand__stats {
    padding-top: 32px;
  }

  .hero-scand__stat {
    padding: 0 32px 0 0;
  }

  .hero-scand__stat-sep {
    margin: 0 32px 0 0;
  }
}

/* ==========================================================================
   8. Desktop (≥ 1024px) — two-column grid, show visual panel
   ========================================================================== */

@media (min-width: 1024px) {
  .hero-scand {
    min-height: 560px;
  }

  .hero-scand__inner {
    padding: 80px 48px 72px;
    grid-template-columns: 1fr 420px;
    gap: 64px;
  }

  .hero-scand__lead {
    max-width: 520px;
  }

  .hero-scand__ctas {
    margin-bottom: 52px;
  }

  /* Reveal visual panel */
  .hero-scand__visual {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}