/* Portfolio categories, media carousels and Art Box gallery */
.portfolio-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 56px
}

.portfolio-category {
  border: 1px solid #66515c;
  background: #211b20;
  border-radius: var(--radius);
  min-width: 0;
  transition: border-color .25s, background-color .25s
}

.portfolio-category summary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  list-style: none;
  min-height: 210px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px
}

/* Tile backdrop: a random work of the category (js/gallery.js), pre-blurred in img/portfolio/tiles/,
   under a gradient so the label stays readable. Hidden while the category is open. */
.tile-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tile-bg--live-blur {
  filter: blur(2px);
  transform: scale(1.04)
}

.portfolio-category summary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, #1a1519f2 0%, #1a1519bf 45%, #1a151973 100%)
}

.portfolio-category summary>* {
  text-shadow: 0 1px 10px #000c
}

.portfolio-category summary::-webkit-details-marker {
  display: none
}

.portfolio-category summary:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: -5px
}

.tile-icon {
  color: var(--pink);
  font-size: 34px;
  stroke-width: 1.4
}

.portfolio-category .tile-num {
  color: var(--pink);
  font: 700 .9375rem 'Space Grotesk', sans-serif;
  direction: ltr
}

.portfolio-category summary strong {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15
}

.portfolio-category summary .open-label {
  font-weight: 800;
  font-size: 1rem;
  color: #e3c3d2
}

.portfolio-category[open] {
  border-color: var(--pink)
}

.portfolio-category[open] summary .open-label {
  color: var(--pink)
}

/* Desktop (4 tiles in a row): the tiles always stay in place; the open category's gallery is moved
   by js/gallery.js into this panel, which spans the whole row under the tiles. One category at a time. */
.portfolio-panel {
  grid-column: 1/-1;
  border: 1px solid var(--pink);
  border-radius: var(--radius);
  background: #211b20
}

.portfolio-panel[hidden] {
  display: none
}

.portfolio-panel .portfolio-content {
  border-top: 0
}

@media(min-width:1001px) {

  /* The open tile keeps its look, marked by a pink bar along its bottom edge */
  .portfolio-category[open] summary {
    box-shadow: inset 0 -4px 0 var(--pink)
  }
}

/* Tablets and phones: the gallery opens in place, the tile turns into a title bar that sticks under
   the header while scrolling its gallery */
@media(max-width:1000px) {
  .portfolio-category[open] {
    grid-column: 1/-1
  }

  .portfolio-category[open] .tile-bg,
  .portfolio-category[open] summary::before {
    display: none
  }

  .portfolio-category[open] summary>* {
    text-shadow: none
  }

  .portfolio-category[open] summary {
    position: sticky;
    top: var(--sticky-header-height, 0px);
    z-index: 5;
    background: #211b20;
    min-height: 76px;
    padding: 14px 22px;
    flex-direction: row;
    align-items: center;
    gap: 10px 16px;
    border-bottom: 1px solid #66515c
  }

  .portfolio-category[open] .tile-icon {
    font-size: 28px
  }

  .portfolio-category[open] summary strong {
    font-size: clamp(1.5rem, 2.3vw, 2.2rem)
  }

  .portfolio-category[open] summary .open-label {
    margin-inline-start: auto
  }
}

.portfolio-content {
  border-top: 1px solid #66515c;
  padding: 22px 28px 30px
}

.portfolio-close,
.carousel-controls button {
  border: 1px solid #d9a2bd;
  border-radius: var(--radius);
  background: #151316;
  color: #fff;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .2s, color .2s
}

.portfolio-close {
  margin-top: 18px;
  padding: 8px 18px;
  font: 800 1rem Assistant, Arial, sans-serif
}

.portfolio-close:focus-visible,
.carousel-controls button:focus-visible {
  background: var(--pink);
  color: #171316
}

