/* CORWX UI: the shared card and tile styles for every CORWX block (module standard, Oct 21, 2026).
   Brand: Cascade Navy #0B1D34, Alpenglow Orange #E8752A, Sagebrush Gold #D4A15A, High Desert Blue #486E8F,
   Volcanic Sand #F2ECE2, white. Oswald 700 uppercase headings, Montserrat body.
   Every class starts "cx-" (one block's own classes keep their own prefix). Use with corwx-ui.js.

   .cx-block            a block's outer band (sand); .cx-block--navy / --white for the others
   .cx-wrap             the content width
   .cx-h2, .cx-h3       the block heading and a group heading inside it
   .cx-note, .cx-credit small notes; the source credit at the end of a block
   .cx-grid             a responsive grid of tiles or cards (--cx-min sets the smallest column, default 8.5rem)
   .cx-card             a white card; .cx-card--lead adds the orange top rule
   .cx-tile             a small centred card (one place, one camera, one reading)
   a.cx-link            makes a card or tile a link, with a lift on hover and a gold focus ring
   .cx-ic               an icon (from CORWX_UI.icon); size set by where it sits
   .cx-temp, .cx-label  a big number; a small uppercase label
   .cx-periods, .cx-period   a row of forecast periods inside a card

   File: corwx-ui.css
   Copyright (c) 2026 Connect Central Oregon. All rights reserved.
   License pending. Not licensed for reuse or redistribution without written permission. */

.cx-block{background:#F2ECE2;color:#0B1D34;font-family:Montserrat,sans-serif;padding:0 0 3rem}
.cx-block--navy{background:linear-gradient(180deg,#0B1D34 0%,#12294A 100%);color:#fff}
.cx-block--white{background:#fff}
.cx-block *{box-sizing:border-box}
.cx-wrap{max-width:70rem;margin:0 auto;padding:1.5rem 1.5rem 0}
.cx-block .cx-h2{font:700 1.6rem/1.2 Oswald,sans-serif;text-transform:uppercase;color:#0B1D34;margin:2.25rem 0 .9rem}
.cx-block .cx-wrap > .cx-h2:first-child{margin-top:.5rem}
.cx-block .cx-h3{font:700 1.15rem/1.2 Oswald,sans-serif;text-transform:uppercase;color:#486E8F;margin:1.25rem 0 .6rem}
.cx-block--navy .cx-h2{color:#fff}
.cx-block--navy .cx-h3{color:#D4A15A}
.cx-note{font-size:14px;font-weight:600;color:#486E8F;margin:0 0 1rem}
.cx-credit{font-size:13px;font-weight:600;color:#486E8F;margin:.5rem 0 0}
.cx-block--navy .cx-note,.cx-block--navy .cx-credit{color:#E4ECF3}

.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cx-min,8.5rem),1fr));gap:.75rem;margin:0 0 .5rem}
.cx-card{background:#fff;color:#0B1D34;border-radius:10px;padding:1.25rem 1.5rem;box-shadow:0 8px 20px rgba(11,29,52,.10);margin:0 0 1rem}
.cx-grid > .cx-card{margin:0}
.cx-card--lead{border-top:4px solid #E8752A}
.cx-tile{background:#fff;color:#0B1D34;border-radius:10px;padding:.8rem .6rem;box-shadow:0 8px 20px rgba(11,29,52,.10);text-align:center}
.cx-tile strong{display:block;font:700 .95rem/1.2 Oswald,sans-serif;text-transform:uppercase;color:#0B1D34}
.cx-tile small{display:block;font-size:11.5px;font-weight:600;color:#486E8F;line-height:1.3;margin-top:.2rem}

a.cx-link{display:block;text-decoration:none;transition:transform .15s,box-shadow .15s}
.cx-block a.cx-link,.cx-block a.cx-link:hover,.cx-block a.cx-link:focus,.cx-block a.cx-link:visited{color:#0B1D34!important;text-decoration:none!important}
a.cx-link:hover,a.cx-link:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,29,52,.18)}
a.cx-link:focus-visible{outline:3px solid #D4A15A;outline-offset:2px}
.cx-go{float:right;font:600 12px/1.9 Montserrat,sans-serif;text-transform:none;color:#486E8F;letter-spacing:0}
a.cx-link:hover .cx-go,a.cx-link:focus-visible .cx-go{color:#E8752A;text-decoration:underline}

.cx-ic{display:block;line-height:0}
.cx-ic svg{display:block;width:52px;height:52px}
.cx-tile .cx-ic svg{width:68px;height:68px;margin:.1rem auto -.2rem}
.cx-temp{font:700 1.5rem/1.1 Oswald,sans-serif}
.cx-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#486E8F}

.cx-card h4.cx-place{font:700 1.3rem/1.2 Oswald,sans-serif;text-transform:uppercase;color:#0B1D34;margin:0 0 .7rem;padding-bottom:.4rem;border-bottom:2px solid #F2ECE2}
.cx-periods{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem}
.cx-period{border-top:3px solid #D4A15A;padding-top:.4rem;font-size:13px;line-height:1.4}
.cx-period strong{display:block;font:700 .9rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#0B1D34}
.cx-period .cx-ic svg{margin:.1rem 0 .1rem -.3rem}
.cx-period .cx-temp{margin:.1rem 0}

@media (max-width:600px){.cx-wrap{padding:1rem 1rem 0}}
@media (prefers-reduced-motion:reduce){a.cx-link{transition:none}}