/**
 * ============================================================================
 * SERVICE CARDS - Responsive Grid/Slider with Decorative SVG
 * ============================================================================
 * 
 * Purpose: Displays service cards in a 3-column grid on desktop with a
 * centered 7th card and decorative SVG element. Converts to horizontal
 * slider on mobile with proper card spacing and vertical distribution.
 * 
 * Layout Modes:
 * - Desktop (993px+): 3-column grid with SVG decoration in row 3
 * - Mobile (≤992px): Horizontal scrolling slider with snap points
 * 
 * Features:
 * - Animated SVG entrance on desktop
 * - Card 7 centered in row 3 on desktop
 * - Responsive SVG sizing and positioning
 * - Smooth horizontal scroll on mobile
 * - Equal vertical spacing within cards
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.0
 * ============================================================================
 */


/* ============================================================================
   DESKTOP GRID LAYOUT (993px and up)
   ============================================================================ */

@media (min-width: 993px) {
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 30px;
    align-items: stretch;
    position: relative;
  }

  /* Force Card 7 to center of row 3 (column 2) */
  .service-card:nth-child(7) {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    z-index: 5;
  }

  /* === SVG Decoration (Column 1, Row 3) === */
  .services-grid::before {
    content: "";
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
    display: block !important;
    background-image: url('https://4pmix.co/wp-content/uploads/2026/02/Vector-182.svg');
    background-repeat: no-repeat;
    z-index: 1;

    /* Variable-controlled positioning and sizing */
    background-position: var(--svg-position, center);
    background-size: var(--svg-size, contain);
    width: var(--svg-width, 100%);
    height: var(--svg-height, 100%);
    margin-top: var(--svg-offset-y, 0px);
    margin-left: var(--svg-offset-x, 0px);

    /* Entrance animation */
    opacity: 0;
    animation: svgFadeIn 1.2s ease-out forwards;
    animation-delay: 0.3s;
  }
}

/* SVG fade-in animation */
@keyframes svgFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================================
   RESPONSIVE SVG CONTROLS (Desktop Breakpoints)
   ============================================================================
   Adjusts SVG size and position using CSS variables for each breakpoint.
   ============================================================================ */

/* Extra large (1681px+) */
@media (min-width: 1681px) {
  .services-grid {
    --svg-size: contain;
    --svg-width: 100%;
    --svg-height: 250px;
    --svg-position: center;
    --svg-offset-y: 50px;
    --svg-offset-x: 50px;
  }
}

/* Large desktops (1680px - 1441px) */
@media (max-width: 1680px) and (min-width: 1441px) {
  .services-grid {
    --svg-size: 80%;
    --svg-width: 100%;
    --svg-height: 220px;
    --svg-position: center;
    --svg-offset-y: 50px;
    --svg-offset-x: 50px;
  }
}

/* Standard desktops (1440px - 993px) */
@media (max-width: 1440px) and (min-width: 993px) {
  .services-grid {
    --svg-size: 70%;
    --svg-width: 100%;
    --svg-height: 200px;
    --svg-position: center;
    --svg-offset-y: 50px;
    --svg-offset-x: 30px;
  }
}


/* ============================================================================
   MOBILE SLIDER (992px and below)
   ============================================================================ */

@media (max-width: 992px) {
  .services-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding: 20px 0;
    cursor: grab;
    scroll-snap-type: x mandatory;

    /* Hide scrollbar */
    scrollbar-width: none;
  }

  .services-grid::-webkit-scrollbar {
    display: none;
  }

  /* Service card styling */
  .service-card {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center;

    /* === Vertical distribution fix === */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 400px;
    /* Adjust to desired card height */
  }

  /* Remove SVG decoration on mobile */
  .services-grid::before {
    content: none !important;
    display: none !important;
  }

  /* Change cursor while dragging */
  .services-grid:active {
    cursor: grabbing;
  }
}