/* Hover effects only for real pointers (a tap on a phone would make them stick) */
@media (hover: hover) and (pointer: fine) {

  .portfolio-close:hover,
  .carousel-controls button:hover {
    background: var(--pink);
    color: #171316
  }

  .portfolio-category:hover {
    border-color: #a8708c;
    background: #271f25
  }

  .workshop-posters-grid a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px #a2135826
  }
}

/* Carousel heading row: title on one side, prev/next arrows on the other */
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px
}

.carousel-head h3 {
  margin: 0
}

.carousel-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: none;
  margin: 0 0 12px
}

.carousel-head .carousel-controls {
  margin: 0
}

.carousel-controls[hidden] {
  display: none
}

.carousel-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  font-size: 22px
}

.carousel-controls .icon {
  stroke-width: 2
}

/* Horizontal swipe carousels (scrollbars hidden in base.css) */
.portfolio-grid,
.workshop-posters-grid,
.workshop-moments-grid,
.artbox-video-grid,
.artbox-image-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 3px;
  padding: 3px 3px 6px;
  max-width: 100%;
  -webkit-overflow-scrolling: touch
}

/* Touch screens: "proximity" snapping, so a slightly diagonal vertical swipe over a carousel
   does not make it jump sideways */
@media (hover: none) {

  .portfolio-grid,
  .workshop-posters-grid,
  .workshop-moments-grid,
  .artbox-video-grid,
  .artbox-image-grid {
    scroll-snap-type: x proximity
  }
}

.portfolio-grid {
  scroll-padding-inline: 2px;
  padding: 2px 2px 6px
}

.portfolio-grid:focus-visible,
.media-carousel:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px
}

.workshop-posters-grid>a,
.workshop-moments-grid>figure,
.artbox-video-grid>figure,
.artbox-image-grid>a {
  flex: 0 0 clamp(250px, 28vw, 360px);
  scroll-snap-align: start;
  min-width: 0
}

.portfolio-item figcaption {
  padding: 12px 14px;
  font-size: 1rem
}

.portfolio-item {
  margin: 0;
  background: #151316;
  border: 1px solid #58454f;
  flex: 0 0 clamp(220px, 27vw, 340px);
  scroll-snap-align: start;
  min-width: 0
}

.portfolio-item img,
.portfolio-item video {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: contain;
  background: #0d0c0e
}

/* Photos fill the whole 4:5 card (no black bands); square and wide shots lose a little at the sides */
.portfolio-item img {
  object-fit: cover;
  object-position: center
}

.portfolio-empty {
  margin: 0;
  color: var(--muted);
  font-size: 1.125rem
}

/* Video previews (js/video.js): the cover fills the frame and a pink play button sits on top;
   the player bar appears only after the first click, then the video is shown uncropped */
.video-frame {
  position: relative;
  display: block
}

.video-frame video.is-preview {
  object-fit: cover;
  cursor: pointer
}

.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--on-pink);
  font-size: 26px;
  box-shadow: 0 8px 24px #0000006b;
  cursor: pointer;
  transition: background-color .2s, transform .2s
}

.video-play[hidden] {
  display: none
}

@media (hover: hover) and (pointer: fine) {
  .video-play:hover {
    background: var(--pink-hover);
    transform: scale(1.06)
  }
}

@media(max-width:800px) {
  .video-play {
    width: 56px;
    height: 56px;
    font-size: 22px
  }
}

/* Workshop posters and moments */
.workshop-posters {
  max-width: 1350px;
  margin: 85px auto 0
}

.workshop-moments {
  max-width: 1350px;
  margin: 72px auto 0
}

.workshop-posters h3,
.workshop-moments h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15
}

.workshop-posters-grid a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dfbccc;
  transition: transform .25s, box-shadow .25s
}


.workshop-posters-grid a:focus-visible {
  outline: 3px solid #a21358;
  outline-offset: 3px
}

/* Posters have different proportions; they fill a shared 4:5 frame (no empty bands),
   anchored to the top edge so the poster titles stay visible */
.workshop-posters-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  background: #fff
}

.workshop-posters-grid span {
  display: block;
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid #f0dbe5;
  font-size: 1rem;
  font-weight: 800;
  color: #22171d
}

