/* ==================================================================
   10 extra layouts — laptop + mobile variants
   cinema polaroid mosaic river poster board hero_row stack split compact
   ================================================================== */

.ipa-layout-toggle {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ipa-layout-toggle button[hidden] {
  display: none !important;
}

body.ipa-layout-cinema .ipa-prompt-grid .card-image-wrapper,
body.ipa-layout-cinema .related-grid .card-image-wrapper {
  aspect-ratio: 16 / 9 !important;
  max-height: none !important;
}
body.ipa-layout-cinema .ipa-prompt-grid .card-image-wrapper img,
body.ipa-layout-cinema .related-grid .card-image-wrapper img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

body.ipa-layout-polaroid .ipa-prompt-grid .prompt-card,
body.ipa-layout-polaroid .related-grid .prompt-card {
  background: #fff !important;
  padding: 10px 10px 18px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  transform: rotate(-0.6deg);
}
body.ipa-layout-polaroid .ipa-prompt-grid .ipa-grid-item:nth-child(even) .prompt-card,
body.ipa-layout-polaroid .related-grid .prompt-card:nth-child(even) {
  transform: rotate(0.7deg);
}
body.ipa-layout-polaroid .card-image-wrapper {
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px !important;
}

body.ipa-layout-mosaic .ipa-prompt-grid > .ipa-grid-item:first-child,
body.ipa-layout-mosaic .related-grid > *:first-child {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
body.ipa-layout-mosaic .ipa-prompt-grid > .ipa-grid-item:first-child .card-image-wrapper,
body.ipa-layout-mosaic .related-grid > *:first-child .card-image-wrapper {
  aspect-ratio: 1 / 1 !important;
  min-height: 280px;
}

body.ipa-layout-river .ipa-prompt-grid,
body.ipa-layout-river .related-grid,
body.ipa-layout-river #ipaPromptGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: var(--ipa-gap-river, 14px) !important;
  grid-template-columns: none !important;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
body.ipa-layout-river .ipa-prompt-grid > .ipa-grid-item,
body.ipa-layout-river .related-grid > *,
body.ipa-layout-river #ipaPromptGrid > .ipa-grid-item {
  flex: 0 0 min(78vw, 320px) !important;
  width: min(78vw, 320px) !important;
  max-width: min(78vw, 320px) !important;
  scroll-snap-align: start;
}

body.ipa-layout-poster .card-image-wrapper {
  aspect-ratio: 2 / 3 !important;
  max-height: none !important;
}
body.ipa-layout-poster .card-image-wrapper img {
  object-fit: cover !important;
  height: 100% !important;
}

body.ipa-layout-board .prompt-card .card-body {
  padding: 8px 10px 10px !important;
}
body.ipa-layout-board .prompt-card .prompt-text {
  display: none !important;
}
body.ipa-layout-board .card-image-wrapper {
  aspect-ratio: 1 / 1 !important;
}

body.ipa-layout-hero_row .ipa-prompt-grid > .ipa-grid-item:first-child,
body.ipa-layout-hero_row .related-grid > *:first-child,
body.ipa-layout-hero_row #ipaPromptGrid > .ipa-grid-item:first-child {
  grid-column: 1 / -1 !important;
}
body.ipa-layout-hero_row .ipa-prompt-grid > .ipa-grid-item:first-child .prompt-card,
body.ipa-layout-hero_row #ipaPromptGrid > .ipa-grid-item:first-child .prompt-card {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
}
body.ipa-layout-hero_row .ipa-prompt-grid > .ipa-grid-item:first-child .card-image-wrapper {
  aspect-ratio: 16 / 9 !important;
  min-height: 280px;
  max-height: none !important;
}

body.ipa-layout-stack .ipa-prompt-grid,
body.ipa-layout-stack .related-grid,
body.ipa-layout-stack #ipaPromptGrid {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: 1fr !important;
}
body.ipa-layout-stack .card-image-wrapper {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
}
body.ipa-layout-stack .card-image-wrapper > .card-image-link {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}
body.ipa-layout-stack .card-image-wrapper img,
body.ipa-layout-stack .card-image-wrapper .card-image-link img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}

