/* ==========================================================================
   SHARED CSS - Cards, Text, Badges
   ========================================================================== */

/* Equal-height cards in the Drill grid */
.timeline-card {
    background: var(--card-bg); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important; 
    border-radius: 12px; 
    padding: 24px; 
    border: 1px solid var(--border);
    min-height: 180px; 
    display: flex; 
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s; 
    cursor: pointer; 
    position: relative;
    
    align-self: stretch !important;
    height: auto;
}

/* Let body grow to push footer down */
.timeline-card .timeline-body {
    flex-grow: 1;
    margin: 12px 0;
}

/* Push footer to bottom of card */
.timeline-card .prediction-footer {
    margin-top: auto !important;
}


.timeline-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.prediction-header-grid { display: flex !important; flex-direction: column !important; gap: 8px; margin-bottom: 12px; }
.prediction-title-box { width: 100% !important; }
.prediction-title-link {
    font-family: "Georgia", serif; font-size: 15px; font-weight: 300; color: var(--accent);
    text-decoration: none; line-height: 1.2; display: block; word-wrap: break-word; margin-bottom: 8px;
}
.prediction-title-link:hover { text-decoration: underline; }

.prediction-meta-box {
    display: flex !important; flex-direction: row !important; justify-content: space-between !important;
    align-items: center !important; text-align: left !important; width: 100%; margin-top: 4px;
}
.prediction-date-label { font-size: 11px; color: #64748b; font-weight: 600; white-space: nowrap; }
.timeline-body, .prediction-body-text { font-size: 13.5px; line-height: 1.6; color: #334155; }

/* Badges & Tags */
.age-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.age-badge.red { background: #fee2e2; color: #000; border: 1px solid #fecaca; }
.age-badge.orange { background: #ffedd5; color: #000; border: 1px solid #fed7aa; }
.age-badge.yellow { background: #fef9c3; color: #000; border: 1px solid #fef08a; }
.age-badge.default { background: #f1f5f9; color: #000; border: 1px solid var(--border); }

.urgency-indicator {
    height: 4px;
    width: 100%;
    border-radius: 99px;
    margin-bottom: 10px;
}

.urgency-indicator.yellow-bg { background: linear-gradient(90deg, #ca8a04, #fef08a); }
.urgency-indicator.orange-bg { background: linear-gradient(90deg, #ea580c, #fed7aa); }
.urgency-indicator.default-bg { background: linear-gradient(90deg, #94a3b8, #e2e8f0); }

.today-stamp,
.found-today-stamp {
    display: inline-block; text-align: left; font-family: "Georgia", serif; font-size: 16px; font-weight: 400; font-style: italic;
    color: #f00808; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; transform: rotate(-3deg); opacity: 0.85; filter: blur(0.3px) contrast(1.2);
    background: radial-gradient(circle, #8b0000 70%, transparent 85%) 0 0/2px 2px; -webkit-background-clip: text; background-clip: text; animation: manual-press 3s ease-in-out infinite;
}
@keyframes manual-press { 0% { transform: rotate(-3deg) scale(1); opacity: 0.85; } 5% { transform: rotate(-4deg) scale(1.05); opacity: 1; } 15% { transform: rotate(-3deg) scale(1); opacity: 0.85; } 100% { transform: rotate(-3deg) scale(1); opacity: 0.85; } }

.location-tag { margin-top: 10px; margin-bottom: 5px; display: flex; align-items: center; }

.new-pulse { animation: pulse-border-red 2s infinite; border: 1px solid #ef4444 !important; }
@keyframes pulse-border-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

/* Mobile Overrides */
@media (max-width: 768px) {
    .prediction-header-grid { display: flex; flex-direction: column; gap: 6px; }
    .prediction-meta-box { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100%; margin-top: 5px; margin-bottom: 10px; }
    .prediction-date-label { font-size: 11px; color: #64748b; font-weight: 600; margin: 0 !important; }
    .today-stamp, .found-today-stamp { text-align: left !important; margin-top: 0 !important; font-size: 14px !important; display: inline-block !important; margin: 0 0 8px 0 !important; }
    .age-badge { margin: 0 !important; flex-shrink: 0; font-size: 12px !important; padding: 3px 9px !important; }
    .location-tag { display: block; word-wrap: break-word; white-space: normal; line-height: 1.4; font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; margin-bottom: 5px; }
    .prediction-text { font-size: 14px; color: var(--text-main) !important; background: transparent !important; }
    .urgency-indicator { display: none !important; }
}

/* Optional: If you want 'Found Today' to be slightly different (e.g., Orange) */
.found-today-stamp {
    color: #f59e0b; 
}