/*
Theme Name: Rameez Portfolio
Text Domain: rameez-portfolio
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Description: Block theme for Rameez Portfolio
Author: Junaid Shafiq
Author URI: https://www.fiverr.com/oookay
*/

/*
  Cleanup: keep only what we need for the single portfolio layout and the full-width white 50/50 section.
  - Allow alignfull blocks to break out of constrained layouts
  - Ensure 50/50 split for the full-width Columns block
  - Remove the unwanted top margin (margin-block-start) applied by core on the alignfull Columns block
  - Optional: trim inner first/last margins inside columns for a flush look
*/

/* Allow alignfull and common containers to break out of constrained layout */
.is-layout-constrained :where(.alignfull, .wp-block-group.alignfull, .wp-block-columns.alignfull) {
  max-width: 100% !important;
  width: 100% !important;
}

/* Single Portfolio: enforce 50/50 split for full-width Columns */
/* body.single-portfolio .wp-block-columns.alignfull > .wp-block-column {
  flex-basis: 50% !important;
} */

/* Single Portfolio: remove top margin for the full-width Columns when it sits directly under a constrained layout */
body.single-portfolio :where(.is-layout-constrained) > .wp-block-columns.alignfull {
  margin-block-start: 0 !important;
}

/* If wrapped by a Group, also clear the wrapper's top margin when it directly contains an alignfull Columns */
body.single-portfolio :where(.is-layout-constrained) > .wp-block-group:has(> .wp-block-columns.alignfull) {
  margin-block-start: 0 !important;
}

/* Optional: trim inner content edge spacing inside each column for a flush appearance */
body.single-portfolio .wp-block-columns.alignfull .wp-block-column > *:first-child {
  margin-block-start: 0 !important;
}
body.single-portfolio .wp-block-columns.alignfull .wp-block-column > *:last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

div.wp-block-group.alignfull.w-full.min-h-screen.relative.text-white.has-background.is-layout-flow.wp-block-group-is-layout-flow, div.wp-block-group.alignfull.has-background.is-layout-flow.wp-block-group-is-layout-flow {
  margin-block-start: 0 !important;
}

h1.inspiration-text {
  width: 1194px;
  max-width: 100%;
  margin: 0 auto; /* center the block horizontally */
  text-align: center; /* ensure text stays centered inside */
}

h1.inspiration-text {
  margin-top: 100px !important;
}

div.wp-block-columns.alignfull.are-vertically-aligned-center.inspiration-text.is-layout-flex.wp-container-core-columns-is-layout-c1ef38ae.wp-block-columns-is-layout-flex {
  margin-top: 100px !important;
}


div.wp-container-core-group-is-layout-1df1e54c, div.wp-container-core-group-is-layout-f6f8c0cc, div.wp-container-core-group-is-layout-21d7e650 { 
      margin-block-start: 0px !important;
}

