/* ==========================================================================
   M.I.H. Group — home.css
   Homepage sections. Layout/motion ported from reference-agency widgets:
   Hero (floating parallax layers + scroll fade), Services numbered rows,
   Approach hover-card grid, CTA.
   ========================================================================== */

/* ------------------------------------------------------------- HERO ----- */
/* Reference Hero: h-screen stage, centered extrabold headline, 3 absolutely
   positioned image layers moved by mouse via gsap.set x/y += force*factor. */
.hero {
  position: relative;
  width: 100%;
}
.hero-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Fullscreen background video */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Mobile hero - video card style, no gaps */
@media (max-width: 768px) {
  .hero {
    padding-top: calc(var(--nav-h) + 16px);
  }
  .hero-stage {
    position: relative;
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    width: calc(100% - 2 * 16px);
    margin: 0 auto;
    border-radius: clamp(12px, 3vw, 20px);
    overflow: hidden;
    background: var(--c-bg-2);
  }
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-mute-btn {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .services-list {
    padding-top: 0;
  }
  .services-list .section-title {
    padding-top: clamp(60px, 8vw, 80px);
  }
}

/* Mute/unmute button */
.hero-mute-btn {
  position: absolute;
  bottom: 80px;
  right: clamp(20px, 4vw, 48px);
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(17, 26, 36, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.hero-mute-btn:hover {
  border-color: var(--c-gold);
  background: rgba(17, 26, 36, .75);
  transform: scale(1.08);
}
.hero-mute-icon { width: 20px; height: 20px; }
.hero-mute-btn .icon-muted { display: none; }
.hero-mute-btn.is-muted .icon-unmuted { display: none; }
.hero-mute-btn.is-muted .icon-muted { display: block; }

/* Mute button icon state handled by .is-muted class in base styles */

/* ----------------------------------------------- VIDEO PERFORMANCE ----- */
/* GPU-accelerate all videos for smooth playback, prevent stuttering. */
.hero-video,
.service-video {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* -------------------------------------------------------- STATEMENT ----- */
.statement-text {
  font-size: clamp(24px, 2.3vw, 40px);         /* ref about statement 2.3vw */
  font-weight: 600; line-height: 1.35;
  max-width: 30ch;
  text-align: justify;
  word-spacing: -0.02em;
}
.statement .link-more { margin-top: 28px; }

/* ---------------------------------------------------- SERVICES LIST -----
   Ported from ServiceCard: huge light title rows with looping 16:9 videos.
   Video extends vertically to align with service title for premium layout. */

/* Services hub hero (eyebrow + title above the list) */
.services-hero {
  padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 90px));
}
.services-hero .eyebrow { margin-bottom: 12px; }
.services-hero .lead { margin-top: 10px; }

.services-list { padding-block: clamp(32px, 4vw, 48px); }
.services-list .section-title { padding-block: clamp(18px, 2.5vw, 44px) clamp(28px, 3vw, 56px); display: block; }

.service-row {
  display: grid;
  grid-template-columns: minmax(280px, .45fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(48px, 6vw, 100px);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.service-row:last-of-type { border-bottom: 1px solid rgba(255,255,255,.07); }
.service-content { 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  gap: 16px; 
  min-width: 0; 
  padding-block: clamp(20px, 2vw, 32px);
  grid-column: 1;
  grid-row: 1;
}
.service-title {
  font-size: clamp(30px, 3.7vw, 64px);
  font-weight: 300; line-height: 1.05;
  transition: color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-slide);
}
.service-row:hover .service-title {
  color: var(--c-gold); transform: translateX(10px);
}
.service-desc {
  color: var(--c-text-2); max-width: 650px;
  font-size: clamp(15px, 1.25vw, 19px); line-height: 1.65;
  text-align: justify;
  word-spacing: -0.01em;
}
/* ----------------------------------------------- SERVICE VIDEO CARDS -----
   Replaces the giant decorative number with a looping 16:9 video.
   Extended height to align with service title for a premium, balanced layout.
   Premium blend: no visible border, soft radius, gold glow on hover.
   ========================================================================== */
.service-video-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 1.6vw, 24px);
  background: transparent;
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.6s ease,
              box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.service-video-card.is-in {
  transform: scale(1);
  opacity: 1;
}

.service-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.service-row:hover .service-video-card {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(197, 160, 89, 0.2),
              0 12px 40px -8px rgba(0, 0, 0, 0.5);
}

/* Even row — swap column widths so video (col 1) gets the wide 1fr slot.
   This keeps all videos the same size while flipping sides. */
.service-row:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .45fr);
}
.service-row:nth-of-type(even) .service-content { grid-column: 2; grid-row: 1; }
.service-row:nth-of-type(even) .service-video-card { grid-column: 1; grid-row: 1; }

