/**
 * Digital Kreativ mobile-only independent service carousels.
 * Progressive enhancement: the existing two-row grid stays intact if JS
 * fails. The split state is enabled only after native cards are reparented.
 */
@media (max-width: 767px) {
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: start !important;
    gap: 31px !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding: 0 0 3px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
  }

  body.page-id-78 .dk-services-section .dk-services-mobile-track {
    --dk-mobile-card-width: min(71.28vw, 278px);
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 34px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 calc((100vw - var(--dk-mobile-card-width)) / 2) 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: calc((100vw - var(--dk-mobile-card-width)) / 2) !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  body.page-id-78 .dk-services-section .dk-services-mobile-track::-webkit-scrollbar {
    display: none;
  }
  body.page-id-78 .dk-services-section .dk-services-mobile-track:focus-visible {
    outline: 2px solid #3edfd0;
    outline-offset: -2px;
  }

  /* Preserve the approved PSD geometry and text visibility after reparenting.
     All four Elementor widgets and links are moved, never duplicated. */
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card {
    order: 0 !important;
    flex: 0 0 var(--dk-mobile-card-width) !important;
    width: var(--dk-mobile-card-width) !important;
    max-width: var(--dk-mobile-card-width) !important;
    min-width: var(--dk-mobile-card-width) !important;
    height: 287px !important;
    min-height: 287px !important;
    scroll-snap-align: center !important;
    position: relative !important;
    isolation: isolate !important;
    background: #060908 !important;
  }

  /* :first-child now matches both tracks, so use immutable original indices
     instead of first-child/nth-child for styling and icon assets. */
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card[data-dk-service-index="1"] {
    background: #103b34 !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card:not([data-dk-service-index="1"]):hover,
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card:not([data-dk-service-index="1"]):focus-within {
    background: #103b34 !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card[data-dk-service-index="1"]:hover,
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card[data-dk-service-index="1"]:focus-within {
    transform: none !important;
    background: #103b34 !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-card-body {
    position: absolute !important;
    inset: auto 0 0 !important;
    z-index: 10 !important;
    height: 103px !important;
    min-height: 103px !important;
    max-height: 103px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 9px 12px 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-heading,
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-summary,
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-heading .elementor-heading-title,
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-summary p {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-card[data-dk-service-index="1"] .dk-service-icon::before {
    -webkit-mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/pngtree-web-development-line-icon-vector-png-image_6630883-1.png") !important;
    mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/pngtree-web-development-line-icon-vector-png-image_6630883-1.png") !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-card[data-dk-service-index="2"] .dk-service-icon::before {
    -webkit-mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/1997928.png") !important;
    mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/1997928.png") !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-card[data-dk-service-index="3"] .dk-service-icon::before {
    -webkit-mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4091459.png") !important;
    mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4091459.png") !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-card[data-dk-service-index="4"] .dk-service-icon::before {
    -webkit-mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4201611.png") !important;
    mask-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4201611.png") !important;
  }
}
@media (max-width: 359px) {
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] {
    gap: 26px !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-services-mobile-track > .dk-service-card {
    height: 270px !important;
    min-height: 270px !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid[data-dk-mobile-split="true"] .dk-service-card-body {
    height: 117px !important;
    min-height: 117px !important;
    max-height: 117px !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  body.page-id-78 .dk-services-section .dk-services-mobile-track {
    scroll-behavior: auto !important;
  }
}

/* 2026-11-05 — Homepage mobile services: four full-width cards in one
   vertical column, matching the Services-page reading pattern. The legacy
   split-slider JS now restores native Elementor DOM order on every viewport.
   Tablet/desktop and all other WordPress pages are intentionally untouched. */
@media (max-width: 767px) {
  body.page-id-78 .dk-services-section .dk-services-layout {
    gap: 42px !important; /* From 'Se alle tjenester' to the first card */
    padding-bottom: 72px !important; /* Space after the fourth card */
  }
  body.page-id-78 .dk-services-section .dk-services-grid {
    display: grid !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 26px !important; /* Consistent spacing between all four cards */
    width: min(calc(100% - 36px), 420px) !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-padding: 0 !important;
    overscroll-behavior-x: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid > .dk-service-card {
    box-sizing: border-box !important;
    display: flex !important;
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-self: stretch !important;
    scroll-snap-align: none !important;
    overflow: hidden !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid > .dk-service-card .dk-service-image {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: clamp(190px, 56vw, 236px) !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 clamp(190px, 56vw, 236px) !important;
    overflow: hidden !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid > .dk-service-card .dk-service-card-body {
    display: flex !important;
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    flex: 1 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 122px !important;
    max-height: none !important;
    padding: 22px 15px 20px !important;
    overflow: visible !important;
    text-align: center !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid > .dk-service-card .dk-service-icon {
    left: 16px !important;
    top: -53px !important;
  }
  body:not(#dk-mobile-stacked-services).page-id-78
    .dk-services-section .dk-services-grid > .dk-service-card
    .dk-service-heading :is(.elementor-heading-title,.elementor-heading-title a) {
    font-size: clamp(17px, 4.6vw, 19px) !important;
    line-height: 1.32 !important;
  }
  body:not(#dk-mobile-stacked-services).page-id-78
    .dk-services-section .dk-services-grid > .dk-service-card
    .dk-service-summary p {
    font-size: clamp(14px, 3.75vw, 15px) !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 359px) {
  body.page-id-78 .dk-services-section .dk-services-grid {
    width: calc(100% - 28px) !important;
    gap: 22px !important;
  }
  body.page-id-78 .dk-services-section .dk-services-layout {
    gap: 35px !important;
    padding-bottom: 60px !important;
  }
  body.page-id-78 .dk-services-section .dk-services-grid > .dk-service-card .dk-service-card-body {
    min-height: 126px !important;
    padding-inline: 12px !important;
  }
}