/**
 * Topics archive — responsive override + AJAX UI
 */

/* PC list: override studio display:none at SP breakpoints */
@media screen and (max-width: 480px) {
  .sd[data-s-6e5d92d9-8d5b-46e4-8d85-e4c2c31aa943] {
    display: flex !important;
  }
}
/* Card image: fixed 16:9 aspect ratio with cover */
.sd[data-s-5e047cf2-916f-4d43-9c58-8f4ba3d2e70d] {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* SP: swap card layout — text left, image right */
@media screen and (max-width: 480px) {
  .sd[data-s-22ec9dad-e028-483b-8edc-abc9949dd5bb] {
    order: -1;
  }
}

/* Tab — cursor + active state */
.topics-tab {
  cursor: pointer;
}
.topics-tab[aria-selected='true'] {
  pointer-events: none;
}
.topics-tab.is-active{
  background-color: #212121;
}

/* Active tab indicator — position matches first tab by default,
   JS moves it by updating left/width via the overlay element */
.topics-tab-indicator {
  pointer-events: none;
}
.topics-tab-indicator.is-hidden {
  display: none !important;
}

/* No-link card (type4): remove pointer / hover */
.topic-card--no-link {
  cursor: default;
}

/* Loading state */
#topics-list.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}

@media screen and (max-width: 480px) {
  .sd[data-s-5ca3b421-15eb-4bff-aa27-34e201c4fd60] {
    padding: 30px 0 30px 0 !important;
  }
  .sd[data-s-5e047cf2-916f-4d43-9c58-8f4ba3d2e70d] {
    margin-top: 35px;
    --gap-h-5ca3b421-15eb-4bff-aa27-34e201c4fd60: 10px !important;
  }
}