/* ============================================================
   STUDIO — two-slide carousel (prev/next arrows)
   Fully responsive: desktop → tablet → mobile
   ============================================================ */

.studio {
  position: relative;            /* nový stacking context */
  z-index: 2;                    /* kryje cokoli pod sebou (hero apod.) */
  background-color: var(--color-fg);
  height: 1057px;
  overflow: hidden;
}

.studio__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
  padding-top: 125px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.studio__heading {
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -1.44px;
  color: #fff;
  margin: 0;
  flex-shrink: 0;
}

.studio__cards {
  display: grid;
  grid-template-columns: minmax(0, 819fr) minmax(0, 587fr);  /* foto 58%, info 42% */
  gap: 22px;
  margin-top: 73px;
  height: 719px;
}

/* ---- Left: photo card ---- */
.studio__photo {
  min-width: 0;
  height: 719px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.studio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.studio__photo-placeholder {
  width: 100%;
  height: 100%;
  background: #2a2a2e;
}

.studio__name {
  position: absolute;
  bottom: 42px;
  left: 42px;
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: #fff;
  margin: 0;
}

/* ---- Right: info card ---- */
.studio__info {
  min-width: 0;
  height: 719px;
  background: #000;
  border-radius: 16px;
  padding: 42px;
  display: flex;
  flex-direction: column;
}

.studio__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #fff;
  flex-shrink: 0;
  width: fit-content;
}

.studio__bio {
  margin-top: 54px;
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-h3);
  color: #fff;
  flex: 1;
}

.studio__arrows {
  display: flex;
  gap: 22px;
  flex-shrink: 0;
  margin-top: auto;
}

.studio__arrow-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-fg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.studio__arrow-btn:hover {
  background: #2a2a2e;
}

.studio__arrow-btn svg {
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---- Wide desktop down (1280-1023) — zmenšit cards ---- */
@media (max-width: 1279px) {
  .studio {
    height: auto;
    min-height: 900px;
    padding-bottom: 80px;
  }
  .studio__inner {
    padding-top: 96px;
  }
  .studio__cards {
    height: auto;
    margin-top: 56px;
    gap: 18px;
  }
  .studio__photo,
  .studio__info {
    height: 620px;
  }
  .studio__name {
    bottom: 36px;
    left: 36px;
  }
  .studio__info {
    padding: 36px;
  }
  .studio__bio {
    margin-top: 42px;
  }
}

/* ---- Tablet (1023-768) — sloupec photo nad info ---- */
@media (max-width: 1023px) {
  .studio {
    min-height: auto;
    height: auto;
    padding-bottom: 80px;
  }
  .studio__inner {
    padding-top: 80px;
  }
  .studio__cards {
    grid-template-columns: 1fr;        /* stack vertically */
    grid-template-rows: auto auto;
    gap: 16px;
    margin-top: 48px;
    height: auto;
  }
  .studio__photo {
    height: 520px;
    aspect-ratio: 16 / 11;
  }
  .studio__info {
    height: auto;
    min-height: 460px;
    padding: 32px;
  }
  .studio__name {
    bottom: 28px;
    left: 28px;
    font-size: 42px;
  }
  .studio__bio {
    margin-top: 32px;
    font-size: 20px;
  }
  .studio__arrows {
    gap: 16px;
    margin-top: 32px;
  }
  .studio__arrow-btn {
    width: 48px;
    height: 48px;
  }
}

/* ---- Small tablet (768) ---- */
@media (max-width: 767px) {
  .studio__inner {
    padding-top: 64px;
  }
  .studio__cards {
    margin-top: 40px;
    gap: 14px;
  }
  .studio__photo {
    height: auto;
    aspect-ratio: 4 / 5;               /* portrétový crop na mobile */
    border-radius: 14px;
  }
  .studio__info {
    min-height: auto;
    padding: 28px 24px;
    border-radius: 14px;
  }
  .studio__name {
    bottom: 24px;
    left: 24px;
    font-size: 34px;
  }
  .studio__chip {
    font-size: 11px;
    padding: 3px 9px;
  }
  .studio__bio {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.55;
  }
  .studio__arrows {
    gap: 12px;
    margin-top: 28px;
  }
  .studio__arrow-btn {
    width: 44px;
    height: 44px;
  }
  .studio__arrow-btn svg {
    transform: scale(0.85);
  }
}

/* ---- Phone (480) ---- */
@media (max-width: 479px) {
  .studio__inner {
    padding-top: 52px;
  }
  .studio__name {
    bottom: 20px;
    left: 20px;
    font-size: 28px;
    letter-spacing: -0.5px;
  }
  .studio__info {
    padding: 24px 20px;
  }
  .studio__bio {
    font-size: 16px;
  }
}