/* ============================================================================
 * weather-tools.css
 * Standalone "Weather Analysis Tools" beige toolbar, extracted from
 * forecast-cp1.css + forecast-cp3.css so it can be dropped onto pages that do
 * NOT load the forecast centerpiece stylesheets (analysis.php, satellite.php,
 * observations.php, models.php).
 *
 * The forecast version scopes its --cp-* variables to the .ialert-cp wrapper,
 * which these pages don't have. Those vars are redeclared locally on
 * .ialert-cp__tools below so the section is self-contained. The global
 * --ialert-* brand tokens still come from ialert.css :root.
 *
 * Source of truth for the look is still the forecast page. If the design
 * changes there, mirror the relevant blocks here.
 * ========================================================================== */

.ialert-cp__tools {
  /* Local copy of the --cp-* tokens (forecast scopes these to .ialert-cp). */
  --cp-content-w: 1140px;
  --cp-pad-y: 48px;
  --cp-pad-y-tight: 36px;
  --cp-pad-x: 24px;
  --cp-rule-soft: rgba(23, 26, 31, 0.08);
  --cp-rule-on-dark: rgba(244, 241, 234, 0.18);
  --cp-light-surface: #faf8f3;

  background: var(--cp-light-surface);
  color: var(--ialert-text);
  padding: var(--cp-pad-y-tight) 0 var(--cp-pad-y) 0;
  font-family: var(--ialert-font-display);
}
.ialert-cp__tools *,
.ialert-cp__tools *::before,
.ialert-cp__tools *::after { box-sizing: border-box; }

.ialert-cp__inner {
  max-width: var(--cp-content-w);
  margin: 0 auto;
  padding: 0 var(--cp-pad-x);
}

/* ---------- eyebrow + section head ---------- */
.ialert-cp__sec-head { margin: 0 0 22px; }
.ialert-cp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ialert-text-muted);
  margin: 0 0 22px;
}
.ialert-cp__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ialert-red);
  flex-shrink: 0;
}

/* ---------- grid + base tool chrome (from forecast-cp1.css) ---------- */
.ialert-cp__tools--beige {
  color: var(--ialert-text);
  padding: var(--cp-pad-y) 0;
  border-bottom: 1px solid var(--ialert-red);
  background: #f3efe5;
}

.ialert-cp__tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--cp-rule-on-dark);
}
.ialert-cp__tools-grid > li {
  display: flex;
  border-bottom: 1px solid var(--cp-rule-on-dark);
}
.ialert-cp__tool {
  display: flex;
  align-items: stretch;
  gap: 24px;
  flex: 1;
  padding: 28px 32px;
  background: transparent;
  color: var(--ialert-on-dark);
  text-decoration: none;
  transition: background 140ms ease;
}
.ialert-cp__tool-thumb {
  display: block;
  width: 240px;
  height: 160px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--cp-rule-on-dark);
  background: #f4f5f7;
}
.ialert-cp__tool-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ialert-cp__tool-h {
  margin: 0 0 10px;
  font-family: var(--ialert-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ialert-on-dark);
  line-height: 1.2;
}
.ialert-cp__tool-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.78);
}

/* compact variant (matches forecast markup classes) */
.ialert-cp__tools--compact .ialert-cp__tool {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}
.ialert-cp__tools--compact .ialert-cp__tool-thumb {
  width: 140px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0;
}
.ialert-cp__tools--compact .ialert-cp__tool-text { min-width: 0; }
.ialert-cp__tools--compact .ialert-cp__tool-h    { margin: 0 0 4px; font-size: 17px; }
.ialert-cp__tools--compact .ialert-cp__tool-sub  { font-size: 12px; }

/* ============================================================================
 * Beige full-bleed image cards (from forecast-cp3.css). Loaded AFTER the base
 * rules above so these win, matching the forecast load order (cp1 then cp3).
 * ========================================================================== */
.ialert-cp__tools--beige { padding-top: 24px; padding-bottom: 24px; }
.ialert-cp__tools--beige .ialert-cp__sec-head { margin-bottom: 8px; }

.ialert-cp__tools--beige .ialert-cp__tools-grid {
  gap: 14px;
  border-top: none;
  padding-top: 4px;
}
.ialert-cp__tools--beige .ialert-cp__tools-grid > li {
  position: relative;
  height: 160px;
  border-top: none;
  border-bottom: none;
  border-radius: 10px;
  overflow: hidden;
  transform: none;
  box-shadow: 0 1px 3px rgba(23,26,31,0.07), 0 4px 14px rgba(23,26,31,0.06);
  transition: box-shadow 160ms ease;
}
.ialert-cp__tools--beige .ialert-cp__tools-grid > li:hover {
  transform: none;
  box-shadow: 0 4px 18px rgba(23,26,31,0.18);
}
.ialert-cp__tools--beige .ialert-cp__tools-grid > li + li { border-left: none; }
.ialert-cp__tools--beige .ialert-cp__tool {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  gap: 0;
  background: transparent;
}
.ialert-cp__tools--beige .ialert-cp__tool:hover,
.ialert-cp__tools--beige .ialert-cp__tool:focus-visible { background: transparent; }
.ialert-cp__tools--beige .ialert-cp__tool-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  transition: transform 320ms ease, filter 320ms ease;
}
.ialert-cp__tools--beige .ialert-cp__tool::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,15,22,0.82) 0%, rgba(12,15,22,0.30) 52%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  transition: background 200ms ease;
}
.ialert-cp__tools--beige .ialert-cp__tool-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: none;
}
.ialert-cp__tools--beige .ialert-cp__tool-h {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.ialert-cp__tools--beige .ialert-cp__tool-sub {
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.50);
}
.ialert-cp__tools--beige .ialert-cp__tools-grid > li:hover .ialert-cp__tool-thumb {
  transform: scale(1.05);
  filter: brightness(1.08);
}
.ialert-cp__tools--beige .ialert-cp__tools-grid > li:hover .ialert-cp__tool::after {
  background: linear-gradient(to top, rgba(12,15,22,0.90) 0%, rgba(12,15,22,0.42) 52%, transparent 100%);
}

@media (min-width: 721px) {
  /* auto-fit keeps every tile on one row regardless of count: a 5-tile toolbar
     (six tools minus the current page) renders 5-up at the 1140px content
     width; the minmax floor of 165px caps the row at 6 columns. */
  .ialert-cp__tools--beige .ialert-cp__tools-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  }
  .ialert-cp__tools--beige .ialert-cp__tools-grid > li {
    height: 210px;
  }
  .ialert-cp__tools--beige .ialert-cp__tool-h { font-size: 15px; }
  .ialert-cp__tools--beige .ialert-cp__tool-text { padding: 14px 16px; gap: 4px; }
}

@media (max-width: 540px) {
  .ialert-cp__tools-grid { grid-template-columns: 1fr; }
  .ialert-cp__tools-grid > li + li { border-left: 0; }
}