/* Larsseit webfonts served from project assets - mapped to available files */
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitThin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitMedium.otf') format('opentype');
  font-weight: 400; /* Map Regular to Medium since Regular file isn't present */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitBold.otf') format('opentype');
  font-weight: 600; /* Map SemiBold to Bold as a close alternative */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: url('./Rameez Assets/Fonts/LarsseitExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: local('Larsseit Regular'), local('Larsseit-Regular'), local('Larsseit');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: local('Larsseit Medium'), local('Larsseit-Medium'), local('Larsseit');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: local('Larsseit SemiBold'), local('Larsseit-SemiBold'), local('Larsseit');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Larsseit';
  src: local('Larsseit Bold'), local('Larsseit-Bold'), local('Larsseit');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Up Next heading (single-portfolio) — Figma specs (responsive) */
body.single-portfolio .up-next-title {
  font-family: Larsseit, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(42px, 8vw, 129.251px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: clamp(-1px, -0.35vw, -3.878px);
  background: linear-gradient(92deg, #000 -3.08%, #6C6C6C 97.15%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

figure.banner-hero-image.wp-block-post-featured-image {
      margin-block-start: 0px !important;
}

/* --- Single Portfolio mobile overrides (global) --- */
@media (max-width: 768px) {
	/* Featured image (non-banner): avoid cropping on phones */
  body.single-portfolio figure.wp-block-post-featured-image:not(.banner-hero-image) img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    max-height: 70vh;
    display: block;
  }

  /* Prevent overly tall full-screen sections from content */
  body.single-portfolio .min-h-screen { min-height: auto !important; }

  /* General image safety on phones */
  body.single-portfolio .wp-block-image img { width: 100%; height: auto; object-fit: contain; }

 /* Mobile gutters for sections using px-20 utility */
  #single-portfolio > section[class*="px-20"] {
    padding-left: clamp(16px, 5vw, 24px) !important;
    padding-right: clamp(16px, 5vw, 24px) !important;
  }
  /* First section (Title + Category) spacing */
  #single-portfolio > section:first-of-type {
    padding-top: clamp(24px, 8vw, 40px) !important;
    padding-bottom: clamp(12px, 4vw, 20px) !important;
  }

  /* Banner container: collapse desktop min-height and keep rounded corners smaller on phones */
  .banner-hero { height: auto !important; min-height: 0 !important; border-radius: 30px !important; }

  /* (Rules retained below in file for other sections) */
}
/* --- End Single Portfolio mobile overrides --- */

/* --- Fallbacks for Single Portfolio mobile overrides --- */
@media (max-width: 768px) {
  /* If body has different class combos (common in WP): */
  body.single.post-type-portfolio .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    max-height: 70vh;
    display: block;
  }

  h2.one-stop-shop-text, h2.get-everything-done-text {
    padding-left: 0rem;
  }

  h2.get-everything-done-text {
    -webkit-background-clip: text;
    font-size: 12px !important;
  }

	div.individual-project-featured-section { padding-left: 0rem; padding-right: 0rem; }
	
	figure.portfolio-items-icons { width: 22px !important; }
    h2.portfolio-items-title { font-size: 10px !important; }
	p.portfolio-items-text { font-size: 8px !important; }
    div.portfolio-items-divider-2 { padding-top: 3rem !important; }
	div.portfolio-items-divider { height: 150px !important; }
    div.one-stop-shop-spacer { height: 50px !important; }
    div.featured-artists-block { padding-left: 0px !important; padding-right: 0px !important; }
    figure.artist-image-project-page { width: 50px; }
    h2.distribute-music-text { font-size: 15px !important; }


  /* Prevent overly tall full-screen sections */
  body.single.post-type-portfolio .min-h-screen { min-height: auto !important; }

  /* Side image 429x595 */
  body.single.post-type-portfolio img[width="429"][height="595"] {
    width: auto !important;
    max-width: min(85vw, 380px) !important;
    height: auto !important;
    display: block;
    margin-inline: auto;
  }

  /* Icons 79x80 */
  body.single.post-type-portfolio img[width="79"][height="80"] {
    width: 48px !important;
    height: auto !important;
  }

  /* Two-per-row fallback for columns if :has() unsupported: target columns with many children */
  body.single.post-type-portfolio .wp-block-columns.alignfull > .wp-block-column {
    /* Let columns wrap into two-per-row where content is narrow like cards */
    flex: 0 0 50%;
    max-width: 50%;
  }
  body.single.post-type-portfolio .wp-block-columns { flex-wrap: wrap; gap: 16px; }

  /* Generic: images inside columns shouldn’t overflow */
  body.single.post-type-portfolio .wp-block-columns img { width: 100%; height: auto; }

  /* Hide manual <br> on h2/p */
  body.single.post-type-portfolio h2 br,
  body.single.post-type-portfolio p br { display: none; }


}
 
div.featured-artists-images { 
  margin-right: 0px !important;
  margin-left: 0px !important;
  min-height: auto !important;
}

/* Mobile: footer email and tagline sizing */
@media (max-width: 768px) {
  /* Email address size on phones */
  footer.wp-block-group.bg-footer .mt-2.font-semibold.tracking-tight {
    font-size: 44.629px !important;
    line-height: 1.05;
  }
  /* "Your turn to say hi" tagline size on phones */
  footer.wp-block-group.bg-footer .flex.flex-col > .w-full:first-child > p:first-of-type {
    font-size: 22px !important;
    line-height: 1.2;
  }
}

/* Mobile: Up Next tile sizing and typography */
@media (max-width: 768px) {
  #single-portfolio .up-next-tile {
    width: min(100%, 376px);
    height: 358.312px !important; /* override inline height */
    margin: 0 auto; /* center tile */
    border-radius: 30px; /* keep rounded corners */
  }
  #single-portfolio .up-next-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #single-portfolio .up-next-tile h4 {
    font-size: 30px !important;
    line-height: 1.1;
  }
  #single-portfolio .up-next-tile .mt-1 {
    font-size: 16px !important;
    line-height: 1.2;
  }
}

/* Mobile: scale down Zoningo section image so it’s not oversized on phones */
@media (max-width: 768px) {
  .wp-block-columns.alignfull .wp-block-column.has-dark-background-color figure.wp-block-image img.wp-image-23 {
    width: 100% !important;
    max-width: 320px !important; /* cap size on phones */
    height: auto !important;
    display: block;
    margin: 0 auto; /* center within column */
  }
}
/* Mobile: fix banner hero image to 358px height per Figma */
@media (max-width: 768px) {
  body.single-portfolio figure.banner-hero-image.wp-block-post-featured-image,
  body.single.post-type-portfolio figure.banner-hero-image.wp-block-post-featured-image, a.absolute.inset-0.z-10 {
    height: 358px !important;
    min-height: 358px !important;
    max-height: 358px !important;
    overflow: hidden;
  }
  body.single-portfolio figure.banner-hero-image.wp-block-post-featured-image img,
  body.single.post-type-portfolio figure.banner-hero-image.wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
  }
}

