/* Reusable styles for centered heading/description and clickable image links */
/* Uses brand vars & rounded corners to match your existing buttons/colors */

:root {
  /* fallbacks in case this file is used standalone */
  --brand-primary: #007bff;
  --brand-primary-hover: #00ccff;
  --brand-primary-press: #002e5f;
}

/* ---------- Centered heading/description block ---------- */
.hero-center {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 40vh;               /* sits “in the middle” visually */
  padding: clamp(1rem, 4vw, 3rem);
}

.hero-center .title {
  font-family: inherit;           /* Roboto from your global.css */
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.5rem 0;
}

.hero-center .description {
  max-width: 65ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Clickable image link cards ---------- */
.gallery {
  display: grid;
  /* auto-fit keeps items centered; 280px fixes max card width */
  grid-template-columns: repeat(auto-fit, 280px);
  gap: 1.5rem;
  justify-content: center;     /* centers 1–2 items */
  max-width: 1100px;           /* caps at ~3 columns + gaps */
  margin: 0 auto;
}

/* Hard reset the link’s inherited spacing and all its descendants */
.gallery .image-link,
.gallery .image-link * {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  line-height: 1.35 !important;   /* compact, readable */
  text-transform: none !important;
  text-indent: 0 !important;
  white-space: normal !important;
}

/* Overlay copy: tidy, compact, readable */
.gallery .overlay {
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 1rem;
}

.gallery .overlay p {
  margin: 0;
  max-width: 38ch;
}

.card {
  margin: 0;
}

.card .image-link {
  position: relative;
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  outline: none;
}

/* Image area only */
.card .image-link .media {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0; /* top corners rounded, matches caption bottom */
}

/* Keep image responsive */
.card .image-link .media img {
  display: block;
  width: 100%;
  height: 280px;
}

/* Overlay setup */
.card .overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;                 /* prevents flicker */
  transition: opacity 0.3s ease;
}

/* Kill ALL inherited weirdness from the <a> for overlay text only */
.card .overlay-content {
  all: revert;           
  color: #fff;                 /* re-apply what we actually want */
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: normal;
  letter-spacing: 0;           /* fallback for engines that treat 'normal' oddly */
  word-spacing: normal;
  word-spacing: 0;             /* fallback */
  text-align: justify;
  /* max-width: 38ch; */
  margin: 0 ;              /* balance with your overlay padding */
}

.card .image-link:hover .overlay { opacity: 1; }

.card .overlay p { margin: 0; max-width: 38ch; }

.card .image-link:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

.card .image-link:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 16px rgba(26, 24, 24, 0.35);
  filter: saturate(1.05);
}

.card .image-link:active {
  transform: translateY(0);
  box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.3);
}

/* Caption styled to harmonize with your brand colors */
.card figcaption {
  padding: 0.6rem 0.85rem;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 0 0 0.5rem 0.5rem;    /* bottom corners only */
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.card .image-link:hover + figcaption {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 8px 8px 16px rgba(26, 24, 24, 0.35);
}
.card .image-link:active + figcaption { background: var(--brand-primary-press); }

.card img { display: block; width: 100%; height: auto; }