:root{
  --gutter-min: 0px;   /* minimum visible gutter          ORIG: 40px */
  --gutter-pref: 0px; /* preferred gutter on wide screens ORIG: 120px */
  --container-bg: #FAF9F6;
  /* --container-bg: transparent; */
  /* --card-bg: rgba(255,255,255,0.98); */
  --card-bg: rgba(245, 245, 245, 0.95);
  --card-padding: 14px;
  --gap: 12px;
  --radius: 6px;
}

/* Outer grid: header, left gutter, content, footer.
   Left column uses minmax so it never shrinks below --gutter-min. */
.container{
  display: grid;
  grid-template-areas:
    "header  header"
    "blank   content"
    "footer  footer";
  grid-template-columns: minmax(var(--gutter-min), var(--gutter-pref)) 1fr;
  gap: var(--gap);
  background-color: var(--container-bg);
  padding: 12px;
  box-sizing: border-box;
  align-content: start;
  overflow-x: auto; /* allow horizontal scroll if viewport narrower than gutter */
}

/* Generic reset for direct children */
.container > *{
  box-sizing: border-box;
  margin: 0;
}

/* Header */
.container > .header{
  grid-area: header;
  /*background: rgba(255,255,255,0.95);*/
  background: #E3E3E3;
  /* padding: 12px; */
  padding: 6px 12px; /* 6px top/bottom, 12px left/right */
  border-radius: var(--radius);
  text-align: center;
  max-height: 240px;
  overflow: auto;
  /* border: 2px solid rgba(0,0,0,0.06); */
  /*border-left:  6px solid rgba(0,0,0,0.08);
  border-right: 6px solid rgba(0,0,0,0.08);
  border-top: 6px solid rgba(0,0,0,0.08);
  border-bottom: 6px solid rgba(0,0,0,0.08);
  */


  /* outline: 2px solid rgba(0,0,0,0.06); */
  /* outline-offset: 6px; */
}

/* Left gutter (visually empty but always reserves space) */
.container > .blank{
  grid-area: blank;
  background: transparent;
  padding: 0;
  border-radius: 0;
  min-width: var(--gutter-min);
}

/* Content: stacked cards */
.container > .content{
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: stretch;
  padding: 0;          /* cards provide padding */
  background: transparent;
  min-height: 0;
}

/* Card style */
.content .card{
  background: var(--card-bg);
  padding: var(--card-padding);
  border-radius: var(--radius);
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.08); */
  /* box-shadow: 0 6px 18px rgba(0,0,0,0.08); */
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.04);
}

/* Footer */
.container > .footer{
  grid-area: footer;
  background: rgba(255,255,255,0.95);
  padding: 12px;
  border-radius: var(--radius);
  text-align: center;
}

/* Headings inside cards/header/footer */
.container h2,
.container h3,
.container h4{
  margin: 0 0 8px 0;
}

/* Responsive breakpoint: at small widths stack vertically but preserve left gutter
   by keeping the blank element visible and adding left padding to content equal to gutter. */
@media (max-width:640px){
  .container{
    grid-template-areas:
      "header"
      "content"
      "blank"
      "footer";
    grid-template-columns: 1fr; /* content takes full width */
    gap: 10px;
    padding: 10px;
  }

  /* Keep the blank element visible (narrow) so it still reserves space */
  .container > .blank{
    display: block;
    min-width: var(--gutter-min);
    height: 12px; /* small presence in stacked layout */
    /* ensure it does not collapse visually */
  }

  /* ensure content has left padding equal to the gutter so cards remain offset */
  .container > .content{
    padding-left: var(--gutter-min);
    padding-right: 0;
  }

  /* reduce card radii or padding on small screens if desired */
  .content .card{
    padding: calc(var(--card-padding) * 0.9);
  }
}

body {
    /* (min, preferred, max) NOTE: std font is 16px */
    font-size: clamp(20px, 1.8vw, 32px);
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

table {
    border-spacing: 12px;
    border-collapse: separate;
}

td {
    width: 210px;
    height: 58px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

/* Normal hover effect */
td:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.18);
}

td a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 20px;
}

td a:hover {
    color: #0078d4;
}

/* ====================== ACTIVE STATE ====================== */
td a.active {
    background: #0078d4;
    color: white;
    box-shadow: 0 8px 18px rgba(0, 120, 212, 0.35);
}

/* Prevent the active card from lifting on hover */
td:has(a.active):hover {
    transform: none;
    box-shadow: 0 8px 18px rgba(0, 120, 212, 0.35);
}

td:has(a.active) a:hover {
    background: #0066b8;
}

/* Make spacing even tighter on mobile */
@media (max-width: 768px) {
    table {
        border-spacing: 8px;
    }
    td {
        width: 140px;     /* Slightly narrower cards on small screens */
        height: 62px;
    }
}