/*
 * File: assets/css/sections.css, the 9 section types of the home region.
 * Purpose: lays out the hero, slides, featured comics, merchandise, creators, spotlight, Pull List Club, visit and League
 * bands at 375, 768 and 1280 pixels, with the carousel parts carousel.js moves keyed on data-carousel-ready.
 * Defines: nothing; rules for the .sec- bands, .carousel and the parts each section template prints
 * Doc: docs/notes/mammothcomics.com/assets/themes/mammoth/assets/css/sections.css.md
 */

/* Hero: the skewed art frame and the bubble that overlaps its foot. */
.hero-grid {
  position: relative;
  display: grid;
  align-items: center;
}

.hero-frame { position: relative; z-index: 0; }

.hero-bubble {
  z-index: 1;
  margin: -24px var(--s-2) 0;
}

.hero-title {
  margin-top: var(--s-2);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.hero-text {
  margin-top: var(--s-3);
  color: var(--text-2);
  font-size: var(--fs-4);
}

.hero-burst {
  position: absolute;
  top: -84px;
  right: -6px;
  width: 96px;
  font-size: 12px;
}

.hero-bubble .button-row { margin-top: var(--s-4); }

@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 55% minmax(0, 1fr); }
  .hero-bubble { margin: 0 0 0 -32px; }
  .hero-burst { top: -70px; right: -14px; width: 120px; font-size: 14px; }
}

@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: 7fr 5fr; }
  .hero-bubble { margin-left: -48px; padding: var(--s-6); }
  .hero-burst { top: -88px; right: auto; left: -70px; width: 150px; font-size: 17px; }
}

/* Without carousel.js: a horizontal snap list with the controls hidden. */
.carousel { position: relative; }
.carousel-stage { position: relative; }

.carousel-items {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
}

.carousel-item {
  flex: 0 0 88%;
  min-width: 0;
  scroll-snap-align: start;
}

.carousel-controls { display: none; }

/* With carousel.js: the stage moves by --index, follows the finger by --drag and hides the scroll bar. */
.carousel[data-carousel-ready] .carousel-stage {
  overflow: hidden;
  touch-action: pan-y;
}

.carousel[data-carousel-ready] .carousel-items {
  gap: 0;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.carousel[data-carousel-ready] .carousel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.carousel-arrow,
.carousel-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  background: var(--btn-light);
  color: var(--on-btn-light);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--button-shadow-default);
  font-size: 18px;
  cursor: pointer;
}

.carousel-arrow:active,
.carousel-pause:active { box-shadow: var(--button-shadow-pressed); transform: translate(2px, 2px); }

.carousel-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.carousel-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  height: var(--target-min);
  padding: 0 var(--s-1);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.carousel-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: width var(--dur) var(--ease-standard), background-color var(--dur) var(--ease-standard);
}

.carousel-dot[aria-selected="true"]::before { width: 24px; background: var(--accent); }

/* Slides: 1 slide per view, the art frame and its bubble caption. */
.sec-slides .carousel[data-carousel-ready] .carousel-items {
  transform: translateX(calc(var(--index, 0) * -100% + var(--drag, 0px)));
  transition: transform 350ms var(--ease-standard);
}

.sec-slides .carousel.is-dragging .carousel-items,
.sec-spotlight .carousel.is-dragging .carousel-item { transition: none; }

.sec-slides .carousel.is-settling .carousel-items,
.sec-spotlight .carousel.is-settling .carousel-item { transition: transform 200ms var(--ease-exit); }

@media (prefers-reduced-motion: reduce) {
  .carousel .carousel-items,
  .carousel .carousel-item,
  .carousel :is(.slide-bubble, .spot-bubble, .spot-figure),
  .carousel-dot::before,
  .creator-panel,
  .creator-icon,
  .merch-tile { transition: none !important; }
}

/* The side padding is wider than the corner the skewed frame and its shadow push past the slide box. */
.sec-slides .carousel[data-carousel-ready] .carousel-item { flex-basis: 100%; padding: var(--s-2) var(--s-4) var(--s-5); }

@media (min-width: 768px) {
  .sec-slides .carousel[data-carousel-ready] .carousel-item { padding-inline: var(--s-6); }
}

.slide { display: grid; }
.slide-frame { position: relative; z-index: 0; }

