/* Giga — photo gallery cards of the homepage: the gallery card rules of cms.css that the homepage needs (it does not load cms.css). A change to one of these rules goes in both files. */

/* ==========================================================================
   CMS variables mapped to the theme tokens
   ========================================================================== */

:root {
  --bg: var(--ink);
  --bg-surface: var(--ink-2);
  --bg-card: var(--velvet);
  --bg-dark: var(--ink);
  --text: var(--tx);
  --text-muted: var(--tx-2);
  --text-light: var(--tx-3);
  --border: var(--line);
  --border-light: var(--line-soft);
  --primary-dark: var(--cta-a);
  --primary-light: rgba(var(--mag-rgb), 0.16);
  --primary-rgb: var(--mag-rgb);
  --success: #34d6a6;
  --danger: #ff4b3e;
  --warning: #ffc857;
  --radius: 12px;
  --radius-lg: 16px;
  --card-gap: 12px;
  --card-radius: var(--r-card);
  --shadow: 0 1px 3px rgba(var(--shade-rgb), calc(0.4 * var(--shade-k)));
  --shadow-md: 0 8px 24px -8px rgba(var(--shade-rgb), calc(0.6 * var(--shade-k)));
  --shadow-lg: 0 20px 50px -20px rgba(var(--shade-rgb), calc(0.8 * var(--shade-k)));
  --shadow-soft: 0 10px 30px -14px rgba(var(--shade-rgb), calc(0.7 * var(--shade-k)));
  --shadow-pop: 0 24px 60px -18px rgba(var(--shade-rgb), calc(0.85 * var(--shade-k)));
  --max-width: 1800px;
  --header-height: var(--h-main, 56px);
  --alb-v-accent: var(--mag);
  --album-cols: 5;
}

/* ==========================================================================
   Gallery cards
   ========================================================================== */

body.alb-no-hover .album-card:hover .album-card__thumb img {
  transform: none;
}
body.alb-title-1 .album-card__title {
  -webkit-line-clamp: 1;
}
.album-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.album-card__meta-i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.album-card__meta i,
.album-card__meta .ico {
  font-size: 10px;
  color: var(--primary, #2563eb);
}
.album-card {
  display: block;
  background: var(--bg-card, #fff);
  border-radius: var(--album-card-radius, var(--card-radius, 12px));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(var(--shade-rgb), calc(0.08 * var(--shade-k))));
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.album-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop, 0 8px 24px rgba(var(--shade-rgb), calc(0.15 * var(--shade-k))));
}
.album-card__thumb {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--bg-surface, #f1f5f9);
  overflow: hidden;
}
.album-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.3s;
}
.album-card:hover .album-card__thumb img {
  transform: scale(1.04);
}
.album-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted, #94a3b8);
  font-size: 2rem;
}
.album-card__count {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #000000b8;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.album-card__count i,
.album-card__count .ico {
  color: var(--primary, #2563eb);
}
.album-card__info {
  padding: 8px 10px;
}
.album-card__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.album-grid.is-masonry .album-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--album-card-gap, var(--card-gap, 4px));
  break-inside: avoid;
}
.album-grid.is-masonry .album-card__thumb {
  aspect-ratio: auto;
}
.album-grid.is-masonry .album-card__thumb img {
  height: auto;
}
[data-theme="dark"] .album-card__thumb img {
  opacity: 1;
}
.album-card__thumb img {
  background: var(--bg-surface, #f1f5f9);
}
.album-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--primary-dark, var(--primary, #2563eb));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(var(--shade-rgb), calc(0.25 * var(--shade-k)));
  pointer-events: none;
}
[dir="rtl"] .album-card__badge {
  left: auto;
  right: 8px;
}
.album-card__who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text, #1e293b);
}
.album-card__meta {
  white-space: nowrap;
  min-width: 0;
}
.album-card__meta-i {
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .album-card__who ~ .album-card__meta-i ~ .album-card__meta-i {
    display: none;
  }
}
.album-card__count {
  transition: opacity 0.15s;
}
.album-card__scrub {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  z-index: 2;
  height: 3px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.album-card__scrub i,
.album-card__scrub .ico {
  flex: 1;
  border-radius: 2px;
  background: #ffffff6b;
  box-shadow: 0 0 2px #00000059;
}
.album-card__scrub i.is-on,
.album-card__scrub .ico.is-on {
  background: #fff;
}
.album-card.is-scrubbing .album-card__scrub {
  opacity: 1;
}
.album-card.is-scrubbing .album-card__count {
  opacity: 0;
}
.album-card.is-scrubbing .album-card__thumb img {
  transform: none !important;
  transition: none;
}
.album-card:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}
.album-card.album-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  color: inherit;
}
.album-card.album-row:hover {
  background: var(--bg-card, #fff);
  box-shadow: none;
}
.album-card.album-row--big {
  padding: 10px;
  gap: 14px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
}
.album-card.album-row--big:hover {
  border-color: var(--primary, #2563eb);
}
@media (min-width: 901px) {
  .album-related .album-card.is-upnext {
    display: none;
  }
}
@media (min-width: 1201px) {
  .album-more__grid > a.album-card:nth-of-type(n + 7) {
    display: none;
  }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .album-more__grid > a.album-card:nth-of-type(n + 5) {
    display: none;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  .album-more__grid > a.album-card:nth-of-type(n + 4) {
    display: none;
  }
}
@media (max-width: 560px) {
  .album-more__grid > a.album-card:nth-of-type(n + 5) {
    display: none;
  }
}
.album-card__badge[hidden] {
  display: none !important;
}

/* ==========================================================================
   Gallery grid
   ========================================================================== */

.agrid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 18px 12px;
}
@media (min-width: 700px) {
  .agrid {
    --cols: 3;
  }
}
@media (min-width: 1024px) {
  .agrid {
    --cols: 4;
  }
}
@media (min-width: 1400px) {
  .agrid {
    --cols: 5;
  }
}
@media (min-width: 1800px) {
  .agrid {
    --cols: 6;
  }
}
.agrid > .album-card,
.agrid > .giga-infeed {
  min-width: 0;
}
@media (max-width: 699px) {
  .agrid--home > a.album-card:nth-of-type(n + 5) {
    display: none;
  }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .agrid--home > a.album-card:nth-of-type(n + 7) {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .agrid--home > a.album-card:nth-of-type(n + 9) {
    display: none;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  .agrid--home > a.album-card:nth-of-type(n + 11) {
    display: none;
  }
}
.album-card .ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}