/* ============================================
   victormtz.me ??? Mobile & Responsive Override
   Tony @ 2026-03-21
   
   The Squarespace Fluid Engine uses display:flex 
   on page-section with flex-direction:row and
   align-items:center, which shrink-wraps the
   content-wrapper. On mobile this causes all 
   content to collapse to intrinsic width.
   
   FIX: Convert page-section to display:block on
   mobile, and the fluid-engine grid to flexbox.
   ============================================ */

/* ---- MOBILE (max-width: 767px) ---- */
@media (max-width: 767px) {

  /* === PREVENT HORIZONTAL OVERFLOW === */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* === CRITICAL: Section becomes block layout ===
     The flex row layout with align-items:center
     shrink-wraps content-wrapper to its intrinsic
     width. Block layout forces it to fill. */
  .page-section {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
  }

  /* Content wrapper fills width with side padding */
  .page-section .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Content div fills width */
  .page-section .content-wrapper > .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Anonymous wrapper div */
  .page-section .content > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Overflow fe-blocks (siblings of .content in content-wrapper) */
  .page-section .content-wrapper > .fe-block {
    width: 100% !important;
    max-width: 100% !important;
    grid-area: unset !important;
  }

  /* === FLUID ENGINE: Convert grid to stacked flexbox === */
  .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Remove all grid-area placements */
  .fluid-engine > .fe-block {
    grid-area: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  /* === VIDEOS: proper 16:9 aspect ratio ===
     The inline HTML has padding-bottom: 0.5625% (typo,
     should be 56.25%). Override for correct rendering. */
  .sqs-block-video .intrinsic {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sqs-block-video .embed-block-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .sqs-block-video .embed-block-wrapper video,
  .sqs-block-video .embed-block-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    aspect-ratio: unset !important;
  }

  video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* === IMAGES === */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .sqs-block-image,
  .image-block {
    width: 100% !important;
  }

  .fe-block .sqs-block-image img,
  .fe-block .image-block img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* === CODE EMBED (Platformer Game) === */
  .sqs-block-code,
  .code-block {
    width: 100% !important;
    overflow: hidden !important;
  }

  .sqs-block-code iframe,
  .code-block iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 300px;
  }

  .sqs-block-code pre,
  .sqs-block-code code {
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  /* === TYPOGRAPHY === */
  h1 { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 2rem) !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.5rem) !important; }

  .sqs-text-block-container p,
  .sqs-text-block-container li,
  .sqs-text-block-container a {
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
    word-wrap: break-word !important;
  }

  /* === HEADER / NAVIGATION === */
  #header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  .header-inner {
    padding: 10px 16px !important;
  }

  .header-burger {
    display: flex !important;
  }

  .header-nav-list {
    display: none !important;
  }

  .header-title-text a {
    font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
  }

  .header-menu-nav-list {
    padding: 20px !important;
  }

  .header-menu-nav-list a {
    font-size: 1.2rem !important;
    padding: 12px 0 !important;
  }

  /* === FOOTER === */
  footer {
    display: block !important;
  }

  footer .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }

  footer .content {
    width: 100% !important;
  }

  footer .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  footer .fe-block {
    grid-area: unset !important;
    width: 100% !important;
  }

  footer .fe-block .sqs-block {
    text-align: center !important;
  }

  .footer-nav-list {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* === SPACING === */
  .sqs-block {
    padding: 4px 0 !important;
  }

  /* === BUTTONS === */
  .sqs-block-button-element {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
}

/* ---- TABLET (768px-1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .content-wrapper,
  .content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- SELF-HOSTED VIDEO STYLES (all sizes) ---- */
video.portfolio-video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border-radius: 4px;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
  margin-bottom: 16px;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}