/* ========================================== */
/* GLOBAL PAGE ENVIRONMENT SETUP              */
/* ========================================== */

/* Container Framework: Locked to 1000px, perfectly centered, zero vertical padding/margins */
.radar-container {
  display: grid;
  grid-template-columns: repeat(6, 157px);
  grid-gap: 8px;
  justify-content: center; /* Forces the 6-column group to center perfectly inside the 1000px limit */
  max-width: 1000px;
  margin: 0 auto;         /* Changed from 20px auto to 0 auto -> REMOVES HEADER/FOOTER GAPS */
  padding: 4px 0;        /* Tightened vertical track padding; zeroed out horizontal margins */
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
  background-color: #f8fafc; /* Ultra-subtle light slate framing background tint */
}

/* ========================================== */
/* COMPACT PIXEL NAVIGATION BLOCKS            */
/* ========================================== */
/* Compact Pixel Navigation Blocks */
.pixel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Aligns content from the top ceiling down */
  position: relative;          /* CRITICAL: Creates a physical floor anchor for the text */
  width: 157px;
  height: 138px;
  padding: 4px 4px 24px 4px;   /* Added a 28px bottom padding buffer to safeguard text territory */
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pixel:hover {
  transform: translate(2px, -4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  filter: brightness(0.96);
}

/* HORIZONTAL & VERTICAL IMAGE CENTERING MECHANICS */
.pixel img {
  max-width: 135px;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;

  /* Pushing margin-top and margin-bottom to auto constructs a perfect vertical 
     gravitational pocket in the upper zone. Shorter images will now float dead-center. */
  margin-top: auto;
  margin-bottom: auto;
}

/* DECK-ANCHORED SINGLE-LINE TEXT LABEL */
.pixel span {
  position: absolute;      /* Pins the label directly to the cell template frame */
  bottom: 2px;             /* Locks the text line precisely 6px above the bottom lip */
  left: 0;

  display: block;
  text-align: center;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  padding: 0 0px;
  box-sizing: border-box;

  /* Single-line layout protection walls */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ========================================== */
/* SUBGROUP COASTAL THEME COLOR PALETTES      */
/* ========================================== */
.subgroup-tropical      { background-color: #aaddff; }
.subgroup-extratropical { background-color: #b2f5ea; }
.subgroup-about         { background-color: #71ebf0; }
.subgroup-external      { background-color: #cfd8dc; }

/* ========================================== */
/* FIXED DESKTOP MATRIX POSITIONING MAP       */
/* ========================================== */
@media (min-width: 960px) {
  /* ROW 1: Administrative Links */
  .home      { grid-row: 1; grid-column: 1; }
  .vlab      { grid-row: 1; grid-column: 2; }
  .guidance  { grid-row: 1; grid-column: 3; }
  .notices   { grid-row: 1; grid-column: 4; }
  .pubs      { grid-row: 1; grid-column: 5; }
  .slosh     { grid-row: 1; grid-column: 6; }

  /* ROW 2: Storm Events */
  .atl-ev    { grid-row: 2; grid-column: 1; }
  .pac-ev    { grid-row: 2; grid-column: 2; }

  /* ROW 3: Core Real-Time Guidance Engine */
  .psurge    { grid-row: 3; grid-column: 1; }
  .sdp       { grid-row: 3; grid-column: 2; }
  .petss     { grid-row: 3; grid-column: 3; }
  .etsurge2  { grid-row: 3; grid-column: 4; }
  .etsurge1  { grid-row: 3; grid-column: 5; }
  .stofs     { grid-row: 3; grid-column: 6; }

  /* ROW 4: Live Observational Feeds */
  .nhc-about { grid-row: 4; grid-column: 1; }
  .nwps      { grid-row: 4; grid-column: 2; }
  .mag       { grid-row: 4; grid-column: 3; }
  .coops     { grid-row: 4; grid-column: 4; }
  .nowcoast  { grid-row: 4; grid-column: 5; }
}

/* ========================================== */
/* SMART MOBILE STACK OVERRIDE                */
/* ========================================== */
@media (max-width: 959px) {
  .radar-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 6px;
    padding: 8px;
    background-color: #ffffff;
    border: none;
  }
  .pixel {
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    height: 120px;
  }
  .pixel img { max-height: 75px !important; margin: auto; }
  .pixel span { font-size: 14px; margin-top: 4px; }
}