/* Tablet responsive */
@media (max-width: 1024px) {
  .service-row {
    grid-template-columns: minmax(240px, .5fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
  }
  .service-row:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .5fr);
  }
}

/* Mobile responsive */
@media (max-width: 767px) {
  .service-row { 
    display: flex; 
    flex-direction: column; 
    align-items: stretch;
    gap: 16px; 
    padding-block: clamp(32px, 7vw, 48px); 
  }
  .service-video-card {
    order: -1;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .service-content {
    order: 1;
    gap: 12px;
    padding-block: 0;
  }
  .service-title { font-size: clamp(28px, 8vw, 42px); }
}

/* Legacy number class (kept for reference, hidden) */
.service-number { display: none; }

/* ------------------------------------------------------- APPROACH -------
   Ported from HoverCards: 2-col grid, last card spans both columns,
   bordered inner cell (border .2vw stroke, radius 1vw), gold fill highlight
   animating in .15s / out .1s+.2s delay on hover. */
.approach-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 6px;                                      /* ref px-[0.4-0.6vw] gaps */
  margin-top: clamp(24px, 2.5vw, 48px);
  counter-reset: step;
}
.approach-card { position: relative; padding: 4px; border-radius: var(--r-lg); }
.approach-card:last-child { grid-column: 1 / -1; }

.approach-card-inner {
  position: relative; z-index: 1; height: 100%;
  border: 2px solid var(--c-stroke-strong);      /* ref border-[0.2vw] stroke */
  border-radius: var(--r-lg);
  padding: clamp(20px, 1.6vw, 32px) clamp(22px, 1.4vw, 28px);
  background: transparent;
  transition: background-color var(--dur-hovercard-in) ease,
              border-color var(--dur-hovercard-out) ease var(--dur-hovercard-out);
}
.approach-card-inner::after {
  /* reference layoutId fill effect — CSS port with its exact timings */
  content: ""; position: absolute; inset: -6px; z-index: -1;
  border-radius: inherit; background: var(--c-gold-dim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-hovercard-out) ease var(--dur-hovercard-out);
}
.approach-card:hover .approach-card-inner::after {
  opacity: 1;
  transition: opacity var(--dur-hovercard-in) ease;
}
.approach-card:hover .approach-card-inner {
  border-color: rgba(197, 160, 89, .55);
}

.approach-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.approach-card-head i { color: var(--c-gold); font-size: 22px; }
.approach-card-head h3 {
  font-size: clamp(19px, 1.6vw, 27px); font-weight: 700;
}
.approach-card p {
  color: var(--c-text-2); font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400; line-height: 1.6; max-width: 62ch;
}
@media (max-width: 800px) { .approach-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- PROJECTS / BLOG ----- */
.home-projects-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-block: clamp(18px, 2.5vw, 44px) clamp(28px, 3vw, 56px);
}

