/**
 * TRIBEAST Studio — Global Overrides
 * Applies at all viewport widths (not scoped to the @media block below).
 *
 * A. Converse × Tyler The Creator card → recenter crop on Tyler's face
 *    (default center-center object-position cropped into the source photo's
 *    upper-body area instead of his face at this card's aspect ratio).
 * B. ChatGPT × Hypebeast Watch Party card → vertically center the event
 *    screen ("HOUSE OF HOT TAKES") in the crop.
 * C. Burberry × Rashford card → recenter crop on his face
 *    (default top-aligned crop at this card's wide aspect ratio cut off his
 *    head entirely, showing only his jacket).
 * D. About page "Event Production" discipline media → recenter crop on
 *    Tyler's face (default center-center crop cut off his eyes/forehead
 *    at this figure's 4:3 aspect ratio).
 * E. About page marquee tile (Tyler The Creator) → recenter crop on his
 *    face (default center-center crop at this tile's 16:10 aspect ratio
 *    showed only his torso/hands, no face).
 * F. Contact page → hide the "Let's talk" eyebrow label above the title.
 * G. Our Work page → hide the "Selected work" eyebrow label above the title.
 */

._label_1cmot_27 {
  display: none !important;
}

._label_15q8f_17 {
  display: none !important;
}

img[alt="Tyler The Creator in a Converse campaign still"] {
  object-position: 48% 26% !important;
}

img[alt="ChatGPT × Hypebeast Watch Party event still"] {
  object-position: center 45.7% !important;
}

img[alt="Burberry × Rashford moving portrait still"] {
  object-position: center 9.8% !important;
}

img[src="/assets/studio-converse-tyler-msvtwR9U.webp"] {
  object-position: center 22.7% !important;
}

img[src="/assets/tyler-the-creator-01-CvOThy8u.webp"] {
  object-position: center 12% !important;
}


/**
 * TRIBEAST Studio — Mobile Overrides
 * Applies to viewports ≤ 767px only.
 *
 * 1. "Find Out More" CTA  → swapped from underlined text to filled box button
 * 2. "View All Work" CTA  → swapped from filled box button to underlined text
 * 3. Work cards track     → changed from vertical stack to horizontal scroll
 * 4. Clients strip logos  → ChatGPT and Hypebeast enlarged (were undersized vs. others)
 */

