/* The fundraiser subheader is a full paragraph (not a one-liner like other
   pages), so give it much more room than the global 36rem cap to avoid
   wrapping into many short lines that push the page down. */
.tc-fundraiser-page .tc-page-hero-sub {
  max-width: 64rem;
}

/* Community photo gallery */
.tc-fund-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .tc-fund-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tc-fund-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tc-fund-gallery__cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tc-fund-gallery__edit {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(212, 175, 55, 0.85);
  cursor: pointer;
}

.tc-fund-gallery__edit:hover {
  color: #e8c547;
  text-decoration: underline;
}

.tc-fund-gallery__edit-form {
  margin-top: 0.1rem;
}

.tc-fund-gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 0.6rem;
  overflow: hidden;
  background: #02060d;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.tc-fund-gallery__item:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.55);
}

.tc-fund-gallery__item:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.6);
  outline-offset: 2px;
}

.tc-fund-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-fund-gallery__year {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  z-index: 1;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  background: rgba(10, 15, 28, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #e8c547;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
}

.tc-fund-gallery__year[hidden] {
  display: none;
}

.tc-fund-upload {
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  padding-top: 1.25rem;
}

/* Story tabs on the sign page */
[data-story-tab] {
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: #94a3b8;
}
[data-story-tab].is-active {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.1);
  color: #d4af37;
}

/* Three-column page grid — matches the proportions used on Events/Dashboard. */
.tc-fundraiser-grid {
  display: grid;
  gap: 0.5rem;
}

.tc-fundraiser-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .tc-fundraiser-grid {
    grid-template-columns: 16rem minmax(0, 1fr) 15rem;
    grid-template-areas: "left main right";
    gap: 0.625rem;
    align-items: start;
  }

  /* Explicit areas keep the columns in place even though the center column
     comes first in the DOM (so it stacks first on mobile). */
  .tc-fundraiser-col-left {
    grid-area: left;
  }

  .tc-fundraiser-col-main {
    grid-area: main;
  }

  .tc-fundraiser-col-right {
    grid-area: right;
  }
}

.tc-fundraiser-col-left,
.tc-fundraiser-col-right,
.tc-fundraiser-col-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tc-fundraiser-hero {
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.95), rgba(5, 10, 20, 0.88));
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  /* Lets the comparison slider bleed to the section edges while still being
     clipped to the rounded top corners. */
  overflow: hidden;
}

/* Full-bleed comparison slider: cancels the section padding on the top and
   sides so the image fills the otherwise dead space and reaches the section
   border. The bottom keeps its straight edge and stays in place. */
.tc-fundraiser-hero > .tc-fundraiser-compare {
  margin: -1.5rem -1.5rem 0;
  border: 0;
  border-radius: 0;
}

@media (min-width: 640px) {
  .tc-fundraiser-hero > .tc-fundraiser-compare {
    margin: -2rem -2rem 0;
  }
}

@media (min-width: 1024px) {
  .tc-fundraiser-hero > .tc-fundraiser-compare {
    margin: -2.5rem -2.5rem 0;
  }
}

.tc-fundraiser-hero-grid {
  align-items: start;
}

.tc-fundraiser-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tc-fundraiser-hero-visual .tc-fundraiser-compare {
  flex-shrink: 0;
}

.tc-fundraiser-hero-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  background: rgba(2, 6, 13, 0.5);
}

.tc-fundraiser-hero-photo__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.tc-fundraiser-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
  object-position: center;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.tc-fundraiser-hero-photo__btn:hover img,
.tc-fundraiser-hero-photo__btn:focus-visible img {
  transform: scale(1.02);
  filter: brightness(1.05);
}

.tc-fundraiser-hero-photo__zoom {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(2, 6, 13, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #f1e7c9;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

.tc-fundraiser-hero-photo figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
}

.tc-fundraiser-hero-photo__hint {
  color: #64748b;
}

/* Near full-screen photo viewer */
.tc-fund-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 4, 10, 0.82);
}

.tc-fund-modal[hidden] {
  display: none;
}

.tc-fund-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.tc-fund-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 30rem);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 0.85rem;
  background: #0c1426;
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.tc-fund-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 0.5rem;
  background: rgba(212, 175, 55, 0.08);
  color: #e8c547;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.tc-fund-modal__close:hover {
  background: rgba(212, 175, 55, 0.18);
}

