/* ==========================================================================
   BUILTBYJIMI - MODULAR PROJECT DETAIL TEMPLATE
   Accurately styled to match Figma & User Screenshots:
   - Fullscreen Hero with 16px outer padding
   - Exact Desktop & Mobile Project Header (Serif typography, custom border grid, green/grey badges)
   - 1-Col and 2-Col Asset Stream with 16px side padding and 20px vertical/horizontal gaps
   - Floating Pill Navigation (302.7px × 41.59px, bottom 3rem)
   ========================================================================== */

:root {
  --color-bg: #eaeaea;
  --color-surface: #f4f4f4;
  --color-text: #000000;
  --color-text-muted: #555555;
  --color-border: #000000;
  --color-border-subtle: rgba(0, 0, 0, 0.12);
  --color-badge-green: #b6fc8e;
  --color-badge-grey: #d4d4d4;
  --color-pill-bg: #1a1a1a;
  
  --font-serif: 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hide scrollbar for Chrome, Safari, Edge, Opera */
::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  min-height: 100vh;
  width: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Hide scrollbar for Firefox & IE/Edge */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.detail-page-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: var(--color-bg);
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   1. FULLSCREEN HERO SECTION (16px padding around container, like homepage)
   ========================================================================== */
.detail-hero-viewport {
  width: 100vw;
  height: 100vh;
  padding: 16px; /* 16px padding around container */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  position: relative;
}

.detail-hero-box {
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-color: #002047; /* Navy blue fallback from screenshot 1 */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Top Action Buttons (Expand & Skip) matching Screenshot 1 */
.hero-top-actions {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
}

.hero-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-icon-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  transform: scale(1.08);
}

/* Hero Media Content */
.hero-media-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Typography Graphic Hero (like Screenshot 1) */
.hero-brand-graphic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  user-select: none;
}

.hero-brand-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: pre-line;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.hero-video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-image-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   2. PROJECT HEADER SECTION (Matching exact Figma Desktop & Mobile designs)
   ========================================================================== */
.detail-header-container {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
}

.detail-header-frame {
  width: 100%;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Title Row */
.header-title-row {
  width: 100%;
  padding: 56px 5rem 44px 5rem;
  box-sizing: border-box;
}

.header-project-title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 6.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #000000;
}

/* Divider under title */
.header-divider-line {
  width: calc(100% - 10rem);
  margin: 0 5rem;
  height: 1px;
  background-color: var(--color-border);
}

/* Main Content Grid (Desktop 2-Col / Mobile 1-Col) */
.header-content-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  width: 100%;
  padding: 0 5rem;
  box-sizing: border-box;
}

/* Left Column: Metadata Box */
.header-left-meta {
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

/* Industry Sub-block */
.meta-industry-block {
  padding: 24px 32px 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.meta-label {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400; /* Arial regular 12px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000000;
  margin-bottom: 12px;
}

.badge-green {
  display: inline-block;
  background-color: var(--color-badge-green);
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700; /* Arial bold 12px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 0; /* Rectangular as in screenshot */
}

/* What We Did Sub-block */
.meta-services-block {
  padding: 24px 32px 32px 0;
}

.badges-grey-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge-grey {
  display: inline-block;
  background-color: var(--color-badge-grey);
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700; /* Arial bold 12px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: 0; /* Rectangular as in screenshot */
  line-height: 1.2;
}

/* Right Column: Narrative Story & Actions */
.header-right-story {
  padding: 24px 0 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.story-subheading {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 700; /* Arial bold 20px */
  line-height: 1.35;
  color: #000000;
  margin-bottom: 16px;
}

.story-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
}

.story-paragraphs p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #111111;
  font-weight: 400; /* Arial regular 16px */
}

.story-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.story-btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #111111;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400; /* Arial regular 16px */
  padding: 10px 26px;
  border-radius: 9999px;
  margin-top: 0;
  width: fit-content;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.story-btn-more:hover {
  background-color: var(--color-badge-green);
  color: #000000;
  transform: translateY(-1px);
}

.story-btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-badge-green, #B4F481);
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 9999px;
  margin-top: 0;
  width: fit-content;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.story-btn-green:hover {
  background-color: #9fe665;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(180, 244, 129, 0.4);
}

/* ==========================================================================
   3. ASSETS PRESENTING LAYOUT (16px side padding, 20px vertical/horizontal gaps)
   ========================================================================== */
.detail-assets-container {
  width: 100%;
  padding: 20px 16px 60px 16px; /* 16px side padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 20px gap between vertical assets */
}

/* Row Type 1: Single 1-Column Asset (Full Width) */
.asset-row-1col {
  width: 100%;
}

.asset-card {
  width: 100%;
  border-radius: 0; /* Sharp corners */
  overflow: visible;
  background-color: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
  display: block;
  margin: 0 auto;
}

/* Row Type 2: 2-Column Asset Row (20px gap horizontally) */
.asset-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 20px gap between the 2 assets */
  width: 100%;
  align-items: start;
  justify-items: center;
}

