/* Trackers home page styles (seasonal marquee, program finder tabs, guild cards, proof strip, closing band).
   Copied unchanged from the Contentful block "Homepage 1 - styles + tabs - Universal" v1.10 on Nov 13 2026.
   Loaded by that block on the Portland, Bay and Seattle home pages. Needs "Universal 1 - Core" on the page.
   To change: upload a new file and point the block at the new address. Never edit this file in place. */
/* ── Shared ──────────────────────────────────────────────────────────── */
.tc.tc-home { overflow-x: clip; }
.tc.tc-home section { padding: 2.75rem 0; }
.tc.tc-home .section-head { text-align: center; margin-bottom: .5rem; }
.tc.tc-home .section-head h2 { margin-bottom: .5rem; }
.tc.tc-home .section-head .intro-text { margin-bottom: 0; }
.tc.tc-home .green-bg { background: var(--green-dark); color: #fff; border: 0; }

/* Whole-card links: undo the green link styling from the core reset */
.tc.tc-home a.home-card,
.tc.tc-home a.home-card:visited { color: var(--ink); font-weight: 400; text-decoration: none; }
.tc.tc-home a.home-card:hover,
.tc.tc-home a.home-card:focus { color: var(--ink); text-decoration: none; }
.tc.tc-home a.home-card:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ── 1. Seasonal marquee ────────────────────────────────────────────── */
.tc .home-marquee { background: var(--soft); border-bottom: 1px solid var(--line); }
.tc .marquee {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
/* Photo bleeds to the box edge so the featured block lines up with the
   card photos below; the copy side keeps its padding. */
.tc .marquee-photo { position: relative; min-height: 380px; background: #ddd; }
.tc .marquee-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tc .marquee-photo .slide-cap { right: 14px; bottom: 12px; }
.tc .marquee-copy { padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2rem); align-self: center; }
.tc .marquee-copy .section-eyebrow { color: var(--rust); }
.tc .marquee-copy h2 { display: block; padding: 0; margin-bottom: .35rem; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.tc .marquee-copy h2::after { display: none; }
.tc .marquee-sub { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--green); margin: 0 0 .9rem; }
.tc .marquee .chip-row { justify-content: flex-start; margin: .6rem 0 1rem; gap: .65rem; }
.tc .marquee .date-chip { padding: .6rem .95rem .55rem; font-size: .95rem; }
.tc .marquee-lead { font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: 48ch; margin-bottom: 1.15rem; }
.tc .marquee-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.tc .marquee-actions .hero-cta { padding: 14px 24px; }
.tc .marquee-more { font-size: .92rem; color: var(--mute); font-weight: 600; }
.tc .marquee-more a { white-space: nowrap; }
@media (max-width: 860px) {
  .tc .marquee { grid-template-columns: 1fr; }
  .tc .marquee-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .tc .marquee-copy { padding: 1.1rem 1.1rem 1.25rem; }
}
@media (max-width: 520px) {
  .tc .marquee-actions .hero-cta { width: 100%; justify-content: center; }
}

/* ── 2. Program finder: tabs ──────────────────────────────────────────── */
.tc .home-finder { background: #fff; }
.tc .tab-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
  max-width: 1000px; margin: 1.5rem auto 2rem; padding: 0; list-style: none;
}
/* Fewer doors: keep the tiles the same size and center the row */
.tc .tab-bar[data-tabs="3"] { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
.tc .tab-bar[data-tabs="2"] { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
/* Door tiles, one guild color each. The open door fills with its color
   and points down into the panel. */
.tc .tab-btn {
  --tc: var(--g-forest); position: relative;
  -webkit-appearance: none; appearance: none; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 68px; padding: .8rem 1rem;
  background: #fff; color: var(--tc); border: 3px solid var(--tc); border-radius: 16px;
  font-family: var(--display); font-weight: 900; font-size: 1.2rem; line-height: 1.1; letter-spacing: -.01em;
  white-space: normal; text-align: center; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.tc #tab-camps     { --tc: var(--g-forest); }
.tc #tab-year      { --tc: var(--g-mariner); }
.tc #tab-adults    { --tc: var(--g-wilder); }
.tc #tab-community { --tc: var(--g-artisan); }
.tc .tab-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.14); color: var(--tc); border-color: var(--tc); }
.tc .tab-btn[aria-selected="true"] { background: var(--tc); border-color: var(--tc); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.tc .tab-btn[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px;
  background: var(--tc); border-radius: 3px; transform: translateX(-50%) rotate(45deg);
}
.tc .tab-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
@media (max-width: 900px) {
  .tc .tab-btn { font-size: 1.05rem; padding: .75rem .6rem; min-height: 70px; }
}
@media (max-width: 640px) {
  /* Doors two across on phones: all of them visible, nothing to scroll */
  .tc .tab-bar { position: relative; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .6rem; margin: 1.1rem 0 1.9rem; }
  .tc .tab-btn { min-width: 0; width: 100%; min-height: 58px; font-size: 1.02rem; padding: .65rem .5rem; border-width: 2.5px; }
  /* Three doors: two across, the third spans the row underneath */
  .tc .tab-bar[data-tabs="3"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr); max-width: none; }
  .tc .tab-bar[data-tabs="3"] .tab-btn:last-child { grid-column: 1 / -1; }
  .tc .tab-bar[data-tabs="2"] { max-width: none; }

  /* A wrapped row puts a button under the open door, so the door's own
     pointer would aim at that button instead of at the panel. Drop it and
     point once from the bottom of the whole row, in the open door's color.
     Two doors fit on one row, so that case keeps the pointer on the tile. */
  .tc .tab-bar:not([data-tabs="2"]) .tab-btn[aria-selected="true"]::after { display: none; }
  .tc .tab-bar:not([data-tabs="2"])::after {
    content: ""; position: absolute; left: 50%; bottom: -9px;
    width: 18px; height: 18px; border-radius: 3px;
    background: var(--tc-open, var(--g-forest));
    transform: translateX(-50%) rotate(45deg);
  }
  .tc .tab-bar:has(#tab-camps[aria-selected="true"])     { --tc-open: var(--g-forest); }
  .tc .tab-bar:has(#tab-year[aria-selected="true"])      { --tc-open: var(--g-mariner); }
  .tc .tab-bar:has(#tab-adults[aria-selected="true"])    { --tc-open: var(--g-wilder); }
  .tc .tab-bar:has(#tab-community[aria-selected="true"]) { --tc-open: var(--g-artisan); }
}
.tc .tab-panel[hidden] { display: none; }
.tc .tab-panel { animation: tcTabIn .3s ease; }
@keyframes tcTabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tc .home-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.25rem;
}
/* Each panel sets its column count so every row is full: 3-up (9 cards), 4-up (8 cards) */
.tc .home-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tc .home-grid.cols-4 .home-card h3 { font-size: 1.02rem; }
.tc .home-grid.cols-4 .home-card p { font-size: .92rem; }
.tc .home-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.tc .home-grid.cols-1 { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) { .tc .home-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .tc .home-grid, .tc .home-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: .8rem; } .tc .home-grid.cols-3 .home-card h3 { font-size: .98rem; } .tc .home-grid.cols-3 .home-card p { font-size: .9rem; } }
@media (max-width: 700px) { .tc .home-grid, .tc .home-grid.cols-3, .tc .home-grid.cols-4, .tc .home-grid.cols-2 { grid-template-columns: 1fr; gap: .9rem; max-width: 480px; margin-left: auto; margin-right: auto; } }

/* Program cards build on .activity-card from the core block */
.tc .home-card { border-top: 4px solid var(--g-forest); }
.tc .home-card .activity-card-content { padding: .95rem 1.1rem 1.1rem; }
.tc .home-card .grade-pill { color: var(--g-forest); margin-bottom: .4rem; }
.tc .home-card h3 { color: var(--ink); font-size: 1.08rem; margin-bottom: .35rem; }
.tc .home-card p { flex: 1; }
.tc .home-card .card-go {
  margin-top: .75rem; font-family: var(--display); font-weight: 800; font-size: .9rem; color: var(--g-forest);
  display: inline-flex; align-items: center; gap: .35rem;
}
.tc .home-card .card-go::after { content: "\2192"; transition: transform .15s; }
.tc .home-card:hover .card-go::after { transform: translateX(3px); }
.tc .home-card.is-adult { border-top-color: var(--g-wilder); }
.tc .home-card.is-adult .grade-pill, .tc .home-card.is-adult .card-go { color: var(--g-wilder); }
.tc .home-card.is-community { border-top-color: var(--g-artisan); }
.tc .home-card.is-community .grade-pill, .tc .home-card.is-community .card-go { color: var(--g-artisan); }
.tc .home-card.is-year { border-top-color: var(--g-mariner); }
.tc .home-card.is-year .grade-pill, .tc .home-card.is-year .card-go { color: var(--g-mariner); }
.tc .home-card .card-tag {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  background: var(--gold-light); color: var(--ink); font-family: var(--display); font-weight: 800;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.tc .home-card .activity-card-image { position: relative; }

/* ── 3. Four Guilds ───────────────────────────────────────────────────── */
.tc .home-guilds { padding-top: 3rem; padding-bottom: 3rem; }
.tc .guild-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .tc .guild-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tc .guild-grid { grid-template-columns: 1fr; } }
.tc .guild-card {
  background: #fff; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column;
}
.tc .guild-head {
  background: var(--gc); color: #fff; padding: .9rem 1rem .8rem; text-align: center;
}
.tc .guild-head h3 { color: #fff; margin: 0; font-size: 1.15rem; }
.tc .guild-motto {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-top: .2rem;
}
.tc .guild-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.tc .guild-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc .guild-body { padding: .9rem 1rem 1.1rem; font-size: .92rem; line-height: 1.6; color: var(--ink); }
.tc .guild-body p { margin: 0; }
.tc .guild-card.g-rangers  { --gc: var(--g-forest); }
.tc .guild-card.g-mariners { --gc: var(--g-mariner); }
.tc .guild-card.g-wilders  { --gc: var(--g-wilder); }
.tc .guild-card.g-artisans { --gc: var(--g-artisan); }
@media (max-width: 480px) {
  .tc .guild-card { flex-direction: row; flex-wrap: wrap; }
  .tc .guild-head { flex: 1 1 100%; }
  .tc .guild-photo { flex: 0 0 38%; aspect-ratio: auto; align-self: stretch; min-height: 120px; }
  .tc .guild-body { flex: 1 1 0; padding: .75rem .85rem; font-size: .88rem; }
}

/* ── 4. Proof ─────────────────────────────────────────────────────────── */
.tc .home-proof { background: #fff; }
.tc .proof-band {
  display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; text-align: center;
  background: var(--soft); border: 1px solid var(--line); border-radius: 1.25rem;
  padding: 1.25rem 1.5rem 1.35rem; margin: 0 auto 1.75rem; max-width: 980px;
}
.tc .proof-band img { height: clamp(96px, 12vw, 150px); width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.tc .proof-band p { margin: 0 auto; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; }
.tc .proof-band p strong { color: var(--green); }
.tc .proof-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: .75rem; }
.tc .proof-stat { font-family: var(--display); font-weight: 800; font-size: .85rem; color: var(--mute); }
.tc .proof-stat b { color: var(--ink); font-size: 1.05rem; margin-right: .2rem; }
@media (max-width: 700px) {
  .tc .proof-band { padding: 1.1rem 1rem; }
  .tc .proof-band img { height: auto; width: 100%; max-width: 420px; }
}
.tc .home-proof .six-grid { margin-top: 0; }
.tc .home-proof .activity-card-content { text-align: center; padding: .9rem 1rem 1.1rem; }
.tc .home-proof .activity-card-content h3 { font-size: 1.02rem; }
.tc .home-proof .activity-card-content p { font-size: .88rem; }

/* ── 5. Closing action band ───────────────────────────────────────────── */
.tc .home-close { padding: 3rem 0; }
.tc .home-close .close-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
}
.tc .home-close h2 { color: #fff; display: block; padding: 0; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.tc .home-close h2::after { margin-left: 0; background: var(--gold-light); }
.tc .home-close p { color: rgba(255,255,255,.88); max-width: 46ch; }
.tc .close-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.tc .home-close .hero-cta { background: var(--gold-light); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.tc .home-close .hero-cta:hover, .tc .home-close .hero-cta:focus { background: #e6ad00; color: var(--ink); }
.tc .home-close .hero-cta.cta-quiet { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); box-shadow: none; }
.tc .home-close .hero-cta.cta-quiet:hover, .tc .home-close .hero-cta.cta-quiet:focus { border-color: #fff; background: rgba(255,255,255,.08); }
.tc .close-jobs { margin-top: 1.5rem; font-size: .92rem; color: rgba(255,255,255,.75); }
.tc .close-jobs a, .tc .close-jobs a:visited { color: #fff; text-decoration: underline; }
.tc .close-news { border-radius: 1.1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.tc .close-news [class*="klaviyo-form-"] { margin: 0; }
.tc .close-news [class*="klaviyo-form-"] > div { margin: 0 !important; }
@media (max-width: 820px) {
  .tc .home-close .close-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tc .home-close .section-eyebrow, .tc .home-close h2, .tc .home-close p { text-align: left; }
}
@media (max-width: 520px) {
  .tc .close-actions .hero-cta { width: 100%; justify-content: center; }
}

/* ── Motion ─────────────────────────────────────────────────────────── */
@media (hover: none) {
  .tc .home-card:hover, .tc .tab-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tc .tab-panel { animation: none; }
  .tc .tab-btn, .tc .home-card .card-go::after { transition: none; }
}