/* gallery.css */

/* Theme tokens (adjust as needed) */
:root {
  --brown: #50340b;       /* replace with your theme color if you have a different value */
  --font-family: "Alike", serif; /* your standard site font */
}

/* Reusable text style for brown, same font as others */
.brown-text {
  font-family: var(--font-family);
  color: var(--brown);
}

/* Ensure left/right padding/margins on the page content (adjust as needed) */
.gallery.container {
  padding-left: 16px;
  padding-right: 16px;
}

/* Header typography (optional - matches your existing style) */
.header-title {
  font-family: var(--font-family);
  font-weight: 700;
  color: rgb(80, 34, 11);
}
.header-subtext {
  font-family: var(--font-family);
}

/* Gallery item sizing: equal height cards with consistent image size */
.gallery-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.gallery-img {
  width: 100%;
  height: 240px; /* adjust if you want a different fixed height */
  object-fit: cover;
  display: block;
}

.card-footer {
  margin-top: auto;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Button styling (keep consistent with existing look) */
.view-btn {
  font-family: var(--font-family);
  background: rgb(112,67,44);
  color: #f8e7cb;
  border: 0;
  transition: transform 0.2s ease;
}
.view-btn:hover,
.view-btn:focus {
  transform: scale(1.02);
}

/* Optional: mobile-specific tweak to ensure 1 item per row if desired */
@media (max-width: 575.98px) {
  /* Enforce 1 item per row on very small screens if you want it that strict */
  .item { flex: 0 0 100%; max-width: 100%; }
  .gallery-img { height: 210px; }
}