/* ============================================================
   F1 Race Info Widget  —  style.css
   ============================================================ */

/* ---- Custom Properties ------------------------------------ */
.f1-widget {
  --f1-bg:         #07050c;
  --f1-surface:    #13132b;
  --f1-card:       #1a1a35;
  --f1-border:     #252548;
  --f1-accent:     #7c5cf6;
  --f1-accent-dim: #5a3fd4;
  --f1-blue:       #5b9cf6;
  --f1-text:       #ffffff;
  --f1-sub:        #b0b0cc;
  --f1-muted:      #70709a;
  --f1-dim:        #404065;
  --f1-done-bg:    #1c1c38;
  --f1-radius:     14px;
  --f1-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Centering Wrapper ------------------------------------ */
.f1-widget-wrap {
  display:         flex;
  justify-content: center;
  align-items:     flex-start;
  width:           100%;
  padding:         20px 16px;
}

/* ---- Widget Shell ----------------------------------------- */
.f1-widget {
  font-family:    var(--f1-font);
  background:     var(--f1-bg);
  color:          var(--f1-text);
  border-radius:  var(--f1-radius);
  overflow:       hidden;
  overflow-x:     hidden;
  line-height:    1.45;
  box-shadow:     0 12px 48px rgba(0, 0, 0, .65);
  width:          100%;
  max-width:      520px;
}

.f1-widget *,
.f1-widget *::before,
.f1-widget *::after {
  box-sizing: border-box;
}

/* Reset margins on all elements including theme heading classes */
.f1-widget p,
.f1-widget h1,
.f1-widget h2,
.f1-widget h3,
.f1-widget h4,
.f1-widget h5,
.f1-widget .h1_br,
.f1-widget .h2_br,
.f1-widget .h3_br,
.f1-widget .h4_br,
.f1-widget .h5_br {
  margin: 0;
  padding: 0;
}

/* Prevent theme heading classes from overriding widget font-sizes */
.f1-widget .h1_br { font-size: inherit; line-height: inherit; }
.f1-widget .h2_br { font-size: inherit; line-height: inherit; }
.f1-widget .h3_br { font-size: inherit; line-height: inherit; }
.f1-widget .h4_br { font-size: inherit; line-height: inherit; }
.f1-widget .h5_br { font-size: inherit; line-height: inherit; }

/* ============================================================
   HERO
   ============================================================ */
.f1-hero {
  padding: 30px 26px 26px;
}

.f1-hero-eyebrow {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  color:          var(--f1-accent);
  text-transform: uppercase;
  margin-bottom:  8px !important;
}

.f1-race-name {
  font-size:      1.85rem;
  font-weight:    800;
  letter-spacing: -0.025em;
  line-height:    1.15;
  margin-bottom:  16px !important;
  color:          var(--f1-text);
}

/* ---- Meta (location + date) ------------------------------- */
.f1-meta {
  display:        flex;
  flex-direction: column;
  gap:            7px;
  margin-bottom:  24px;
}

.f1-meta-row {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   0.84rem;
  color:       var(--f1-sub);
}

.f1-icon {
  width:      15px;
  height:     15px;
  flex-shrink: 0;
  stroke:     var(--f1-muted);
}

/* ---- Countdown -------------------------------------------- */
.f1-countdown-wrap {
  margin-bottom: 26px;
}

.f1-section-label {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  color:          var(--f1-muted);
  text-transform: uppercase;
  margin-bottom:  10px !important;
}

.f1-live-text {
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--f1-accent);
}

.f1-countdown {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.f1-cd-block {
  display:     flex;
  align-items: baseline;
  gap:         3px;
}

.f1-cd-n {
  font-size:            1.9rem;
  font-weight:          700;
  color:                var(--f1-accent);
  min-width:            2.2ch;
  font-variant-numeric: tabular-nums;
  line-height:          1;
}

.f1-cd-u {
  font-size:      0.7rem;
  font-weight:    600;
  color:          var(--f1-muted);
  letter-spacing: 0.04em;
}

.f1-cd-sep {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--f1-dim);
  line-height: 1;
  margin:      0 1px;
  align-self:  center;
}

/* ---- Weekend Schedule ------------------------------------- */
.f1-schedule {
  margin-bottom: 24px;
}

.f1-sessions-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
}

