/* Avorino About Page — Head CSS
   Page Settings → Custom Code → Head Code
   Covers: interactive transitions, hover states */

/* ─── Prevent Horizontal Scroll ─── */
html, body { overflow-x: hidden; }

/* ─── Button Transitions ─── */
.about-cta-btn {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
.about-cta-btn:hover {
  box-shadow: 0 8px 32px rgba(200, 34, 42, 0.15);
}

/* ─── Link Transitions ─── */
.about-story-link {
  transition: opacity 0.3s ease, color 0.3s ease;
}
.about-story-link:hover {
  opacity: 1 !important;
  color: #c8222a;
}

/* ─── Value Card Hover ─── */
.av-card-light {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}
.av-card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.06);
}

/* ─── Dark Card Hover ─── */
.av-card-dark {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}
.av-card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

/* ─── Image Placeholder Reveal-Ready ─── */
.about-story-img,
.about-comm-img {
  will-change: clip-path, transform;
}

/* ─── Label Line Animation-Ready ─── */
.about-label-line {
  transform-origin: left center;
}

/* ─── Values Snake Zigzag Layout ─── */
.about-values-zigzag {
  position: relative;
}
.about-values-snake-anchor {
  overflow: visible;
  pointer-events: none;
}
.about-values-snake-path {
  fill: none;
  stroke: #c8222a;
  stroke-width: 2;
  stroke-linecap: round;
  will-change: stroke-dashoffset;
}
.about-values-snake-path-bg {
  fill: none;
  stroke: rgba(200, 34, 42, 0.1);
  stroke-width: 2;
  stroke-linecap: round;
}
.about-values-card {
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}
.about-values-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

/* ─── Process Section: Full-Width Scroll-Lock + Three.js ─── */
#about-process {
  overflow: hidden;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Restore horizontal spacing for header elements above the pinned viewport */
#about-process > :not([data-process-pinned]) {
  margin-left: 80px;
  margin-right: 80px;
}
.about-process-pinned {
  width: 100vw !important;
  max-width: 100vw !important;
}
.about-process-pinned canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
[data-process-cards] {
  pointer-events: none;
}
.about-process-card {
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: auto;
}
.about-process-nav-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.15);
  margin: 0 6px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.about-process-nav-dot.is-active {
  background: #c8222a;
  transform: scale(1.4);
}

/* ─── Line Wipe Animation ─── */
[data-animate="line-wipe"] .line {
  will-change: clip-path;
}

/* ─── 3D Transform Support ─── */
/* NOTE: perspective on body breaks position:fixed (ScrollTrigger pin).
   Apply perspective only to containers that need 3D child transforms. */
.about-values-card,
.about-process-card,
.av-card-dark {
  backface-visibility: hidden;
}

/* ─── Mission/Vision Overflow Fix ─── */
#about-mission-vision {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════ */

/* ─── Tablet (≤991px) ─── */
@media (max-width: 991px) {
  /* Section padding */
  .av-section-warm,
  .av-section-dark {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Hero */
  .about-hero {
    min-height: 50vh !important;
    padding-top: 120px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* All 2-column grids → 1 column */
  .av-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Stats: 3 col → 3 col, tighter gap */
  .about-stats-grid {
    gap: 32px !important;
  }

  /* Values zigzag: 1 column, hide spacers + snake */
  .about-values-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .about-values-spacer {
    display: none !important;
  }
  .about-values-snake-anchor {
    display: none !important;
  }

  /* Communication */
  .about-comm {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .about-comm-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .about-comm-img {
    height: 300px !important;
  }

  /* CTA */
  .about-cta {
    padding: 40px !important;
  }
  .about-cta-container {
    padding: 80px 40px !important;
  }

  /* ADU card */
  .about-adu-card {
    padding: 64px 40px !important;
  }

  /* Process: full-width fix */
  #about-process {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #about-process > :not([data-process-pinned]) {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .about-process-pinned {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .about-process-visual { display: none !important; }
  .about-process-cards,
  [data-process-cards] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    padding: 0 40px !important;
    pointer-events: auto !important;
  }
  .about-process-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 40px 32px !important;
  }
  .about-process-nav {
    display: none !important;
  }
}

/* ─── Mobile Landscape (≤767px) ─── */
@media (max-width: 767px) {
  /* Section padding */
  .av-section-warm,
  .av-section-dark {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hero */
  .about-hero {
    min-height: 45vh !important;
    padding-top: 100px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .about-hero-subtitle {
    font-size: 15px !important;
  }

  /* Grid gaps */
  .av-grid-2col {
    gap: 32px !important;
  }

  /* Stats: 3 col → 1 col */
  .about-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-stat-number {
    font-size: clamp(48px, 12vw, 72px) !important;
  }

  /* Cards padding */
  .av-card-dark {
    padding: 40px 32px !important;
  }
  .about-values-card {
    padding: 36px 28px !important;
  }

  /* Communication */
  .about-comm {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .about-comm-img {
    height: 240px !important;
  }

  /* CTA */
  .about-cta {
    padding: 24px !important;
  }
  .about-cta-container {
    padding: 64px 24px !important;
  }
  .about-cta-btns {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ADU card */
  .about-adu-card {
    padding: 48px 24px !important;
  }

  /* Heading sizes — tighten up */
  .av-heading-xl {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  .av-heading-lg {
    font-size: clamp(28px, 6vw, 40px) !important;
  }

  /* Utility margin reductions */
  .av-mb-96 {
    margin-bottom: 48px !important;
  }
  .av-mb-64 {
    margin-bottom: 32px !important;
  }

  /* Process header + cards */
  #about-process > :not([data-process-pinned]) {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  [data-process-cards] {
    padding: 0 24px !important;
  }
  .about-process-card {
    padding: 32px 24px !important;
  }
}

/* ─── Mobile Portrait (≤478px) ─── */
@media (max-width: 478px) {
  /* Section padding */
  .av-section-warm,
  .av-section-dark {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero */
  .about-hero {
    min-height: 40vh !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Heading sizes */
  .av-heading-xl {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  .av-heading-lg {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .av-heading-md {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* Cards */
  .av-card-dark {
    padding: 32px 20px !important;
  }
  .about-values-card {
    padding: 28px 20px !important;
  }
  .about-card-heading {
    font-size: 22px !important;
  }
  .about-value-num {
    font-size: 40px !important;
  }
  .about-value-title {
    font-size: 20px !important;
  }

  /* Stats */
  .about-stat-number {
    font-size: clamp(40px, 14vw, 56px) !important;
  }

  /* Communication */
  .about-comm {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .about-comm-img {
    height: 200px !important;
  }

  /* CTA */
  .about-cta {
    padding: 16px !important;
  }
  .about-cta-container {
    padding: 48px 16px !important;
  }
  .about-cta-heading {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
  .about-cta-btn {
    width: 100% !important;
    justify-content: center !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ADU card */
  .about-adu-card {
    padding: 40px 16px !important;
  }

  /* Process header + cards */
  #about-process > :not([data-process-pinned]) {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  [data-process-cards] {
    padding: 0 16px !important;
  }
  .about-process-card {
    padding: 28px 20px !important;
  }
  .about-process-card-title {
    font-size: 22px !important;
  }

  /* Utility margins */
  .av-mb-96 {
    margin-bottom: 32px !important;
  }
  .av-mb-64 {
    margin-bottom: 24px !important;
  }
  .av-mb-48 {
    margin-bottom: 20px !important;
  }

  /* Story image */
  .about-story-img {
    min-height: 280px !important;
  }
}