/* ═══════════════════════════════════════
   STUDIO SGA — Studio Page Styles
   ═══════════════════════════════════════ */

/* Allow GSAP ScrollTrigger pinning on desktop.
   body uses overflow-x: clip — clips the full-viewport carousel breakout so
   no horizontal page scrollbar appears, WITHOUT creating a scroll container
   (which would break ScrollTrigger pinning, unlike overflow-x: hidden). */
@media (min-width: 769px) {
  html { overflow-x: unset; }
  body { overflow-x: clip; }
}

/* ── Flash prevention: hide polaroid cards until GSAP positions them ──
   GSAP removes this class after setting the initial scatter state.
   Only applied on desktop (mobile skips the scatter animation).       */
@media (min-width: 769px) {
  .studio-polaroid.gsap-pending {
    visibility: hidden;
  }

  /* The progress bar and sidebar start hidden in the scatter state and
     fade in as you scroll. Hide them up front so they don't flash visible
     for a frame before GSAP runs (after fonts load). GSAP's autoAlpha
     animation overrides this once the scatter→align plays. */
  .studio-team__scroll,
  .studio-team__sidebar {
    visibility: hidden;
  }
}

/* ─────────────────────────────────────
   POLAROID CARD
   ───────────────────────────────────── */
.studio-polaroid {
  width: 240px;
  height: 368px;
  border-radius: 2px;
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.04), 1px 1px 20px 4px rgba(0,0,0,0.04);
  position: relative;
  flex-shrink: 0;
}

.studio-polaroid__front {
  background-image: url('../images/studio_photo_frame.jpg');
  background-size: cover;
  background-color: #f5f0e8;
  isolation: isolate;
}

