/* Asia2TV homepage mobile system — intentionally scoped to the page builder. */
@media (max-width: 680px) {
  .studio-page {
    --home-mobile-gutter: 16px;
  }

  /* Compact cinematic opening: one clear focal point without a full-screen hero. */
  .studio-page .studio-responsive-section:first-child .studio-cine-slider,
  .studio-page .studio-responsive-section:first-child .studio-cine-inner,
  .studio-page .studio-cine-slider,
  .studio-page .studio-cine-inner {
    height: clamp(500px, 68svh, 550px) !important;
    min-height: 500px !important;
  }

  .studio-page .studio-responsive-section:first-child .studio-cine-inner,
  .studio-page .studio-cine-inner {
    width: 100% !important;
    padding: 58px var(--home-mobile-gutter) 52px !important;
  }

  .studio-page .studio-cine-bg { background-position: 58% center !important; }
  .studio-page .studio-cine-cards {
    inset: 28px auto auto -2vw !important;
    width: min(52vw, 214px) !important;
    height: 286px !important;
    opacity: .42 !important;
  }
  .studio-page .studio-cine-card { border-radius: 22px !important; }
  .studio-page .studio-cine-card.back { transform: translate(-20px, -8px) rotate(-5deg) !important; }
  .studio-page .studio-cine-card.middle { transform: translate(-10px, -4px) rotate(-2.5deg) !important; }
  .studio-page .studio-cine-card.front > .studio-cine-card-copy,
  .studio-page .studio-cine-card.front > .studio-universal-tools,
  .studio-page .studio-cine-card .play,
  .studio-page .studio-cine-new,
  .studio-page .studio-cine-next-card { display: none !important; }

  .studio-page .studio-cine-copy {
    width: min(82%, 335px) !important;
    max-width: none !important;
    align-self: end !important;
  }
  .studio-page .studio-cine-copy h1 {
    margin: 10px 0 8px !important;
    font-size: clamp(29px, 8.4vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.7px !important;
  }
  .studio-page .studio-cine-tagline { font-size: 10px !important; }
  .studio-page .studio-cine-copy > p {
    margin: 10px 0 13px !important;
    font-size: 10px !important;
    line-height: 1.75 !important;
    -webkit-line-clamp: 2 !important;
  }
  .studio-page .studio-cine-actions { max-width: 270px; }
  .studio-page .studio-cine-actions button,
  .studio-page .studio-cine-actions a {
    height: 41px !important;
    padding-inline: 13px !important;
    font-size: 10px !important;
  }
  .studio-page .studio-cine-arrow { top: 42% !important; width: 35px !important; height: 35px !important; }
  .studio-page .studio-cine-dots { bottom: 18px !important; }
  .studio-page .studio-cine-dots button { width: 24px !important; }

  /* Section heading layout is owned by studio-section-title-unify-v333.css. */
  /* News toolbar sizing is owned by page-builder-news-spectrum-v328.css. */

  /* Editorial cards: fixed 16:9 media, then text — no giant cropped overlays. */
  .studio-page .news-spectrum__stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }
  .studio-page .news-spectrum-card,
  .studio-page .news-spectrum-card.is-pulse {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 17px !important;
    background: #081d39 !important;
  }
  .studio-page .news-spectrum-card figure {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }
  .studio-page .news-spectrum-card figure::after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    background: linear-gradient(transparent, rgba(4, 17, 35, .7));
    pointer-events: none;
  }
  .studio-page .news-spectrum-card figure img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .studio-page .news-spectrum-card__shade { display: none !important; }
  .studio-page .news-spectrum-card__top { inset: 10px 10px auto !important; }
  .studio-page .news-spectrum-card__content,
  .studio-page .news-spectrum-card.is-pulse .news-spectrum-card__content {
    position: relative !important;
    inset: auto !important;
    padding: 13px 14px 14px !important;
  }
  .studio-page .news-spectrum-card__pulse { display: none !important; }
  .studio-page .news-spectrum-card h3,
  .studio-page .news-spectrum-card.is-pulse h3 {
    display: -webkit-box !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  .studio-page .news-spectrum-card footer,
  .studio-page .news-spectrum-card.is-pulse footer {
    padding-top: 9px !important;
    border-top: 1px solid rgba(115, 165, 218, .12) !important;
    font-size: 9px !important;
  }
  .studio-page .news-spectrum-card footer em { display: none !important; }
  .studio-page .news-spectrum__trends,
  .studio-page .news-spectrum__timeline { border-radius: 16px !important; }
}

@media (max-width: 390px) {
  .studio-page {
    --home-mobile-gutter: 12px;
  }
  .studio-page .studio-cine-copy { width: 88% !important; }
}

