/* ===================================================
   ICPalestina – Actions Page Styles
   =================================================== */

/* ── ACTIONS FULL PAGE ── */
.timeline-section-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.timeline-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tst-badge {
  padding: 0.3rem 1rem; border-radius: 20px;
  font-size: 0.77rem; font-weight: 600; letter-spacing: 0.06em;
}
.tst-badge.upcoming { background: var(--green-pale); color: var(--green); border: 1px solid var(--green-light); }
.tst-badge.past     { background: var(--parchment); color: var(--text-muted); border: 1px solid var(--border); }

.actions-list { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.action-row { display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; align-items: stretch; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.action-row-date { display: flex; flex-direction: column; align-items: center; padding-top: 0.25rem; gap: 0.3rem; }
.erd-day { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--green); line-height: 1; }
.erd-month { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.erd-line { flex: 1; width: 2px; background: var(--border); min-height: 20px; border-radius: 1px; }
.action-row.past .erd-day { color: var(--text-muted); }

.action-row-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.5rem 1.75rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; align-items: start;
  transition: box-shadow 0.2s;
}
.action-row-card:hover { box-shadow: 0 6px 20px var(--shadow); }

/* ── Highlight when opened from the homepage: gold glow, light sweep and sparkles ── */
.action-row-card { position: relative; }
.action-row-card.action-highlight {
  animation: action-glow 2.6s ease-out;
  border-color: var(--gold);
}
.action-row-card.action-highlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(212,168,75,0.28) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: action-sweep 1.4s ease-in-out 2;
}
@keyframes action-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212,168,75,0.0); transform: scale(1); }
  12%  { box-shadow: 0 0 0 6px rgba(212,168,75,0.45), 0 10px 30px rgba(184,133,42,0.35); transform: scale(1.015); }
  60%  { box-shadow: 0 0 0 4px rgba(212,168,75,0.35), 0 8px 24px rgba(184,133,42,0.25); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 0 rgba(212,168,75,0.0); transform: scale(1); }
}
@keyframes action-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -100% 0; }
}
.action-sparkle {
  position: absolute; z-index: 2; pointer-events: none;
  color: var(--gold-light); font-size: 1.05rem; line-height: 1;
  text-shadow: 0 0 6px rgba(212,168,75,0.9);
  opacity: 0; animation: action-sparkle 1.1s ease-in-out 2;
}
@keyframes action-sparkle {
  0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
  45%  { opacity: 1; transform: scale(1.25) rotate(90deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .action-row-card.action-highlight { animation: none; box-shadow: 0 0 0 4px rgba(212,168,75,0.45); }
  .action-row-card.action-highlight::after { animation: none; background: rgba(212,168,75,0.1); }
}
.action-row.past .action-row-card { background: var(--cream); opacity: 0.82; }
.erc-type { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--red-mid); margin-bottom: 0.4rem; }
.action-row.past .erc-type { color: var(--text-muted); }
.action-row-card h3 { font-size: 1.08rem; margin-bottom: 0.5rem; }
.action-row-card p  { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.75rem; }
.erc-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.erc-meta span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.77rem; color: var(--text-muted); }
.erc-badge { padding: 0.4rem 1rem; border-radius: 4px; font-size: 0.77rem; font-weight: 600; white-space: nowrap; align-self: end; }
.erc-badge.open { background: var(--green-pale); color: var(--green); border: 1px solid var(--green-light); }
.erc-badge.full { background: var(--red-pale); color: var(--red-mid); border: 1px solid var(--red-mid); }
.erc-badge.done { background: var(--parchment); color: var(--text-muted); border: 1px solid var(--border); }
a.erc-badge { display: inline-flex; align-items: center; justify-content: center; }

/* Links on the right of an action card: registration and the third-party page */
.erc-links { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; align-self: start; }

.erc-external-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.45rem 1rem; border-radius: 4px;
  font-size: 0.77rem; font-weight: 600; white-space: nowrap;
  color: var(--white); background: var(--green);
  border: 1px solid var(--green);
  transition: background 0.2s, transform 0.2s;
}
.erc-external-btn:hover { background: var(--green-mid); border-color: var(--green-mid); transform: translateY(-1px); }
.erc-external-btn i { font-size: 0.72rem; }
.action-row.past .erc-external-btn { background: var(--white); color: var(--green); }
.action-row.past .erc-external-btn:hover { background: var(--green-pale); }

.actions-empty {
  padding: 1.5rem 1.75rem; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 0.9rem; background: var(--cream);
}

/* ── ACTION REQUEST FORM ── */
.form-section { background: var(--cream); border-top: 1px solid var(--border); }
.form-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 2.5rem 3rem;
  max-width: 780px; margin: 0 auto;
  box-shadow: 0 4px 24px var(--shadow);
}
.form-intro { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.form-intro p { font-size: 0.92rem; color: var(--text-muted); margin-top: 0.5rem; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .action-row { grid-template-columns: 60px 1fr; gap: 1rem; }
  .action-row-card { grid-template-columns: 1fr; }
  .erc-badge { align-self: auto; }
  .erc-links { flex-direction: row; flex-wrap: wrap; }
  .form-card { padding: 1.75rem 1.5rem; }
}