/* =========================================================
   SERVICES — page-specific styles (V0.1)
   - No mechanical/layout changes.
   - Cleanup only: organization + remove literal redundancy.
   ========================================================= */

/* =========================================================
   Scroll snap (Services only)
   ========================================================= */

html {
  overscroll-behavior-y: none;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-y: none;
  background: #121113;

  /* Header colors for this page */
  --brand-color: #e3e3e3;
  --nav-color: #e3e3e3;
  --nav-hover-color: #c6a15b;
}

/* =========================================================
   Snap sections
   ========================================================= */

.services-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* All snap sections (including footer) */
.services-page .snap-section {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-top: var(--header-h);

  display: flex;
  align-items: flex-start;
}

/* Footer snap section is auto-height */
.services-page .snap-section--auto {
  min-height: auto;
  padding-top: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Footer section: keep default flow (matches other pages) */
.services-page .footer-section {
  display: block;
  align-items: initial;
}

/* Hide rail on footer */
body.services-footer-active .services-rail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.services-inner {
  min-height: calc(100svh - var(--header-h));
}

/* =========================================================
   Screen 1 — Hero
   ========================================================= */

.services-hero {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  max-width: 1100px;
}

.services-hero-text {
  max-width: 64ch;
}

.services-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(227, 227, 227, 0.8);
}

@media (max-width: 480px) {
  .services-description {
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
  }
}

.services-hero-title {
  display: flex;
  justify-content: flex-end;
}

.services-title {
  margin: 0;
  font-family: "Dela Gothic One";
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #e3e3e3;
  text-align: left;
  max-width: 18ch;
}

@media (min-width: 900px) {
  .services-hero {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .services-title {
    text-align: right;
  }
}

/* =========================================================
   FIX — Services hero centered (Screen 1)
   ========================================================= */

.services-page .services-hero-screen {
  /* Em vez de grudar no topo */
  align-items: center;
}

/* Remove o "empurrão" extra do section-inner só na hero */
.services-hero-screen .section-inner.services-inner {
  /* A snap-section já tem padding-top: var(--header-h) */
  padding-top: 0;
  padding-bottom: 0;

  /* Garante área útil da tela e permite centralização real */
  min-height: calc(100svh - var(--header-h));

  display: flex;
  align-items: center;
}

/* =========================================================
   Fixed overlay — Expanding Rail
   ========================================================= */

.services-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;

  will-change: transform;

  display: flex;
  flex-direction: column; /* rectangle above, dots below */
  align-items: center;
  justify-content: flex-start;

  z-index: 900;
  transform: translateY(0);
  transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);

  /* Overlay itself doesn't intercept events; child elements opt-in */
  pointer-events: none;
}

.services-rail-inner {
  width: min(1100px, calc(100% - 32px));
  height: 96px;
  background: #e2360e;
  border-radius: 0;

  position: relative; /* anchor arrows */
  transform-origin: bottom;
  transition: height 520ms cubic-bezier(0.2, 0.9, 0.2, 1);

  /* Mobile swipe: vertical scroll stays native; horizontal handled by JS */
  touch-action: pan-y;
}

.services-rail-inner,
.services-rail-inner * {
  pointer-events: auto;
}

/* Final position: move to center AND grow taller
   NOTE: keeping current values as-is to preserve established behavior. */
body.services-carousel-active .services-rail {
  transform: translate3d(0, calc((-50svh + (var(--header-h) / 2)) + 30svh), 0);
}

body.services-carousel-active .services-rail-inner {
  /* limita pela altura útil da tela, evitando invadir o header */
  height: min(520px, calc(100svh - var(--header-h) - 120px));
}

/* Rail content area */
.services-rail-content {
  height: 100%;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 42px;

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
  transition-delay: 0ms;

  color: #e3e3e3;
  user-select: none;

  /* Clips slide-out text while preserving arrows (arrows are outside this box) */
  overflow: hidden;
}

/* Content appears after expansion */
body.services-carousel-active .services-rail-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 540ms;
}

/* Drag affordance (desktop) */
@media (hover: hover) and (pointer: fine) {
  .services-rail-inner {
    cursor: grab;
  }
  body.is-dragging .services-rail-inner {
    cursor: grabbing;
  }
}

/* =========================================================
   Rail navigation arrows (visible after expansion)
   ========================================================= */

.rail-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  color: #121113;
  cursor: pointer;

  opacity: 0;
  transition: opacity 160ms ease;

  /* hidden by default; shown after expansion */
  pointer-events: none;
}

.rail-arrow-btn--prev {
  left: 16px;
}

.rail-arrow-btn--next {
  right: 16px;
}

.rail-arrow-icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

/* Appear only after expansion */
body.services-carousel-active .rail-arrow-btn {
  opacity: 0.85;
  pointer-events: auto;
  transition-delay: 540ms;
}

