/* Utility shims to support classes while Tailwind rebuild is blocked in this environment */
/* These mirror Tailwind arbitrary value utilities used on the homepage */

.left-1\/2 { left: 50%; }
.right-1\/2 { right: 50%; }
.-ml-\[50vw\] { margin-left: -50vw; }
.-mr-\[50vw\] { margin-right: -50vw; }
.min-h-\[100svh\] { min-height: 100svh; }

/* Ensure the cover sections span full viewport width consistently */
.w-screen { width: 100vw; }
.relative { position: relative; }

/* Typography shims matching Figma design tokens */
.text-hero { font-size: 83px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.text-hero-sm { font-size: 64px; }
.text-hero-md { font-size: 96px; }
.text-hero-lg { font-size: 129px; }
.text-section-heading { font-size: 50px; line-height: 1.05; }
.text-section-heading-md { font-size: 72px; }
.text-section-heading-lg { font-size: 80px; }
.text-cta-heading { font-size: 50px; line-height: 1.1; }
.text-cta-heading-md { font-size: 80px; }
.text-micro { font-size: 10px; }
.tracking-wide { letter-spacing: 0.2em; }
.tracking-wider { letter-spacing: 0.25em; }
.tracking-tight { letter-spacing: -0.01em; }
.leading-tight { line-height: 1.05; }
.leading-snug { line-height: 1.1; }

/* Background helpers replacing Tailwind arbitrary-value bg classes */
.bg-hero { background-image: url('/wp-content/themes/rameez-portfolio/Rameez%20Assets/Untitled-1%201.png'); background-repeat: no-repeat; background-size: 100%; background-position: center; }
/* Footer BG: exact Figma look — anchor to bottom-right and scale to footer height */
.bg-footer { background-image: url('/wp-content/themes/rameez-portfolio/Rameez%20Assets/Untitled-1%201.png'); background-repeat: no-repeat; background-size: 100%; background-position: center; }
.bg-zoningo { background-image: url('/wp-content/themes/rameez-portfolio/Rameez%20Assets/johnsonrgill_michael_jackson_playing_electric_guitar_dark_room__2cbc7049-1007-443c-800e-81345dd4a2d4%201.png'); background-attachment: fixed; background-size: cover; background-position: center; }
.bg-jackcredit { background: #0D0D0D; }
.bg-luminous { background: #0D0D0D; }
/* .bg-luminous background-image removed in favor of solid color per request */

/* NEW: Global font override to Larsseit for everything (with safe fallbacks) */
body, h1, h2, h3, h4, h5, h6 { font-family: "Larsseit", Degular, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji"; }

/* NEW: Exact-sizing utilities from Figma */
.text-130 { font-size: 130px; line-height: 1.05; letter-spacing: -0.01em; }
.text-100 { font-size: 100px; line-height: 1.05; letter-spacing: -0.01em; }
.text-96 { font-size: 96px; line-height: 1.05; letter-spacing: -0.01em; }
.text-84 { font-size: 84px; line-height: 1.05; letter-spacing: -0.01em; }

/* NEW: Override Gutenberg block gap margin between sibling blocks */
.mt-0-i { margin-top: 0 !important; }

/* Flex spacing shim */
.mt-auto { margin-top: auto; }

/* Gradient text for Sneak peek heading */
.text-gradient-sneak {
  background: linear-gradient(92deg, #000 -3.08%, #6C6C6C 97.15%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Fixed width utility for Sneak peek heading */
.w-955 { width: 955px; }
.w-1200 { width: 1200px; }

/* Typography utilities for project cards */
.text-26 { font-size: 26px; line-height: normal; }
.text-20 { font-size: 20px; line-height: normal; }

/* Spacing utility for left padding only (5rem) */
.pl-20 { padding-left: 5rem; }

/* Fixed-size utilities for featured images per spec */
.w-710 { width: 710px; }
.h-582 { height: 582px; }

/* Opacity shim for card categories */
.opacity-70 { opacity: 0.7; }

/* Object-fit utility */
.object-contain { object-fit: contain; }

/* Border utility shims used in footer divider */
.border-t { border-top-width: 1px; border-style: solid; }
.border-ink\/10 { border-color: rgba(0,0,0,0.10) !important; }

/* Flex direction and alignment shims */
.flex-col { flex-direction: column; }
.items-baseline { align-items: baseline; }

/* Selected Work spacing rules moved from inline */
#work .grid > :first-child { margin-top: 24px !important; }
#work :where(.is-layout-flow) > :first-child { margin-block-start: 24px !important; }

/* Mobile Featured Sections */
@media (max-width: 768px) {
  /* Stack content and center headings for featured sections */
  .bg-zoningo + .relative,
  .bg-jackcredit + .relative,
  .bg-luminous + .relative {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }

  .bg-zoningo + .relative h3,
  .bg-jackcredit + .relative h3,
  .bg-luminous + .relative h3,
  .bg-zoningo + .relative .uppercase,
  .bg-jackcredit + .relative .uppercase,
  .bg-luminous + .relative .uppercase {
    padding-left: 0 !important;
    text-align: center;
  }

  /* Reveal featured images and scale appropriately */
  .bg-zoningo + .relative > div:nth-child(2),
  .bg-jackcredit + .relative > div:nth-child(2),
  .bg-luminous + .relative > div:nth-child(2) {
    display: block !important;
    padding-right: 0 !important;
    width: 100%;
    justify-content: center !important;
  }

  .bg-zoningo + .relative img,
  .bg-jackcredit + .relative img,
  .bg-luminous + .relative img {
    width: 100%;
    max-width: 95vw;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }

  /* Adjust CTA title size to fit on small screens */
  #work a[href="/all-work/"] {
    font-size: 56px !important;
    letter-spacing: -1.2px !important;
    line-height: 1.05 !important;
  }
}

/* Extra small screens 360–375px */
@media (max-width: 380px) {
  .text-hero { font-size: 56px; }
  #work a[href="/all-work/"] { font-size: 44px !important; letter-spacing: -1px !important; }
  .bg-zoningo + .relative h3,
  .bg-jackcredit + .relative h3,
  .bg-luminous + .relative h3 { font-size: 30px; }
  .bg-zoningo + .relative .uppercase,
  .bg-jackcredit + .relative .uppercase,
  .bg-luminous + .relative .uppercase { font-size: 12px; }
}

/* FAQ mobile height auto (keep FAQ flexible on small screens) */
@media (max-width: 768px) {
  #faqs { height: auto !important; }
}

/* Prevent horizontal overflow from fixed widths on smaller screens */
@media (max-width: 1024px) {
  .w-1200, .w-955 { width: 100% !important; }
}

@media (max-width: 768px) {
  /* Hero headline: remove fixed width and scale down */
  .bg-hero h1 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(36px, 7.5vw, 56px) !important;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  /* Hero subcopy: remove fixed width and scale down */
  .bg-hero .text-lg {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.5 !important;
    padding-top: 24px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  /* Sneak peek title: scale down and ensure it wraps */
  #work .text-130 {
    font-size: clamp(36px, 9vw, 64px) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  /* Ensure CTA link size also applies for static preview path */
  #work a[href="/all-work/"],
  #work a[href="/templates/all-work.html"] {
    font-size: 56px !important;
    letter-spacing: -1.2px !important;
    line-height: 1.05 !important;
  }
}

#work a[href="/all-work/"],
#work a[href="/templates/all-work.html"] {
  text-underline-offset: 5px;
}

/* Home — CTA link size tweak for preview */
#work a[href="/all-work/"],
#work a[href="/templates/all-work.html"] { font-size: 44px !important; letter-spacing: -1px !important; }

/* Responsive adjustments for All Work CTA (home) */
@media (max-width: 1200px) {
  #work a[href="/all-work/"],
  #work a[href="/templates/all-work.html"] { font-size: 40px !important; }
}
@media (max-width: 1024px) {
  #work a[href="/all-work/"],
  #work a[href="/templates/all-work.html"] { font-size: 36px !important; }
}
@media (max-width: 768px) {
  #work a[href="/all-work/"],
  #work a[href="/templates/all-work.html"] { font-size: 32px !important; }
}
@media (max-width: 640px) {
  #work a[href="/all-work/"],
  #work a[href="/templates/all-work.html"] { font-size: 28px !important; letter-spacing: -0.5px !important; }
}

/* FAQ mobile height auto (keep FAQ flexible on small screens) */
@media (max-width: 768px) {
  #faqs { height: auto !important; }
}

/* Prevent horizontal overflow from fixed widths on smaller screens */
@media (max-width: 1024px) {
  .w-1200, .w-955 { width: 100% !important; }
}

/* Ensure email addresses wrap instead of forcing horizontal scroll */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Also apply safe wrapping to big headings generally */
.bg-hero h1, #work h2 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* All Work page */
#all-work .allwork-title {
  /* Large but fluid, matches hero feel from Figma while avoiding overflow */
  font-family: Larsseit, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.05;
  /* 36px on phones → 84px on desktops */
  font-size: clamp(36px, 7vw, 84px);
}

/* Filter chips */
#allwork-filters .filter-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #FFF;
  color: #242424;
  font-family: Larsseit, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  font-size: 15px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#allwork-filters .filter-chip:hover {
  background: black;
  border-color: rgba(0,0,0,0.20);
}
#allwork-filters .filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
}
#allwork-filters .filter-chip[aria-pressed="true"] {
  background: #242424;
  color: #FFF;
}
#allwork-filters .filter-chip[aria-pressed="true"]:hover {
  background: #111;
  border-color: #111;
}
#allwork-filters { -webkit-overflow-scrolling: touch; }