/* All Work filters – responsive sizing */
@media (max-width: 1024px) {
  #allwork-filters .filter-chip { height: 56px !important; padding: 12px 20px !important; border-radius: 40px !important; align-items: center !important; justify-content: center !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 18px !important; letter-spacing: -0.3px; line-height: 1.1 !important; height: auto !important; display: inline-block; text-align: center; }
}

@media (max-width: 768px) {
  #allwork-filters { gap: 8px !important; }
  #allwork-filters .filter-chip { height: 38px !important; padding: 0 12px !important; border-radius: 9999px !important; align-items: center !important; justify-content: center !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 14px !important; letter-spacing: -0.2px; line-height: 1.1 !important; height: auto !important; display: inline-block; text-align: center; }
}

@media (max-width: 375px) {
  #allwork-filters .filter-chip { height: 34px !important; padding: 0 10px !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 13px !important; }
}
/* All Work grid – uniform card image height on mobile */
@media (max-width: 768px) {
  /* WP Query Loop cards */
  #all-work .work-card .wp-block-post-featured-image {
    width: 100%;
    aspect-ratio: 2 / 1; /* consistent, tall-enough crop for phones */
    overflow: hidden;
  }
  #all-work .work-card .wp-block-post-featured-image > a,
  #all-work .work-card .wp-block-post-featured-image > img { display: block; width: 100%; height: 100%; }
  #all-work .work-card .wp-block-post-featured-image img { width: 100%; height: 100% !important; object-fit: cover !important; }

  /* JSON-built demo grid (if used) */
  #allwork-grid a > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
}

/* Mobile: enforce 438px height for All Work thumbnails */
@media (max-width: 768px) {
  #all-work .work-card .wp-block-post-featured-image,
  #all-work .work-card .wp-block-post-featured-image img,
  #allwork-grid a > img {
    width: 100%;
    height: 438px !important; /* uniform visual height */
    min-height: 438px !important; /* meet "at least" requirement */
    object-fit: cover;
    object-position: center;
    aspect-ratio: auto !important; /* override any prior aspect-ratio */
    display: block;
    border-radius: 30px;
  }
}

/* Mobile header spacing and social link sizing */
@media (max-width: 768px) {
  /* Reduce header container left/right padding from 5rem to 2rem */
  header#top > div {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Ensure Dribbble and Behance labels are 1rem on mobile */
  header#top a[href*="dribbble"],
  header#top a[href*="behance"] {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
}

/* Responsive Project Title (H1) sizing */
@media (max-width: 1024px) {
  body.single-portfolio .project-top-title {
    font-size: clamp(36px, 8vw, 64px) !important;
    letter-spacing: clamp(-0.8px, -0.4vw, -2px) !important;
  }
  body.single-portfolio .project-top-category { font-size: 14px !important; }
}




/* Desktop: standardize All Work thumbnails to 838x799 aspect ratio */
@media (min-width: 1025px) {
  /* Gutenberg query loop cards */
  #all-work .work-card .wp-block-post-featured-image {
    width: 100%;
    aspect-ratio: 838 / 799;
    display: block;
    overflow: hidden;
    border-radius: 30px;
  }
  #all-work .work-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 30px;
  }

  /* Legacy/demo JSON grid fallback: match same ratio */
  #allwork-grid a > img {
    width: 100%;
    aspect-ratio: 838 / 799;
    height: auto; /* derived from aspect-ratio */
    object-fit: cover;
    display: block;
    border-radius: 30px;
  }
}

a.flex.items-center.gap-2.text-sm.opacity-80 {
   font-size: 22px !important; }

img.h-4.w-4 {
   width: 22px;
   height: 22px; }

img.h-10.w-10 {
	width: 4rem;
    height: 4rem;
}


