/* ============================================================================
   Pack Gallery — packs.php
   Dark / immersive register. Year-agnostic (no per-year file needed).
   ============================================================================ */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --pg-dark-1:  #2f2e32;
  --pg-dark-2:  #18171b;
  --pg-dark-3:  #010104;
  --pg-yellow:  #ffd203;
  --pg-blue:    #347bb7;
  --pg-green:   #5db85d;
  --pg-red:     #d94545;
  --pg-radius:  10px;
  --pg-tile-w:  220px;
  --pg-art-h:   270px;
}

/* ---- Page shell ----------------------------------------------------------- */
#packs { background: var(--pg-dark-3); min-height: 100vh; padding-bottom: 60px; }

/* Override the global section.container white-card rule from essential.css */
#packs section#content.container {
  background-color: transparent;
  border: none;
  border-radius: 0;
  max-width: 1200px;
}

/* ---- Title bar ------------------------------------------------------------ */
.packs-header { padding: 32px 0 20px; }

.packs-title {
  font-family: "DinProCondensedMedium", "Open Sans", sans-serif;
  font-size: 2.6rem; font-weight: 600; color: #fff;
  margin: 0; line-height: 1; letter-spacing: .01em;
}

/* Year chip — inline span inside the h1, so it inherits the heading's font */
.packs-year-chip { position: relative; display: inline-block; vertical-align: baseline; }

.packs-year-btn {
  font: inherit;                       /* match h1 size and weight */
  color: var(--pg-yellow);
  background: none; border: none; cursor: pointer;
  padding: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .12s;
}
.packs-year-btn:hover { color: #ffe14d; }
.packs-year-btn .caret {
  width: 18px; height: 18px; opacity: .8;
  transition: transform .16s;
  flex-shrink: 0;
}
.packs-year-btn.open .caret { transform: rotate(180deg); }

/* Year dropdown menu */
.packs-year-dropdown {
  display: none; position: absolute; top: calc(100% + 12px); left: 0;
  background: #1b1a22; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; min-width: 170px; z-index: 100;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  overflow: hidden;
}
.packs-year-dropdown.open { display: block; }
.packs-year-dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 14px; color: #ccc; text-decoration: none;
  font-size: 0.9rem; font-weight: 500; transition: background .1s;
}
.packs-year-dropdown a:hover { background: rgba(255,255,255,.08); color: #fff; }
.packs-year-dropdown a.active { color: var(--pg-yellow); }
.packs-year-dropdown .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pg-green);
  display: inline-block; flex-shrink: 0;
}

/* ---- Archive subtitle ----------------------------------------------------- */
.packs-archive-note {
  font-size: 0.85rem; color: rgba(255,255,255,.45);
  margin: 0 0 24px;
}

/* ---- Featured hero banner ------------------------------------------------- */
.packs-featured {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 268px;
  isolation: isolate;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  padding: 40px 48px;
  margin-bottom: 40px;
}