/* Dedicated Video Container within Asset Cards - full natural uncropped dimensions */
.asset-video-wrapper {
  width: 100%;
  height: auto;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-video-wrapper.aspect-1-1 {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.asset-video-wrapper.aspect-16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.asset-video-element {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.asset-video-wrapper.aspect-1-1 .asset-video-element,
.asset-video-wrapper.aspect-16-9 .asset-video-element {
  height: 100%;
  object-fit: cover;
}

.asset-video-poster {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Video assets simply loop continuously with no overlay or controls */

/* ==========================================================================
   4. PINNED SCROLL-DRIVEN HORIZONTAL REVEAL / SIDE DRAWER (Matching frameone -> framelast)
   ========================================================================== */
.next-project-pin-section {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #000000;
  overflow: hidden;
}

.next-project-pin-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #000000;
}

/* 1. Base Asset Visual (Full screen 100vw in frameone, reveals behind drawer in framelast) */
.next-base-asset {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
  will-change: opacity;
}

.next-base-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.next-base-img,
.next-base-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2. Sliding Next Project Drawer (Width 72vw, slides in from right edge via translateX managed by GSAP) */
.next-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 72vw; /* Fixed 72vw width matching framelast.png */
  height: 100vh;
  overflow: hidden;
  z-index: 10;
  background-color: var(--color-bg); /* Signature light grey */
  cursor: pointer;
  display: block;
  text-decoration: none;
  will-change: transform;
  box-shadow: -16px 0 44px rgba(0, 0, 0, 0.28);
}

.next-drawer-inner {
  width: 72vw;
  height: 100vh;
  padding: 0 5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-bg);
}

.next-current-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.22);
  margin-bottom: 50px;
}

.next-current-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 32px;
}

.next-label-col {
  flex-shrink: 0;
}

.next-label-text {
  font-family: Arial, var(--font-display), sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #000000;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.next-teaser-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
}

.next-teaser-img-box {
  width: 280px;
  height: 350px;
  background-color: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.next-teaser-col:hover .next-teaser-img-box {
  transform: scale(1.02);
}

.next-teaser-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.next-teaser-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.next-teaser-title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #000000;
  line-height: 1.15;
}

.next-teaser-subtitle {
  font-family: Arial, var(--font-mono), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #444444;
}

/* ==========================================================================
   5. GLOBAL FOOTER (Matching user's exact footer screenshot)
   ========================================================================== */