/* Logo marquee (CSS-only infinite slider) */
/* Logo marquee: default styles (no mobile-specific padding/margin overrides) */
.logo-marquee {
  position: relative;
  overflow: hidden;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.logo-marquee .logo-track {
  display: inline-flex;
  align-items: center;
  gap: 3rem; /* space between logos */
  flex-wrap: nowrap;
  width: max-content; /* ensure track width equals content width */
  will-change: transform;
  animation: marquee-scroll 30s linear infinite;
}
.logo-marquee img {
  flex: 0 0 auto; /* prevent flex shrinking/wrapping */
  height: auto;
  max-height: 60px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}
.logo-marquee:hover .logo-track {
  animation-play-state: paused; /* pause on hover */
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Reduced motion: slow down instead of stopping to ensure movement is visible */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee .logo-track { animation: marquee-scroll 10s linear infinite; }
}
/* Small screens: tighten spacing */
@media (max-width: 640px) {
  .logo-marquee .logo-track { gap: 1.5rem; }
  .logo-marquee img { max-height: 48px; }
}

/* === Preloader overlay === */
#preloader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black; /* match your page background */
  z-index: 10000;
  transition: opacity 300ms ease, visibility 300ms ease;
}
#preloader img {
  width: 100vw;
  /* Preloader overrides for full-bleed cover */
  height: 100vh;
  height: 100dvh;
  }
  
  #preloader img {
  display: block;          /* remove inline-gap/baseline whitespace */
  width: 100%;             /* fill overlay */
  height: 100%;            /* fill overlay */
  object-fit: cover;       /* fill screen without letterboxing */
  object-position: center; /* center crop */
  position: absolute;      /* ensure full bleed, no gaps */
  inset: 0;                /* pin to all edges of the overlay */
  }
  
  /* Prevent background scroll/jank while preloader is shown */
  body.preloader-active {
  overflow: hidden;
  touch-action: none;
  }
  #preloader.preloader--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    #preloader {
      transition: opacity 0.01s linear, visibility 0.01s linear;
    }
  }


/* --- Home (front page) mobile/tablet responsive overrides — keep desktop unchanged --- */
  /* Hero background should scale nicely on smaller screens */
/* @media (max-width: 1024px) {
  .bg-hero { background-size: cover !important; background-position: center top !important; }
} */

@media (max-width: 768px) {
  /* Hero section spacing and layout */
  .bg-hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Headline already scaled via rules above; ensure subcopy spacing is compact */
  .bg-hero .text-lg { padding-top: 24px !important; }

  /* Stack primary CTAs vertically and make them full-width-ish */
/*  .bg-hero .wp-block-buttons { flex-direction: column !important; gap: 12px !important; align-items: center !important; } 
  .bg-hero .wp-block-button .wp-block-button__link { width: min(320px, 90vw) !important; padding: 16px 24px !important; border-radius: 40px !important; }
  .bg-hero .wp-block-button span { font-size: clamp(18px, 5vw, 22px) !important; letter-spacing: -0.5px !important; width: auto !important; height: auto !important; } */

  /* Showreel: reduce height on phones and soften radius */
  .bg-hero .wp-block-group.w-full.mt-10.px-12 > div { height: clamp(220px, 45vh, 380px) !important; border-radius: 24px !important; }

  /* Worked With logos: tighter spacing and smaller logos on phones */
  .wp-block-group.flex.flex-wrap.justify-center.items-center.gap-10 { gap: 1.25rem !important; }
  .wp-block-group.flex.flex-wrap.justify-center.items-center.gap-10 img { max-width: 120px !important; height: auto !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet tuning for CTAs */
  .bg-hero .wp-block-buttons { gap: 16px !important; }
  .bg-hero .wp-block-button .wp-block-button__link { padding: 18px 28px !important; border-radius: 45px !important; }

  /* Showreel: moderate tablet height */
  .bg-hero .wp-block-group.w-full.mt-10.px-12 > div { height: clamp(360px, 50vh, 520px) !important; }

  /* Worked With logos a bit larger on tablet */
  .wp-block-group.flex.flex-wrap.justify-center.items-center.gap-10 img { max-width: 140px !important; height: auto !important; }
}

div.featured-artists-images { 
  margin-right: 0px !important;
  margin-left: 0px !important;
  min-height: auto !important;
}

/* Mobile: footer email and tagline sizing */
@media (max-width: 768px) {
  /* Email address size on phones */
  footer.wp-block-group.bg-footer .mt-2.font-semibold.tracking-tight {
    font-size: 44.629px !important;
    line-height: 1.05;
  }
  /* "Your turn to say hi" tagline size on phones */
  footer.wp-block-group.bg-footer .flex.flex-col > .w-full:first-child > p:first-of-type {
    font-size: 22px !important;
    line-height: 1.2;
  }
}

/* Mobile: Up Next tile sizing and typography */
@media (max-width: 768px) {
  #single-portfolio .up-next-tile {
    width: min(100%, 376px);
    height: 358.312px !important; /* override inline height */
    margin: 0 auto; /* center tile */
    border-radius: 30px; /* keep rounded corners */
  }
  #single-portfolio .up-next-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #single-portfolio .up-next-tile h4 {
    font-size: 30px !important;
    line-height: 1.1;
  }
  #single-portfolio .up-next-tile .mt-1 {
    font-size: 16px !important;
    line-height: 1.2;
  }
}

