/* Lightweight responsive grid for Town of Amity site
   Usage examples:
   - 1 column (default): <div class="grid"> ...
   - 2 columns (stack on mobile): <div class="grid cols-2"> ...
   - Or responsive: <div class="grid md-cols-2"> ... (1 col < 768px, 2 cols >= 768px)
*/

:root {
  --container-max: 1200px;
  --container-pad: 1rem;
  --gap: 1rem;
  --gap-sm: 0.5rem;
  --gap-lg: 2rem;
}

/* Basic container to center content with fluid padding */
.container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

/* Core grid */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* default: single column */
  gap: var(--gap);
}

/* Column count helpers */
.grid.cols-1 { grid-template-columns: 1fr; }
/* Two columns that collapse to 1 on narrow screens */
.grid.cols-2 { grid-template-columns: 1fr; }

/* Gap size utilities */
.grid.gap-0 { gap: 0; }
.grid.gap-sm { gap: var(--gap-sm); }
.grid.gap-md { gap: var(--gap); }
.grid.gap-lg { gap: var(--gap-lg); }

/* Alignment utilities */
.grid.items-start { align-items: start; }
.grid.items-center { align-items: center; }
.grid.items-end { align-items: end; }
.grid.content-start { justify-content: start; }
.grid.content-center { justify-content: center; }
.grid.content-end { justify-content: end; }

/* Common responsive breakpoints */
@media (min-width: 640px) { /* small */
  .sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) { /* medium */
  .md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) { /* large */
  .lg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Make the non-prefixed .cols-2 become two columns starting at small screens */
@media (min-width: 640px) {
  .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Utility: force stack on mobile, auto at >=640px */
.stack-on-mobile { grid-template-columns: 1fr !important; }
@media (min-width: 640px) {
  .stack-on-mobile.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Media defaults inside grids */
.grid img, .grid video, .grid canvas, .grid iframe { max-width: 100%; height: auto; display: block; }

/* Optional: make cards or blocks stretch equally in each row */
.grid.equal-rows > * { height: 100%; }

.space-buttons {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    align-items: center;
}

.space-buttons > .button-small {
    font-size: 1em;
}

@media (max-width: 640px) {
    .space-buttons {
        gap: 1rem;
    }
}

.news-post-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.news-post-container > hr:last-child {
    display: none;
}

.news-post {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}

.news-post > h3 {
    font-size: 1.2em;
    font-weight: bold;
}

.news-post > .subtitle {
    font-size: 1.1em;
    color: #666;
}