:root{
  --teal:#099488;       /* brand teal */
  --teal-700:#07756C;   /* hover teal */
  --white:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --bg:#f6f9fb;
}

/* Base */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--white);
}
.container{ width:min(1200px, 92%); margin-inline:auto; }

/* Hero */
.gallery-hero{
color:var(--white);
  background:var(--teal);

  text-align:center;
  padding: 72px 20px;
}
.gallery-hero h1{
  margin:0 0 10px;
  font-size:clamp(28px, 5vw, 44px);
  font-weight: 900;
}
.gallery-hero p{
  margin:0;
  font-size:clamp(16px, 2vw, 20px);
  opacity:.95;
}

/* Filters */
.gallery-filters{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin: 28px auto 20px;
}
.filter-btn{
  padding:10px 18px;
  border-radius: 999px;
  border:1px solid #e2e8f0;
  background: var(--white);
  color: var(--text);
  font-weight:700;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.filter-btn:hover{
  background: var(--teal-700);
  color: var(--white);
  border-color: var(--teal-700);
}
.filter-btn.active{
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  box-shadow: 0 6px 16px rgba(9,148,136,.18);
}

/* Grid */
/* --- Fix: make gallery card image flush with edges --- */
/* === KILL ALL INNER GAPS IN GALLERY CARDS === */
/* Smaller cards: 3 columns desktop, 2 tablet, 1 mobile */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* force 3 cols */
  gap: 22px;
  margin: 0 auto 64px;
  width: min(1100px, 92%);                           /* keep grid narrower */
}

@media (max-width: 1100px){
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);           /* 2 cols on tablet */
    width: min(900px, 92%);
  }
}

@media (max-width: 640px){
  .gallery-grid{
    grid-template-columns: 1fr;                      /* 1 col on mobile */
    width: 92%;
  }
}

/* Keep card height reasonable (shorter look) */
.gallery-grid .card-media{
  aspect-ratio: 16 / 9;                               /* shorter than 4:3 */
}

/* <figure> has default margins in browsers; remove them */
.gallery-grid .card-media {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;             /* consistent height */
}

/* Make the image fill the media box exactly */
.gallery-grid .card-media > img {
  display: block !important;        /* kills inline-image baseline gap */
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;     /* cover the whole area */
}

/* If some global rule adds spacing to figures/images inside cards, crush it */
.gallery-grid .card > * { margin: 0 !important; }

/* Overlay title + gradient (keep for readability) */
.gallery-grid .card-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 55%, transparent);
  pointer-events: none;
}
.gallery-grid .card-media figcaption{
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  margin: 0 !important;
  color: #fff; font-weight: 800; font-size: 18px; line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* ===== Card: image with overlay title + rounded corners ===== */
.card{
  background: #fff;
  border-radius: 16px;                 /* rounded like screenshot */
  overflow: hidden;                    /* clip image to rounded corners */
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
}

/* Image area keeps a fixed ratio and clips nicely */
.card-media{
  position: relative;
  aspect-ratio: 16 / 9;                /* same visual proportion */
  display: block;
}

/* Image fills the media box */
.card-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);                 /* subtle zoom on hover */
  transition: transform .3s ease;
}
.card:hover .card-media img{
  transform: scale(1.03);
}

/* Bottom gradient for legibility */
.card-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.10) 55%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
}

/* Title over the image, bottom-left */
.card-media figcaption{
  position: absolute;
  left: 16px;
  right: 16px;                         /* keep long titles inside */
  bottom: 14px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  letter-spacing: .2px;
  margin: 0;
}

/* Text block below the image */
.card-content{
  background: #fff;
  padding: 16px 16px 18px;
  border-top: 1px solid rgba(2,6,23,.05);
}
.card-content h3{
  display: none;                        /* title is on the image now */
}
.card-content p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .1px;
}

/* CTA section */
.gallery-cta{
  background:var(--soft);            /* soft mint section like screenshot */
  text-align:center;
  padding: 64px 20px 80px;
}
.gallery-cta h2{
  margin:0 0 12px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
}
.gallery-cta p{
  margin: 0 auto 22px;
  max-width: 820px;
  color: var(--muted);
  line-height:1.6;
}
.cta-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Buttons (match your “Schedule a Visit” style) */
.call-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  color: var(--white);
  background: var(--teal);
  border:1px solid var(--teal);
  box-shadow: 0 2px 8px rgba(9,148,136,.18);
  transition: background .2s ease, transform .04s ease, box-shadow .2s ease;
}
.call-btn:hover{
  background: var(--teal-700);
  border-color: var(--teal-700);
  box-shadow: 0 4px 12px rgba(7,117,108,.22);
  transform: translateY(-1px);
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  color: var(--teal);
  background: var(--white);
  border: 2px solid var(--teal);
  transition: background .2s ease, color .2s ease, transform .04s ease;
}
.btn-outline:hover{
  background: var(--teal);
  color: var(--white);
  transform: translateY(-1px);
}

/* Responsive tweaks */
@media (max-width:640px){
  .card-media img{ height:180px; }
  .call-btn, .btn-outline{ width:100%; }
}
.gallery-hero {
  padding-top: 80px;  /* pushes content down inside section */
  padding-bottom: 40px; /* optional, for spacing below */
  text-align: center; /* keeps text centered */
}