/* ============================================
   DREAM TOUCH SALON — services.css
   Page-specific styles for services.html
   ============================================ */

/* ---- SERVICES HERO (40vh desktop, auto mobile) ---- */
.services-hero {
  height: 40vh;
  min-height: 260px;
}

@media (max-width: 767px) {
  .services-hero {
    height: auto;
    min-height: 220px;
    padding-block: var(--space-xl);
  }
}

/* ---- SERVICES SECTION ---- */
.services-section {
  background-color: var(--color-bg);
  padding-block: var(--space-section);
}

/* Screen-reader-only heading utility (reused locally) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- FILTER BAR ---- */
/* Active state: spec colour override (distinct from hover-only) */
.filter-btn[aria-pressed="true"] {
  background-color: #7A4A4A;
  color: #fff;
  border-color: #7A4A4A;
}

/* Inactive: white bg, accent border + text */
.filter-btn[aria-pressed="false"] {
  background-color: #fff;
  color: #7A4A4A;
  border-color: #7A4A4A;
}

/* Hover for inactive only — avoid fighting the active state */
.filter-btn[aria-pressed="false"]:hover {
  background-color: var(--color-surface);
}

/* ---- SERVICES GRID ---- */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: stretch;
  margin-bottom: var(--space-md);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- SERVICE CARD ---- */
/* Full-height flex layout so all cards stretch evenly */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Prevent the global img:hover scale from triggering on the card image */
  transition: transform 400ms ease-out;
}

.service-card:hover .service-card__image {
  transform: scale(1.03);
}

/* Override global img:hover so it doesn't double-apply */
.service-card__image:hover {
  transform: none;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-sm);
}

.service-card__tag {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--color-surface);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  align-self: flex-start;
  margin-bottom: var(--space-xs);
}

.service-card__title {
  margin-bottom: var(--space-xs);
}

.service-card__desc {
  flex: 1;
  /* pushes CTA button to the bottom regardless of text length */
  margin-bottom: var(--space-sm);
}

.service-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- HIDDEN CARD STATE (JS filter) ---- */
/* Using [data-hidden] attribute set by services.js */
.service-card[data-hidden] {
  display: none;
}

/* ---- EMPTY STATE ---- */
.services-empty {
  text-align: center;
  color: var(--color-accent-deco);
  font-size: 0.9375rem;
  padding-block: var(--space-md);
  max-width: none;
}

.services-empty a {
  color: var(--color-accent);
}

/* ---- CTA BANNER ACTIONS ---- */
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Give the primary CTA button a white border so it reads clearly
   against the dark #7A4A4A banner background */
.cta-banner .btn-primary {
  border-color: #fff;
}