.f1-session-card {
  background:     var(--f1-card);
  border:         1px solid var(--f1-border);
  border-radius:  9px;
  padding:        11px 12px 10px;
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.f1-sess-name {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          var(--f1-text);
  text-transform: uppercase;
}

.f1-sess-date {
  font-size: 0.73rem;
  color:     var(--f1-sub);
}

.f1-sess-time {
  font-size:   0.73rem;
  font-weight: 600;
  color:       var(--f1-blue);
}

/* ---- CTA Button ------------------------------------------- */
.f1-details-btn {
  display:         block;
  width:           100%;
  text-align:      center;
  background:      var(--f1-accent);
  color:           #ffffff;
  text-decoration: none;
  font-size:       0.73rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  padding:         15px 20px;
  border-radius:   10px;
  transition:      background 0.2s ease, transform 0.1s ease;
}

.f1-details-btn:hover {
  background: var(--f1-accent-dim);
  color:      #ffffff;
  transform:  translateY(-1px);
}

.f1-details-btn:active {
  transform: translateY(0);
}

/* ============================================================
   CALENDAR
   ============================================================ */
.f1-calendar {
  border-top: 1px solid var(--f1-border);
  padding:    22px 26px 10px;
}

.f1-cal-title {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  color:          var(--f1-muted);
  text-transform: uppercase;
  margin-bottom:  14px !important;
}

/* ---- Race List -------------------------------------------- */
.f1-race-list {
  display:        flex;
  flex-direction: column;
}

.f1-race-row {
  display:         grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items:     center;
  gap:             10px;
  padding:         10px 0;
  border-bottom:   1px solid #191930;
  font-size:       0.82rem;
  cursor:          default;
  transition:      background 0.15s ease;
}

.f1-race-row:last-child {
  border-bottom: none;
  margin-bottom: 10px;
}

.f1-race-row:hover {
  background: rgba(255,255,255,.02);
  border-radius: 6px;
}

/* ---- Indicators ------------------------------------------- */
.f1-r-dot {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

/* finished */
.is-done-dot {
  background: #232342;
  color:      var(--f1-dim);
}
.is-done-dot svg {
  width:  10px;
  height: 10px;
}

/* next */
.is-next-dot {
  background: rgba(91,156,246,.15);
  border:     2px solid var(--f1-blue);
}
.f1-dot-inner {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--f1-blue);
  animation:     f1-pulse 2s ease-in-out infinite;
}

@keyframes f1-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: .5; transform: scale(1.25); }
}

/* future */
.is-future-dot {
  border:     2px solid var(--f1-dim);
  background: transparent;
}

/* ---- Row Internals --------------------------------------- */
.f1-r-num {
  font-size:   0.7rem;
  font-weight: 600;
  color:       var(--f1-dim);
}

.f1-r-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.f1-r-name {
  font-weight:    600;
  color:          #c8c8e8;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.is-next-name {
  color:       var(--f1-text);
  font-weight: 700;
}

.f1-r-loc {
  font-size:     0.7rem;
  color:         var(--f1-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* finished badge */
.f1-r-badge {
  font-size:     0.65rem;
  font-weight:   600;
  color:         var(--f1-muted);
  background:    var(--f1-done-bg);
  border:        1px solid var(--f1-border);
  border-radius: 6px;
  padding:       3px 8px;
  white-space:   nowrap;
}

/* date badge (upcoming) */
.f1-r-date-badge {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--f1-sub);
  white-space: nowrap;
}

.f1-r-chevron {
  color:       var(--f1-dim);
  font-size:   1.1rem;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   NEXT-ROW HIGHLIGHT
   ============================================================ */
.f1-race-row.is-next {
  background: rgba(91, 156, 246, .06);
  border-radius: 8px;
  border-bottom: 1px solid rgba(91, 156, 246, .12);
  margin: 0px -4px;   /* remove the 4px bottom margin */
  padding: 10px 4px;
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.f1-error {
  color:   #ff6b6b;
  padding: 16px;
  font-size: 0.9rem;
}

/* ============================================================
   DESKTOP LAYOUT  (≥ 768 px — auto two-column)
   ============================================================ */
@media (min-width: 768px) {
    
    .f1-widget.has-calendar .f1-race-row.is-next {
    margin: 0 -4px;        /* no bottom margin */
    padding: 11px 4px;     /* match the 11px vertical + keep 4px side padding */
  }

  .f1-widget-wrap {
    padding: 48px 32px;
  }

  /* Two-column grid when calendar is present */
  .f1-widget.has-calendar {
    max-width:             1040px;
    display:               grid;
    grid-template-columns: 60% 40%;
    align-items:           start;
  }

  /* Hero fills left column */
  .f1-widget.has-calendar .f1-hero {
    padding:      44px 40px;
    border-right: 1px solid var(--f1-border);
  }

  /* Calendar fills right column — only list scrolls */
  .f1-widget.has-calendar .f1-calendar {
    border-top:  none;
    padding:     44px 32px 20px;
    display:     flex;
    flex-direction: column;
    overflow-x:  hidden;
  }

  .f1-widget.has-calendar .f1-race-list {
    flex:            1;
    max-height:      520px;
    overflow-y:      visible;
    overflow-x:     hidden;    
    scrollbar-width: thin;
    scrollbar-color: var(--f1-dim) transparent;
  }

  .f1-widget.has-calendar .f1-race-list::-webkit-scrollbar       { width: 4px; }
  .f1-widget.has-calendar .f1-race-list::-webkit-scrollbar-track  { background: transparent; }
  .f1-widget.has-calendar .f1-race-list::-webkit-scrollbar-thumb  { background: var(--f1-dim); border-radius: 2px; }

  /* Hero without calendar → full width, no border */
  .f1-widget:not(.has-calendar) .f1-hero {
    padding: 44px 40px;
  }

  /* Scale up hero typography on desktop */
  .f1-race-name {
    font-size: 2.3rem;
  }

  .f1-cd-n {
    font-size: 2.2rem;
  }

  .f1-sessions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .f1-session-card {
    padding: 13px 14px 11px;
  }

  /* Slightly roomier race rows in calendar */
  .f1-widget.has-calendar .f1-race-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    padding: 11px 0;
  }

}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 420px) {
  .f1-race-name {
    font-size: 1.5rem;
  }

  .f1-sessions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .f1-race-row {
    grid-template-columns: auto auto 1fr auto auto;
    gap: 7px;
  }

  .f1-hero {
    padding: 22px 18px 20px;
  }

  .f1-calendar {
    padding: 18px 18px 8px;
  }
}