/* ================================================================
   MEDIA INITIATION — HOME PAGE ONLY FIXES
   Fix 1: Services sticky scroll (left fixed, right scrolls)
   Fix 2: Case Studies full-width header + side-by-side cards
   NOTHING ELSE IS CHANGED
   ================================================================ */

/* ────────────────────────────────────────────────────────────
   FIX 1: SERVICES — STICKY LEFT, SCROLLING RIGHT
   ──────────────────────────────────────────────────────────── */

/* Outer wrapper: flex row, items start at top */
.services_component {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 4rem !important;
  width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative !important;
}

/* LEFT side: sticky — stays in place while right scrolls */
.services_content {
  width: 40% !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  z-index: 2 !important;
  overflow: visible !important;
}

/* Fix the sticky heading inside left panel */
.services_content .heading-style-h3 {
  position: static !important;
  width: 100% !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
}

/* RIGHT side: normal scroll, items stack vertically */
.services_items {
  flex: 1 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3rem !important;
  min-width: 0 !important;
}

/* Each service card */
.services_item {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Service image */
.services_img-wrap {
  aspect-ratio: 3 / 2 !important;
  border-radius: 1rem !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.services_img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Service info text */
.services_item-infos {
  padding: 0.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* ────────────────────────────────────────────────────────────
   FIX 2: CASE STUDIES — Full-width header + 2 large cards
   ──────────────────────────────────────────────────────────── */

/* Section wrapper */
.case-studies-section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header block: heading + description full width, left aligned */
.case-studies-header {
  padding: 0 40px 3rem 40px !important;
  max-width: 700px !important;
}

.case-studies-header .heading {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
  color: #fff !important;
}

.case-studies-header .medium-text {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
}

/* Two cards side by side, full page width */
.case-studies-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Each case study card */
.case-study-card {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Image wrapper fills card */
.case-study-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  display: block !important;
}

/* The actual image */
.case-study-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.case-study-card:hover .case-study-img {
  transform: scale(1.04) !important;
}

/* Dark overlay that appears on top of image */
.case-study-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0,0,0,0.7) 100%
  ) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 2rem !important;
  pointer-events: none !important;
}

/* Brand logo top-left of card */
.case-study-logo {
  width: 160px !important;
  height: auto !important;
  object-fit: contain !important;
  align-self: flex-start !important;
}

/* LEARN > MORE button bottom-left */
.case-study-learn-more {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  align-self: flex-start !important;
}

.case-study-learn-more span {
  color: #ff6b00 !important;
  font-size: 1.3rem !important;
  margin: 0 4px !important;
}

/* ── MOBILE: stack cards vertically ── */
@media screen and (max-width: 767px) {
  .services_component {
    flex-direction: column !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 2rem !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
  }

  .services_items {
    width: 100% !important;
  }

  .case-studies-header {
    padding: 0 16px 2rem 16px !important;
  }

  .case-studies-grid {
    grid-template-columns: 1fr !important;
  }

  .case-study-img-wrap {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ── TABLET ── */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .services_component {
    flex-direction: column !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
  }

  .case-studies-header {
    padding: 0 24px 2rem 24px !important;
  }
}