/* =========================================================================
   Paint Events — Services page
   Image-led service cards. Loaded only by services/index.html.
   Typography, the hero and the title gradient all come from site-theme.css.
   ========================================================================= */

.services-page {
  --sv-ease: cubic-bezier(.22, .72, .18, 1);
  --sv-line: rgba(11, 40, 84, .12);
}

/* --------------------------------------------------- core service cards --- */

.services-page .service-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.services-page .catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sv-line);
  border-radius: var(--radius-md, 24px);
  background: #fff;
  box-shadow: 0 14px 34px -20px rgba(6, 23, 49, .45);
  transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease), border-color .3s ease;
}
.services-page .catalog-card::after { content: none; }
.services-page .catalog-card:hover {
  transform: translateY(-5px);
  border-color: rgba(13, 90, 70, .3);
  box-shadow: 0 28px 56px -26px rgba(6, 23, 49, .55);
}

.services-page .catalog-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #e9eee9, #e3ebf2);
}
.services-page .catalog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--sv-ease);
}
.services-page .catalog-card:hover .catalog-media img { transform: scale(1.05); }
.services-page .catalog-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 20, 45, .34) 0%, transparent 42%);
}

.services-page .catalog-number {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 18px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #0b3a2c;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.services-page .catalog-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
}
.services-page .catalog-body h3 { margin-bottom: 10px; }
.services-page .catalog-body > p { margin-bottom: 18px; color: var(--muted, #5d6979); }
.services-page .catalog-best {
  margin-top: auto;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-line);
  color: var(--navy-950, #061731);
  font-size: .78rem;
  font-weight: 800;
}

/* The lead card runs two columns wide, so its photo goes panoramic. */
.services-page .catalog-card-corporate { grid-column: span 2; background: #fff; color: inherit; }
.services-page .catalog-card-corporate .catalog-media { aspect-ratio: 16 / 8; }
.services-page .catalog-card-corporate h3 { color: var(--navy-950, #061731); }
.services-page .catalog-card-corporate p { color: var(--muted, #5d6979); }
.services-page .catalog-card-corporate .catalog-best { color: var(--navy-950, #061731); border-color: var(--sv-line); }
.services-page .catalog-card-corporate .catalog-number { color: #0b3a2c; }

/* ---------------------------------------------------- specialty formats --- */

/* Six columns so five cards tile exactly: 2·2·2 then 3·3. */
.services-page .specialty-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}
.services-page .specialty-card { grid-column: span 2; }
.services-page .specialty-card:nth-child(4),
.services-page .specialty-card:nth-child(5) { grid-column: span 3; }

.services-page .specialty-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-md, 24px);
  background: rgba(255, 255, 255, .05);
  transition: transform .4s var(--sv-ease), border-color .3s ease, background .3s ease;
}
.services-page .specialty-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .09);
}
.services-page .specialty-media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.services-page .specialty-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--sv-ease);
}
.services-page .specialty-card:hover .specialty-media img { transform: scale(1.05); }
.services-page .specialty-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2vw, 26px);
}
.services-page .specialty-body .eyebrow { margin-bottom: 10px; }
.services-page .specialty-body h3 { margin-bottom: 10px; color: #fff; }
.services-page .specialty-body p { margin-bottom: 20px; color: rgba(255, 255, 255, .74); }
.services-page .specialty-card .text-link { margin-top: auto; color: #bde6d8; }

/* ------------------------------------------------------ collection strip --- */

.services-page .preview-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}
/* pages.css promotes the first tile to full width under 900px; this strip is
   three equal tiles at every size, so opt out of that. */
.services-page .preview-gallery a,
.services-page .preview-gallery a:first-child { grid-column: auto; }

.services-page .preview-gallery a {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md, 24px);
  isolation: isolate;
  transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease);
}
.services-page .preview-gallery a:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -26px rgba(6, 23, 49, .6);
}
.services-page .preview-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--sv-ease);
}
.services-page .preview-gallery a:hover img { transform: scale(1.05); }
.services-page .preview-gallery a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 20, 45, .82) 100%);
}
.services-page .preview-gallery span {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 18px;
  left: 20px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.services-page .preview-gallery small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .74);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .services-page .service-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-page .catalog-card-corporate { grid-column: span 2; }
  .services-page .catalog-card-corporate .catalog-media { aspect-ratio: 16 / 7; }
  .services-page .specialty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-page .specialty-card,
  .services-page .specialty-card:nth-child(4),
  .services-page .specialty-card:nth-child(5) { grid-column: span 1; }
  .services-page .specialty-card:nth-child(5) { grid-column: span 2; }
  .services-page .specialty-card:nth-child(5) .specialty-media { aspect-ratio: 16 / 6; }
}

@media (max-width: 700px) {
  .services-page .service-catalog,
  .services-page .specialty-grid,
  .services-page .preview-gallery { grid-template-columns: 1fr; }
  .services-page .catalog-card-corporate,
  .services-page .specialty-card,
  .services-page .specialty-card:nth-child(4),
  .services-page .specialty-card:nth-child(5) { grid-column: auto; }
  .services-page .catalog-card-corporate .catalog-media,
  .services-page .specialty-card:nth-child(5) .specialty-media { aspect-ratio: 4 / 3; }
  .services-page .preview-gallery a { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .catalog-card,
  .services-page .specialty-card,
  .services-page .preview-gallery a,
  .services-page .catalog-media img,
  .services-page .specialty-media img,
  .services-page .preview-gallery img { transition: none !important; transform: none !important; }
}