/* ============================================================
 * Outlook view
 * The site's landing tab: a featured "next golden hour" card plus a short multi-day list of
 * upcoming golden-hour quality estimates. Independent of Today's date navigation -- always
 * relative to right now. See js/19-golden-hour-quality.js.
 * ============================================================ */
/* ---------- Featured "next golden hour" hero card ---------- */
.outlook-featured-card{ margin-bottom:22px; }
.outlook-hero-card{
  position:relative;
  --card-accent: var(--gold);
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--card-accent) 12%, var(--bg-panel)), var(--bg-panel) 45%),
    linear-gradient(to bottom, var(--card-accent), var(--line-soft) 70%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:22px 26px 24px;
  cursor:pointer;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.outlook-hero-card:hover, .outlook-hero-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
}
.outlook-hero-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.outlook-hero-label{
  font-size:12px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--gold-text);
  margin-bottom:12px;
}
.outlook-hero-headline{
  font-family:var(--font-display); font-size:38px; font-weight:600; color:var(--ink); line-height:1.1;
  margin-bottom:12px;
}
.outlook-hero-when{ font-size:14px; color:var(--ink-dim); margin-bottom:6px; }
.outlook-hero-when .happening-now{ color:var(--now-green); font-weight:600; }
.outlook-hero-factors{ font-size:13px; color:var(--ink-faint); }
.outlook-hero-card::before{
  content:"?"; position:absolute; top:18px; right:20px; width:18px; height:18px;
  border-radius:50%; border:1px solid var(--ink-faint); color:var(--ink-faint);
  font-size:11px; line-height:16px; text-align:center; opacity:0.55;
}
@media (max-width:520px){
  .outlook-hero-card{ padding:18px 20px 20px; }
  .outlook-hero-headline{ font-size:30px; }
}

/* ---------- Golden hour outlook list ---------- */
.golden-outlook-section{ margin-top:0; }
.golden-outlook-title{
  font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink);
  margin:0 0 10px;
}
.golden-outlook-row{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:14px;
  background:var(--bg-panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:10px 16px; margin-bottom:8px; font-size:13px;
}
.golden-outlook-row:last-child{ margin-bottom:0; }
.golden-outlook-when{ font-family:var(--font-mono); color:var(--ink); }
.golden-outlook-stars{ font-family:var(--font-mono); font-size:17px; color:var(--gold-text); letter-spacing:1px; }
.golden-outlook-label{ color:var(--ink-dim); }
.golden-outlook-conf{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; }
/* Lower-confidence (further-out) windows are visually de-emphasized -- a lightweight nudge toward
   "weight this more loosely", matching the card-info tip's advice, without needing a tooltip. */
.golden-outlook-row[data-confidence="low"]{ opacity:0.65; }
@media (max-width:640px){
  .golden-outlook-row{ grid-template-columns:1fr auto; row-gap:4px; }
  .golden-outlook-label, .golden-outlook-conf{ grid-column:2; text-align:right; }
}