/************************************************************
 * MARKSMAN DIGITAL MEDIA – FLIP CARD SERVICES SECTION
 * 
 * 3D flip cards for service offerings with:
 * - Responsive grid layout
 * - Hover/focus flip animations
 * - Touch device support via .is-flipped class
 * - Featured card highlighting
 * - Background image support
 * 
 * Last Updated: 2025-01-09
 ************************************************************/

/* ==========================================
   SECTION CONTAINER & GRID
   ========================================== */

.mdm-service {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.mdm-services-intro {
  text-align: center;
  margin-bottom: 3rem;
}

.mdm-services-grid {
  display: grid;
  gap: var(--mdm-card-gap);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.mdm-services-grid > * {
  height: 100%;
}


/* ==========================================
   FLIP CARD BASE STRUCTURE
   ========================================== */

.mdm-flip {
  position: relative;
  perspective: 1000px;
  min-height: var(--mdm-card-height);
  height: 100%;
  overflow: visible;
}

.mdm-flip-front,
.mdm-flip-back {
  position: absolute;
  inset: 0;
  border-radius: var(--mdm-card-border-radius);
  padding: var(--mdm-card-padding);
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: 
    transform var(--mdm-transition-flip) ease,
    box-shadow var(--mdm-transition-fast) ease;
  display: flex;
  flex-direction: column;
  
  /* WebKit optimizations */
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}


/* ==========================================
   CARD FACES
   ========================================== */

/* Front Face */
.mdm-flip-front {
  background: var(--mdm-surface-front);
  box-shadow: var(--mdm-shadow-sm);
  border: var(--mdm-border-thin) solid var(--mdm-border);
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Back Face */
.mdm-flip-back {
  background: var(--mdm-surface-back);
  border: var(--mdm-border-thin) solid var(--mdm-border);
  transform: rotateY(180deg);
  justify-content: space-between;
}


/* ==========================================
   FLIP INTERACTIONS
   ========================================== */

/* Desktop hover */
@media (hover: hover) {
  .mdm-flip:hover .mdm-flip-front {
    transform: rotateY(180deg);
    box-shadow: var(--mdm-shadow-lg);
  }
  
  .mdm-flip:hover .mdm-flip-back {
    transform: rotateY(0);
  }
}

/* Keyboard focus */
.mdm-flip:focus-within .mdm-flip-front {
  transform: rotateY(180deg);
}

.mdm-flip:focus-within .mdm-flip-back {
  transform: rotateY(0);
}

/* Touch device support (requires JS) */
.mdm-flip.is-flipped .mdm-flip-front {
  transform: rotateY(180deg);
}

.mdm-flip.is-flipped .mdm-flip-back {
  transform: rotateY(0);
}


/* ==========================================
   FRONT FACE CONTENT
   ========================================== */

/* Icon Chip */
.mdm-chip-lg {
  width: var(--mdm-chip-lg);
  height: var(--mdm-chip-lg);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--mdm-accent) 12%, transparent);
  color: var(--mdm-accent);
  flex-shrink: 0;
}

/* Heading */
.mdm-flip-front h3 {
  margin: 0;
  font-size: var(--mdm-h3-size);
  line-height: var(--mdm-heading-lh);
  font-weight: 600;
  color: var(--mdm-text);
  position: relative;
  padding-bottom: 0.35rem;
}

.mdm-flip-front h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--mdm-accent);
  border-radius: 2px;
}

/* Description */
.mdm-flip-front p {
  margin: 0.75rem 0 0 0;
  color: var(--mdm-text);
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}


/* ==========================================
   BACK FACE CONTENT
   ========================================== */

.mdm-flip-back .mdm-chip-lg {
  margin-bottom: 0.75rem;
  align-self: flex-start;
}

/* Description wrapper - vertically centered */
.mdm-back-desc {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: left;
  max-width: 60ch;
}

.mdm-back-desc p {
  margin: 0;
  font-size: var(--mdm-body-size);
  line-height: var(--mdm-body-lh);
  color: var(--mdm-text);
}


/* ==========================================
   GRADIENT BACKGROUNDS (BACK)
   ========================================== */

.mdm-flip-back.grad-slate {
  background: var(--mdm-grad-neutral);
}

.mdm-flip-back.grad-navy {
  background: var(--mdm-grad-navy);
  color: #fff;
}

.mdm-flip-back.grad-navy .mdm-back-desc p {
  color: #fff;
}

.mdm-flip-back.grad-navy .mdm-chip-lg {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}


/* ==========================================
   FEATURED CARD HIGHLIGHT
   ========================================== */

.mdm-featured .mdm-flip-front {
  border-top: var(--mdm-border-thick) solid var(--mdm-accent);
  box-shadow: var(--mdm-shadow-md);
}


/* ==========================================
   BACKGROUND IMAGE CARDS
   ========================================== */