/* 3 cards per row on desktop - shared for all pages */
.cards-grid {
  display: grid !important;
  gap: clamp(16px, 1.5vw, 24px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding-inline: var(--gutter-tight) !important;
  width: 100% !important;
  max-width: none !important;
}
.cards-grid > .course {
  justify-self: start !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
}

/* Swipeable cards on tablet and mobile — projects only */
@media (max-width: 900px) {
  .home-projects .cards-grid {
    display: flex !important;
    gap: clamp(16px, 1.5vw, 24px) !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding-inline: 16px !important;
    width: 100% !important;
    margin-inline: 0 !important;
    scrollbar-width: none;
    align-items: stretch !important;
  }
  .home-projects .cards-grid::-webkit-scrollbar { display: none; }
  .home-projects .cards-grid > .course {
    flex: 0 0 calc((100% - clamp(16px, 2vw, 24px)) / 2);
    width: calc((100% - clamp(16px, 2vw, 24px)) / 2);
    max-width: none !important;
    height: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Blog cards use responsive grid layout (3→2→1 columns) — no horizontal scroll */
  .home-blog .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.5vw, 24px) !important;
    align-items: stretch !important;
  }
}

/* One complete card per view on phones */
@media (max-width: 640px) {
  .home-projects .cards-grid > .course {
    flex-basis: 100%;
    width: 100%;
    height: auto;
  }
  .home-blog .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .home-projects .course:hover .course-thumb img,
  .home-blog .course:hover .course-thumb img {
    transform: none !important;
  }
  .home-projects .course-thumb img,
  .home-blog .course-thumb img {
    object-fit: cover;
  }
}

/* --------------------------------------------------------- COMPANY INTRO -- */
.company-intro { padding-block: clamp(48px, 5vw, 96px); }
.intro-grid { 
  display: grid; 
  gap: clamp(24px, 3vw, 48px); 
  align-items: start; 
}
@media (min-width: 900px) { 
  .intro-grid { 
    grid-template-columns: 1.3fr 0.7fr; 
    align-items: center; 
  } 
}

/* Left column - Text content */
.intro-text .section-title { 
  font-size: clamp(24px, 2.8vw, 46px); 
  text-align: left; 
  margin-bottom: clamp(16px, 2vw, 32px); 
  line-height: 1.1; 
  white-space: nowrap; 
}
.intro-text .statement-text { 
  font-size: clamp(15px, 2.2vw, 20px); 
  line-height: 1.7; 
  max-width: 100%; 
  text-align: left; 
  text-align: justify; 
  text-justify: inter-word; 
  word-spacing: -0.01em; 
}
.intro-highlights { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 16px; 
  margin-top: clamp(20px, 2.5vw, 36px); 
}
.intro-highlights span { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  font-size: clamp(13px, 1.1vw, 15px); 
  color: var(--c-text-2); 
}
.intro-highlights i { 
  color: var(--c-gold); 
  font-size: 1em; 
}

/* Right column - Lottie Animation (official lottie.host iframe embed) */
.intro-lottie {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.intro-lottie .lottie-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  overflow: hidden;
}
/* Keep the square animation a reasonable size on tablet/mobile */
@media (max-width: 899px) {
  .intro-lottie {
    max-width: min(100%, 420px);
    margin-inline: auto;
  }
}
@media (max-width: 640px) { 
  .intro-highlights { justify-content: center; } 
}

/* ------------------------------------------------------------- CTA ------ */
.cta-section { border-top: 1px solid var(--c-stroke); }
.cta-wrap {
  min-height: 72vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-inline: var(--gutter-tight);
  max-width: min(60vw, 1100px); margin-inline: auto;   /* ref max-w-[60vw] */
}
@media (max-width: 900px) { .cta-wrap { max-width: 92%; min-height: 56vh; } }
.cta-title { font-size: clamp(40px, 4vw, 76px); font-weight: 500; text-transform: uppercase; }
.cta-sub { margin-top: 12px; max-width: 52ch; }
.cta-btn { margin-top: 30px; }
.cta-btn .btn-inner { min-width: min(320px, 78vw); justify-content: center; }