/* ============================================
   UNR Office of Organizational Resilience
   Emergency Procedure Cards — FULL CSS
   Foundation / Ingeniux-safe
   - No object-fit, no gap, no sticky, no vars
   - Square corners
   ============================================ */

/* Optional outer wrapper */
.uor-wrap {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

/* Optional intro text */
.uor-intro {
  margin: 0 0 1rem;
}

/* Card grid */
.uor-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.75rem; /* fake gap via negative margin */
}

/* Base card */
.uor-card {
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  margin: 0 0.75rem 1.5rem;
  width: 100%;
  display: flex;               /* for equal-height layout */
  flex-direction: column;
}

/* 2-up at medium */
@media (min-width: 40em) {
  .uor-card {
    width: calc(50% - 1.5rem);
  }
}

/* 3-up at large */
@media (min-width: 64em) {
  .uor-card {
    width: calc(33.333% - 1.5rem);
  }
}

/* Header bar: Nevada Blue, icon + title */
.uor-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #041e42; /* Nevada Blue */
  color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Icon (PNG) */
.uor-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 0.75rem;
  flex: 0 0 auto;
}

/* Emergency title (uses large-body from global CSS) */
.uor-title {
  margin: 0;
  line-height: 1.3;
}

/* Force white title text even if large-body sets a color */
.uor-header .uor-title {
  color: #ffffff;
}

/* Body copy */
.uor-body {
  padding: 0.75rem 1rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  flex: 1 1 auto; /* fill remaining height */
}

.uor-body p {
  margin: 0 0 0.5rem;
}

.uor-body p:last-child {
  margin-bottom: 0;
}

/* Emphasis for "label" words like RUN / HIDE / FIGHT */
.uor-body strong {
  font-weight: 600;
}

/* Optional soft section divider */
.uor-body-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0f0f0;
}

/* ============================================
   Variant: Framework blocks (4-up on desktop)
   Scope: .uor-wrap--framework
   ============================================ */

/* Mobile: 1-up (unchanged) */
.uor-wrap--framework .uor-card {
  width: 100%;
}

/* Medium: 2-up */
@media (min-width: 40em) {
  .uor-wrap--framework .uor-card {
    width: calc(50% - 1.5rem);
  }
}

/* Large: 4-up */
@media (min-width: 64em) {
  .uor-wrap--framework .uor-card {
    width: calc(25% - 1.5rem);
  }
}

/* Framework variant: left-align body text */
.uor-wrap--framework .uor-body {
  text-align: left;
}

/* ============================================
   PATCHES: Framework title wrapping + alignment
   Scope: .uor-wrap--framework
   ============================================ */

/* Ensure header content behaves well in flex (prevents odd wraps) */
.uor-wrap--framework .uor-title {
  flex: 1 1 auto;
  min-width: 0;          /* important: allows flex item to shrink instead of forcing wraps */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* Keep icon fixed and allow title to take remaining width */
.uor-wrap--framework .uor-icon {
  flex: 0 0 auto;
}

/* Left-align titles in the framework variant */
.uor-wrap--framework .uor-header {
  justify-content: flex-start;
  text-align: left;
}

/* Slightly tighten title sizing for 4-up desktop layout to reduce wrapping */
@media (min-width: 64em) {
  .uor-wrap--framework .uor-title {
    font-size: 1.2rem;  /* tweak between 1.0–1.1rem if needed */
    line-height: 1.2;
  }
}
/* ============================================
   Framework layout: intro + cards (2-up, stacks on mobile)
   Class: .uor-framework
   ============================================ */

.uor-framework-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.75rem; /* match card grid spacing rhythm */
}

.uor-framework-col {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0.75rem;
}

/* Medium+ = 2-up (intro + cards side-by-side) */
@media (min-width: 40em) {
  .uor-framework-col--intro,
  .uor-framework-col--cards {
    width: 50%;
  }
}

/* Optional: tidy paragraph spacing inside the intro column */
.uor-framework-col--intro .small-body-copy {
  margin: 0 0 0.75rem;
}

.uor-framework-col--intro .small-body-copy:last-child {
  margin-bottom: 0;
}

/* ============================================
   Variant: Framework blocks (2x2 on desktop)
   Scope: .uor-wrap--framework-2x2
   ============================================ */

/* Mobile: 1-up */
.uor-wrap--framework-2x2 .uor-card {
  width: 100%;
}

/* Medium+: 2-up */
@media (min-width: 40em) {
  .uor-wrap--framework-2x2 .uor-card {
    width: calc(50% - 1.5rem);
  }
}

/* Large+: stay 2-up (override the 4-up rule) */
@media (min-width: 64em) {
  .uor-wrap--framework-2x2 .uor-card {
    width: calc(50% - 1.5rem);
  }
}