/* Background gradient (.fbg, z-index: -2) — tinted by pack accent colors */
.packs-featured .fbg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(800px 420px at 78% 30%, color-mix(in srgb, var(--acc, #ffd203) 55%, transparent), transparent 60%),
    radial-gradient(700px 460px at 20% 80%, color-mix(in srgb, var(--acc2, #8a6410) 60%, transparent), transparent 62%),
    linear-gradient(120deg,
      color-mix(in srgb, var(--acc2, #8a6410) 28%, #0c0b10) 0%,
      color-mix(in srgb, var(--acc2, #8a6410) 18%, #100a16) 45%,
      color-mix(in srgb, var(--acc2, #8a6410)  8%, #060308) 100%
    );
}

/* Rotating light rays (.frays, z-index: -1) */
.packs-featured .frays {
  position: absolute; inset: -40% -10%; z-index: -1; opacity: .5;
  background: conic-gradient(
    from 200deg at 72% 42%,
    rgba(255,255,255,.10) 0deg,   transparent 20deg,
    rgba(255,255,255,.07) 40deg,  transparent 60deg,
    rgba(255,255,255,.10) 100deg, transparent 120deg,
    rgba(255,255,255,.07) 160deg, transparent 180deg,
    rgba(255,255,255,.10) 220deg, transparent 240deg,
    rgba(255,255,255,.07) 280deg, transparent 300deg
  );
  animation: spin 28s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pack halo glow (.fglow, z-index: -1) */
.packs-featured .fglow {
  position: absolute;
  width: 340px; height: 340px; border-radius: 50%;
  right: 7%; top: 50%; transform: translateY(-50%);
  z-index: -1;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--acc, #ffd203) 45%, transparent) 0%,
    color-mix(in srgb, var(--acc2, #8a6410) 18%, transparent) 45%,
    transparent 70%
  );
  filter: blur(6px);
  animation: breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 800px) { .packs-featured .fglow { display: none; } }
@keyframes breathe {
  0%, 100% { transform: translateY(-50%) scale(1);    opacity: .85; }
  50%       { transform: translateY(-50%) scale(1.08); opacity: 1;   }
}

/* Shine sweep (.fshine, z-index: 1) */
.packs-featured .fshine {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 16px; overflow: hidden; pointer-events: none;
}
.packs-featured .fshine::after {
  content: '';
  position: absolute;
  width: 40%; height: 220%; top: -60%; left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg);
  animation: heroSweep 5.5s ease-in-out infinite;
}
@keyframes heroSweep {
  0%, 70% { left: -60%; opacity: 0; }
  78%      { opacity: 1; }
  100%     { left: 130%; opacity: 0; }
}

/* Text content — left side */
.packs-featured .featured-body {
  position: relative; z-index: 2;
  max-width: 60%; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}

/* Tag pill (.ftag) */
.packs-featured .ftag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
  border-radius: 9999px; padding: 5px 12px; margin-bottom: 16px;
}

/* Headline */
.packs-featured h2 {
  font-family: var(--font-display, "DinProCondensedMedium", "Open Sans", sans-serif);
  font-weight: 600; font-size: 40px; line-height: 1.02; letter-spacing: .01em;
  margin: 0 0 10px; color: #fff;
}

/* Supporting line (.fmeta) */
.packs-featured .fmeta {
  color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.5;
  max-width: 380px; margin: 0 0 20px;
}

/* CTA row */
.packs-featured-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Open button (.fopen) */
.packs-featured .fopen {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--acc, #ffd203); color: var(--acc-text, #111);
  border: none; border-radius: 8px; padding: 10px 22px;
  font-weight: 800; font-size: 0.95rem; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.packs-featured:hover .fopen {
  transform: translateX(3px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--acc, #ffd203) 50%, transparent);
  color: var(--acc-text, #111); text-decoration: none;
}

/* Floating pack artwork (.fpackwrap) */
.packs-featured .fpackwrap {
  position: absolute; right: 3%; top: 20px; bottom: 20px; z-index: 2;
  display: flex; align-items: center;
  animation: floaty 6s ease-in-out infinite;
}
.packs-featured .fpackwrap img {
  width: auto; max-width: 184px; max-height: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ---- Controls bar (sort) -------------------------------------------------- */
.packs-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.packs-count { font-size: 0.82rem; color: rgba(255,255,255,.4); }
.packs-sort {
  background: var(--pg-dark-1); border: 1px solid rgba(255,255,255,.12);
  color: #ddd; border-radius: 6px; padding: 6px 12px;
  font-size: 0.85rem; cursor: pointer;
}
.packs-sort:focus { outline: none; border-color: var(--pg-yellow); }

/* ---- Pack grid ------------------------------------------------------------ */
.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pg-tile-w), 1fr));
  gap: 20px;
}

/* ---- Pack tile ------------------------------------------------------------ */
.pack-tile {
  background: var(--pg-dark-1); border-radius: var(--pg-radius);
  border: 1px solid transparent;
  overflow: hidden; cursor: pointer; position: relative;
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s cubic-bezier(.22,1,.36,1),
              border-color .25s;
  text-decoration: none; display: flex; flex-direction: column; color: inherit;
}
.pack-tile:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--acc, #ffd203) 55%, transparent);
  box-shadow:
    0 18px 44px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb, var(--acc, #ffd203) 45%, transparent),
    0 12px 40px color-mix(in srgb, var(--acc, #ffd203) 38%, transparent);
  text-decoration: none; color: inherit;
}

/* Art area — dark radial with a subtle accent bloom, matching the prototype */
.pack-tile-art {
  position: relative; height: var(--pg-art-h); overflow: hidden;
  background: radial-gradient(circle at 50% 34%,
    color-mix(in srgb, var(--acc, #ffd203) 26%, #0a0a0f) 0%,
    #0a0a0f 58%, #060509 100%);
  display: flex; align-items: center; justify-content: center;
}

/* Rotating rays behind the pack */
.pack-tile-rays {
  position: absolute; inset: -50%; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--acc, #ffd203) 6%, transparent) 20deg,
    transparent 40deg,
    color-mix(in srgb, var(--acc, #ffd203) 4%, transparent) 60deg,
    transparent 80deg
  );
  animation: tile-rays 20s linear infinite;
  pointer-events: none;
}
@keyframes tile-rays { to { transform: rotate(360deg); } }

/* Halo glow */
.pack-tile-halo {
  position: absolute; width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc, #ffd203) 35%, transparent) 0%, transparent 70%);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.pack-tile:hover .pack-tile-halo { opacity: 1.4; transform: scale(1.2); }

/* Pack image — object-fit: contain so portrait boxes are never cropped */
.pack-tile-img {
  position: relative; z-index: 1;
  width: 80%; max-width: 140px; height: 90%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.pack-tile:hover .pack-tile-img { transform: translateY(-5px) scale(1.04); }

/* Placeholder box (shown when no image is set) */
.pack-tile-placeholder {
  position: relative; z-index: 1;
  width: 110px; height: 154px;
  border-radius: 8px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--acc, #ffd203) 55%, #fff) 0%,
    color-mix(in srgb, var(--acc2, #8a6410) 80%, #000) 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.pack-tile:hover .pack-tile-placeholder { transform: translateY(-5px) scale(1.04); }
.pack-tile-placeholder .spine {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 0.55rem; font-weight: 700; letter-spacing: .12em;
  color: rgba(0,0,0,.5); text-transform: uppercase;
}
.pack-tile-placeholder .emblem {
  font-size: 1.6rem; opacity: .35;
}

/* Shine sweep on hover */
.pack-tile-shine {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.pack-tile:hover .pack-tile-shine { animation: shine-sweep .55s forwards; }
@keyframes shine-sweep { to { transform: translateX(150%); } }

/* Availability badge (top-right in art area) */
.pack-tile-badge {
  position: absolute; top: 10px; right: 10px; z-index: 3;
}
.pack-tile-badge .avail-badge {
  display: inline-block; padding: 3px 9px;
  border-radius: 20px; font-size: 0.68rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap; backdrop-filter: blur(4px);
}
.avail-badge[data-type="dates"]     { background: rgba(52,123,183,.85); color: #fff; }
.avail-badge[data-type="recurring"] { background: rgba(93,184,93,.85);  color: #fff; }
.avail-badge[data-type="hidden"]    { background: rgba(80,80,80,.85);   color: #ccc; }
.avail-badge:empty { display: none; }

/* Info area — flex:1 so it always fills the remaining tile height */
.pack-tile-info {
  padding: 14px 15px 15px;
  background: linear-gradient(180deg, #16151c, #121118);
  flex: 1; display: flex; flex-direction: column;
}
.pack-tile-name {
  font-family: "DinProCondensedMedium", "Open Sans", sans-serif;
  font-size: 1.2rem; font-weight: 600; color: #fff; letter-spacing: .01em;
  margin: 0 0 3px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pack-tile-meta {
  font-size: 0.78rem; color: rgba(255,255,255,.5); margin: 0 0 12px; line-height: 1.5;
}
.pack-tile-footer {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: auto;            /* pushes footer to the bottom of the flex info column */
}
/* Ghost button normally; fills with accent on tile hover */
.pack-tile-open {
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--acc, #ffd203) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, #ffd203) 50%, transparent);
  color: var(--acc-text, #fff);          /* contrast-aware text set per-tile by PHP */
  border-radius: 6px; padding: 6px 13px;
  font-size: 0.8rem; font-weight: 800;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.pack-tile:hover .pack-tile-open {
  background: var(--acc, #ffd203);
  border-color: var(--acc, #ffd203);
  color: #0c0b10;                        /* always dark on filled accent */
  text-decoration: none;
}
.pack-tile-open .arrow { font-size: 0.75rem; }

/* ---- Empty state ---------------------------------------------------------- */
.packs-empty {
  text-align: center; padding: 60px 20px; color: rgba(255,255,255,.35);
}
.packs-empty p { margin: 8px 0 0; font-size: 0.9rem; }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pack-tile-rays,
  .packs-featured .frays,
  .packs-featured .fglow,
  .packs-featured .fshine::after,
  .packs-featured .fpackwrap { animation: none; }
  .pack-tile:hover .pack-tile-shine { animation: none; }
  .pack-tile { transition: box-shadow .15s; }
  .pack-tile:hover { transform: none; }
  .packs-featured .fpackwrap { transform: none; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
  .packs-featured { padding: 28px 20px; min-height: auto; }
  .packs-featured .featured-body { max-width: 100%; }
  .packs-featured .fpackwrap {
    position: relative; right: auto; top: auto;
    align-self: center; margin-bottom: 8px;
    animation: none; transform: none;
  }
  .packs-featured .fpackwrap img { width: 120px; height: auto; }
  .packs-title { font-size: 1.7rem; }
  .packs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  :root { --pg-art-h: 220px; }
}