/* ==========================================================
   services.css — Services page ONLY  (style.css loads first)
   ==========================================================

   Section: Service Blocks
   Screenshot (services-1.jpg / services-7.jpg):
   · Each block = 2-col header row + full-width photo below
   · LEFT col: large bold service title  e.g. "Corporate events"
   · RIGHT col: description text, right-aligned text
   · Photo spans full container width below header row
   · Blocks separated by border-bottom (not by white space)
   ========================================================== */

.sv-list { background: var(--white); }

/* Individual service block */
.sv-block {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}
.sv-block:last-child { border-bottom: none; }

/* 2-column header: title LEFT, description RIGHT */
.sv-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 4rem;
  align-items: start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.sv-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sv-desc {
  font-size: 20px;
  font-weight: 600;
  line-height: 36px;
  color: var(--black);
  text-align: right;
}

/* Full-width photo */
.sv-photo {
  width: 100%;
  overflow: hidden;
  background: var(--grey-light);
}
.sv-photo img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.sv-block:hover .sv-photo img { transform: scale(1.02); }

/* Responsive */
@media (max-width: 760px) {
  .sv-header { grid-template-columns: 1fr; gap: .75rem; }
  .sv-desc   { text-align: left; }
}