@media (max-width: 767px) {

  /* ─── 1. "Find Out More" (clients section) ──────────────────────────────────
     Was: underlined text link  (_ctaLink_qe8vt_68)
     Now: filled box button matching the global .btn style                    */

  ._ctaLink_qe8vt_68 {
    background: var(--color-ivory) !important;
    color: var(--color-black) !important;
    text-decoration: none !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    padding: 10px 14px 11px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .25s, color .25s;
  }

  ._ctaLink_qe8vt_68:hover {
    background: var(--color-navy) !important;
    color: var(--color-ivory) !important;
  }


  /* ─── 2. "View All Work" (selected work section header) ─────────────────────
     Was: filled box button (.btn inside ._headGrid_10zq4_32)
     Now: underlined text link matching the _ctaLink style                    */

  ._headGrid_10zq4_32 .btn {
    background: transparent !important;
    color: var(--color-ivory) !important;
    clip-path: none !important;
    padding: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: inline !important;
    transition: color .25s;
  }

  ._headGrid_10zq4_32 .btn:hover {
    background: transparent !important;
    color: var(--color-navy) !important;
  }

  /* Hide the arrow icon — the underlined text style doesn't use one */
  ._headGrid_10zq4_32 .btn .btn__arrow {
    display: none !important;
  }


  /* ─── 3. Work cards → horizontal scroll ─────────────────────────────────────
     Was: vertical column stack (flex-direction:column, gap:56px)
     Now: horizontally scrollable track with snap points                      */

  /* Allow scroll to bleed through the containers */
  ._section_10zq4_1,
  ._sticky_10zq4_6,
  ._viewport_10zq4_51 {
    overflow: visible !important;
  }

  /* The scrollable track */
  ._track_10zq4_56 {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 var(--pad-x, 20px) 24px !important;
    gap: 16px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* hide native scrollbar for a cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  ._track_10zq4_56::-webkit-scrollbar {
    display: none;
  }

  /* Right-edge padding so the last card doesn't butt against the screen edge */
  ._track_10zq4_56::after {
    content: '';
    display: block !important;
    width: var(--pad-x, 20px);
    flex: none;
  }

  /* Each card: fixed width for peek-at-next-card effect */
  ._slide_10zq4_69 {
    width: 78vw !important;
    flex: none !important;
    scroll-snap-align: start;
  }

  /* Parallax inside each card: reset for mobile horizontal scroll */
  ._parallax_10zq4_86 {
    width: 100% !important;
    left: 0 !important;
  }


  /* ─── 4. Clients strip: enlarge ChatGPT & Hypebeast logos ───────────────────
     Both were set with a smaller base width than the rest of the strip,
     making them look undersized next to AWAL, Converse, etc. on mobile.     */

  ._cell_ruoc1_89 [aria-label="ChatGPT"],
  ._cell_ruoc1_89 [aria-label="Hypebeast"] {
    max-width: 150px !important;
    height: 64px !important;
  }


  /* ─── 5. About page: close gap between intro and "What we do" section ──────
     Intro section's bottom padding (clamp 90-150px) plus the disciplines
     section's own top padding (clamp 60-120px) stacked into a large empty
     gap on mobile viewports.                                               */

  ._intro_h8fse_35 {
    padding-bottom: 40px !important;
  }

  ._disciplines_h8fse_113 {
    padding-top: 0 !important;
  }

}


/**
 * TRIBEAST Studio — Project Page Additions
 * Applies at all viewport widths.
 *
 * H. "Challenge / Approach / Result" block — new block type for project
 *    detail pages. Label-left / copy-right row layout (matching the
 *    editorial block's "columns" text layout and the About page's
 *    disciplines rows) so the block uses the full section width on
 *    desktop instead of sitting in a single narrow column with a large
 *    empty gap beside it. Stacks to one column on mobile.
 */

.tb-car-item {
  border-top: 1px solid #f0ede529;
  padding: clamp(24px, 4vh, 40px) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tb-car-item:first-child {
  border-top: none;
  padding-top: 0;
}

.tb-car-item:last-child {
  padding-bottom: 0;
}

@media (width>=768px) {
  .tb-car-item {
    grid-template-columns: 5fr 7fr;
    gap: 24px;
    align-items: start;
  }
}

.tb-car-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ivory);
  margin: 0;
}

.tb-car-text {
  font-family: var(--font-sans);
  color: #f0ede5b3;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

.tb-car-text + .tb-car-list {
  margin-top: 1em;
}

.tb-car-link {
  color: var(--color-ivory);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s;
}

.tb-car-link:hover {
  color: var(--color-navy);
}

.tb-car-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}

.tb-car-list-item {
  font-family: var(--font-sans);
  color: #f0ede5b3;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 0.6em;
  padding-left: 1.2em;
  position: relative;
}

.tb-car-list-item:last-child {
  margin-bottom: 0;
}

.tb-car-list-item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-ivory);
}


/**
 * I. Project detail page date line — small eyebrow-style line showing
 *    "Month | Year" (or just "Year" when no month is known) above the
 *    title. Matches the site's existing eyebrow-label typography
 *    (15px sans, letter-spaced, muted).
 */

.tb-project-date {
  display: block;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0ede58c;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 clamp(12px, 2vh, 20px);
}


/**
 * J. "Pre-hero" content — blocks rendered between the title and the
 *    hero image (instead of their usual position after it). Two
 *    overrides are needed here:
 *    1. The block's own section padding assumes it follows the hero
 *       image, so top padding is removed (the header already
 *       provides breathing room above) and a comfortable bottom gap
 *       is added before the hero image starts.
 *    2. The "note" block type is a 7fr/5fr grid with its text placed
 *       in column 2 only — fine when it follows other full-width
 *       content, but in the pre-hero slot it left an empty gap on
 *       the left and pushed the text to the right instead of
 *       directly under the title. Collapsed to a single column here.
 */

.tb-pre-hero ._section_1a71h_47 {
  padding-top: 0 !important;
  padding-bottom: clamp(32px, 5vh, 56px) !important;
}

.tb-pre-hero ._note_1a71h_137 {
  grid-template-columns: 1fr !important;
}

.tb-pre-hero ._noteContent_1a71h_142 {
  grid-column: 1 !important;
}