/* Mobile: scale down Zoningo section image so it’s not oversized on phones */
@media (max-width: 768px) {
  .wp-block-columns.alignfull .wp-block-column.has-dark-background-color figure.wp-block-image img.wp-image-23 {
    width: 100% !important;
    max-width: 320px !important; /* cap size on phones */
    height: auto !important;
    display: block;
    margin: 0 auto; /* center within column */
  }
}
/* Mobile: fix banner hero image to 358px height per Figma */
@media (max-width: 768px) {
  body.single-portfolio figure.banner-hero-image.wp-block-post-featured-image,
  body.single.post-type-portfolio figure.banner-hero-image.wp-block-post-featured-image, a.absolute.inset-0.z-10 {
    height: 358px !important;
    min-height: 358px !important;
    max-height: 358px !important;
    overflow: hidden;
  }
  body.single-portfolio figure.banner-hero-image.wp-block-post-featured-image img,
  body.single.post-type-portfolio figure.banner-hero-image.wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
  }
}

/* All Work filters – responsive sizing */
@media (max-width: 1024px) {
  #allwork-filters .filter-chip { height: 56px !important; padding: 12px 20px !important; border-radius: 40px !important; align-items: center !important; justify-content: center !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 18px !important; letter-spacing: -0.3px; line-height: 1.1 !important; height: auto !important; display: inline-block; text-align: center; }
}

@media (max-width: 768px) {
  #allwork-filters { gap: 8px !important; }
  #allwork-filters .filter-chip { height: 38px !important; padding: 0 12px !important; border-radius: 9999px !important; align-items: center !important; justify-content: center !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 14px !important; letter-spacing: -0.2px; line-height: 1.1 !important; height: auto !important; display: inline-block; text-align: center; }
}

@media (max-width: 375px) {
  #allwork-filters .filter-chip { height: 34px !important; padding: 0 10px !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 13px !important; }
}
/* All Work grid – uniform card image height on mobile */
@media (max-width: 768px) {
  /* WP Query Loop cards */
  #all-work .work-card .wp-block-post-featured-image {
    width: 100%;
    aspect-ratio: 2 / 1; /* consistent, tall-enough crop for phones */
    overflow: hidden;
  }
  #all-work .work-card .wp-block-post-featured-image > a,
  #all-work .work-card .wp-block-post-featured-image > img { display: block; width: 100%; height: 100%; }
  #all-work .work-card .wp-block-post-featured-image img { width: 100%; height: 100% !important; object-fit: cover !important; }

  /* JSON-built demo grid (if used) */
  #allwork-grid a > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
}

/* Mobile: enforce 438px height for All Work thumbnails */
@media (max-width: 768px) {
  #all-work .work-card .wp-block-post-featured-image,
  #all-work .work-card .wp-block-post-featured-image img,
  #allwork-grid a > img {
    width: 100%;
    height: 438px !important; /* uniform visual height */
    min-height: 438px !important; /* meet "at least" requirement */
    object-fit: cover;
    object-position: center;
    aspect-ratio: auto !important; /* override any prior aspect-ratio */
    display: block;
    border-radius: 30px;
  }
}

/* Mobile header spacing and social link sizing */
@media (max-width: 768px) {
  /* Reduce header container left/right padding from 5rem to 2rem */
  header#top > div {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Ensure Dribbble and Behance labels are 1rem on mobile */
  header#top a[href*="dribbble"],
  header#top a[href*="behance"] {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
}

/* Responsive Project Title (H1) sizing */
@media (max-width: 1024px) {
  body.single-portfolio .project-top-title {
    font-size: clamp(36px, 8vw, 64px) !important;
    letter-spacing: clamp(-0.8px, -0.4vw, -2px) !important;
  }
  body.single-portfolio .project-top-category { font-size: 14px !important; }
}




/* Desktop: standardize All Work thumbnails to 838x799 aspect ratio */
@media (min-width: 1025px) {
  /* Gutenberg query loop cards */
  #all-work .work-card .wp-block-post-featured-image {
    width: 100%;
    aspect-ratio: 838 / 799;
    display: block;
    overflow: hidden;
    border-radius: 30px;
  }
  #all-work .work-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 30px;
  }

  /* Legacy/demo JSON grid fallback: match same ratio */
  #allwork-grid a > img {
    width: 100%;
    aspect-ratio: 838 / 799;
    height: auto; /* derived from aspect-ratio */
    object-fit: cover;
    display: block;
    border-radius: 30px;
  }
}

a.flex.items-center.gap-2.text-sm.opacity-80 {
   font-size: 22px !important; }

img.h-4.w-4 {
   width: 22px;
   height: 22px; }

img.h-10.w-10 {
	width: 4rem;
    height: 4rem;
}


