/* ═══ RĀNGAI HOME, rangai.nz (Oct 2026, the two-domain split) ═══════════════════
   templates/rangai-home.php is built from the hire landing's own components in
   main.css (the video hero, the pill row, the Popular Services strip, the
   section titles and wide buttons). Only what that reuse cannot cover is here.
   functions.php enqueues it on the front page while the visitor is on rangai.nz.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The Gear Hire and Get in Touch sections: the landing's own measure. */
.hire-gear__text,
.hire-contact__text { max-width: 60ch; }
.hire-gear__text p,
.hire-contact__text p { margin-bottom: 1rem; font-size: 0.95rem; }
.hire-contact__address { color: var(--color-muted); }
.hire-contact .hire-wide-btn + .hire-wide-btn { margin-top: 0.75rem; }

/* Our Services: photo tiles with the name on the photo (option B, Oct 2026). Two big tiles, then three
   small ones; on phones the big ones take the full width and the small ones go two across, the last one
   full width. The line under each name always shows (phones have no hover); hover and keyboard focus
   only zoom the photo a little and deepen the shade. */
.rh-services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.rh-services__head .hire-section__title { margin-bottom: 0; }
.rh-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.rh-tile {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  color: var(--color-text); text-decoration: none; background: var(--color-deep);
}
.rh-tile--big   { grid-column: span 3; aspect-ratio: 16 / 10; }
.rh-tile--small { grid-column: span 2; aspect-ratio: 4 / 3; }
.rh-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
/* The shade keeps the cream words at contrast over any photo. */
.rh-tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-deep) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-deep) 30%, transparent) 55%,
    transparent 100%);
  transition: opacity 0.3s ease;
}
.rh-tile__cap { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.2rem; z-index: 1; }
.rh-tile__name {
  display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 1; font-size: clamp(1.6rem, 3vw, 2.6rem);
}
.rh-tile--small .rh-tile__name { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.rh-tile__line { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--color-text); opacity: 0.82; }
.rh-tile:hover img,
.rh-tile:focus-visible img { transform: scale(1.04); }
.rh-tile:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; }

@media (max-width: 768px) {
  .rh-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rh-tile--big { grid-column: span 2; }
  .rh-tile--small { grid-column: span 1; }
  .rh-tile--small:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .rh-tile__cap { left: 1rem; right: 1rem; bottom: 0.9rem; }
  .rh-tile--small:not(:last-child) .rh-tile__line { display: none; } /* too narrow for a line; the name says it */
}
@media (prefers-reduced-motion: reduce) {
  .rh-tile img { transition: none; }
  .rh-tile:hover img, .rh-tile:focus-visible img { transform: none; }
}