.studio-polaroid__photo {
  width: 216px;
  height: 216px;
  object-fit: cover;
  mix-blend-mode: multiply;
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

.studio-polaroid__photo--darken {
  mix-blend-mode: darken;
}

.studio-polaroid__name {
  position: absolute;
  top: 294px;
  left: 10px;
  right: 10px;
  font-family: 'Caveat', 'toms handwritten new', cursive;
  font-size: 26px;
  color: #2b2b2b;
  mix-blend-mode: multiply;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-polaroid__role {
  position: absolute;
  top: 334px;
  left: 10px;
  right: 10px;
  font-family: 'Futura PT-Book', 'Futura PT', sans-serif;
  font-size: 13px;
  color: #2b2b2b;
  mix-blend-mode: multiply;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────
   POLAROID FLIP CARD
   ───────────────────────────────────── */
.studio-polaroid {
  perspective: 1000px;
  cursor: pointer;
}

.studio-polaroid__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-polaroid.is-flipped .studio-polaroid__inner {
  transform: rotateY(180deg);
}

.studio-polaroid__front,
.studio-polaroid__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 2px;
  overflow: hidden;
}

.studio-polaroid__back {
  transform: rotateY(180deg);
  background: #f5f0e8;
  background-image: url('../images/studio_photo_frame.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px 22px;
}

.studio-polaroid__back-name {
  font-family: 'Caveat', 'toms handwritten new', cursive;
  font-size: 24px;
  color: #2b2b2b;
  mix-blend-mode: multiply;
  line-height: 1.1;
  margin-bottom: 2px;
}

.studio-polaroid__back-role {
  font-family: 'Futura PT-Book', 'Futura PT', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b2b2b;
  mix-blend-mode: multiply;
  opacity: 0.5;
  margin-bottom: 12px;
}

.studio-polaroid__back-bio {
  font-family: 'Futura PT-Book', 'Futura PT', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #2b2b2b;
  mix-blend-mode: multiply;
  line-height: 1.65;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* ─────────────────────────────────────
   TEAM SECTION
   ───────────────────────────────────── */
.studio-team {
  background-color: var(--brown);
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-top: 150px; /* clear fixed nav + breathing room */
  padding-bottom: 0;
  min-height: 100vh;
  overflow: visible;
}

.studio-team::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/studio_bg_texture.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

.studio-team__inner {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* ─── Hero text (fades out during scatter animation) ─── */
.studio-team__hero-text {
  padding-bottom: 16px;
}

/* Desktop: take hero text out of flow so the progress bar sits right under
   the nav with the carousel directly below it. The hero text overlays that
   same top area and fades out as you scroll. (Mobile keeps normal flow.) */
@media (min-width: 769px) {
  .studio-team__hero-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}

.studio-team__hero-label {
  font-family: 'Futura PT', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
  opacity: 0.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.studio-team__hero-headline {
  font-family: 'Futura PT', sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--cream);
  max-width: 582px;
  line-height: 1.2;
}

/* ─── Scroll progress indicator ─── */
.studio-team__scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.studio-team__scroll-num {
  font-family: 'Futura PT-Book', 'Futura PT', sans-serif;
  font-size: 16px;
  color: var(--cream);
  letter-spacing: 1.6px;
  flex-shrink: 0;
}

.studio-team__scroll-line {
  flex: 1;
  height: 1px;
  background: rgba(244,240,229,0.3);
  position: relative;
}

.studio-team__scroll-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

/* ─── Body: sidebar + carousel ─── */
.studio-team__body {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: visible;
  /* Break out of the centred 1240px container so the carousel scroll area
     is the full viewport width — nothing is clipped by a narrow container.
     padding-left keeps the sidebar aligned to the original content edge. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}

.studio-team__sidebar {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.studio-team__label {
  font-family: 'Futura PT', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.studio-team__arrow {
  color: var(--cream);
  opacity: 0.7;
  font-size: 24px;
  line-height: 1;
}

.studio-team__carousel-pad { display: none; }

/* ─── Horizontal carousel ─── */
.studio-team__carousel {
  flex: 1;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 80px;
  padding-right: 60px;
  min-width: 0;
}

.studio-team__carousel::-webkit-scrollbar {
  display: none;
}

.studio-team__carousel .studio-polaroid {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 240px;
  transform: none;
}

/* ─────────────────────────────────────
   NAV ACTIVE STATE
   ───────────────────────────────────── */
.site-header {
  opacity: 1 !important;
  color: var(--cream) !important;
}

@media (min-width: 769px) {
  .site-header {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

.site-header__links a.nav__link--active {
  font-family: 'Futura PT Heavy', 'Futura PT', sans-serif;
  font-weight: 900;
  opacity: 1;
}

/* ─────────────────────────────────────
   QUIZ SECTION — brown bg + texture
   ───────────────────────────────────── */
.quiz-section {
  background-color: var(--brown) !important;
  background-image: none !important;
  position: relative;
  border-top: none !important;
  padding: 60px 0 0 !important;
}

.quiz-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/studio_bg_texture.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.quiz-section__inner {
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}

.quiz-section__inner::after {
  content: '';
  display: block;
  width: 1240px;
  max-width: 100%;
  height: 2px;
  background: #F4F0E5;
  opacity: 0.3;
  margin-top: 40px;
}

/* ─────────────────────────────────────
   FOOTER — brown bg + texture
   ───────────────────────────────────── */
.site-footer {
  background-color: var(--brown) !important;
  background-image: none !important;
  border-top: none !important;
  position: relative;
}

.site-footer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../images/studio_bg_texture.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  mix-blend-mode: screen !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.site-footer__grid {
  position: relative;
  z-index: 1;
}

.site-footer__addr                    { color: var(--cream) !important; }
.site-footer__contact-links a         { color: var(--cream) !important; }
.site-footer__contact-links a:hover   { color: rgba(244,240,229,0.65) !important; }
.site-footer__nav a,
.site-footer__nav button              { color: rgba(244,240,229,0.7) !important; font-weight: 400 !important; opacity: 1 !important; }
.site-footer__nav a:hover,
.site-footer__nav button:hover        { color: var(--cream) !important; }
.site-footer__newsletter              { border-color: rgba(244,240,229,0.3) !important; }
.site-footer__newsletter input        { color: var(--cream) !important; }
.site-footer__newsletter input::placeholder { color: var(--cream) !important; opacity: 0.55; }
.site-footer__newsletter button       { background: var(--cream) !important; color: var(--brown) !important; }

/* Mobile menu newsletter — override studio.css so button stays visible on cream pill */
.mobile-menu__footer .site-footer__newsletter button { background: var(--brown) !important; color: var(--cream) !important; }
.mobile-menu__footer .site-footer__newsletter input  { color: var(--brown) !important; }
.mobile-menu__footer .site-footer__newsletter input::placeholder { color: rgba(122,59,38,0.55) !important; opacity: 1; }
.site-footer__copy                    { color: rgba(244,240,229,0.5) !important; }
.site-footer__admin                   { color: rgba(244,240,229,0.25) !important; }
.site-footer__admin:hover             { color: var(--cream) !important; }

/* ─────────────────────────────────────
   MOBILE
   ───────────────────────────────────── */
@media (max-width: 768px) {
  .studio-team {
    padding-top: 100px;
    padding-bottom: 0;
    min-height: unset;
    overflow: visible;
  }

  .studio-team__inner {
    width: calc(100% - 32px);
  }

  .studio-team__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .studio-team__sidebar {
    width: 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .studio-team__label {
    font-size: 14px;
    display: block;
    white-space: normal;
    line-height: 1.2;
  }

  .studio-team__label br { display: block; }

  /* Carousel breaks out of inner container to go edge-to-edge */
  .studio-team__carousel {
    gap: 12px;
    padding-bottom: 40px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 20px;
    padding-right: 16px;
    box-sizing: border-box;
    scroll-padding-left: 20px;
  }

  .studio-team__carousel .studio-polaroid:first-child {
    margin-left: 0;
  }

  .studio-team__carousel-pad {
    display: none;
  }

  /* Each polaroid = half viewport minus left margin + gap — shows exactly 2 at once */
  .studio-team__carousel .studio-polaroid {
    width: calc((100vw - 52px) / 2) !important;
    height: calc((100vw - 52px) / 2 * 1.54) !important;
  }

  .studio-team__carousel .studio-polaroid__photo {
    width: calc(100% - 20px);
    height: calc(100% - 80px);
    top: 16px;
  }

  .studio-team__carousel .studio-polaroid__name {
    font-family: 'Caveat', 'Jost', cursive;
    font-size: 20px;
    top: auto;
    bottom: 36px;
    left: 10px;
    right: 10px;
  }

  .studio-team__carousel .studio-polaroid__role {
    font-family: 'Jost', 'Futura PT', sans-serif;
    font-size: 11px;
    top: auto;
    bottom: 16px;
    left: 10px;
    right: 10px;
  }

  .site-header {
    width: 100%;
    left: 0;
    transform: none;
    padding: 0 20px;
    margin-top: 0;
  }

  .studio-team__hero-text {
    padding-bottom: 40px;
  }

  .studio-team__hero-label {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .studio-team__hero-headline {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 100%;
  }

  .quiz-section {
    padding: 6px 0 48px;
  }

  .quiz-section__inner {
    width: calc(100% - 32px);
    gap: 20px;
  }

  .quiz-section__inner::after {
    margin-top: 0;
  }

  .quiz-section,
  .site-footer {
    background-attachment: scroll !important;
  }
}