/* v410 refinements after real-device review. */
@media (max-width: 680px) {
  /* Keep both hero actions above the seam and fully readable. */
  .studio-page .studio-cine-copy {
    z-index: 6 !important;
    width: min(88%, 350px) !important;
    padding-bottom: 8px !important;
  }
  .studio-page .studio-cine-copy > p {
    margin-bottom: 10px !important;
    -webkit-line-clamp: 2 !important;
  }
  .studio-page .studio-cine-actions {
    position: relative !important;
    z-index: 7 !important;
    display: flex !important;
    width: min(100%, 290px) !important;
    max-width: 290px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .studio-page .studio-cine-actions > a,
  .studio-page .studio-cine-actions > button {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
  }
  .studio-page .studio-cine-actions > :not(.primary) {
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(7,15,31,.82) !important;
    backdrop-filter: blur(10px) !important;
  }
  body.studio-theme .studio-page .studio-cine-slider::after {
    z-index: 3 !important;
    height: 105px !important;
  }

  /* The news toolbar is sized in page-builder-news-spectrum-v328.css. */
}

@media (max-width: 390px) {
  .studio-page .studio-cine-copy {
    width: 92% !important;
  }
}

/* Mobile hub keeps an even 2 × 3 finale; desktop retains the full collection. */
@media (max-width: 680px) {
  .studio-page .studio-hub__finale .studio-hub-finale-card:nth-of-type(n + 7) {
    display: none !important;
  }
}

/* Movie finale cards: navigation on the right, work tools on the left. */
.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card > strong {
  right: 10px !important;
  left: auto !important;
}

.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card > .studio-universal-tools {
  right: auto !important;
  left: 12px !important;
}

.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card > div {
  right: 16px !important;
  left: 58px !important;
}

.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card h3 {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card p {
  color: #c1cede !important;
  font-size: 11px !important;
  line-height: 1.8 !important;
  -webkit-line-clamp: 2 !important;
}

.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card:hover p,
.studio-page .studio-hub__panel.is-movies .studio-hub-finale-card:focus-within p {
  max-height: 42px !important;
  margin-top: 7px !important;
  opacity: 1 !important;
}

@media (max-width: 680px) {
  .studio-page .studio-hub__panel.is-movies .studio-hub-finale-card > .studio-universal-tools {
    left: 8px !important;
  }
  .studio-page .studio-hub__panel.is-movies .studio-hub-finale-card > div {
    right: 12px !important;
    left: 46px !important;
  }
  .studio-page .studio-hub__panel.is-movies .studio-hub-finale-card h3 {
    font-size: 13px !important;
  }
}

/* Mood discovery uses the same title/action language as the remaining homepage blocks. */
.studio-page .studio-mood__head {
  direction: rtl !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

html[dir="ltr"] .studio-page .studio-mood__head {
  direction: ltr !important;
}

html[dir="ltr"] .studio-page .studio-mood__head > div,
html[dir="ltr"] .studio-page .studio-mood__head > div > small,
html[dir="ltr"] .studio-page .studio-mood__head > div > h2 {
  text-align: left !important;
}

.studio-page .studio-mood__head > div {
  display: grid !important;
  grid-template-columns: 40px minmax(0, auto) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 11px !important;
  width: max-content !important;
  max-width: calc(100% - 72px) !important;
  min-height: 58px !important;
  padding: 8px 14px 8px 10px !important;
  border: 1px solid color-mix(in srgb, var(--mood) 36%, #294567) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mood) 11%, #0a2140), #07182e) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
}

.studio-page .studio-mood__head > div::before {
  content: "✦";
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mood) 18%, #0d2445);
  color: var(--mood);
  font-size: 17px;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

.studio-page .studio-mood__head > div > small,
.studio-page .studio-mood__head > div > h2 {
  display: block !important;
}

.studio-page .studio-mood__head > div > small {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
}

.studio-page .studio-mood__head > div > h2 {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 4px 0 0 !important;
  font-size: 24px !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

.studio-page .studio-mood__head > div > p {
  display: none !important;
}

.studio-page .studio-mood__head > button {
  display: grid !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 20px !important;
}

.studio-page .studio-mood__head > button > span {
  display: none !important;
}

@media (max-width: 680px) {
  .studio-page .studio-mood__head {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .studio-page .studio-mood__head > div {
    grid-template-columns: 38px minmax(0, auto) !important;
    max-width: calc(100% - 60px) !important;
    min-height: 50px !important;
    padding: 6px 9px !important;
    gap: 9px !important;
    border-radius: 16px !important;
  }
  .studio-page .studio-mood__head > div::before {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 15px;
  }
  .studio-page .studio-mood__head > div > small {
    font-size: 7px !important;
    letter-spacing: .08em !important;
  }
  .studio-page .studio-mood__head > div > h2 {
    max-width: 225px !important;
    overflow: hidden !important;
    font-size: 18px !important;
    text-overflow: ellipsis !important;
  }
  .studio-page .studio-mood__head > button {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 390px) {
  .studio-page .studio-mood__head > div > h2 {
    max-width: 190px !important;
    font-size: 17px !important;
  }
}