/* ==========================================================================
   Contact page
   --------------------------------------------------------------------------
   Scoped to .page-contact. Section headings use the site-wide
   `.section-title > .title` pattern from main.css.

   The theme dressed these cards in their own palette — a #1D1D3E panel, a
   c_info_bg.jpg photo behind it, and a cobalt #6780d2 → #2f3b8d gradient on
   the border and the icon disc. None of that appears anywhere else on the
   site, and the cobalt would have fought the violet renders. The cards now
   use the same surface, border, radius and shadow recipe as the features,
   media and fees pages.
   ========================================================================== */

.page-contact .contact-intro {
  max-width: 900px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.page-contact .section-desc {
  margin: 0 auto;
  max-width: var(--measure);
  color: var(--color-default);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

/* --- Cards -------------------------------------------------------------- */

.page-contact .contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

.page-contact .contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

/* Aurora behind the render, anchored high in the card where the object is.
   Sized to the border box and clipped by the inherited radius. */
.page-contact .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 6%,
    rgba(123, 92, 255, 0.2),
    rgba(123, 92, 255, 0) 55%
  );
  opacity: 0.6;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.page-contact .contact-card:hover,
.page-contact .contact-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--color-primary-line);
  background: var(--gradient-surface-hover);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.32),
    0 24px 48px rgba(0, 0, 0, 0.42),
    var(--shadow-primary);
}

.page-contact .contact-card:hover::before,
.page-contact .contact-card:focus-within::before {
  opacity: 1;
}

/* --- Artwork ------------------------------------------------------------
   The three renders differ in aspect (293×300, 279×300, 300×298), so each
   sits in a fixed-height stage and is sized by `max-height`. Matching widths
   instead would leave the two round coins larger than the square tile.
   ------------------------------------------------------------------------ */

.page-contact .contact-card__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 112px;
  margin-bottom: 22px;
}

.page-contact .contact-card__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 84%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(123, 92, 255, 0.4),
    rgba(123, 92, 255, 0) 70%
  );
  filter: blur(5px);
  transition:
    width var(--transition-base),
    opacity var(--transition-base);
}

.page-contact .contact-card:hover .contact-card__stage::before,
.page-contact .contact-card:focus-within .contact-card__stage::before {
  width: 100%;
  opacity: 0.85;
}

.page-contact .contact-card__art {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
  transition: transform var(--transition-slow);
}

.page-contact .contact-card:hover .contact-card__art,
.page-contact .contact-card:focus-within .contact-card__art {
  transform: translateY(-4px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-card:hover .contact-card__art,
  .page-contact .contact-card:focus-within .contact-card__art {
    transform: none;
  }
}

/* --- Copy --------------------------------------------------------------- */

.page-contact .contact-card__title {
  position: relative;
  margin: 0 0 14px;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.page-contact .contact-card__lines {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Was 24px in the theme, which pushed a UAE landline onto two lines in a
   three-up card. */
.page-contact .contact-card__lines li {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-default);
  /* Long support addresses should break rather than widen the grid track. */
  overflow-wrap: anywhere;
}

.page-contact .contact-card__lines a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-contact .contact-card__lines a:hover,
.page-contact .contact-card__lines a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Pinned to the foot so the notes line up across a row of uneven cards. */
.page-contact .contact-card__note {
  position: relative;
  margin: 18px 0 0;
  padding-top: 16px;
  width: 100%;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--color-faint);
  margin-top: auto;
}

/* --- Map ----------------------------------------------------------------
   The theme darkened the embed with `filter: invert(1)`, which flips hue as
   well as lightness — the sea came out orange and the park labels magenta.
   Pairing the invert with a 180deg hue rotation puts every hue back where it
   started, so the result reads as a dark map rather than a photo negative.
   ------------------------------------------------------------------------ */

.page-contact .google-map__inner iframe {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
}

@media (max-width: 767px) {
  .page-contact .contact-intro {
    margin-bottom: var(--space-lg);
  }

  .page-contact .section-desc {
    font-size: var(--text-base);
  }

  .page-contact .contact-card {
    padding: 32px 24px 28px;
    border-radius: var(--radius-md);
  }

  .page-contact .contact-card__stage {
    height: 96px;
    margin-bottom: 18px;
  }

  .page-contact .contact-card__lines li {
    font-size: var(--text-base);
  }
}