/*
Theme Name: Skill Code AI
Theme URI: https://skillcodeaisolution.com/
Author: Skill Code AI
Description: WordPress theme wrapper for the supplied Skill Code AI website build. Serves the existing compiled frontend without requiring Node.js on the hosting server.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: skill-code-ai
*/


/* Layout repair: restore the Bootstrap grid used by the original compiled React app.
   The production bundle uses .row and .col-lg-4/.col-md-6/.col-12 class names,
   but Bootstrap's grid stylesheet is not bundled. */
.ai-services .ai-services__grid.row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  align-items: stretch !important;
}
.ai-services .ai-services__grid.row > [class*="col-"] {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ai-services .ai-services__card {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  perspective: 1200px;
}
.ai-services .ai-services__card-inner {
  display: grid !important;
  grid-template-areas: "card" !important;
  width: 100% !important;
  min-height: 450px !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d;
}
.ai-services .ai-services__card-face {
  grid-area: card !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.ai-services .ai-services__card-front {
  transform: rotateY(0deg);
}
.ai-services .ai-services__card-back {
  transform: rotateY(180deg);
}
.ai-services .ai-services__card:hover .ai-services__card-inner,
.ai-services .ai-services__card:focus-within .ai-services__card-inner {
  transform: rotateY(180deg);
}
.ai-services .ai-content {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.ai-services .ai-services__image-section img {
  max-width: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .ai-services .ai-services__grid.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .ai-services .ai-services__card-inner {
    min-height: 420px !important;
  }
}
@media (max-width: 600px) {
  .ai-services .ai-services__grid.row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .ai-services .ai-services__card-inner {
    min-height: 400px !important;
  }
}


/* Final visual repair: prevent card faces/images from being clipped or skewed. */
.ai-services img,
img {
  max-width: 100%;
}
.ai-services .ai-services__image-section,
.ai-services .ai-services__image-section a {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}
.ai-services .ai-services__image-section img,
.ai-services .ai-services__card img {
  display: block !important;
  width: 100% !important;
  height: 210px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  clip-path: none !important;
}
.ai-services .ai-services__card,
.ai-services .ai-services__card-inner,
.ai-services .ai-services__card-face {
  overflow: hidden;
  clip-path: none !important;
  skew: none !important;
}
.ai-services .ai-services__card-inner {
  transform: none;
  transition: transform .55s ease;
}
.ai-services .ai-services__card:hover .ai-services__card-inner,
.ai-services .ai-services__card:focus-within .ai-services__card-inner {
  transform: rotateY(180deg);
}

/* Process/workflow steps: four equal steps on a single desktop row. */
.process-steps,
.workflow-steps,
.process-flow,
.steps-container,
.working-process .row,
.process-section .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 16px !important;
}
.process-steps > *,
.workflow-steps > *,
.process-flow > *,
.steps-container > *,
.working-process .row > *,
.process-section .row > * {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 767px) {
  .process-steps,
  .workflow-steps,
  .process-flow,
  .steps-container,
  .working-process .row,
  .process-section .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Restore full-colour rendering for embedded Google Maps and map containers. */
iframe[src*="google.com/maps"],
iframe[src*="maps.google"],
.google-map,
.google-maps,
.map-container,
.map-wrapper,
#map {
  filter: grayscale(0) saturate(1.15) contrast(1.02) !important;
}


/* Card repair v2: correct mirrored backs and show the complete image. */
.ai-services .ai-services__card {
  perspective: 1400px !important;
  overflow: visible !important;
}
.ai-services .ai-services__card-inner {
  transform: rotateY(0deg) !important;
  transform-style: preserve-3d !important;
  transition: transform .6s ease !important;
  overflow: visible !important;
}
.ai-services .ai-services__card-face {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: visible !important;
}
.ai-services .ai-services__card-front {
  transform: rotateY(0deg) !important;
}
.ai-services .ai-services__card-back {
  transform: rotateY(180deg) !important;
}
.ai-services .ai-services__card:hover .ai-services__card-inner,
.ai-services .ai-services__card:focus-within .ai-services__card-inner {
  transform: rotateY(180deg) !important;
}

/* Do not crop card illustrations: preserve the complete source image. */
.ai-services .ai-services__image-section,
.ai-services .ai-services__image-section a {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.ai-services .ai-services__image-section img,
.ai-services .ai-services__card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  transform: none !important;
  clip-path: none !important;
}


/* ===== Skill Code AI: final service-card correction =====
   This override intentionally resolves earlier conflicting rules:
   - prevent an idle/hovered card from showing mirrored back-side text
   - keep the full illustration visible
   - let card content determine the card height instead of clipping it
*/
.ai-services .ai-services__card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  perspective: none !important;
}

.ai-services .ai-services__card-inner {
  display: block !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
  transform-style: flat !important;
  transition: none !important;
  overflow: visible !important;
}

/* Show the front face as the stable default; don't expose mirrored backs. */
.ai-services .ai-services__card-front {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.ai-services .ai-services__card-back {
  display: none !important;
}

/* Remove inherited fixed heights/clipping from image wrappers and card faces. */
.ai-services .ai-services__card-face,
.ai-services .ai-content,
.ai-services .ai-services__image-section,
.ai-services .ai-services__image-section a {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
}

/* Preserve the entire original image without cropping. */
.ai-services .ai-services__image-section img,
.ai-services .ai-services__card-front img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  transform: none !important;
  clip-path: none !important;
}

/* Keep desktop cards aligned while allowing natural card height. */
.ai-services .ai-services__grid.row {
  align-items: stretch !important;
}
.ai-services .ai-services__grid.row > [class*="col-"] {
  min-width: 0 !important;
  height: auto !important;
}
@media (max-width: 991px) {
  .ai-services .ai-services__grid.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .ai-services .ai-services__grid.row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ===== FINAL FIX: equal-height cards + correct 3D flip ===== */
.ai-services .ai-services__grid.row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 24px !important;
}

.ai-services .ai-services__grid.row > [class*="col-"] {
  display: flex !important;
  align-items: stretch !important;
  min-width: 0 !important;
  height: auto !important;
}

.ai-services .ai-services__card {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 600px !important;
  min-height: 600px !important;
  perspective: 1400px !important;
  overflow: visible !important;
}

.ai-services .ai-services__card-inner {
  display: grid !important;
  grid-template-areas: "flipcard" !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  transform: rotateY(0deg) !important;
  transform-style: preserve-3d !important;
  transition: transform .65s cubic-bezier(.2,.7,.2,1) !important;
  overflow: visible !important;
}

/* Both faces occupy the same exact box; the hidden face cannot show through. */
.ai-services .ai-services__card-face {
  grid-area: flipcard !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

.ai-services .ai-services__card-front {
  display: flex !important;
  flex-direction: column !important;
  transform: rotateY(0deg) !important;
}

.ai-services .ai-services__card-back {
  display: flex !important;
  flex-direction: column !important;
  transform: rotateY(180deg) !important;
}

/* Re-enable the flip after earlier overrides disabled it. */
.ai-services .ai-services__card:hover .ai-services__card-inner,
.ai-services .ai-services__card:focus-within .ai-services__card-inner {
  transform: rotateY(180deg) !important;
}

/* Keep the content within each face and reserve consistent room for imagery. */
.ai-services .ai-content {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ai-services .ai-services__image-section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 220px !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  margin-top: auto !important;
  overflow: hidden !important;
}

.ai-services .ai-services__image-section a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.ai-services .ai-services__image-section img,
.ai-services .ai-services__card-face img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  clip-path: none !important;
}

/* Smaller screens: same-size cards within each responsive row. */
@media (max-width: 991px) {
  .ai-services .ai-services__grid.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .ai-services .ai-services__card,
  .ai-services .ai-services__card-inner {
    height: 580px !important;
    min-height: 580px !important;
  }
}

@media (max-width: 600px) {
  .ai-services .ai-services__grid.row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .ai-services .ai-services__card,
  .ai-services .ai-services__card-inner {
    height: 560px !important;
    min-height: 560px !important;
  }
  .ai-services .ai-services__image-section {
    flex-basis: 200px !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }
}


/* ===== Development process: four steps in one desktop row ===== */
.process-steps,
.workflow-steps,
.process-flow,
.steps-container,
.working-process .row,
.process-section .row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.process-steps > *,
.workflow-steps > *,
.process-flow > *,
.steps-container > *,
.working-process .row > *,
.process-section .row > * {
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.process-steps a,
.process-steps button,
.workflow-steps a,
.workflow-steps button,
.process-flow a,
.process-flow button,
.steps-container a,
.steps-container button,
.working-process .row a,
.working-process .row button,
.process-section .row a,
.process-section .row button {
  width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 12px 10px !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Keep arrows between steps compact instead of letting them consume a column. */
.process-steps > .arrow,
.workflow-steps > .arrow,
.process-flow > .arrow,
.steps-container > .arrow,
.working-process .row > .arrow,
.process-section .row > .arrow,
.process-steps .step-arrow,
.workflow-steps .step-arrow,
.process-flow .step-arrow,
.steps-container .step-arrow {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 12px !important;
}

/* Mobile: wrap cleanly into two columns, then one column on narrow phones. */
@media (max-width: 767px) {
  .process-steps,
  .workflow-steps,
  .process-flow,
  .steps-container,
  .working-process .row,
  .process-section .row {
    flex-flow: row wrap !important;
    gap: 10px !important;
  }

  .process-steps > *,
  .workflow-steps > *,
  .process-flow > *,
  .steps-container > *,
  .working-process .row > *,
  .process-section .row > * {
    flex: 1 1 calc(50% - 10px) !important;
  }
}

@media (max-width: 420px) {
  .process-steps > *,
  .workflow-steps > *,
  .process-flow > *,
  .steps-container > *,
  .working-process .row > *,
  .process-section .row > * {
    flex-basis: 100% !important;
  }
}