/* ==========================================================================
   Cards — service card, case card, area card (grid + carousel), sub-service card
   ========================================================================== */

/* ── Service card (used in section-services) ─────────────────────────────── */
.service-card {
  background-color: var(--bg-black);
  border-radius: var(--radius-image);
  padding: 2rem 1.5rem 2.5rem; /* 32px top, 24px sides, 40px bottom */
  display: flex;
  flex-direction: column;
  min-height: 33.75rem; /* 540px */
  max-width: 342px;
}

.service-card__title {
  font-size: var(--title-xs);        /* 32px */
  font-weight: 400;
  line-height: var(--title-xs-lh); /* 45px */
  letter-spacing: -0.03em;
  color: var(--text-light);
}

.service-card__body {
  font-size: var(--body-sm);        /* 16px */
  font-weight: 400;
  line-height: 1.5rem;    /* 24px */
  letter-spacing: -0.01em;
  color: var(--text-light);
}

.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8px */
  align-content: flex-start;
  /* Hidden by default, the service's Areas reveal on card hover. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s ease-in-out, opacity 0.35s ease-in-out;
}
.service-card:hover .service-card__tags,
.service-card:focus-within .service-card__tags {
  max-height: 18rem;   /* room for all area pills */
  opacity: 1;
}

/* Tags use the global .tag-small component (default = light outline for dark bg) */

.service-card__link {
  font-size: var(--body-xs);
  color: var(--text-title);
  background-color: var(--bg-white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 12px;
  border-radius: var(--radius-btn);
  align-self: flex-start;
  transition: background-color 0.2s;
}
.service-card__link::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--text-title);
  flex-shrink: 0;
}
.service-card__link:hover { background-color: var(--bg-primary); }
.service-card .btn { align-self: flex-start; }