.slide-bubble {
  z-index: 1;
  margin: -16px var(--s-2) 0;
  transition: opacity 200ms var(--ease-enter) 100ms;
}

.carousel[data-carousel-ready] .carousel-item:not(.is-active) :is(.slide-bubble, .spot-bubble) { opacity: 0; transition: none; }

.slide-title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--s-1);
  font-size: var(--fs-h3);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.slide-when {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-2);
  font-weight: 700;
}

.slide-text {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--s-2);
  color: var(--text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.slide-bubble .btn { margin-top: var(--s-4); }

@media (min-width: 768px) {
  .slide { position: relative; }

  .slide-bubble {
    position: absolute;
    right: var(--s-3);
    bottom: var(--s-5);
    width: 60%;
    margin: 0;
  }

  .sec-slides .carousel[data-carousel-ready] .carousel-item { padding-bottom: var(--s-6); }
}

@media (min-width: 1280px) {
  .slide {
    grid-template-columns: 62% minmax(0, 1fr);
    align-items: center;
  }

  .slide-bubble {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin-left: -48px;
  }

  .sec-slides .carousel[data-carousel-ready] .carousel-stage { margin-inline: 64px; }

  .sec-slides .carousel-arrow {
    position: absolute;
    top: calc(50% - 60px);
    width: var(--control-height);
    height: var(--control-height);
    background: var(--accent);
    color: var(--on-accent);
  }

  .sec-slides .carousel-prev { left: 0; }
  .sec-slides .carousel-next { right: 0; }
}

/* Spotlight: the title bar over its rule, the panels in perspective and the ink filmstrip. */
.spot-head {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 3px solid var(--line);
}

.spot-head .section-title { max-width: none; }

.spot-panel { position: relative; padding: var(--s-5) var(--s-2) 0; }

.spot-frame {
  position: relative;
  border: var(--border-panel) solid var(--card-border-default);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
}

.spot-frame .art-box { border-radius: 1px; }

.spot-figure {
  position: absolute;
  right: 4%;
  bottom: 0;
  z-index: 2;
  width: auto;
  height: calc(100% + 24px);
  max-width: 70%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  filter: drop-shadow(4px 4px 0 var(--color-ink-950));
  transform: translateX(calc(var(--offset, 0) * -12px));
  transition: transform var(--dur-3) var(--ease-standard);
}

.spot-bubble {
  z-index: 3;
  margin: -24px var(--s-3) var(--s-5);
  transition: opacity 200ms var(--ease-enter) 150ms;
}

.spot-word {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
}

.spot-title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--lh-tight);
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.spot-caption {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.spot-bubble .btn { margin-top: var(--s-3); }

.sec-spotlight .carousel[data-carousel-ready] .carousel-items {
  display: grid;
  perspective: 1400px;
}

.sec-spotlight .carousel[data-carousel-ready] .carousel-item {
  grid-area: 1 / 1;
  width: 88%;
  margin-inline: auto;
  transform: translateX(calc(var(--offset, 0) * 100% + var(--drag, 0px)));
  transition: transform var(--dur-3) var(--ease-standard), opacity var(--dur-3) var(--ease-standard);
}

.sec-spotlight .carousel-item[data-offset="far"] { opacity: 0; pointer-events: none; }

.spot-film { display: none; }

@media (min-width: 768px) {
  .sec-spotlight .carousel[data-carousel-ready] .carousel-item { width: 70%; }

  .sec-spotlight .carousel[data-carousel-ready] .carousel-item:not([data-offset="0"]) {
    transform: translateX(calc(var(--offset, 0) * 78% + var(--drag, 0px))) scale(0.86) rotateY(calc(var(--side, 0) * -18deg));
  }

  .spot-bubble {
    position: absolute;
    left: 6%;
    bottom: var(--s-6);
    width: 52%;
    margin: 0;
  }

  .spot-panel { padding-bottom: var(--s-8); }
  .spot-dots { display: none; }

  .spot-film {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-2);
    background: var(--color-ground-ink);
    border-radius: var(--r-sm);
    overflow-x: auto;
  }

  .spot-thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    background: var(--color-ink-700);
    border: 0;
    border-radius: 2px;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease-standard);
  }

  .spot-thumb img { width: 100%; height: 100%; object-fit: cover; }

  .spot-thumb[aria-selected="true"] {
    opacity: 1;
    outline: 3px solid var(--color-paper-0);
    outline-offset: -3px;
  }

  .spot-thumb:focus-visible { opacity: 1; outline: 3px solid var(--color-orange-400); outline-offset: -3px; }
}