body.ipa-layout-split .ipa-prompt-grid,
body.ipa-layout-split .related-grid,
body.ipa-layout-split #ipaPromptGrid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: var(--ipa-gap-split, 16px) !important;
}
body.ipa-layout-split .prompt-card {
  display: grid !important;
  grid-template-columns: 42% 1fr !important;
  align-items: stretch !important;
}
body.ipa-layout-split .card-image-wrapper {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 180px;
  max-height: none !important;
}
body.ipa-layout-split .card-image-wrapper img {
  height: 100% !important;
  object-fit: cover !important;
}

body.ipa-layout-compact .prompt-card .prompt-text,
body.ipa-layout-compact .prompt-card .card-footer {
  display: none !important;
}
body.ipa-layout-compact .card-image-wrapper {
  aspect-ratio: 1 / 1 !important;
}
body.ipa-layout-compact .card-title {
  font-size: 12px !important;
  -webkit-line-clamp: 2;
}

@media (min-width: 768px) {
  body.ipa-layout-cinema .ipa-prompt-grid,
  body.ipa-layout-cinema .related-grid,
  body.ipa-layout-cinema #ipaPromptGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ipa-layout-river .ipa-prompt-grid > .ipa-grid-item,
  body.ipa-layout-river .related-grid > * {
    flex-basis: 280px !important;
    width: 280px !important;
    max-width: 280px !important;
  }
  body.ipa-layout-hero_row .ipa-prompt-grid > .ipa-grid-item:first-child .prompt-card {
    grid-template-columns: 1.3fr 0.9fr;
  }
}

@media (max-width: 767px) {
  /* Single-prompt VIEW: stacked 1-column (image then info), never 2-col */
  html body .ipa-single-prompt .detail-wrapper,
  html body main.ipa-single-prompt .detail-wrapper {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 14px !important;
  }
  html body .ipa-single-prompt .image-card,
  html body .ipa-single-prompt .info-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .ipa-single-prompt .image-wrapper,
  html body .ipa-single-prompt .image-wrapper img,
  html body .ipa-single-prompt #viewImg {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ipa-layout-cinema .ipa-prompt-grid,
  body.ipa-layout-cinema .related-grid,
  body.ipa-layout-cinema #ipaPromptGrid {
    grid-template-columns: 1fr !important;
  }
  body.ipa-layout-polaroid .prompt-card {
    transform: none !important;
    padding: 8px 8px 14px !important;
  }
  body.ipa-layout-mosaic .ipa-prompt-grid > .ipa-grid-item:first-child,
  body.ipa-layout-mosaic .related-grid > *:first-child {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  body.ipa-layout-hero_row .ipa-prompt-grid > .ipa-grid-item:first-child .prompt-card,
  body.ipa-layout-hero_row #ipaPromptGrid > .ipa-grid-item:first-child .prompt-card {
    grid-template-columns: 1fr !important;
  }
  body.ipa-layout-split .prompt-card {
    grid-template-columns: 1fr !important;
  }
  body.ipa-layout-poster .ipa-prompt-grid,
  body.ipa-layout-poster .related-grid,
  body.ipa-layout-poster #ipaPromptGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ipa-layout-board .ipa-prompt-grid,
  body.ipa-layout-board .related-grid,
  body.ipa-layout-board #ipaPromptGrid,
  body.ipa-layout-compact .ipa-prompt-grid,
  body.ipa-layout-compact .related-grid,
  body.ipa-layout-compact #ipaPromptGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.ipa-layout-stack .ipa-prompt-grid,
  body.ipa-layout-stack .related-grid,
  body.ipa-layout-stack #ipaPromptGrid,
  body.ipa-layout-grid1 .related-grid,
  body.ipa-layout-list .related-grid {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}