/* Logo marquee (CSS-only infinite slider) */
/* Logo marquee: default styles (no mobile-specific padding/margin overrides) */
.logo-marquee {
  position: relative;
  overflow: hidden;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.logo-marquee .logo-track {
  display: inline-flex;
  align-items: center;
  gap: 3rem; /* space between logos */
  flex-wrap: nowrap;
  width: max-content; /* ensure track width equals content width */
  will-change: transform;
  animation: marquee-scroll 30s linear infinite;
}
.logo-marquee img {
  flex: 0 0 auto; /* prevent flex shrinking/wrapping */
  height: auto;
  max-height: 60px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}
.logo-marquee:hover .logo-track {
  animation-play-state: paused; /* pause on hover */
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Reduced motion: slow down instead of stopping to ensure movement is visible */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee .logo-track { animation: marquee-scroll 10s linear infinite; }
}
/* Small screens: tighten spacing */
@media (max-width: 640px) {
  .logo-marquee .logo-track { gap: 1.5rem; }
  .logo-marquee img { max-height: 48px; }
}

/* === Preloader overlay === */
#preloader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black; /* match your page background */
  z-index: 10000;
  transition: opacity 300ms ease, visibility 300ms ease;
}
#preloader img {
  width: 100vw;
  /* Preloader overrides for full-bleed cover */
  height: 100vh;
  height: 100dvh;
  }
  
  #preloader img {
  display: block;          /* remove inline-gap/baseline whitespace */
  width: 100%;             /* fill overlay */
  height: 100%;            /* fill overlay */
  object-fit: cover;       /* fill screen without letterboxing */
  object-position: center; /* center crop */
  position: absolute;      /* ensure full bleed, no gaps */
  inset: 0;                /* pin to all edges of the overlay */
  }
  
  /* Prevent background scroll/jank while preloader is shown */
  body.preloader-active {
  overflow: hidden;
  touch-action: none;
  }
  #preloader.preloader--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    #preloader {
      transition: opacity 0.01s linear, visibility 0.01s linear;
    }
  }


/* --- Home (front page) mobile/tablet responsive overrides — keep desktop unchanged --- */
  /* Hero background should scale nicely on smaller screens */
/* @media (max-width: 1024px) {
  .bg-hero { background-size: cover !important; background-position: center top !important; }
} */

@media (max-width: 768px) {
  /* Hero section spacing and layout */
  .bg-hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Headline already scaled via rules above; ensure subcopy spacing is compact */
  .bg-hero .text-lg { padding-top: 24px !important; }

  /* Stack primary CTAs vertically and make them full-width-ish */
/*  .bg-hero .wp-block-buttons { flex-direction: column !important; gap: 12px !important; align-items: center !important; } 
  .bg-hero .wp-block-button .wp-block-button__link { width: min(320px, 90vw) !important; padding: 16px 24px !important; border-radius: 40px !important; }
  .bg-hero .wp-block-button span { font-size: clamp(18px, 5vw, 22px) !important; letter-spacing: -0.5px !important; width: auto !important; height: auto !important; } */

  /* Showreel: reduce height on phones and soften radius */
  .bg-hero .wp-block-group.w-full.mt-10.px-12 > div { height: clamp(220px, 45vh, 380px) !important; border-radius: 24px !important; }

  /* Worked With logos: tighter spacing and smaller logos on phones */
  .wp-block-group.flex.flex-wrap.justify-center.items-center.gap-10 { gap: 1.25rem !important; }
  .wp-block-group.flex.flex-wrap.justify-center.items-center.gap-10 img { max-width: 120px !important; height: auto !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet tuning for CTAs */
  .bg-hero .wp-block-buttons { gap: 16px !important; }
  .bg-hero .wp-block-button .wp-block-button__link { padding: 18px 28px !important; border-radius: 45px !important; }

  /* Showreel: moderate tablet height */
  .bg-hero .wp-block-group.w-full.mt-10.px-12 > div { height: clamp(360px, 50vh, 520px) !important; }

  /* Worked With logos a bit larger on tablet */
  .wp-block-group.flex.flex-wrap.justify-center.items-center.gap-10 img { max-width: 140px !important; height: auto !important; }
}

div.featured-artists-images { 
  margin-right: 0px !important;
  margin-left: 0px !important;
  min-height: auto !important;
}

/* Mobile: footer email and tagline sizing */
@media (max-width: 768px) {
  /* Email address size on phones */
  footer.wp-block-group.bg-footer .mt-2.font-semibold.tracking-tight {
    font-size: 44.629px !important;
    line-height: 1.05;
  }
  /* "Your turn to say hi" tagline size on phones */
  footer.wp-block-group.bg-footer .flex.flex-col > .w-full:first-child > p:first-of-type {
    font-size: 22px !important;
    line-height: 1.2;
  }
}

/* Mobile: Up Next tile sizing and typography */
@media (max-width: 768px) {
  #single-portfolio .up-next-tile {
    width: min(100%, 376px);
    height: 358.312px !important; /* override inline height */
    margin: 0 auto; /* center tile */
    border-radius: 30px; /* keep rounded corners */
  }
  #single-portfolio .up-next-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #single-portfolio .up-next-tile h4 {
    font-size: 30px !important;
    line-height: 1.1;
  }
  #single-portfolio .up-next-tile .mt-1 {
    font-size: 16px !important;
    line-height: 1.2;
  }
}