@media (min-width: 1280px) {
  .sec-spotlight .carousel[data-carousel-ready] .carousel-item { width: 672px; }

  .sec-spotlight .carousel[data-carousel-ready] .carousel-item:not([data-offset="0"]) {
    transform: translateX(calc(var(--offset, 0) * 82% + var(--drag, 0px))) scale(0.86) rotateY(calc(var(--side, 0) * -24deg));
  }

  .spot-figure { right: -64px; height: calc(100% + 48px); }
  .spot-thumb { width: 120px; height: 80px; }
}

/* Featured comics: a snap row of cards under 1280px, 2 rows of 5 from 1280px. */
.row-buttons { display: flex; gap: var(--s-2); }

.card-row {
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-1) var(--gutter) var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}

.card-row:focus-visible { outline-offset: -3px; }

.card-row .card-list {
  display: flex;
  gap: var(--s-3);
}

.card-row .card-list > li {
  flex: 0 0 152px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .card-row .card-list > li { flex-basis: 176px; }
}

@media (min-width: 1280px) {
  .sec-featured .row-buttons { display: none; }
  .card-row { margin: 0; padding: var(--s-1) 0 0; overflow: visible; }

  .card-row .card-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

/* Merchandise strip */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
}

.merch-count-1 .merch-item { grid-column: 1 / span 1; }

.merch-tile {
  display: grid;
  gap: var(--s-2);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-standard);
}

.merch-photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
  border: var(--border-panel) solid var(--card-border-default);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-standard);
}

.merch-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  overflow: hidden;
  padding: var(--s-2) var(--s-3);
  background: var(--color-orange-400);
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.merch-line { color: var(--text-2); font-size: var(--fs-2); font-weight: 500; }

@media (hover: hover) {
  a.merch-tile:hover { transform: rotate(0deg) translate(-2px, -2px); }
  a.merch-tile:hover .merch-photo { box-shadow: var(--shadow-2); }
}

a.merch-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; transform: rotate(0deg); }

@media (min-width: 768px) {
  .merch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .merch-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .merch-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .merch-count-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .merch-item:nth-child(odd) .merch-tile { transform: rotate(-1.5deg); }
  .merch-item:nth-child(even) .merch-tile { transform: rotate(1deg); }
}

@media (min-width: 1280px) {
  .merch-grid { grid-template-columns: repeat(4, 260px); justify-content: start; gap: var(--s-6); }
  .merch-count-3 { grid-template-columns: repeat(3, 260px); }
  .merch-count-2 { grid-template-columns: repeat(2, 260px); }
  .merch-count-1 { grid-template-columns: 260px; }
}

/* Creators: a vertical accordion on phones, a row of expanding portrait panels from 768px. */
.creator-panels { display: grid; gap: var(--s-2); }

.creator-panel {
  overflow: hidden;
  background: var(--color-ink-700);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}

.creator-head { font-size: inherit; letter-spacing: 0; text-transform: none; }

.creator-toggle {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) var(--target-min);
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 88px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  background: transparent;
  color: var(--color-text-on-ground);
  border: 0;
  text-align: left;
  cursor: pointer;
}

.creator-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: var(--color-ink-700);
  border-radius: var(--r-sm);
}

.creator-name {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
}

.creator-roles { display: block; margin-top: var(--s-1); color: var(--color-text-muted-ink); font-size: var(--fs-2); }

.creator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  font-size: 18px;
  transition: transform var(--dur) var(--ease-standard);
}

.creator-toggle[aria-expanded="true"] .creator-icon { transform: rotate(90deg); }

.creator-region {
  display: grid;
  gap: var(--s-3);
  padding: 0 var(--s-3) var(--s-4);
  color: var(--color-text-on-ground);
}

.creator-region.is-showing { animation: creator-fade 150ms var(--ease-enter) 100ms both; }

.creator-portrait {
  width: 100%;
  max-height: 280px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--color-ink-700);
  border-radius: var(--r-sm);
}

.creator-bio {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-muted-ink);
  font-size: var(--fs-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

@keyframes creator-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .creator-region.is-showing { animation: none; }
}

