/* ==========================================================================
   SERVICES — alternative layouts B, C and D
   --------------------------------------------------------------------------
   Three other treatments of the same Services content, sitting below the
   current one so the four can be compared side by side. Everything for them
   lives in this file, so dropping the options that are not chosen means
   deleting their section in index.html, their block here, and — for option C
   only — section 7 of js/site.js.

   1. Option B — photo tiles      (costconsultants.co.nz)
   2. Option C — tabbed list      (cm-nz.co.nz)
   3. Option D — discipline cards (babbage.co.nz)
   4. Responsive
   ========================================================================== */

/* 1. Option B — photo tiles ----------------------------------------------
   Oversized uppercase headline, then three full-bleed photographic tiles
   whose service list only appears on hover. */
.svc-b__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3.5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 72px);
}

.svc-b__title {
  margin-top: 16px;
  font-size: clamp(2.3rem, 1.1rem + 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: normal;
}

/* Second line of the headline, picked out in the brand red */
.svc-b__title em {
  font-style: normal;
  color: var(--c-accent);
}

.svc-b__lead {
  padding-bottom: 8px;
  font-size: var(--fs-lead);
  line-height: 1.62;
  max-width: 48ch;
}

.svc-b__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 24px);
}

.svc-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 44vw, 640px);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Own stacking context, so the negative z-index layers below stay inside
     the tile instead of slipping behind the section background. */
  isolation: isolate;
}

.svc-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.svc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0) 28%,
    rgba(15, 23, 42, 0.52) 62%,
    rgba(15, 23, 42, 0.92) 100%);
}

.svc-tile:hover img { transform: scale(1.06); }

.svc-tile__body {
  width: 100%;
  padding: clamp(22px, 2.2vw, 40px);
  color: #fff;
}

.svc-tile__body h3 {
  color: #fff;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Collapsed until the tile is hovered or focused */
.svc-tile__reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--t-panel) var(--ease-panel),
    opacity var(--t-base);
}

.svc-tile:hover .svc-tile__reveal,
.svc-tile:focus-within .svc-tile__reveal {
  max-height: 320px;
  opacity: 1;
}

.svc-tile__list {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.86);
}

.svc-tile__list li {
  padding-left: 16px;
  position: relative;
}

.svc-tile__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 7px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.7);
}

.svc-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color var(--t-fast);
}

.svc-tile__link:hover { border-bottom-color: #fff; }

.svc-tile__link span { transition: transform var(--t-base); }

.svc-tile__link:hover span { transform: translate(2px, -2px); }

.svc-b__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 56px);
}

/* 2. Option C — tabbed list ----------------------------------------------
   Service names in a column on the left, the detail for the selected one in
   a panel on the right. Driven by section 7 of js/site.js. */
.svc-tabs {
  display: grid;
  grid-template-columns: minmax(250px, 340px) 1fr;
  gap: clamp(16px, 2.4vw, 48px);
  /* The panel takes its height from the tab column, so the two sides stay
     level however short the selected service's copy is. */
  align-items: stretch;
}

.svc-tabs__list {
  display: grid;
  gap: 6px;
}

.svc-tab {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: left;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), box-shadow var(--t-base);
}

.svc-tab svg {
  width: 22px;
  height: 22px;
  color: var(--c-accent);
  transition: color var(--t-base);
}

.svc-tab:hover { border-color: rgba(112, 21, 14, 0.35); }

.svc-tab[aria-selected="true"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 6px 22px rgba(112, 21, 14, 0.2);
}

.svc-tab[aria-selected="true"] svg { color: #fff; }

.svc-panel {
  display: grid;
  gap: 18px;
  justify-items: start;
  align-content: start;
  padding: clamp(26px, 3vw, 56px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
  /* Runs again every time the panel goes from display:none back to visible,
     which is what gives each tab switch its fade. */
  animation: svc-panel-in var(--t-panel) var(--ease-panel) both;
}

.svc-panel[hidden] { display: none; }

.svc-panel__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-warm);
  color: var(--c-accent);
}

.svc-panel__icon svg { width: 26px; height: 26px; }

.svc-panel p { max-width: 72ch; }

.svc-panel__result {
  padding-left: 18px;
  border-left: 1.5px solid var(--c-accent);
  color: var(--c-heading);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

@keyframes svc-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 3. Option D — discipline cards -----------------------------------------
   A selection of services as image-topped cards, with a link through to the
   full list underneath. */
.svc-d__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 36px);
}

.svc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.svc-card:hover .svc-card__media img { transform: scale(1.07); }

.svc-card__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(253, 252, 251, 0.92);
  color: var(--c-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 32px);
}

.svc-card__body p { font-size: var(--fs-small); }

.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--c-accent);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-card__link span { transition: transform var(--t-base); }

.svc-card:hover .svc-card__link span { transform: translateX(4px); }

.svc-d__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 56px);
}

.btn--outline {
  background: transparent;
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.btn--outline:hover {
  background: var(--c-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* 4. Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .svc-b__head { grid-template-columns: 1fr; align-items: start; }

  .svc-d__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* No hover on touch, so the tile detail is always open */
  .svc-tile__reveal { max-height: 320px; opacity: 1; }

  .svc-tabs { grid-template-columns: 1fr; }

  /* Tabs become a row that can be swiped through */
  .svc-tabs__list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .svc-tab {
    grid-template-columns: 20px max-content;
    border-radius: var(--r-pill);
    padding: 11px 18px;
  }
}

@media (max-width: 760px) {
  .svc-b__grid { grid-template-columns: 1fr; }

  .svc-tile { min-height: 380px; }

  .svc-d__grid { grid-template-columns: 1fr; }
}