/* ============================================
   UNR Residence Hall Cards — FULL CSS (PNG icons)
   Foundation/Ingeniux-safe
   - No object-fit, no gap, no sticky, no variables
   - Square corners per request
   ============================================ */

/* Optional container helper (use if needed) */
.rhc-wrap { max-width:1200px; margin:1.5rem auto; padding:0 1rem; }

/* ---- Card ---- */
.rhc-card{
  border:1px solid #e6e6e6;
  border-radius:0;                  /* squared corners */
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ---- Media: background-image approach (default 4:3) ---- */
.rhc-media{
  position:relative;
  width:100%;
  height:0;
  padding-top:62%;                  /* 4:3; use 56.25% for 16:9 if desired */
  background:#cfd8e3 center center / cover no-repeat;
}

/* ---- Titlebar ---- */
.rhc-titlebar{
  background:#041e42;               /* UNR blue */
  color:#fff;
  padding:12px 14px;
  font-weight:800;
  font-size:1.125rem;
  line-height:1.2;
  margin:0;
}

/* ---- Body ---- */
.rhc-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.rhc-tagline{
  margin:0 0 12px;
  color:#333;
  font-size:0.95rem;
  line-height:1.5;
}

/* ---- At-a-glance attributes ---- */
.rhc-attrs{
  margin:0;
  padding:10px 0 0;
  border-top:1px solid #f0f0f0;
}

.rhc-attr{
  display:flex;
  align-items:center;
  margin:8px 0;
}

.rhc-attr dt{
  display:flex; align-items:center;
  width:12rem; min-width:12rem;     /* ensures readable separation from value */
  padding-right:8px;
  font-weight:700;
  color:#041e42;
  line-height:1.3;
}

.rhc-attr dd{
  margin:0;
  color:#111;
  line-height:1.4;
}

/* ---- PNG Icons ---- */
.rhc-icoimg{
  width:20px; height:20px;
  margin-right:8px;
  vertical-align:text-bottom;
  image-rendering:auto;
}

/* ---- CTA Button ---- */
.rhc-btn{
  display:inline-block;
  width:100%;
  text-align:center;
  background:#fff;
  color:#041e42;
  border:2px solid #041e42;
  padding:10px 12px;
  margin-top:14px;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  border-radius:8px;                 /* keep slight rounding on button only */
}

.rhc-btn:hover,
.rhc-btn:focus{
  background:#f3f6ff;
  outline:2px solid #0b2e7a;
  outline-offset:2px;
}

/* ---- Responsive tweak ---- */
@media (max-width:640px){
  .rhc-attr dt{ width:9.5rem; min-width:9.5rem; }
}

/* ---- Optional: focus-visible improvement for keyboard users ---- */
.rhc-card a:focus-visible{
  outline:3px solid #0b2e7a;
  outline-offset:2px;
}

/* ---- Optional: utility if you place cards in Foundation grid ---- */
.rhc-cell{ /* wrap a card in this if you prefer over native Foundation classes */
  box-sizing:border-box;
  padding:10px;
}

/* ===== Scoped button override only (does not touch card layout) ===== */
.rhc-btn {
  background-color: #041e42;       /* navy */
  color: #ffffff;                   /* white text */
  border: 2px solid #041e42;
  border-radius: 0;                 /* square corners */
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rhc-btn:hover,
.rhc-btn:focus {
  background-color: #ffffff;        /* reverse */
  color: #041e42;
  border-color: #041e42;
  text-decoration: none;            /* keep text from underlining */
}

.rhc-btn:focus-visible {
  outline: 3px solid #041e42;
  outline-offset: 2px;
}

/* Heading with icon inline */
.rhc-heading {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #041e42;
  margin-bottom: 0.5rem;
}

/* Manually add spacing since gap is not recognized */
.rhc-heading span {
  display: inline-block;
  margin-right: 0.5rem; /* 8px space between text and icon */
}

/* Icon sizing + alignment */
.rhc-heading-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* =========================================================
   Fix .rhc-btn when cards use a dark (#041e42) background
   Keeps the intended color reversal regardless of global a:hover rules
   ========================================================= */

.rhc-card .rhc-btn,
.rhc-card .rhc-btn:link,
.rhc-card .rhc-btn:visited {
  background-color: #041e42;
  color: #ffffff;
  border: 2px solid #041e42;
  border-radius: 0;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Reverse on hover/focus and FORCE the text color to navy */
.rhc-card .rhc-btn:hover,
.rhc-card .rhc-btn:focus {
  background-color: #ffffff;
  color: #041e42 !important;   /* defeats global a:hover { color: #fff } */
  border-color: #041e42;
  text-decoration: none;
}

/* Remove accidental underlines from global link styles */
.rhc-card a.rhc-btn,
.rhc-card a.rhc-btn:hover,
.rhc-card a.rhc-btn:focus {
  text-decoration: none !important;
}

/* Optional: clearer keyboard focus on dark backgrounds */
.rhc-card .rhc-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* === What's In Your Hall — Single-row layout, centers nicely === */

.rhc-whatsin {
  color: inherit;
  margin: 1.25rem 0;
  text-align: center;
}

.rhc-whatsin__title {
  margin: 0 0 .25rem;
  line-height: 1.25;
}
.rhc-whatsin__intro {
  margin: 0 0 1.25rem;
  max-width: 55ch;
  margin-left: auto;
  margin-right: auto;
}

/* Features container: horizontal row, wrap only when needed */
.rhc-features {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;   /* space between items (no CSS gap conflicts) */
  max-width: 1000px;   /* allow a full row on laptop widths */
}

/* Each feature: icon above text, centered */
.rhc-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 140px;         /* fixed width to help even spacing */
  box-sizing: border-box;
}

/* Icon size and spacing */
.rhc-icoimg {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  image-rendering: -webkit-optimize-contrast;
}

/* Label */
.rhc-feature span {
  line-height: 1.35;
  display: inline-block;
  max-width: 8rem;
}

/* Stack vertically on small screens (< 640px) */
@media screen and (max-width: 639px) {
  .rhc-features {
    flex-direction: column;
    align-items: center;
  }
  .rhc-feature {
    width: 100%;
  }
}

.rhc-whatsin, .rhc-whatsin * { color: inherit; }
@media (prefers-reduced-motion: reduce) { .rhc-feature { transition: none; } }