@media (min-width: 768px) {
  .creator-panels {
    display: flex;
    gap: var(--s-3);
    height: 440px;
  }

  .creator-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow var(--dur-2) var(--ease-standard);
  }

  .creator-panel.is-open { flex-grow: 3; }

  .creator-head { position: absolute; inset: 0; z-index: 1; }

  .creator-panel.is-open .creator-head { inset: auto 0 0; }

  .creator-toggle {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 0;
  }

  .creator-panel.is-open .creator-toggle { height: auto; }

  .creator-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .creator-panel.is-open .creator-thumb { display: none; }

  .creator-label {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background: var(--color-paper-0);
    color: var(--color-ink-950);
  }

  .creator-label .creator-name { font-size: 22px; }
  .creator-label .creator-roles { display: none; }
  .creator-icon { position: absolute; top: var(--s-2); right: var(--s-2); background: var(--color-paper-0); color: var(--color-ink-950); border-radius: var(--r-full); }

  .creator-region {
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding: var(--s-3) var(--s-3) 96px;
  }

  .creator-portrait { max-height: none; height: 100%; aspect-ratio: auto; }
}

@media (min-width: 1280px) {
  .creator-panels { height: 520px; align-items: flex-start; }
  .creator-panel { height: calc(100% - 48px); }
  .creator-panel:nth-child(even) { margin-top: 48px; }
}

/* Pull List Club on the red ground with the halftone field. */
.club-grid { position: relative; z-index: 1; display: grid; gap: var(--s-6); }

.club-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.club-burst { flex: 0 0 auto; width: 88px; font-size: 11px; }

.club-copy .lead { margin-top: var(--s-4); color: var(--text-2); }

.steps { display: grid; gap: var(--s-3); margin-top: var(--s-5); }

.step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  font-weight: 700;
}

.step-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.club-panel { padding: var(--s-5); }

@media (min-width: 768px) {
  .club-burst { width: 120px; font-size: 14px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .step { flex-direction: column; align-items: flex-start; }
  .club-panel { width: 80%; margin-inline: auto; }
}

@media (min-width: 1280px) {
  .club-grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { flex-direction: row; align-items: center; }
  .club-panel { width: auto; }
}

/* Visit card: the info panel and the map panel. */
.sec-visit .section-title { margin-bottom: var(--s-5); }

.visit-card { display: grid; gap: var(--s-5); }

.visit-info { display: grid; gap: var(--s-4); align-content: start; }

.visit-line {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-3);
}

.visit-line > i { width: 20px; margin-top: 4px; text-align: center; }
.visit-line a { font-weight: 700; }

.visit-hours { display: grid; gap: var(--s-2); }

.hours-table { border-collapse: collapse; font-size: var(--fs-2); }
.hours-table th,
.hours-table td { padding: var(--s-1) var(--s-4) var(--s-1) 0; text-align: left; vertical-align: top; }
.hours-table th { font-weight: 500; }
.hours-table .is-today th,
.hours-table .is-today td { font-weight: 700; }

.visit-info .button-row { margin-top: 0; }
.visit-note { color: var(--text-2); font-size: var(--fs-2); }

.visit-map {
  position: relative;
  min-height: 240px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
}

.visit-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-3);
  font-size: 32px;
  transform: translate(-50%, -50%);
}

.visit-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-map-empty {
  display: grid;
  gap: var(--s-3);
  place-content: center;
  justify-items: center;
  height: 100%;
  padding: var(--s-5);
  text-align: center;
}

.visit-map-empty > i { color: var(--text-3); font-size: 32px; }

@media (min-width: 768px) {
  .visit-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 1280px) {
  .visit-card { grid-template-columns: 5fr 7fr; }
  .visit-map { aspect-ratio: 16 / 10; }
}

/* League of Comic Geeks strip */
.sec-league { --band-padding-block: var(--s-6); }

.league-strip {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
}

.league-strip .section-title { max-width: none; font-size: var(--fs-h3); }
.league-strip .section-text { margin: var(--s-2) 0 0; }

@media (max-width: 767px) {
  .league-strip .btn { width: 100%; }
}

@media (min-width: 768px) {
  .league-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    text-align: left;
  }
}

@media (min-width: 1280px) {
  .league-strip { max-width: calc(960px + 2 * var(--gutter)); }
}