quadrant_block/* quadrant-grid.css */

/* Define variables for easier theming */
:root {
  --quadrant-gap: 1.5rem; /* Gap between grid items */
  --quadrant-item-padding: 1.5rem;
  --quadrant-item-bg: black; /* Light background for cards */
  --quadrant-item-border-radius: 8px;
  --quadrant-item-border: 1px solid #000e;
  --quadrant-heading-color: #222;
  --quadrant-text-color: #555;
  --quadrant-link-color: #0056b3;
  --quadrant-link-hover-color: #003d80;
  --quadrant-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Base grid container */
.quadrant-grid {
  display: grid;
  gap: 1.5rem;
  /* Default to 2 columns for desktop/tablet */
  grid-template-columns: repeat(2, 1fr);
  margin: 1rem 0; /* Add some vertical margin */
  background-color: navy;
  width: 100%;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Individual grid item styling (Card-like) */
.quadrant-grid__item {
  display: flex; /* Use flexbox to arrange content and link */
  flex-direction: column; /* Stack content above link */
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #000e;
  padding: 1rem;
  text-decoration: none; /* In case item itself is linked (though link below is separate) */
  color: inherit;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  overflow: hidden; /* Ensure content doesn't overflow */
  margin: 2px 2px 2px 2px;
}

/* Hover effect for items */
.quadrant-grid__item:hover,
.quadrant-grid__item:focus-within { /* Apply effect when link inside is focused */
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Wrapper for heading and description */
.quadrant-grid__content {
  flex-grow: 1; /* Allows this section to push the link down */
}

/* Heading style */
.quadrant-grid__heading {
  font-size: 1.3rem; /* Adjust size as needed */
  font-weight: 600;
  color: #222;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Description style */
.quadrant-grid__description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

/* Remove default margin from paragraph within description */
.quadrant-grid__description p {
    margin: 0;
}
.quadrant-grid__description p:not(:last-child) {
    margin-bottom: 1em; /* Add margin between paragraphs if needed */
}


/* Link styling */
.quadrant-grid__link {
  display: inline-flex; /* Align text and icon */
  align-items: center;
  margin-top: 1rem; /* Space above the link */
  padding-top: 0.75rem; /* Add padding for separation */
  color:  #0056b3;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
  border-top: 1px solid #eee; /* Subtle separator line */
  align-self: flex-start; /* Don't stretch link width */
}

.quadrant-grid__link:hover,
.quadrant-grid__link:focus {
  color: #003d80;
  text-decoration: underline;
}

/* Optional icon style */
.quadrant-grid__icon {
  margin-left: 0.4em;
  transition: transform 0.2s ease;
}

.quadrant-grid__link:hover .quadrant-grid__icon,
.quadrant-grid__link:focus .quadrant-grid__icon {
   transform: translateX(3px);
}


/* --- Responsive Adjustments --- */

/* Tablet-like devices and potentially wider grids */
@media (min-width: 992px) {
  /* Optional: Switch to 3 columns on larger screens */
  /* .quadrant-grid {
    grid-template-columns: repeat(3, 1fr);
  } */
}

/* Mobile devices - Stack into a single column */
@media (max-width: 767px) {
  .quadrant-grid {
    grid-template-columns: 1fr; /* Single column */
  }

  /* Optional: Reduce padding on mobile */
  .quadrant-grid__item {
     padding: 1rem;
  }
  :root {
     --quadrant-gap: 1rem; /* Reduce gap on mobile */
  }
}