/**
 * services.css
 * Styles for the "Szolgáltatásaink" (Services) section.
 *
 * Contains the section header layout and the scoped styles for the
 * infinite 3D carousel. The carousel logic lives in carousel.js;
 * these rules handle sizing, card appearance, and photo/caption layout.
 *
 * Reuses --mhm-* tokens from main.css and shared utilities
 * (.eyebrow, .section-line) from about.css.
 */

/* ─── Card surface token ─────────────────────────────────────────────────── */
/* Used by both the service cards and the partner tiles. */
:root     { --card-bg: var(--mhm-gray-50); }
html.dark { --card-bg: rgba(255,255,255,0.03); }

/* ─── Section shell ──────────────────────────────────────────────────────── */
.services {
  position: relative;
  padding: 7rem 0;
  background: var(--bg-primary);
  scroll-margin-top: 90px; /* Offset for the fixed navigation bar when jumping to #services. */
  overflow: hidden;
  transition: background 0.5s;
}

/* Dot-grid background texture — consistent with the other sections. */
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Section header ─────────────────────────────────────────────────────── */
/* Padded container — the carousel below is full-bleed so its centering
   math works correctly relative to the viewport width. */
.services-head {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 3rem;
}

.services-title {
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--text-primary);
  margin-top: 1.25rem;
  transition: color 0.5s;
}
.services-title .accent { color: var(--mhm-red); }

.services-intro {
  margin-top: 1.25rem;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  transition: color 0.5s;
}

/* Inline link to the company brochure PDF, sitting right after the
   paragraph text. Styled like the other inline links on the site
   (e.g. .contact-block-value a in contact.css). */
.services-intro-link {
  display: inline-block;
  margin-left: 0.35em;
  color: var(--mhm-blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}
.services-intro-link:hover { color: var(--mhm-red); }

/* ─── Carousel wrapper ───────────────────────────────────────────────────── */
.services-carousel {
  position: relative;
  z-index: 2;
  margin-top: 3.5rem;
}

/* Perspective container that establishes the 3D rendering context. */
.services-carousel .wrap {
  width: 100%;
  height: clamp(340px, 40vh, 460px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 1200px;
}

/* Visible window for the carousel track.
   overflow:visible is intentional — cards extend outside the element
   so the 3D effect is visible on both sides. */
.services-carousel .viewport {
  width: 60%;
  height: 65%;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  cursor: grab;
  /* Prevent the caption/label text from being highlighted while the
     visitor drags the carousel with the mouse — without this, a drag
     gesture that starts or passes over text turns into a text selection
     instead of a carousel drag, and can leave the browser's own
     selection/drag handling in control instead of carousel.js. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.services-carousel .viewport.dragging { cursor: grabbing; }

/* The scrolling track that carousel.js translates on each animation frame. */
.services-carousel .track {
  position: absolute;
  bottom: 16px;
  left: 0;
  height: 100%;
}

/* ─── Individual cards ───────────────────────────────────────────────────── */
.services-carousel .card {
  width: clamp(260px, 30vw, 400px);
  aspect-ratio: 4 / 3;
  margin-right: 48px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  transform-style: preserve-3d; /* Required for the rotationX/Y transforms in carousel.js. */
  border-radius: 14px;
  will-change: transform; /* carousel.js transforms the card itself every frame. */
}

/* Inner wrapper — flex column so the photo fills available height and
   the caption sits below it at a fixed size. */
.services-carousel .card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
}

/* Photo area — grows to fill all space above the caption strip. */
.services-carousel .card-photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* Allow the flex item to shrink below its content size. */
  overflow: hidden;
}

/* The image is intentionally oversized (wider and taller than the card)
   so the parallax shift applied by carousel.js never exposes the card
   background behind the image edges. */
.services-carousel .card-photo img {
  position: absolute;
  top: -16px;
  left: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 32px);
  object-fit: cover;
  display: block;
  will-change: transform;
  /* Belt-and-suspenders alongside the draggable="false" attribute in
     index.html: stops Chrome/Safari's native "picking up" of the image
     into an HTML5 drag-and-drop (DnD — the browser's built-in
     drag-a-file/image-out-of-the-page gesture) when the user tries to
     drag the carousel. Without this, dragging from directly on top of a
     photo can hijack the mouse gesture away from carousel.js, which is
     what left the cursor stuck showing "grabbing" without releasing. */
  -webkit-user-drag: none;
}

/* Caption strip at the bottom of each card. */
.services-carousel .card-caption {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1.4rem 1.05rem;
  background: var(--card-bg);
}

.services-carousel .service-card-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.services-carousel .service-card-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ─── Responsive overrides ───────────────────────────────────────────────── */

/* Freeze the carousel card width at its 1280px size (clamp(260px,30vw,400px)
   resolves to 384px at 1280px) so the cards don't keep shrinking between
   1280px and 1024px — they stay visually consistent across that range. */
@media (max-width: 1280px) and (min-width: 901px) {
  .services-carousel .card { width: 384px; }
}

@media (max-width: 900px) {
  .services { padding: 4.5rem 0; }
  .services-head { padding-inline: 1.5rem; }
  .services-carousel .card { margin-right: 28px; }
}

/* Reduce top/bottom padding on short-viewport screens (e.g. 1536×703 laptops)
   so section titles land comfortably below the nav after a nav-link click. */
@media (max-height: 750px) {
  .services { padding-top: 4rem; padding-bottom: 4rem; }
}

/* Office Dell laptop — 1920x1080 physical panel at 125% Windows display
   scaling, which is a 1536x864 CSS viewport. Removes the section's top
   padding (the section header sits close enough to the nav without it
   at this viewport) and shrinks the carousel slightly so it fits the
   shorter viewport height without scrolling. Card width and wrap height
   below are starting points — tune to taste. */
@media (max-width: 1536px) and (max-height: 864px) {
  .services { padding-top: 0; }
  .services-carousel .wrap { height: clamp(280px, 32vh, 380px); }
  .services-carousel .card { width: 320px; }
}