/* Custom styles — Tailwind utilities preferred, use this file for overrides */

html { scroll-behavior: smooth; }

/* ─── Font-family utilities ───────────────────────────── */
/* Used in place of repeated inline style="font-family:…" attributes */
.ff-fraunces {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.ff-inter     { font-family: 'Inter', sans-serif; }
.ff-montserrat { font-family: 'Montserrat', sans-serif; }
.ff-helvetica  { font-family: 'Helvetica', sans-serif; }

/* Timeline dots */
.tl-dot { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 92px; padding: 16px 8px 8px; cursor: pointer; background: none; border: none; }
.tl-dot-pip { display: block; border-radius: 9999px; transition: all 0.3s; }
.tl-dot-label { font-family: 'Montserrat', sans-serif; font-size: 13px; tracking: 0.52px; transition: all 0.3s; text-align: center; }
.tl-dot.active .tl-dot-pip { width: 15.5px; height: 15.5px; background: #c8a03a; box-shadow: 0 0 0 5px rgba(200,160,58,0.18); }
.tl-dot.active .tl-dot-label { color: #e8c96a; font-weight: 700; font-size: 15px; letter-spacing: 0.6px; }
.tl-dot:not(.active) .tl-dot-pip { width: 9px; height: 9px; background: rgba(255,255,255,0.25); }
.tl-dot:not(.active) .tl-dot-label { color: rgba(255,255,255,0.45); font-weight: 500; }

/* Timeline content transition */
#tl-content-inner { transition: opacity 0.32s ease; }

/* Timeline nav scroll */
#tl-nav-scroll::-webkit-scrollbar { display: none; }
#tl-nav-scroll.is-dragging { cursor: grabbing; }

/* Partner cards */
.partner-card { cursor: pointer; }
.partner-card.is-active .partner-img { filter: blur(8px); transform: scale(1.1); }
.partner-card.is-active .partner-overlay { opacity: 1; }
@media (hover: hover) {
  .partner-card:hover .partner-img { filter: blur(8px); transform: scale(1.1); }
  .partner-card:hover .partner-overlay { opacity: 1; }
}

/* Gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 8px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 24px; cursor: pointer; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--hidden { display: none; }
@media (max-width: 767px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gallery-item--tall { grid-row: span 1; }
  .gallery-item { height: auto; }
  .gallery-item > img:first-child { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; display: block; }
  .gallery-item--active .gallery-overlay { opacity: 1 !important; }
  .gallery-item--active .gallery-caption { opacity: 0 !important; }
}

/* Gallery filter scroll */
#gallery-filters { -webkit-overflow-scrolling: touch; }
#gallery-filters::-webkit-scrollbar { display: none; }
#gallery-filters button { flex-shrink: 0; }

/* Gallery filter buttons */
.gallery-filter-btn.is-active { background: #007a28 !important; border-color: #007a28 !important; color: #fff !important; }

/* Gallery Lightbox */
.gallery-lb-main .swiper-slide { display: flex; align-items: center; justify-content: center; }
.gallery-lb-main .swiper-slide img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; display: block; }
.gallery-lb-prev, .gallery-lb-next { color: white !important; }
.gallery-lb-prev::after, .gallery-lb-next::after { font-size: 22px !important; }
.gallery-lb-thumbs .swiper-slide { width: 80px !important; height: 100%; border-radius: 8px; overflow: hidden; opacity: 0.4; cursor: pointer; transition: opacity 0.2s; flex-shrink: 0; }
.gallery-lb-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-lb-thumbs .swiper-slide-thumb-active { opacity: 1; border: 2px solid #fff; }

/* Memory Section — Stories scrollbar */
.memory-stories::-webkit-scrollbar { width: 4px; }
.memory-stories::-webkit-scrollbar-track { background: transparent; }
.memory-stories::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Memory Section — Custom Select */
.memory-cs-list.is-below { top: calc(100% + 6px); }
.memory-cs-list.is-above { bottom: calc(100% + 6px); }
.memory-custom-select.is-open .memory-cs-chevron { transform: rotate(180deg); }
.memory-cs-list li.is-selected { background: rgba(0, 122, 40, 0.07); color: #007a28; font-weight: 600; }
.memory-cs-list li.is-selected::after { content: '✓'; float: right; color: #007a28; font-size: 12px; }

/* Memory Section — Field validation */
.memory-field-error { display: none; position: absolute; left: 0; top: calc(100% + 4px); font-family: 'Montserrat', sans-serif; font-size: 10px; color: rgba(255, 110, 110, 0.95); letter-spacing: 0.4px; white-space: nowrap; }
.memory-field.has-error .memory-field-error { display: block; }
.memory-field.has-error input:not([type="hidden"]),
.memory-field.has-error textarea { border-color: rgba(255, 110, 110, 0.6) !important; }
.memory-field.has-error .memory-cs-trigger { border-color: rgba(255, 110, 110, 0.6) !important; }