/* The conditions at an event's beach (Pages/Shared/_SpotConditions.cshtml): one row of surf, wind, swell and tide that
   opens the spot's page; light on the event page, dark (.cond--dark) in the home's live hero. */
.cond { --tone: #0E9DBE; display: grid; grid-template-columns: minmax(150px, 1.1fr) repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 4px 18px; padding: 14px 18px;
    border: 1px solid var(--ag-line, #D6E6EA); border-radius: 18px; background: #FFFFFF; color: var(--ag-ink, #0B2730); text-decoration: none; box-shadow: 0 10px 30px rgba(11, 79, 94, 0.08); transition: border-color 0.15s, transform 0.15s; }
.cond:hover { border-color: var(--ag-arc, #6BBDD1); transform: translateY(-1px); }
.cond .sp-tone--good { --tone: #22A06B; } .cond .sp-tone--fair { --tone: #0E9DBE; } .cond .sp-tone--big { --tone: #E8590C; }
.cond .sp-tone--choppy { --tone: #C98A00; } .cond .sp-tone--small, .cond .sp-tone--flat, .cond .sp-tone--none { --tone: #6F8D95; }
.cond__head { display: flex; flex-direction: column; min-width: 0; }
.cond__label, .cond__item small { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ag-muted, #4A6770); }
.cond__head b { overflow: hidden; margin-top: 2px; font-family: var(--ag-font-display, inherit); font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cond__head > small { font-size: 12px; color: var(--ag-muted, #4A6770); }
.cond__item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cond__item b { display: flex; align-items: center; gap: 5px; font-family: var(--ag-font-display, inherit); font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cond__item b i { font-family: var(--ag-font-body, inherit); font-size: 12px; font-style: normal; font-weight: 700; color: var(--ag-muted, #4A6770); }
.cond__item em { overflow: hidden; font-size: 12.5px; font-style: normal; color: var(--ag-text, #3C5A63); text-overflow: ellipsis; white-space: nowrap; }
.cond__item.sp-tone--good em, .cond__item.sp-tone--fair em, .cond__item.sp-tone--big em, .cond__item.sp-tone--choppy em { color: color-mix(in srgb, var(--tone) 75%, #0B2730); font-weight: 700; }
.cond__dir { display: inline-grid; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ag-tint, #EEF7F9); color: var(--ag-cyan-ink, #0E6B82); }
.cond__dir.is-down { transform: rotate(180deg); }
.cond-arrow { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.cond__side { font-weight: 800; }
.cond__side--offshore { color: #11694A; } .cond__side--crossshore { color: #8A5A00; } .cond__side--onshore { color: #B42318; }
.cond__go { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 800; color: var(--ag-cyan-ink, #0E6B82); white-space: nowrap; }

/* the home's live hero: glass on the dark teal */
.cond--dark { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: #FFFFFF; box-shadow: none; }
.cond--dark:hover { border-color: rgba(127, 211, 227, 0.5); }
.cond--dark .cond__head { grid-column: 1 / -1; }
.cond--dark .cond__label, .cond--dark .cond__item small, .cond--dark .cond__head > small, .cond--dark .cond__item b i { color: rgba(207, 234, 240, 0.72); }
.cond--dark .cond__item em { color: var(--ag-on-deep, #CFEAF0); }
.cond--dark .cond__item.sp-tone--good em { color: #3DDC97; } .cond--dark .cond__item.sp-tone--fair em { color: #7FD3E3; }
.cond--dark .cond__item.sp-tone--big em { color: #FF9B7A; } .cond--dark .cond__item.sp-tone--choppy em { color: #F6C66B; }
.cond--dark .cond__dir { background: rgba(255, 255, 255, 0.12); color: var(--ag-sky, #7FD3E3); }
.cond--dark .cond__side--offshore { color: #3DDC97; } .cond--dark .cond__side--crossshore { color: #F6C66B; } .cond--dark .cond__side--onshore { color: #FF9B7A; }
.cond--dark .cond__go { grid-column: 1 / -1; color: var(--ag-sky, #7FD3E3); }

@media (max-width: 1023.98px) {
    .cond { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .cond__head { grid-column: 1 / -1; }
    .cond__go { grid-column: 1 / -1; }
}

/* the event page: under the stats row */
.ev-conditions { margin: 14px 0 18px; }
.cond--dark .cond__label { display: none; }