.site-footer {
  background-color: #000000;
  color: #ffffff;
  padding: 130px 24px 130px 24px;
  position: relative;
  z-index: 5;
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.footer-headline-block {
  text-align: center;
  margin-bottom: 90px;
}

.footer-heading-sub {
  font-family: Arial, var(--font-display), sans-serif;
  font-size: clamp(18px, 2.3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.32;
  margin: 0 0 6px 0;
  text-transform: uppercase;
}

.footer-heading-main {
  font-family: Arial, var(--font-display), sans-serif;
  font-size: clamp(18px, 2.3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.32;
  margin: 6px 0 0 0;
  text-transform: uppercase;
}

.footer-heading-main.lime-accent {
  color: #befda7; /* Vibrant lime accent from screenshot */
}

.footer-matrix {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 90px;
  gap: 32px;
}

.matrix-label {
  flex-shrink: 0;
}

.matrix-label .label-mono {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-transform: uppercase;
}

.matrix-grid {
  display: flex;
  justify-content: flex-end;
  gap: clamp(24px, 5.5vw, 72px);
  flex-wrap: wrap;
}

.matrix-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matrix-title {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-transform: uppercase;
}

.matrix-link {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.matrix-link:hover {
  color: #befda7;
  text-decoration-color: #befda7;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.footer-legal-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 36px);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-transform: uppercase;
}

.footer-legal-centered .legal-link {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-centered .legal-link:hover {
  color: #befda7;
}

.footer-legal-centered .copyright-text {
  color: #ffffff;
}

/* ==========================================================================
   FLOATING NAVIGATION PILL (Fixed bottom, exact stats: 302.7px × 41.59px, 3rem margin)
   ========================================================================== */
.nav_container {
  position: fixed;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
  width: 302.7px !important;
  height: 41.59px !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.nav_inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav_link {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1;
}

.nav_link:hover {
  color: #ffffff;
}

.nav_link.active {
  color: #ffffff;
  font-weight: 600;
}

.nav_link.active::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--color-badge-green);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

/* ==========================================================================
   MOBILE VIEWPORT ADAPTATION (Matching Screenshot 3)
   ========================================================================== */
@media (max-width: 820px) {
  .detail-header-container {
    padding: 0;
  }

  /* Title stacks into 2 lines on mobile */
  .header-title-row {
    padding: 36px 16px 24px 16px;
  }

  .header-divider-line {
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .header-project-title {
    font-size: clamp(3.2rem, 15vw, 4.8rem);
    line-height: 0.96;
    word-break: break-word;
  }

  /* Grid becomes single-column stack */
  .header-content-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  /* Metadata Box on mobile has right border and bottom border (matching Screenshot 3) */
  .header-left-meta {
    width: fit-content;
    max-width: 100%;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-right: 16px;
  }

  .meta-industry-block {
    padding: 18px 16px 18px 0;
  }

  .meta-services-block {
    padding: 18px 16px 20px 0;
  }

  /* Right column sits below the metadata block */
  .header-right-story {
    padding: 28px 0 36px 0;
  }

  /* 2-Column assets collapse to 1-column with 20px gap */
  .asset-row-2col {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .site-footer {
    padding: 80px 20px 100px 20px;
  }

  .footer-headline-block {
    margin-bottom: 50px;
  }

  .footer-matrix {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 60px;
  }

  .matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    justify-content: flex-start;
  }

  .footer-legal-centered {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .nav_container {
    width: calc(100% - 32px) !important;
    max-width: 302.7px !important;
    bottom: 2rem !important;
  }

  /* ==========================================================================
     STATIC NEXT PROJECT SECTION ON MOBILE (Matching nextprojectframemobile Figma)
     Strictly static layout, no pinned scroll, clean signature light background,
     1px solid black top divider line, NEXT PROJECT title on left, centered project card below.
     ========================================================================== */
  .next-project-pin-section {
    height: auto !important;
    min-height: auto !important;
    position: static !important;
    background-color: var(--color-bg) !important;
    overflow: visible !important;
    padding-top: 40px !important;
  }

  .next-project-pin-container {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: static !important;
    background-color: var(--color-bg) !important;
    overflow: visible !important;
  }

  /* Hide pinned base asset visual on mobile */
  .next-base-asset {
    display: none !important;
  }

  /* Drawer panel is a static, full-width block */
  .next-drawer-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--color-bg) !important;
    display: block !important;
    padding: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  .next-drawer-inner {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 20px 60px 20px !important;
    background-color: var(--color-bg) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* 1px solid black horizontal divider across top (Figma 10:1392) */
  .next-current-divider {
    width: 100% !important;
    height: 1px !important;
    background-color: #000000 !important;
    margin: 0 0 50px 0 !important;
  }

  /* Stack "NEXT PROJECT" heading above the card with 40px gap (Figma itemSpacing: 40) */
  .next-current-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 40px !important;
  }

  .next-label-col {
    width: 100% !important;
    text-align: left !important;
  }

  .next-label-text {
    font-family: Arial, var(--font-display), sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.48px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* Centered clickable teaser card */
  .next-teaser-col {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Square thumbnail container matching Figma mobile frames (240px x 240px) */
  .next-teaser-img-box {
    width: min(240px, 75vw) !important;
    height: min(240px, 75vw) !important;
    aspect-ratio: 1 / 1 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .next-teaser-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* Metadata below card image with 32px top spacing (Figma Container [10:1407] paddingTop: 32) */
  .next-teaser-meta {
    width: min(240px, 75vw) !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-top: 32px !important;
    box-sizing: border-box !important;
  }

  .next-teaser-title {
    font-family: Arial, var(--font-primary), sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.48px !important;
    margin: 0 !important;
  }

  .next-teaser-subtitle {
    font-family: Arial, var(--font-mono), monospace !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
}