/* Locations page — page-only tweaks.
 * Shared hero / breadcrumbs / card-grid-head / contact / location-card
 * live in global sheets.
 *
 * Enqueue conditions (any one is enough): page ID 2444, slug
 * locations|rig-maintenance-global-facilities, or Elementor class
 * rq-locations-page on the document.
 */

/* Page marker — used by enqueue conditions; no visual effect. */
.rq-page .rq-locations-page {
  display: block;
}

/*
 * Desktop: lift copy toward crumbs like Team / React Team offsets
 * (md:-75px / lg:-67px). Use top (not transform) so it doesn't fight
 * .rq-reveal-up. Mobile untouched.
 */
@media (min-width: 768px) {
  .rq-page .rq-locations-page .rq-archive-hero__copy {
    position: relative;
    top: -75px;
  }
}

@media (min-width: 1024px) {
  .rq-page .rq-locations-page .rq-archive-hero__copy {
    position: relative;
    top: -67px;
  }
}

/* React: md:object-[right_72%] on the Dyce facility photo. */
.rq-page .rq-locations-hero .rq-archive-hero__photo img {
  object-position: center center;
}

@media (min-width: 768px) {
  .rq-page .rq-locations-hero .rq-archive-hero__photo img {
    object-position: right 72%;
  }
}

/*
 * React Locations overlays:
 * - rightGradient: from-30% / via-60% / to-92%
 * - flat wash bg-background/20
 * - edgeVeils top/bottom
 * Photo also gets shared archive-hero feather mask (md+).
 */
.rq-page .rq-locations-hero::before {
  background-color: color-mix(in oklab, var(--rq-background) 20%, transparent);
  background-image: linear-gradient(
    to right,
    var(--rq-background) 30%,
    color-mix(in oklab, var(--rq-background) 60%, transparent) 55%,
    transparent 92%
  );
}

@media (min-width: 768px) {
  .rq-page .rq-locations-hero::before {
    background-color: color-mix(in oklab, var(--rq-background) 20%, transparent);
    background-image: linear-gradient(
      to right,
      var(--rq-background) 30%,
      color-mix(in oklab, var(--rq-background) 60%, transparent) 55%,
      transparent 92%
    );
  }
}

/* Extra edge veils (React edgeVeils) for readability on the photo hero. */
.rq-page .rq-locations-hero::after {
  background-image:
    linear-gradient(
      to bottom,
      var(--rq-background),
      color-mix(in oklab, var(--rq-background) 60%, transparent),
      transparent
    ),
    linear-gradient(
      to top,
      var(--rq-background),
      color-mix(in oklab, var(--rq-background) 70%, transparent),
      transparent
    );
  background-size: 100% 6rem, 100% 10rem;
  background-position: top, bottom;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .rq-page .rq-locations-hero::after {
    background-size: 100% 8rem, 100% 14rem;
  }
}

.rq-page .rq-locations-facilities {
  scroll-margin-top: 8rem;
}

/*
 * Same title pattern as Team / other section heads:
 * - .rq-h2-fit full column width so clamp(…, 7cqi, …) can scale on desktop
 * - gradient rest on its own line (React lead + <br> + rest), even if the
 *   live Elementor heading lost the <br>
 */
.rq-page .rq-locations-facilities .rq-card-grid-head .rq-h2-fit {
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
}

.rq-page .rq-locations-facilities .rq-card-grid-head .rq-h2 .elementor-heading-title {
  font-size: clamp(1.75rem, 7cqi, 2.875rem);
  font-weight: 600;
  line-height: 1.18;
}

/* Block for the line break; fit-content so background-clip gradient
 * hugs the word like React's inline span (not the full column width). */
.rq-page .rq-locations-facilities .rq-card-grid-head .rq-h2 .rq-grad-text {
  display: block;
  width: fit-content;
}

.rq-page .rq-locations-facilities .rq-body,
.rq-page .rq-locations-facilities .rq-body p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .rq-page .rq-locations-facilities .rq-body,
  .rq-page .rq-locations-facilities .rq-body p {
    font-size: 1.125rem;
  }
}

.rq-page .rq-locations-facilities .rq-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

/* React WebsiteSectionHeading: mt-5 between eyebrow and h2 */
.rq-page .rq-locations-facilities .rq-card-grid-head .rq-headline {
  margin-block-start: 1.25rem;
}

@media (max-width: 767px) {
  .rq-page .rq-locations-facilities .rq-h2 .elementor-heading-title {
    font-size: 28px;
    font-weight: 600;
  }

  .rq-page .rq-locations-facilities .rq-body,
  .rq-page .rq-locations-facilities .rq-body p {
    font-size: 16px;
  }
}

/* React: mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 */
.rq-page .rq-location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block-start: 2rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .rq-page .rq-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rq-page .rq-location-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}