/* ── Event theme variable overrides ─────────────────────────────────────── */
/* All themes use light cardstock-style paper backgrounds with a fine grain
   texture (two small radial-gradient dot layers), themed "sticker" washes in
   the corners, and a soft vignette toward the edges for a scrapbook-page feel. */

/* Christmas — cream cardstock, holly-green & cranberry corners */
body.event-christmas {
  --bg:      #fdf6ee;
  --bg2:     #f6e4d2;
  --text:    #2e1810;
  --accent:  #b3261e;
  --gold:    #2f6b3a;
  --border:  #e3c4ad;
  --muted:   #8a5a44;
  --paper:   #fffaf2;
  --shadow:  rgba(70, 35, 15, 0.18);
  background-color: #fdf6ee;
  background-image:
    radial-gradient(rgba(70,40,20,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(70,40,20,0.035) 0.5px, transparent 0.6px),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 26px,
      rgba(179,38,30,0.05) 26px, rgba(179,38,30,0.05) 28px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 26px,
      rgba(47,107,58,0.05) 26px, rgba(47,107,58,0.05) 28px
    ),
    radial-gradient(ellipse at 8%   8%,  rgba(47,107,58,0.16) 0%, transparent 30%),
    radial-gradient(ellipse at 92%  92%, rgba(179,38,30,0.14) 0%, transparent 30%),
    radial-gradient(ellipse at center, transparent 55%, rgba(70,35,15,0.05) 100%);
  background-size:
    3px 3px, 7px 7px,
    auto, auto,
    auto, auto, auto;
}