/* Mobile: scale down Zoningo section image so it’s not oversized on phones */
@media (max-width: 768px) {
  .wp-block-columns.alignfull .wp-block-column.has-dark-background-color figure.wp-block-image img.wp-image-23 {
    width: 100% !important;
    max-width: 320px !important; /* cap size on phones */
    height: auto !important;
    display: block;
    margin: 0 auto; /* center within column */
  }
}
/* Mobile: fix banner hero image to 358px height per Figma */
@media (max-width: 768px) {
  body.single-portfolio figure.banner-hero-image.wp-block-post-featured-image,
  body.single.post-type-portfolio figure.banner-hero-image.wp-block-post-featured-image {
    height: 358px !important;
    min-height: 358px !important;
    max-height: 358px !important;
    overflow: hidden;
  }
  body.single-portfolio figure.banner-hero-image.wp-block-post-featured-image img,
  body.single.post-type-portfolio figure.banner-hero-image.wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
  }
}

/* All Work filters – responsive sizing */
@media (max-width: 1024px) {
  #allwork-filters .filter-chip { height: 56px !important; padding: 12px 20px !important; border-radius: 40px !important; align-items: center !important; justify-content: center !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 18px !important; letter-spacing: -0.3px; line-height: 1.1 !important; height: auto !important; display: inline-block; text-align: center; }
}

@media (max-width: 768px) {
  #allwork-filters { gap: 8px !important; }
  #allwork-filters .filter-chip { height: 38px !important; padding: 0 12px !important; border-radius: 9999px !important; align-items: center !important; justify-content: center !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 14px !important; letter-spacing: -0.2px; line-height: 1.1 !important; height: auto !important; display: inline-block; text-align: center; }
}

@media (max-width: 375px) {
  #allwork-filters .filter-chip { height: 34px !important; padding: 0 10px !important; }
  #allwork-filters .filter-chip .filter-chip-label { font-size: 13px !important; }
}
/* All Work grid – uniform card image height on mobile */
@media (max-width: 768px) {
  /* WP Query Loop cards */
  #all-work .work-card .wp-block-post-featured-image {
    width: 100%;
    aspect-ratio: 2 / 1; /* consistent, tall-enough crop for phones */
    overflow: hidden;
  }
  #all-work .work-card .wp-block-post-featured-image > a,
  #all-work .work-card .wp-block-post-featured-image > img { display: block; width: 100%; height: 100%; }
  #all-work .work-card .wp-block-post-featured-image img { width: 100%; height: 100% !important; object-fit: cover !important; }

  /* JSON-built demo grid (if used) */
  #allwork-grid a > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
}

/* Mobile: enforce 438px height for All Work thumbnails */
@media (max-width: 768px) {
  #all-work .work-card .wp-block-post-featured-image,
  #all-work .work-card .wp-block-post-featured-image img,
  #allwork-grid a > img {
    width: 100%;
    height: 438px !important; /* uniform visual height */
    min-height: 438px !important; /* meet "at least" requirement */
    object-fit: cover;
    object-position: center;
    aspect-ratio: auto !important; /* override any prior aspect-ratio */
    display: block;
    border-radius: 30px;
  }
}

/* Mobile header spacing and social link sizing */
@media (max-width: 768px) {
  /* Reduce header container left/right padding from 5rem to 2rem */
  header#top > div {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Ensure Dribbble and Behance labels are 1rem on mobile */
  header#top a[href*="dribbble"],
  header#top a[href*="behance"] {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
}


/* === Mobile overflow fix (addresses right-side whitespace under narrow widths) === */
@media (max-width: 480px) {
  /* Global safety: prevent accidental horizontal scroll on tiny screens */
  html, body { overflow-x: hidden; }
  .wp-site-blocks, main, .wp-block-group { max-width: 100vw; }
  img, video { max-width: 100%; height: auto; }
}