@media (hover: hover) and (pointer: fine) {
  body.services-carousel-active .rail-arrow-btn:hover {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .rail-arrow-btn--prev {
    left: 0px;
  }
  .rail-arrow-btn--next {
    right: 0px;
  }
}

/* =========================================================
   Rail copy layout (title + text)
   ========================================================= */

/* Wrapper that follows the drag slightly (JS applies transform inline) */
.rail-swipe {
  width: 100%;
}

/* Text grid */
.rail-grid {
  width: 100%;
  max-width: 1100px;
  padding-bottom: 36px;

  padding-inline: 18px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  text-align: center; /* mobile */
}

@media (max-width: 360px) {
  .services-rail-content {
    /* opcional: um pouco menos de padding geral pra sobrar área útil */
    padding: 34px 24px;
  }

  .rail-grid {
    padding-inline: 22px; /* margem lateral mais evidente */
  }
}

@media (min-width: 900px) {
  .rail-grid {
    grid-template-columns: 1fr; /* 1 coluna no desktop */
    gap: 18px;
    text-align: center;

    /* centralização perfeita dentro da área do rail */
    justify-items: center;
  }

  .rail-title {
    padding-bottom: 20px;
  }
}

.rail-title {
  color: #121113;
  margin: 0;
  font-family: "Dela Gothic One";
  font-size: clamp(30px, 4vw, 60px);
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: inherit;
}

.rail-text {
  margin: 0;
  font-family: "Golos Text";
  font-size: 14px;
  line-height: 1.6;
  color: rgba(227, 227, 227, 0.85);
  max-width: 80ch;
}

.rail-title,
.rail-text {
  overflow-wrap: anywhere;
}

/* =========================================================
   Carousel transitions
   ========================================================= */

.rail-grid {
  /* Simple fade-only transition (no slide / no movement) */
  transition: opacity 220ms ease;
}

/* Fade-out */
.rail-grid.is-fading {
  opacity: 0;
}

/* Back-compat: se algo ainda aplicar essas classes, mantém fade-only */
.rail-grid.is-out-left,
.rail-grid.is-out-right {
  opacity: 0;
}

/* =========================================================
   Dots controls (visible after expansion)
   ========================================================= */

.rail-controls {
  width: min(1100px, calc(100% - 32px));
  margin: 10px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 260ms ease;
  transition-delay: 0ms;
}

body.services-carousel-active .rail-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 680ms;
}

.rail-dots {
  position: absolute;
  left: 50%;
  bottom: 30px; /* distância da base do retângulo */
  transform: translateX(-50%);

  display: flex;
  gap: 10px;

  z-index: 2;
}

.rail-dot {
  width: 10px;
  height: 10px;
  padding: 0;

  border-radius: 50%; /* círculo perfeito */
  background-color: #121113;

  border: none;
  cursor: pointer;

  opacity: 1;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.rail-dot.is-active {
  background: #e3e3e3;
}

.rail-dots button:hover {
  transform: scale(1.15);
}

/* =========================================================
   Microinteractions — Services hero (play once)
   ========================================================= */

@keyframes servicesHeroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Default state */
.services-hero .services-title,
.services-hero .services-description {
  opacity: 1;
  transform: none;
}

/* Animate when s1 becomes active */
body.services-s1-active .services-hero .services-title,
body.services-s1-active .services-hero .services-description {
  opacity: 0;
  transform: translateY(8px);
  animation: servicesHeroEnter 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.services-s1-active .services-hero .services-title {
  animation-delay: 120ms;
}

body.services-s1-active .services-hero .services-description {
  animation-delay: 360ms;
}

/* Prevent 1-frame flash on mobile before IO triggers */
@media (max-width: 767px) {
  body:not(.services-s1-active) .services-hero .services-title,
  body:not(.services-s1-active) .services-hero .services-description {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.services-s1-active .services-hero .services-title,
  body.services-s1-active .services-hero .services-description {
    animation: none;
    opacity: 1;
    transform: none;
  }

  @media (max-width: 767px) {
    body:not(.services-s1-active) .services-hero .services-title,
    body:not(.services-s1-active) .services-hero .services-description {
      opacity: 1;
      transform: none;
    }
  }
}

/* =========================================================
   Services — CTA below carousel
   ========================================================= */

.services-cta-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 38px;
  pointer-events: auto;
}

/* Reuse global CTA behavior */
.cta--services {
  background: #c6a15b;
  color: #121113;
  letter-spacing: 0.08em;
}

@media (hover: hover) and (pointer: fine) {
  .cta--services:hover {
    background: #e2360e;
    color: #e3e3e3;
    border-color: #e2360e;
  }
}

.cta--services:active,
.cta--services:focus-visible {
  background: #e3e3e3;
  color: #e2360e;
  border-color: #e2360e;
}