/* Card hover triggers the btn--dark hover state */
.service-card:hover .btn--dark                { background-color: var(--dragster-blue); }
.service-card:hover .btn--dark .btn__circle   { background: #fff; }
.service-card:hover .btn--dark .btn__dot-icon { opacity: 0; }
.service-card:hover .btn--dark .btn__arrow-icon { opacity: 1; transform: scale(1); color: #1C1B1F; }
.service-card:hover .btn--dark .btn__label    { transform: translateX(8px); }

.service-card__video-wrap {
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 216px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #000;
}
.service-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ── Service cards in the "Discover services" section (Figma 3175) ──────────
   Solid-black card; the video fills the top and SHRINKS on hover as the area
   tags appear and grow the content below. (Header/mega cards are separate.) */
.section--services .service-card {
  height: 500px;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background-color: #000;       /* fully black, never transparent */
}
.section--services .service-card__video-wrap {
  flex: 1 1 auto;               /* fills the space above content, shrinks on hover */
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;             /* flush; the card clips the rounded corners */
  background-color: var(--bg-black);       /* black behind the (letterboxed) video */
}
/* contain → the whole diamond scales down as the area shrinks (no cropping) */
.section--services .service-card__video {
  object-fit: contain;
}
.section--services .service-card__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 24px 24px 24px;
  width: 100%;
  background-color: var(--bg-black);
}

@media (min-width: 767px) {
  .section--services .service-card__content {
  padding: 0px 24px 24px 24px;
}
}

/* ── Case card ───────────────────────────────────────────────────────────── */
.case-card {
  display: block;
  background: transparent;
}

.case-card__image {
  width: 100%;
  aspect-ratio: 33 / 19;  /* height follows column width automatically */
  overflow: hidden;
  border-radius: var(--radius-image);
  margin-bottom: 20px;
}
.case-card__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Water-ripple: jquery.ripples draws a <canvas>; hide the fallback <img> and
   keep the rounded corners. Falls back to the visible <img> without .has-ripple.
   (.has-ripple lands on .case-card__liquid when the bleed layer exists.) */
.case-card__image { background-size: cover; background-position: center; }
.case-card__image.has-ripple img,
.case-card__image .has-ripple img { opacity: 0; pointer-events: none; }
.case-card__image canvas { border-radius: inherit; display: block; }

/* ── Liquid edge (hover) ────────────────────────────────────────────────────
   The card SHAPE deforms locally where the pointer nears its border and
   springs back with a wobble (main.js drives a clip-path polygon). The bleed
   layer extends 30px past the box so the bulge has image to reveal; the
   ripple canvas lives inside it, so the water is clipped by the bulged shape.
   Without JS the bleed is simply cropped by the normal rounded box. */
.case-card__image { position: relative; }
.case-card__image.is-liquid { overflow: visible; }   /* the clip-path owns the shape */
.case-card__liquid {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
}
.case-card__liquid img { width: 100%; height: 100%; object-fit: cover; }
/* Lift the hovered card so the bulge renders above neighbours */
.case-card { position: relative; }
.case-card:hover { z-index: 2; }

/* ── Scroll-in reveal ───────────────────────────────────────────────────────
   Reverse-engineered from 14islands.com's own production CSS (confirmed
   values, not a guess): the card fades/lifts in first, then the thumbnail
   keeps settling from a slight crop to its full frame. main.js toggles
   .is-inview via IntersectionObserver.
   - Card fade+lift: their keyframe only specifies the FROM state (JS-driven,
     duration unknown) — timing here is our approximation using their own
     --ease-quart-out token.
   - Image zoom: exact match — scale(1.1) → scale(1), 1.2s,
     cubic-bezier(.25,.46,.45,.94) (their --ease-quad-out). */
.case-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.case-card.is-inview {
  opacity: 1;
  transform: translateY(0);
}
.case-card__image img,
.case-card__image canvas {
  transform: scale(1.1);
}
.case-card.is-inview .case-card__image img,
.case-card.is-inview .case-card__image canvas {
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .case-card { opacity: 1; transform: none; transition: none; }
  .case-card__image img,
  .case-card__image canvas { transform: none; transition: none; }
}

.case-card__image--placeholder {
  width: 100%;
  aspect-ratio: 33 / 19;
  background-color: #dde0f0;
  border-radius: var(--radius-image);
  margin-bottom: 20px;
}

/* Case card info uses the .large-link component for label + title */

/* ── Area card grid item — glass, horizontal scroll ──────────────────────── */
.area-card-grid__item {
  /* Dimensions */
  flex: 0 0 20.4375rem;   /* 327px */
  min-height: 28.25rem;    /* 452px min — grows to fit body text */
  scroll-snap-align: start;

  /* Glass (blur removed) */
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.25rem;  /* 20px */

  /* Layout */
  padding: 1.5rem;         /* 24px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;               /* 48px between all rows */
}

/* Counter tag */
.area-card-grid__counter {
  background: transparent;
  align-self: center;
  color: #1C1B1F;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

/* Title */
.area-card-grid__title {
  font-size: 1.5rem;       /* 24px */
  font-weight: 400;
  line-height: 2.25rem;    /* 36px */
  color: var(--text-title);
  text-align: center;
}

/* Icon */
.area-card-grid__icon {
  height: 3.5rem;          /* 56px */
  display: flex;
  align-items: center;
  justify-content: center;
}
.area-card-grid__icon img { height: 100%; width: auto; object-fit: contain; }
.area-card-grid__icon-placeholder {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--dragster-blue);
  opacity: 0.15;
}

/* Body text — pushed to bottom with margin-top: auto */
.area-card-grid__body {
  font-size: 1rem;          /* 16px */
  font-weight: 400;
  line-height: 1.5rem;      /* 24px */
  letter-spacing: -0.01em;
  color: var(--text-title);
  text-align: left;
  align-self: stretch;
  margin-top: auto;         /* pushes body + link to bottom of card */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Small link — no blue on hover (matches nav styling) */
.area-card-grid__link {
  align-self: flex-start;
}
.area-card-grid__link:hover { color: var(--text-title); }
.area-card-grid__link:hover { color: var(--text-title); }

/* ── Sub-service card (horizontal scroll carousel) ───────────────────────── */
.sub-service-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background-color: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-image);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 380px;
  position: relative;
  overflow: hidden;
}
.sub-service-card--video {
  background-color: #0D0B14;
  border-color: transparent;
  color: #fff;
}
.sub-service-card__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sub-service-card__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.sub-service-card--video .sub-service-card__counter,
.sub-service-card--video .sub-service-card__title,
.sub-service-card--video .sub-service-card__body,
.sub-service-card--video .sub-service-card__link { position: relative; z-index: 1; }
.sub-service-card--video .sub-service-card__counter { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); }
.sub-service-card--video .sub-service-card__title { color: #fff; }
.sub-service-card--video .sub-service-card__body { color: rgba(255,255,255,0.7); }
.sub-service-card--video .sub-service-card__link { color: rgba(255,255,255,0.9); }
.sub-service-card--video .sub-service-card__dot { background-color: #fff; }

.sub-service-card__counter {
  font-size: var(--body-xxs);
  color: var(--text-muted);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 100px;
  padding: 3px 10px;
  align-self: flex-start;
}
.sub-service-card__title {
  font-size: var(--body-md);
  font-weight: 400;
  color: var(--text-title);
  text-align: center;
}
.sub-service-card__icon {
  display: flex;
  justify-content: center;
  padding-block: 8px;
}
.sub-service-card__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.sub-service-card__body {
  font-size: var(--body-xs);
  color: var(--text-body);
  line-height: 1.6;
  flex: 1;
}
.sub-service-card__body p { margin: 0; }
.sub-service-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-xs);
  color: var(--text-title);
  margin-top: auto;
}
.sub-service-card__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-title);
  flex-shrink: 0;
}

/* ── Area card (carousel / sub-service page card) ────────────────────────── */
.area-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 420px;
}
.area-card--current { box-shadow: 0 0 0 2px var(--dragster-blue); }

.area-card__counter {
  font-size: var(--body-xxs);
  color: var(--text-body);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 100px;
  padding: 3px 12px;
  align-self: center;
}
.area-card__title {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-title);
  text-align: center;
  letter-spacing: -0.02em;
}
.area-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.area-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.area-card__icon--empty {
  width: 64px;
  height: 64px;
  background: var(--dragster-blue);
  border-radius: 50%;
  opacity: 0.15;
}
.area-card__body {
  font-size: var(--body-xs);
  color: var(--text-body);
  line-height: 1.65;
  text-align: left;
  flex: 1;
  align-self: stretch;
}
.area-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-xs);
  color: var(--text-title);
  margin-top: auto;
  align-self: flex-start;
}
.area-card__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-title);
  flex-shrink: 0;
}

/* Video variant */
.area-card--video { background: rgba(13,11,20,0.75); border-color: rgba(255,255,255,0.1); }
.area-card__video-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.area-card__video-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.area-card--video .area-card__counter,
.area-card--video .area-card__title,
.area-card--video .area-card__body,
.area-card--video .area-card__link { position: relative; z-index: 1; color: #fff; }
.area-card--video .area-card__counter { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); }
.area-card--video .area-card__body   { color: rgba(255,255,255,0.7); }
.area-card--video .area-card__dot    { background: #fff; }