/* Grid cards */
#allwork-grid a { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
#allwork-grid img { display:block; width:100%; height:auto; }

/* Slight breathing room for the big page title */
#all-work .allwork-title { margin-top: 2px; }

/* Responsiveness */
@media (max-width: 1024px) {
  #allwork-grid { gap: 24px; }
}
@media (max-width: 768px) {
  #allwork-filters { gap: 10px; }
  #all-work .allwork-title { font-size: clamp(32px, 8vw, 56px); }
}
@media (max-width: 375px) {
  #allwork-filters .filter-chip { height: 36px; padding: 0 12px; font-size: 14px; }
  #all-work .allwork-title { font-size: clamp(28px, 9vw, 44px); }
}

/* Mobile: All Work page refinements */
@media (max-width: 640px) {
  /* Reduce side gutters applied via utility .px-20 on this page */
  #all-work .px-20 { padding-left: 16px !important; padding-right: 16px !important; }
	h1.allwork-title { font-size: 40px !important; }
	footer.wp-block-group.bg-bg.text-fg.bg-footer.is-layout-flow.wp-block-group-is-layout-flow { height: 400px !important; }
	div.w-full.h-full.px-20.flex.flex-col { padding-top: 32px !important; }
    summary.flex.cursor-pointer.items-center.justify-between.px-5 span { font-size: 20px !important; }
    .leading-7 { font-size: 18px !important; }
}

  /* Filters: comfortable spacing and hide horizontal scrollbar while preserving scroll */
  #allwork-filters { gap: 8px !important; padding-bottom: 4px; }
  #allwork-filters { -ms-overflow-style: none; scrollbar-width: none; }
  #allwork-filters::-webkit-scrollbar { display: none; }

  /* Grid spacing on small screens */
  #allwork-grid { gap: 16px !important; }

  /* Card typography scale down for small viewports */
  #allwork-grid .text-26 { font-size: 20px !important; letter-spacing: -0.3px; line-height: 1.15; }
  #allwork-grid .text-20 { font-size: 13px !important; line-height: 1.1; }

  /* Card image ratio: slightly taller than desktop for better visual balance on phones */
  #allwork-grid a > img { aspect-ratio: 16 / 10 !important; object-fit: cover; }
}

/* FAQs: arrow should point down by default, up when expanded */
#faqs details > summary img {
  transform: rotate(180deg);
  transition: transform 200ms ease;
}
#faqs details[open] > summary img {
  transform: rotate(0deg);
}
#faqs summary img { transform: rotate(180deg) !important; transition: transform .2s ease; }
#faqs details[open] summary img { transform: rotate(0deg) !important; }

/* Tablet overflow fix: prevent right-side blank space between 481–768px */
@media (min-width: 481px) and (max-width: 768px) {
  html, body { overflow-x: hidden; }
  /* Avoid 100vw elements exceeding padded parents */
  .w-screen { width: 100% !important; }
  /* Neutralize full-bleed shims on tablet to prevent horizontal scroll */
  .-ml-\[50vw\], .-mr-\[50vw\] { margin-left: 0 !important; margin-right: 0 !important; }
}