/* Meta Ads card with background image */
.mdm-flip-front.mdm-front-meta {
  --mdm-front-image: url('https://marksmandigitalmedia.com/wp-content/uploads/2025/07/social_media_marketing-1.jpg');
}

.mdm-flip-front.mdm-front-onimage {
  background-image: 
    var(--mdm-overlay-gradient),
    var(--mdm-front-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* White text on image backgrounds */
.mdm-flip-front.mdm-front-onimage h3,
.mdm-flip-front.mdm-front-onimage p {
  color: #fff;
}

.mdm-flip-front.mdm-front-onimage h3::after {
  background: var(--mdm-accent);
  opacity: 0.95;
}

.mdm-flip-front.mdm-front-onimage .mdm-chip-lg {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}


/* ==========================================
   BUTTONS
   ========================================== */

/* Base button styles */
.mdm-btn,
.mdm-flip .gb-button,
.mdm-flip .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--mdm-button-size);
  line-height: var(--mdm-button-lh);
  white-space: nowrap;
  transition: all var(--mdm-transition-fast) ease;
  margin-top: auto;
}

/* Ghost button variant */
.mdm-btn-ghost {
  background: transparent;
  border: var(--mdm-border-thin) solid var(--mdm-text);
  color: var(--mdm-text);
}

.mdm-btn-ghost:hover {
  background: var(--mdm-text);
  color: var(--theme-palette-color-8);
}

/* Ghost button on image backgrounds */
.mdm-flip-front.mdm-front-onimage .mdm-btn-ghost {
  border-color: #fff;
  color: #fff;
}

.mdm-flip-front.mdm-front-onimage .mdm-btn-ghost:hover {
  background: #fff;
  color: var(--mdm-text);
}

/* Primary button variant */
.mdm-btn-primary {
  background: var(--mdm-accent);
  color: var(--theme-palette-color-8);
  border: var(--mdm-border-thin) solid transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.mdm-btn-primary:hover {
  background: var(--mdm-accent-hover);
  transform: translateY(-1px);
}

.mdm-btn-primary:active {
  transform: translateY(0);
}

/* Focus states */
.mdm-btn:focus-visible,
.gb-button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--mdm-focus);
  outline-offset: 2px;
}


/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Tablet & Up (768px+) */
@media (min-width: 768px) {
  .mdm-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .mdm-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .mdm-flip {
    min-height: 340px;
  }
  
  /* Buttons short on desktop */
  .mdm-flip .mdm-btn,
  .mdm-flip .gb-button,
  .mdm-flip .wp-block-button__link {
    width: auto;
    justify-content: flex-start;
  }
  
  .mdm-flip-back .mdm-btn,
  .mdm-flip-back .gb-button,
  .mdm-flip-back .wp-block-button__link {
    align-self: flex-start;
  }
}

/* Tablet Range (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mdm-flip {
    min-height: 380px;
  }
  
  /* Full-width buttons on tablet */
  .mdm-flip .mdm-btn,
  .mdm-flip .gb-button,
  .mdm-flip .wp-block-button__link {
    width: 100%;
  }
}

/* Mobile (Below 768px) */
@media (max-width: 767.98px) {
  .mdm-flip {
    min-height: 420px;
  }
  
  .mdm-flip-front,
  .mdm-flip-back {
    padding: 18px;
  }
  
  /* Full-width buttons on mobile */
  .mdm-flip .mdm-btn,
  .mdm-flip .gb-button,
  .mdm-flip .wp-block-button__link {
    width: 100%;
  }
  
  /* Tighter text clamping on small screens */
  .mdm-flip-front h3 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .mdm-flip-front p {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ==========================================
   ACCESSIBILITY & REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .mdm-flip-front,
  .mdm-flip-back,
  .mdm-btn,
  .gb-button,
  .wp-block-button__link {
    transition: none;
  }
}


/* ==========================================
   NOTES & CHANGELOG
   ========================================== */

/*
USAGE:
- Add "mdm-featured" class to highlight a specific card
- Add "mdm-front-onimage" + "mdm-front-meta" for background image cards
- Add "grad-slate" or "grad-navy" to back face for gradient backgrounds

HTML STRUCTURE:
<div class="mdm-flip">
  <div class="mdm-flip-front">
    <div class="mdm-chip-lg">[icon]</div>
    <h3>Service Name</h3>
    <p>Description</p>
  </div>
  <div class="mdm-flip-back grad-slate">
    <div class="mdm-chip-lg">[icon]</div>
    <div class="mdm-back-desc">
      <p>Full description...</p>
    </div>
    <a class="mdm-btn mdm-btn-primary">CTA</a>
  </div>
</div>

CHANGELOG:
- 2025-01-09: Extracted from main CSS file
- 2025-01-09: Reorganized into logical sections
- 2025-01-09: Removed redundant overrides and !important declarations

TODO:
- Add card loading animation
- Consider adding more gradient options
- Add support for video backgrounds on front face
*/