/* =======================================================
   UNODC DDDS Custom CSS
   Supports:
   - rab-grid-nx2 (2xN layout with image & text links)
   - rab-grid-nxn (NxN layout with image cards)
   ======================================================= */

/* ====== GLOBAL STYLES ====== */
body {
  margin: 1.5rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #fafafa;
  color: #222;
  line-height: 1.5;
}

/* ====== COMMON BOX STYLE ====== */
.rab-box {
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* =======================================================
   1️⃣ 2×N LAYOUT (Text wrapping around image)
   ======================================================= */
.rab-grid-nx2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 1rem;
}

/* Box inside nx2 layout */
.rab-box-nx2 {
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}

/* Float image to allow text wrapping */
.rab-box-nx2 img {
  float: left;
  width: 8rem;
  height: auto;
  margin: 0 1rem 1rem 0;
  border-radius: 8px;
  object-fit: cover;
}

/* Text links wrapping beside image */
.rab-box a {
  display: block;
  color: #111;
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  text-decoration: underline dashed;
  text-underline-offset: 0.3rem;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.rab-box a:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.55);
}

/* Responsive: stack image above text */
@media (max-width: 700px) {
  .rab-box-nx2 img {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* ============================
   NxN card improvements
   ============================ */

/* Grid container for NxN layout */
.rab-grid-nxn {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  padding: 0.5rem;
}

/* Card container: relative so the title can be absolutely placed at bottom */
.rab-box-nxn {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  /* big inner spacing as requested (adjusts on small screens) */
  padding: 5rem;
  /* ensure reasonable minimum height so padding makes sense */
  min-height: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-clip: padding-box;
}

/* square image centered horizontally & vertically inside the padded area */
.rab-box-nxn .card-media {
  width: 8rem;           /* square size */
  height: 8rem;
  display: block;
  object-fit: contain;   /* preserve image, centered within square */
  border-radius: 8px;
}

/* Title / label placed at bottom, centered */
.rab-box-nxn .card-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin: 0;
  padding: 0 0.75rem;
  text-align: center;
  font-weight: 700;
  color: #000;
  text-decoration: underline dashed;
  text-underline-offset: 0.35rem;
  /* avoid covering the image when card is short */
  pointer-events: none;
  white-space: normal;
}

/* optional: allow inner link in title (clickable) */
.rab-box-nxn .card-title a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}
.rab-box-nxn .card-title a:hover { text-decoration: underline; }

/* subtle gradient bottom overlay (keeps title readable on light/dark images) */
.rab-box-nxn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3.2rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.06));
  pointer-events: none;
}

/* Example color ids remain usable */
#Box1-nxn { background-color: #f39893; }
#Box2-nxn { background-color: #7d808a; }
#Box3-nxn { background-color: #c3c4e3; }

/* Make layout responsive: reduce padding and image size on smaller screens */
@media (max-width: 900px) {
  .rab-box-nxn { padding: 3rem; min-height: 12rem; }
  .rab-box-nxn .card-media { width: 6.5rem; height: 6.5rem; }
  .rab-box-nxn::after { height: 3rem; }
}

@media (max-width: 480px) {
  .rab-box-nxn { padding: 1.25rem; min-height: 10rem; }
  .rab-box-nxn .card-media { width: 5.5rem; height: 5.5rem; }
  .rab-box-nxn .card-title { bottom: 0.6rem; font-size: 0.95rem; }
  .rab-grid-nxn { gap: 0.5rem; }
}



/* Example color palette for NxN boxes */
#Box1-nxn { background-color: #f39893; }
#Box2-nxn { background-color: #7d808a; }
#Box3-nxn { background-color: #c3c4e3; }
#Box4-nxn { background-color: #fed1c1; }
#Box5-nxn { background-color: #7ac2da; }
#Box6-nxn { background-color: #21898c; }
#Box7-nxn { background-color: #94b97d; }
#Box8-nxn { background-color: #d593df; }
#Box9-nxn { background-color: #ddceaf; }
#Box10-nxn { background-color: #f1c85e; }
#Box11-nxn { background-color: #d6d6d6; }
#Box12-nxn { background-color: #84a1c1; }
#Box13-nxn { background-color: #c3c4e3; }

/* White text link styling */
.white-link {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.white-link:hover,
.white-link:focus {
  font-style: italic;
}