/* Clamp oversize inline widths in hero that cause horizontal overflow */
@media (max-width: 768px) {
  /* H1 has an inline width:901px; clamp it */
  .text-hero {
    max-width: 100% !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Optional: responsive type for small phones (can be tuned to Figma) */
    font-size: clamp(34px, 8.2vw, 44px) !important;
    letter-spacing: -0.02em !important;
  }
  /* Subcopy has an inline width:867px; clamp it */
  .bg-hero .text-lg {
    max-width: 100% !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Ensure hero wrapper doesn't leak overflow */
  .bg-hero { overflow-x: clip; }
  .wp-block-group.w-full.mx-auto.text-center.px-6 { overflow: hidden; }

  /* Prevent CTA padding from pushing anchors beyond viewport */
  .bg-hero .wp-block-button .wp-block-button__link { box-sizing: border-box !important; }
}

/* Mobile: enforce 438px height for All Work thumbnails */
@media (max-width: 768px) {
  #all-work .work-card .wp-block-post-featured-image,
  #all-work .work-card .wp-block-post-featured-image img,
  #allwork-grid a > img {
    width: 100%;
    height: 438px !important; /* uniform visual height */
    min-height: 438px !important; /* meet "at least" requirement */
    object-fit: cover;
    object-position: center;
    aspect-ratio: auto !important; /* override any prior aspect-ratio */
    display: block;
    border-radius: 30px;
  }

	div#work.wp-block-group.w-full.px-20.py-16, div.w-full.px-20.py-20, div.w-full.h-full.px-20.flex.flex-col {
	padding-left: 1rem;
    padding-right: 1rem;
	}
}

/* Mobile header spacing and social link sizing */
@media (max-width: 768px) {
  /* Reduce header container left/right padding from 5rem to 2rem */
  header#top > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure Dribbble and Behance labels are 1rem on mobile */
  header#top a[href*="dribbble"],
  header#top a[href*="behance"] {
    font-size: 1rem;
    line-height: 1.25;
  }
  
  a.flex.items-center.gap-2.text-sm.opacity-80 {
  	font-size: 14px !important;
	}

  a.flex.items-center.gap-2.text-sm.opacity-80 img {
  	width: 14px !important;
    height: 14px !important;
	}

  a.flex.items-center.gap-3 img {
	width: auto !important;
    height: 25px !important;
}

  div.flex.items-center.gap-7 img {
	width: 2.5rem !important;
    height: 2.5rem !important;
}

  .logo-marquee {
  width: 100% !important;
}

  img.jackcredit-home-image { 
	padding-top: 10rem !important;
}

  .leading-7 {
	padding-left: 1rem !important;
  }
}

/* Removing White Space On Right Side */

@media (min-width: 769px) and (max-width: 925px) {
  /* Global safety: prevent accidental horizontal scroll */
  html, body { overflow-x: hidden; }
  .wp-site-blocks, main, .wp-block-group { max-width: 100% !important; }
  img, video { max-width: 100%; height: auto; }
}

div#preloader.preloader--hide {
	margin-top: 0px !important; 
}

/* === Mobile overflow fix (addresses right-side whitespace on very small screens) === */
@media (max-width: 480px) {
  #faqs-dde73150-a2d7-41f5-ad1f-042f690ef479 {
    width: 100% !important; /* override inline 100vw */
    margin-left: 0 !important; /* cancel full-bleed negative margins */
    margin-right: 0 !important;
    overflow-x: clip; /* safety to prevent stray overflow */
  }
  #faqs-dde73150-a2d7-41f5-ad1f-042f690ef479 > .w-full.px-20.py-20 {
    padding-left: 1rem !important; /* reduce 5rem padding that can cause overflow */
    padding-right: 1rem !important;
    box-sizing: border-box;
  }
}

/* === Custom cursor (Visit Website) === */
.cursor-visit {
  position: fixed;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: Larsseit, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  text-transform: none;
  letter-spacing: 0;
}
[data-cursor="visit"] { cursor: none; }
/* Disable custom cursor on tablets/phones and touch devices */
@media (max-width: 1024px){
  [data-cursor="visit"] { cursor: auto; }
  .cursor-visit { display: none !important; }
}
@media (pointer: coarse){
  [data-cursor="visit"] { cursor: auto; }
  /* Disable preloader/cursor inside Elementor editor */
  .elementor-editor-active #preloader { display: none !important; }
  .elementor-editor-active .cursor-visit { display: none !important; }
}

div#preloader.preloader--hide {
	margin-top: 0px !important; 
}

/* === Mobile overflow fix (addresses right-side whitespace on very small screens) === */
@media (max-width: 480px) {
  #faqs-dde73150-a2d7-41f5-ad1f-042f690ef479 {
    width: 100% !important; /* override inline 100vw */
    margin-left: 0 !important; /* cancel full-bleed negative margins */
    margin-right: 0 !important;
    overflow-x: clip; /* safety to prevent stray overflow */
  }
  #faqs-dde73150-a2d7-41f5-ad1f-042f690ef479 > .w-full.px-20.py-20 {
    padding-left: 1rem !important; /* reduce 5rem padding that can cause overflow */
    padding-right: 1rem !important;
    box-sizing: border-box;
  }
}