/* Birthday — blush cardstock, scattered confetti dots */
body.event-birthday {
  --bg:      #fdf7f1;
  --bg2:     #f7e6d6;
  --text:    #2e1722;
  --accent:  #c0185f;
  --gold:    #d98a00;
  --border:  #ecd0ba;
  --muted:   #9a6048;
  --paper:   #fffbf6;
  --shadow:  rgba(90, 30, 50, 0.16);
  background-color: #fdf7f1;
  background-image:
    radial-gradient(rgba(90,50,30,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(90,50,30,0.035) 0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(192,24,95,0.18)  1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(217,138,0,0.16)  1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(60,150,110,0.14) 1.5px, transparent 1.5px),
    radial-gradient(ellipse at 50% 0%, rgba(217,138,0,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at center, transparent 55%, rgba(80,40,20,0.05) 100%);
  background-size:
    3px 3px, 7px 7px,
    34px 34px, 46px 46px, 40px 40px,
    auto, auto;
  background-position:
    0 0, 2px 4px,
    0 0, 12px 18px, 24px 6px,
    0 0, 0 0;
}

/* Graduation — parchment cardstock, navy ruled lines & gold/navy corners */
body.event-graduation {
  --bg:      #f7f1e3;
  --bg2:     #ebdec3;
  --text:    #161208;
  --accent:  #1e3a6e;
  --gold:    #b8860b;
  --border:  #d9c6a0;
  --muted:   #7c6a44;
  --paper:   #fffcf3;
  --shadow:  rgba(40, 30, 10, 0.18);
  background-color: #f7f1e3;
  background-image:
    radial-gradient(rgba(60,45,15,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(60,45,15,0.035) 0.5px, transparent 0.6px),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 30px,
      rgba(30,58,110,0.05) 30px, rgba(30,58,110,0.05) 31px
    ),
    radial-gradient(ellipse at 100% 0%,   rgba(184,134,11,0.16) 0%, transparent 40%),
    radial-gradient(ellipse at 0%   100%, rgba(30,58,110,0.12)  0%, transparent 40%),
    radial-gradient(ellipse at center, transparent 55%, rgba(40,30,10,0.05) 100%);
  background-size:
    3px 3px, 7px 7px,
    auto,
    auto, auto, auto;
}

/* Wedding — ivory cardstock, blush lace lattice & gold sequin dots */
body.event-wedding {
  --bg:      #fdf8f5;
  --bg2:     #f6e6ec;
  --text:    #2e1a24;
  --accent:  #a8447a;
  --gold:    #c8952a;
  --border:  #eed4e0;
  --muted:   #a6788c;
  --paper:   #fffdfb;
  --shadow:  rgba(80, 30, 60, 0.14);
  background-color: #fdf8f5;
  background-image:
    radial-gradient(rgba(90,50,60,0.045) 0.5px, transparent 0.6px),
    radial-gradient(rgba(90,50,60,0.03)  0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(200,149,42,0.14) 1px, transparent 1px),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 22px,
      rgba(168,68,122,0.05) 22px, rgba(168,68,122,0.05) 23px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 22px,
      rgba(168,68,122,0.05) 22px, rgba(168,68,122,0.05) 23px
    ),
    radial-gradient(ellipse at 50% 0%, rgba(200,149,42,0.14) 0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 55%, rgba(80,30,60,0.04) 100%);
  background-size:
    3px 3px, 7px 7px,
    24px 24px,
    auto, auto,
    auto, auto;
}

/* Girl's Birthday — pink cardstock, hot-pink & lilac sparkle dots */
body.event-girls_birthday {
  --bg:      #fdf2f7;
  --bg2:     #f9dbe9;
  --text:    #2e1018;
  --accent:  #d6347e;
  --gold:    #b85cc0;
  --border:  #f3bdda;
  --muted:   #a85c80;
  --paper:   #fffbfd;
  --shadow:  rgba(120, 20, 70, 0.16);
  background-color: #fdf2f7;
  background-image:
    radial-gradient(rgba(110,30,60,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(110,30,60,0.035) 0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(214,52,126,0.18) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(184,92,192,0.15) 1.5px, transparent 1.5px),
    radial-gradient(ellipse at 50% 0%,   rgba(214,52,126,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 0%  100%, rgba(184,92,192,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 55%, rgba(120,20,70,0.04) 100%);
  background-size:
    3px 3px, 7px 7px,
    26px 26px, 38px 38px,
    auto, auto, auto;
}

/* Boy's Birthday — sky-blue cardstock, blue & amber star dots */
body.event-boys_birthday {
  --bg:      #f2f6fd;
  --bg2:     #ddeaf9;
  --text:    #0c1a30;
  --accent:  #1a5cc8;
  --gold:    #e08800;
  --border:  #bcd6f4;
  --muted:   #5c7ca8;
  --paper:   #fafdff;
  --shadow:  rgba(10, 40, 100, 0.14);
  background-color: #f2f6fd;
  background-image:
    radial-gradient(rgba(20,40,90,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(20,40,90,0.035) 0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(26,92,200,0.16)  1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(224,136,0,0.14)  1.5px, transparent 1.5px),
    radial-gradient(ellipse at 100% 0%,   rgba(224,136,0,0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 0%   100%, rgba(26,92,200,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 55%, rgba(10,30,80,0.04) 100%);
  background-size:
    3px 3px, 7px 7px,
    24px 24px, 36px 36px,
    auto, auto, auto;
}

/* New Year's — champagne cardstock, gold confetti & ink-spark flecks */
body.event-new_years {
  --bg:      #fdf8ec;
  --bg2:     #f3e6c4;
  --text:    #211a06;
  --accent:  #1a1410;
  --gold:    #c89a00;
  --border:  #ecd9a2;
  --muted:   #8c763a;
  --paper:   #fffdf6;
  --shadow:  rgba(60, 45, 0, 0.16);
  background-color: #fdf8ec;
  background-image:
    radial-gradient(rgba(70,55,10,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(70,55,10,0.035) 0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(200,154,0,0.22) 1px, transparent 1px),
    radial-gradient(circle, rgba(26,20,16,0.10)  1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%,   rgba(200,154,0,0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(26,20,16,0.08)  0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 55%, rgba(60,45,0,0.05) 100%);
  background-size:
    3px 3px, 7px 7px,
    22px 22px, 34px 34px,
    auto, auto, auto;
}

/* Halloween — pumpkin-cream cardstock, plum cobwebs & warm glow */
body.event-halloween {
  --bg:      #fdf2e2;
  --bg2:     #f6dfba;
  --text:    #2a1606;
  --accent:  #c84800;
  --gold:    #6a3a8a;
  --border:  #f0c898;
  --muted:   #a06830;
  --paper:   #fffaf0;
  --shadow:  rgba(90, 45, 0, 0.18);
  background-color: #fdf2e2;
  background-image:
    radial-gradient(rgba(90,45,10,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(90,45,10,0.035) 0.5px, transparent 0.6px),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 24px,
      rgba(106,58,138,0.045) 24px, rgba(106,58,138,0.045) 25px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 24px,
      rgba(106,58,138,0.045) 24px, rgba(106,58,138,0.045) 25px
    ),
    radial-gradient(ellipse at 50% 100%, rgba(200,72,0,0.18)  0%, transparent 45%),
    radial-gradient(ellipse at 0%   0%,  rgba(106,58,138,0.14) 0%, transparent 40%),
    radial-gradient(ellipse at center, transparent 55%, rgba(90,45,0,0.05) 100%);
  background-size:
    3px 3px, 7px 7px,
    auto, auto,
    auto, auto, auto;
}

/* 4th of July — sky-blue cardstock, red/navy stars & bunting wash */
body.event-fourth_of_july {
  --bg:      #f3f7ff;
  --bg2:     #dde9fb;
  --text:    #0a1830;
  --accent:  #c8102e;
  --gold:    #002868;
  --border:  #bcd4f4;
  --muted:   #4a6a9c;
  --paper:   #fbfdff;
  --shadow:  rgba(10, 30, 80, 0.14);
  background-color: #f3f7ff;
  background-image:
    radial-gradient(rgba(10,30,70,0.05)  0.5px, transparent 0.6px),
    radial-gradient(rgba(10,30,70,0.035) 0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(0,40,104,0.16)  1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(200,16,46,0.14) 1.5px, transparent 1.5px),
    radial-gradient(ellipse at 50% 0%,   rgba(200,16,46,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0,40,104,0.12)  0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 55%, rgba(10,30,80,0.04) 100%);
  background-size:
    3px 3px, 7px 7px,
    26px 26px, 38px 38px,
    auto, auto, auto;
}

/* ── Festive gallery title ── */
.site-title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  text-shadow: 2px 3px 0 var(--bg2), 3px 5px 8px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.title-icon {
  font-size: 0.85em;
  line-height: 1;
  animation: icon-bob 2.4s ease-in-out infinite;
  display: inline-block;
}
.title-icon:last-child {
  animation-delay: 1.2s;
}

@keyframes icon-bob {
  0%, 100% { transform: translateY(0)    rotate(-4deg); }
  50%       { transform: translateY(-6px) rotate(4deg);  }
}

/* ── Section heading ── */
.section-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--muted);
}

/* ── Count badge ── */
#photo-count {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
}


/* ── Empty state ── */
#empty-msg {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ── Scrapbook grid: extra row gap for tape strips ── */
.gallery-grid {
  row-gap: 2.8rem !important;
}

/* ── Column: elevate on hover so card isn't clipped by siblings ── */
.col {
  position: relative;
  transition: z-index 0s 0.25s, opacity 1.2s ease;
}
.col:hover {
  z-index: 20;
  transition: z-index 0s, opacity 1.2s ease;
}

/* ── Per-card delete button ── */
.photo-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 25;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(160, 20, 20, 0.82);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s, background 0.15s;
}
.col:hover .photo-delete-btn { opacity: 1; }
.photo-delete-btn:hover { background: rgba(180, 10, 10, 1); }

/* ── Scrapbook photo card ── */
.photo-card {
  display: block;
  text-decoration: none;
  position: relative;
  background: #fff;
  border: none;
  border-radius: 1px;
  padding: 8px 8px 0;   /* white frame: top + sides only */
  overflow: visible;
  cursor: pointer;
  transform-origin: center 85%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:
    2px 4px 8px  rgba(0,0,0,0.18),
    0  1px 3px   rgba(0,0,0,0.10);
}

/* ── Tape strip ── */
.photo-card::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 58px;
  height: 20px;
  background: rgba(255, 253, 210, 0.78);
  border: 1px solid rgba(190, 175, 110, 0.30);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  z-index: 2;
}

/* Vary tape angle per card */
.col:nth-child(5n+1) .photo-card::before { transform: translateX(-50%) rotate(-2.5deg); }
.col:nth-child(5n+2) .photo-card::before { transform: translateX(-50%) rotate( 1.8deg); }
.col:nth-child(5n+3) .photo-card::before { transform: translateX(-50%) rotate(-3.5deg); }
.col:nth-child(5n+4) .photo-card::before { transform: translateX(-50%) rotate( 2.2deg); }
.col:nth-child(5n+5) .photo-card::before { transform: translateX(-50%) rotate(-1.2deg); }

/* Alternating card tilts */
.col:nth-child(5n+1) .photo-card { transform: rotate(-3.2deg); }
.col:nth-child(5n+2) .photo-card { transform: rotate( 2.5deg); }
.col:nth-child(5n+3) .photo-card { transform: rotate(-1.6deg); }
.col:nth-child(5n+4) .photo-card { transform: rotate( 3.1deg); }
.col:nth-child(5n+5) .photo-card { transform: rotate(-2.4deg); }

/* Lift and straighten on hover */
.photo-card:hover {
  transform: rotate(0deg) scale(1.07) !important;
  box-shadow:
    6px 14px 28px rgba(0,0,0,0.28),
    0   3px  6px  rgba(0,0,0,0.14);
}

.photo-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;
}

/* On mobile (1 col) reduce card tilt so full-width cards don't clip */
@media (max-width: 575.98px) {
  .col:nth-child(5n+1) .photo-card { transform: rotate(-1.5deg); }
  .col:nth-child(5n+2) .photo-card { transform: rotate( 1.2deg); }
  .col:nth-child(5n+3) .photo-card { transform: rotate(-1.0deg); }
  .col:nth-child(5n+4) .photo-card { transform: rotate( 1.5deg); }
  .col:nth-child(5n+5) .photo-card { transform: rotate(-0.8deg); }
}

.photo-card-body { display: none; }
.photo-card-body:not(:empty) {
  display: block;
  padding: 0.35rem 0.5rem 0.45rem;
  background: #fff;
}

.photo-date {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.65rem;
  font-style: italic;
  color: #666;
  font-variant-numeric: tabular-nums;
}

/* ── Pagination ── */
.gallery-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.page-btn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 14px;
  transition: color 0.15s, border-color 0.15s;
}
a.page-btn:hover { color: var(--accent); border-color: var(--accent); }
.page-btn.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.page-info {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

/* ── Gallery page container ── */
.gallery-container { max-width: 1400px; }

/* ── Gallery empty state ── */
.gallery-empty {
  color: var(--muted);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .1em;
}

/* ── Photo detail page ── */
.photo-detail-container { max-width: 520px; }

.photo-detail-card {
  cursor: default;
  width: 100%;
}
.photo-detail-card:hover {
  transform: none !important;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10) !important;
}