/* ==========================================================================
   Utsho — competitions.css
   Page-scoped styles for pages/competitions.html only.

   Redesign pass 3 (Sep 2026): the card itself is rebuilt from scratch.
   The old "accordion row with small badges scattered around" layout
   read as generic, so the deadline/status now lives in a bold, solid-
   color "ticket stub" down the left edge — a big countdown number for
   anything closing soon, echoing the Exam Countdown's dramatic
   typographic treatment on the Dashboard, so the two pages share one
   visual signature rather than two different ideas of "important
   number." The summary/description no longer shows on the collapsed
   card at all — it only appears once a card is expanded, alongside
   its full write-up.
   ========================================================================== */

:root {
  --vivid-green: #16A34A;
  --vivid-green-light: #22C55E;
  --vivid-green-tint: #DCFCE7;
  --vivid-green-text: #14532D;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.page-header--comp {
  position: relative;
  overflow: hidden;
  background-color: var(--card);
  background-image: url('../assets/dashboard-hero-blobs.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8) !important;
  min-height: 280px;
}
.comp-hero-content { max-width: 46ch; flex: 1 1 380px; }
.comp-hero-visual { flex: 0 0 auto; width: clamp(180px, 24vw, 280px); display: flex; justify-content: center; }
.comp-hero-visual img { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(30, 22, 15, 0.16)); }
@media (max-width: 720px) {
  .page-header--comp { flex-direction: column; text-align: center; min-height: 0; }
  .comp-hero-content { max-width: none; }
  .comp-hero-visual { width: 160px; }
}

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--space-2);
}
.section-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.55; flex-shrink: 0; }
@media (max-width: 720px) { .section-eyebrow { justify-content: center; } }
.comp-hero-content h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.comp-hero-content .lede { margin-top: var(--space-3); }

/* ---- Filter pills ---- */
.comp-filterbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; }
.comp-pill {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: 0.85rem;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.comp-pill:hover { transform: translateY(-1px); }
.comp-pill--active { color: #FFFFFF; border-color: transparent; background: var(--text); box-shadow: 0 8px 18px rgba(30, 22, 15, 0.22); }

/* ==========================================================================
   Competition cards — "ticket stub" layout. Built on the site's
   accordion component (chevron rotation, expand transition) but the
   header is now a two-column grid rather than a single cramped row.
   ========================================================================== */
.comp-list { display: flex; flex-direction: column; gap: var(--space-5); }

.comp-item {
  overflow: hidden; /* clips the stub's corners to the card's own radius */
  transition: box-shadow 0.2s ease;
}
.comp-item[data-featured="true"] { box-shadow: 0 12px 32px rgba(156, 122, 46, 0.24); }

.comp-header { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; padding: 0; }

/* ---- Left stub: the bold, single focal point per card ---- */
.comp-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: var(--space-4) var(--space-2); text-align: center; color: #FFFFFF;
}
.comp-stub__icon svg { width: 24px; height: 24px; }
.comp-stub__number { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-weight: 700; }
.comp-stub__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.92; margin-top: 2px; }
.comp-stub__date { font-size: 0.66rem; opacity: 0.85; margin-top: 4px; }

.comp-stub--ongoing  { background: var(--vivid-green-light); }
.comp-stub--closing  { background: var(--neon-orange); }
.comp-stub--upcoming { background: var(--sky); }
.comp-stub--passed   { background: var(--border-strong); }

/* ---- Right: title + light meta only. No description here anymore —
   that's revealed on expand, per explicit request. ---- */
.comp-main { padding: var(--space-5) var(--space-6); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.comp-header__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.comp-header__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.comp-header__meta { color: var(--muted); font-size: 0.85rem; margin: 0; }
.comp-expand-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }
.comp-expand-cue { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--primary); }
.comp-expand-cue .accordion-chevron { font-size: 0.75em; }

@media (max-width: 560px) {
  .comp-header { grid-template-columns: 1fr; }
  .comp-stub { flex-direction: row; justify-content: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); }
  .comp-stub__number { font-size: 1.5rem; }
  .comp-stub__label, .comp-stub__date { margin: 0; }
}

/* Type tags — small, solid, sit next to the title */
.tag--olympiad    { background: var(--signal-violet); }
.tag--scholarship { background: var(--gold); }
.tag--internship  { background: var(--accent); }
.tag--grant       { background: var(--clay-brown); }
.tag--other       { background: var(--border-strong); color: var(--text); }
.comp-featured-tag { background: var(--gold); color: #FFFFFF; }

/* ---- Expanded body ---- */
.comp-item.accordion-item--open .accordion-body { max-height: 4000px; }
.accordion-body__inner.comp-body-inner { padding: var(--space-1) var(--space-6) var(--space-6); }

.comp-summary-expanded {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.comp-body-inner :is(h2, h3):first-child { margin-top: 0; }
.comp-body-inner h2 { font-size: 1.15rem; margin-top: var(--space-6); }
.comp-body-inner h3 { font-size: 1rem; margin-top: var(--space-5); }
.comp-body-inner p { margin: 0 0 var(--space-3); line-height: 1.65; }
.comp-body-inner ul, .comp-body-inner ol { padding-left: 22px; margin: 0 0 var(--space-3); }
.comp-body-inner li { margin-bottom: 6px; }
.comp-body-inner hr { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
.comp-body-inner img { width: 100%; border-radius: var(--radius-md); margin: var(--space-4) 0; }
.comp-body-inner p a,
.comp-body-inner li a,
.comp-body-inner h2 a,
.comp-body-inner h3 a { color: var(--primary); text-decoration: underline; }

.comp-apply-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.comp-apply-row .btn { color: #FFFFFF; }

.comp-empty, .comp-loading, .comp-error { text-align: center; color: var(--muted); padding: var(--space-12) 0; }