.workshop-moment {
  margin: 0;
  background: #fff;
  border: 1px solid #dfbccc
}

.workshop-moment video,
.workshop-moment img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: contain;
  background: #171316
}

.workshop-moment figcaption {
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 800;
  color: #22171d
}

.workshop .carousel-controls button {
  border-color: #151316
}

/* Art Box gallery */
.artbox-gallery {
  max-width: 1500px;
  margin: -35px auto 85px;
  padding: 0 var(--gutter)
}

.artbox-gallery h3 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.15
}

.artbox-video-grid {
  margin-bottom: 16px
}

.artbox-video-grid figure {
  margin: 0;
  background: #1c1c20;
  border: 1px solid #433640
}

.artbox-video-grid video {
  display: block;
  width: 100%;
  aspect-ratio: 512/910;
  max-height: 560px;
  background: #161116;
  object-fit: contain
}

.artbox-video-grid figcaption {
  padding: 14px 16px;
  color: #fff;
  font-size: 1rem
}

.artbox-image-grid a {
  background: #211b20
}

.artbox-image-grid img {
  display: block;
  width: 100%;
  height: auto
}

.artbox-image-grid a:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px
}

/* Wide screens: short media sets sit in a grid instead of a cut-off carousel */
@media(min-width:601px) {

  .workshop-posters-grid,
  .workshop-moments-grid,
  .artbox-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0
  }

  .workshop-posters-grid,
  .workshop-moments-grid {
    align-items: start
  }

  .artbox-image-grid {
    max-width: 760px;
    margin-inline: auto
  }
}

@media(min-width:901px) {
  .artbox-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding: 0
  }
}

@media(min-width:1101px) {

  .workshop-posters-grid,
  .workshop-moments-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media(max-width:1000px) {
  .portfolio-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:800px) {
  .portfolio-categories {
    gap: 10px;
    margin-bottom: 40px
  }

  .portfolio-category summary {
    min-height: 150px;
    padding: 18px 16px;
    gap: 4px
  }

  .tile-icon {
    font-size: 30px;
    margin-bottom: 6px
  }

  .portfolio-category .tile-num {
    font-size: .75rem
  }

  .portfolio-category summary strong {
    font-size: 1.5rem
  }

  .portfolio-category summary .open-label {
    font-size: .875rem
  }

  .portfolio-category[open] summary {
    min-height: 64px;
    padding: 12px 16px;
    gap: 6px 12px
  }

  .portfolio-category[open] .tile-icon {
    font-size: 24px;
    margin: 0
  }

  .portfolio-category[open] .tile-num {
    display: none
  }

  .portfolio-category[open] summary strong {
    font-size: 1.35rem
  }

  .portfolio-content {
    padding: 16px 14px 22px
  }

  .portfolio-item {
    /* ~40% smaller cards on phones: two fit side by side with the next one peeking */
    flex-basis: min(46vw, 190px)
  }

  .artbox-gallery {
    margin-top: -24px;
    margin-bottom: 64px
  }

  /* Touch screens swipe; arrows are only for wide screens (as on by-shop) */
  .carousel-controls {
    display: none
  }
}

@media(max-width:600px) {

  /* Compact captions and play buttons for the smaller phone cards */
  .portfolio-item figcaption,
  .workshop-posters-grid span,
  .workshop-moment figcaption,
  .artbox-video-grid figcaption {
    padding: 8px 10px;
    font-size: .875rem
  }

  .video-play {
    width: 48px;
    height: 48px;
    font-size: 19px
  }

  .workshop-posters,
  .workshop-moments {
    margin-top: 56px
  }

  .carousel-head {
    margin-bottom: 16px
  }

  .workshop-posters-grid>a,
  .workshop-moments-grid>figure,
  .artbox-video-grid>figure,
  .artbox-image-grid>a {
    flex-basis: min(46vw, 195px)
  }

  .artbox-video-grid video {
    max-height: 70vh;
    max-height: calc(var(--app-height, 100svh) * .7)
  }
}