.tc-fund-modal__panel--bare {
  width: min(100%, 34rem);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.tc-fund-modal__panel--bare > section {
  max-height: 88vh;
  overflow-y: auto;
}

.tc-fund-modal__close--float {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: rgba(12, 20, 38, 0.9);
}

.tc-fund-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 4, 10, 0.92);
}

.tc-fund-lightbox[hidden] {
  display: none;
}

.tc-fund-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.tc-fund-lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(96vw, 1200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}

.tc-fund-lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.tc-fund-lightbox__caption {
  color: #cbd5e1;
  font-size: 0.85rem;
  text-align: center;
}

.tc-fund-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(2, 6, 13, 0.7);
  color: #f1e7c9;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.tc-fund-lightbox__close:hover {
  background: rgba(212, 175, 55, 0.18);
}

.tc-fundraiser-progress {
  height: 0.65rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.tc-fundraiser-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b8860b, #e8c547, #d4af37);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

/* Framing for the embedded Givebutter giving form. The form itself renders
   inside an iframe (light theme, controlled in the Givebutter dashboard), so
   we wrap it in an intentional on-brand card with a gold accent. */
.tc-donate-card {
  position: relative;
  border-radius: 16px;
  padding: 0.6rem;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-top: 4px solid #d4af37;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.tc-donate-card givebutter-giving-form {
  display: block;
  width: 100%;
}

.tc-fundraiser-compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--tc-radius-md);
  border: 1px solid var(--tc-line);
  /* Matches aligned Photoshop exports (3082×1216) */
  aspect-ratio: 3082 / 1216;
  background: #02060d;
  touch-action: none;
  user-select: none;
}

/* Both PNGs share the same canvas size — full-bleed so the 50% split = left/right halves. */
.tc-fundraiser-compare-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.tc-fundraiser-compare-img--goal {
  z-index: 0;
}

.tc-fundraiser-compare-img--today {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}

.tc-fundraiser-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  z-index: 2;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(232, 197, 71, 0.85);
  pointer-events: none;
}

.tc-fundraiser-compare-handle {
  position: absolute;
  top: 50%;
  left: var(--split, 50%);
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 2px solid rgba(232, 197, 71, 0.9);
  background: rgba(5, 10, 20, 0.85);
  color: #e8c547;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: ew-resize;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
}

.tc-fundraiser-compare-label {
  position: absolute;
  bottom: 0.75rem;
  z-index: 4;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  background: rgba(5, 10, 20, 0.78);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tc-fundraiser-compare-label--before {
  left: 0.75rem;
  color: #94a3b8;
}

.tc-fundraiser-compare-label--after {
  right: 0.75rem;
  color: #e8c547;
}

.tc-fundraiser-tab {
  border: 1px solid transparent;
  color: #94a3b8;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tc-fundraiser-tab.is-active {
  border-color: var(--tc-line);
  background: rgba(212, 175, 55, 0.08);
  color: #e8c547;
}

.tc-fundraiser-tier {
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-md);
  background: rgba(8, 14, 24, 0.55);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tc-fundraiser-tier.is-selected,
.tc-fundraiser-tier:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}

.tc-fundraiser-tier.is-featured {
  border-color: rgba(212, 175, 55, 0.65);
}

.tc-fundraiser-amount {
  border: 1px solid var(--tc-line);
  background: rgba(5, 10, 20, 0.6);
  color: #cbd5e1;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tc-fundraiser-amount.is-selected {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.12);
  color: #f7e6a8;
}

.tc-fundraiser-budget-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
}

.tc-fundraiser-budget-bar {
  grid-column: 1 / -1;
  height: 0.45rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.tc-fundraiser-budget-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9a7b1e, #d4af37);
}

.tc-fundraiser-faq summary {
  cursor: pointer;
  list-style: none;
}

.tc-fundraiser-faq summary::-webkit-details-marker {
  display: none;
}

.tc-fundraiser-milestone.is-complete .tc-fundraiser-milestone-dot {
  background: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}

.tc-fundraiser-milestone.is-progress .tc-fundraiser-milestone-dot {
  background: #e8c547;
  animation: tc-pulse 2s ease infinite;
}

@keyframes tc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}