/* Gallery tiles and the shared #lightbox modal (templates/components/lightbox.html,
   static/js/components/lightbox.js). Used by the homepage and the gallery pages. */

/* Gallery — fixed-ratio crops so mixed-shape photos form an even grid.
   Each tile is a <button> so it's keyboard-focusable; clicking opens the
   #lightbox modal. The shadow lives on the tile (not the img) because the
   img scales inside an overflow:hidden frame on hover. */
/* :not(:disabled) raises specificity above Bootstrap's own
   button:not(:disabled) { cursor: pointer }. */
.gallery-item:not(:disabled) {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.75rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gallery-item:hover .gallery-img,
.gallery-item:focus-visible .gallery-img {
  transform: scale(1.05);
}

.gallery-item:hover .gallery-zoom,
.gallery-item:focus-visible .gallery-zoom {
  opacity: 1;
}

.gallery-item:focus-visible {
  outline: 3px solid var(--primary-color, #4e6bff);
  outline-offset: 3px;
}

/* Touch screens have no hover, so the overlay would just stick after a tap. */
@media (hover: none) {
  .gallery-zoom {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-img,
  .gallery-zoom,
  .lightbox-nav {
    transition: none;
  }

  .gallery-item:hover .gallery-img,
  .gallery-item:focus-visible .gallery-img {
    transform: none;
  }
}

/* Lightbox */
.modal-backdrop {
  --bs-backdrop-opacity: 0.88;
}

.lightbox-modal .modal-content {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  margin: 0 auto;
  object-fit: contain;
  cursor: zoom-out;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

/* Square like the artwork it frames. Fixed to the viewport edges rather than
   the image, so they stay put as differently-shaped images swap in. */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.25rem;
  transition: background-color 0.2s ease;
}

/* display:flex above would otherwise beat the UA's [hidden] rule. */
.lightbox-nav[hidden] {
  display: none;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

/* Gallery index page — tiles link to each artwork's own page. Square frames
   with object-fit: contain show every piece whole (no crop) while keeping
   the grid even. */
.gallery-header,
.artwork-header {
  text-align: center;
  margin-bottom: 2rem;
}

.gallery-title,
.artwork-title {
  /* Literal font, as .home-section-title: both theme files define
     --body-font on :root, so the variable isn't reliably Fondamento. */
  font-family: "Fondamento", cursive;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
}

.gallery-intro {
  max-width: 40rem;
  margin: 0 auto;
}

.gallery-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

.gallery-tile-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery-tile-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s ease;
}

.gallery-tile-title {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
}

.gallery-tile:hover .gallery-tile-img,
.gallery-tile:focus-visible .gallery-tile-img {
  transform: scale(1.03);
}

.gallery-tile:hover .gallery-tile-title {
  text-decoration: underline;
}

.gallery-tile:focus-visible {
  outline: 3px solid var(--primary-color, #4e6bff);
  outline-offset: 3px;
}

/* Artwork detail page */
.artwork-meta {
  opacity: 0.8;
  font-style: italic;
  margin-bottom: 0;
}

/* The whole piece, uncropped, sized to the image rather than the column so
   the shadow hugs it. Overrides the homepage tile's full-width block. */
.gallery-item.artwork-figure:not(:disabled) {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2.5rem;
}

.artwork-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
}

/* The poem, set out exactly as written: pre-wrap keeps line breaks, blank
   lines between stanzas and leading indentation, while still wrapping a
   line too long for a phone. */
.artwork-poem {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2.5rem;
  font-size: 1.15rem;
  line-height: 1.8;
}

/* Cosmic body text is already Fondamento; stated here so the poem keeps it
   even if the body font changes. Minimalist uses its own body font. */
.theme-cosmic .artwork-poem {
  font-family: "Fondamento", cursive;
}

.artwork-notes {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.artwork-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 50rem;
  margin: 0 auto;
}

.artwork-pager-next {
  text-align: right;
}

@media (max-width: 575.98px) {
  /* Stack on phones: back-to-gallery first, then prev/next side by side. */
  .artwork-pager {
    grid-template-columns: 1fr 1fr;
  }

  .artwork-pager-index {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-tile-img {
    transition: none;
  }

  .gallery-tile:hover .gallery-tile-img,
  .gallery-tile:focus-visible .gallery-tile-img {
    transform: none;
  }
}

.artwork-pager a {
  color: inherit;
  text-decoration: none;
}

.artwork-pager a:hover,
.artwork-pager a:focus-visible {
  text-decoration: underline;
}

/* Artwork page: the products made from the piece (#33). Brand-styled cards
   rather than Oscar's product_pod, whose CSS isn't loaded on Wagtail pages. */
.artwork-products {
  max-width: 60rem;
  margin: 0 auto 3rem;
}

.artwork-products-title {
  font-family: "Fondamento", cursive;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  text-align: center;
  margin-bottom: 1.5rem;
}

.product-card {
  display: block;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.product-card-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.product-card-title,
.product-card-price {
  display: block;
}

.product-card-title {
  margin-top: 0.75rem;
}

.product-card-price {
  opacity: 0.85;
}

.product-card:hover .product-card-title,
.product-card:focus-visible .product-card-title {
  text-decoration: underline;
}

.product-card:focus-visible {
  outline: 3px solid var(--primary-color, #4e6bff);
  outline-offset: 3px;
}

/* ---------- Filter chips (gallery: by artist) #46 ---------- */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.filter-chip {
  padding: 0.35rem 0.95rem;
  border: 1px solid rgba(143, 176, 255, 0.3);
  border-radius: 9999px;
  color: inherit;
  text-decoration: none;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
}

.theme-minimalist .filter-chip {
  border-color: #dfe6e9;
}

.filter-chip:hover {
  color: inherit;
  border-color: #4e6bff;
}

.filter-chip.is-current {
  background: #4e6bff;
  border-color: #4e6bff;
  color: #fff;
}

.theme-minimalist .filter-chip.is-current,
.theme-minimalist .filter-chip:hover {
  border-color: #6c5ce7;
}

.theme-minimalist .filter-chip.is-current {
  background: #6c5ce7;
}

@media (max-width: 767.98px) {
  .filter-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

  .filter-chip {
    white-space: nowrap;
  }
}

/* ---------- Artist credit on artwork pages ---------- */

.artist-credit {
  font-style: italic;
  margin-bottom: 0.25rem;
}

.artist-credit a,
.artist-members a,
.artist-groups a,
.artist-section-title a {
  color: inherit;
}

/* ---------- Artist pages #46 ---------- */

/* With a hero video the hero already clears the fixed navbar (as on the
   homepage), so the page starts right beneath it. */
.template-artistpage.has-hero .page-container {
  margin-top: 0;
  padding-top: 0;
}

/* The blended video is a background texture, not a focal point: like the
   homepage title, the portrait and name sit over its lower half. The pull-up
   is ~45% of the hero's height (hero-video.css sets that height with the
   same clamps). Positioned on .artist, never on the hero itself, whose blend
   needs it to stay un-isolated (see hero-video.css). */
.template-artistpage.has-hero .artist {
  position: relative;
  z-index: 1;
  margin-top: calc(-0.55 * clamp(320px, 60vh, 640px));
}

@media (max-width: 768px) {
  .template-artistpage.has-hero .artist {
    margin-top: calc(-0.55 * clamp(280px, 50vh, 480px));
  }
}

/* Same soft shadow as the homepage hero title, for legibility over video. */
.template-artistpage.has-hero .artist-name,
.template-artistpage.has-hero .artist-members,
.template-artistpage.has-hero .artist-groups {
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.9);
}

.theme-minimalist.template-artistpage.has-hero .artist-name,
.theme-minimalist.template-artistpage.has-hero .artist-members,
.theme-minimalist.template-artistpage.has-hero .artist-groups {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 24px rgba(255, 255, 255, 0.7);
}

.artist {
  max-width: 60rem;
  margin: 0 auto;
}

.artist-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.artist-header.has-portrait {
  flex-direction: row;
  justify-content: center;
  text-align: left;
}

.artist .gallery-grid {
  justify-content: center;
}

.artist-portrait {
  width: clamp(9rem, 22vw, 14rem);
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.artist-name {
  /* Literal font, as the gallery titles: the theme --body-font collides. */
  font-family: "Fondamento", cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.25rem;
}

.artist-members,
.artist-groups {
  margin: 0;
  opacity: 0.85;
}

.artist-about {
  max-width: 42rem;
  margin: 0 auto 3rem;
}

.artist-works {
  margin-bottom: 3rem;
}

.artist-section-title {
  font-family: "Fondamento", cursive;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  text-align: center;
  margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
  .artist-header.has-portrait {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- Artists index ---------- */

.artist-card {
  display: block;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.artist-card:hover {
  color: inherit;
}

.artist-card-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(143, 176, 255, 0.2);
}

.artist-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.artist-card:hover .artist-card-frame img {
  transform: scale(1.03);
}

.artist-card-initial {
  font-family: "Great Vibes", cursive;
  font-size: 5rem;
  opacity: 0.6;
}

.artist-card-name {
  display: block;
  margin-top: 0.85rem;
  font-family: "Fondamento", cursive;
  font-size: 1.35rem;
}

.artist-card:hover .artist-card-name {
  text-decoration: underline;
}

.artist-card-about {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .artist-card-frame img {
    transition: none;
  }

  .artist-card:hover .artist-card-frame img {
    transform: none;
  }
}

/* ---------- Section dividers (artist and artwork pages) ---------- */

/* A hairline that fades out at both ends, with a small four-point star at
   its centre: quiet separation in keeping with the starfield. Colour comes
   from --divider-color per theme. */
.section-divider {
  --divider-color: rgba(201, 184, 255, 0.45);
  position: relative;
  width: min(32rem, 70%);
  height: 1px;
  margin: 0 auto 2.5rem;
  border: 0;
  opacity: 1;
  overflow: visible;
  /* Gap at the centre for the star (no background can mask the starfield). */
  background: linear-gradient(
    to right,
    transparent,
    var(--divider-color) 30%,
    var(--divider-color) calc(50% - 0.9rem),
    transparent calc(50% - 0.9rem),
    transparent calc(50% + 0.9rem),
    var(--divider-color) calc(50% + 0.9rem),
    var(--divider-color) 70%,
    transparent
  );
}

.theme-minimalist .section-divider {
  --divider-color: rgba(45, 52, 54, 0.22);
}

/* The star is drawn with clip-path rather than a "✦" character: no site
   font has that glyph, and some phone browsers (e.g. on Android) have no
   fallback font for it either, so the character could silently vanish. */
.section-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  transform: translate(-50%, -50%);
  background: var(--divider-color);
  /* Four slender points, like ✦. */
  clip-path: polygon(
    50% 0%,
    57% 43%,
    100% 50%,
    57% 57%,
    50% 100%,
    43% 57%,
    0% 50%,
    43% 43%
  );
}

/* Sections keep their own bottom spacing; the divider supplies the gap above
   the next one, so they don't double up. */
.artist-about {
  margin-bottom: 2.5rem;
}

/* ---------- Cosmic: text shadows over the starfield ---------- */

/* A soft dark shadow plus a faint glow lifts text off the starfield and
   gradient. Set on <main> so all text inherits it; headings get a little
   more. Minimalist's light background doesn't need it. More specific rules
   (e.g. the artist name over a hero video) keep their own shadows. */
.theme-cosmic.template-galleryindexpage main,
.theme-cosmic.template-artworkpage main,
.theme-cosmic.template-artistpage main,
.theme-cosmic.template-artistsindexpage main {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 10px rgba(0, 0, 0, 0.45);
}

.theme-cosmic.template-galleryindexpage main :is(h1, h2, h3),
.theme-cosmic.template-artworkpage main :is(h1, h2, h3),
.theme-cosmic.template-artistpage main :is(h1, h2, h3),
.theme-cosmic.template-artistsindexpage main :is(h1, h2, h3) {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 16px rgba(0, 0, 0, 0.55);
}