/* ============================================
   Contact page — page-specific bits.

   Two component groups:
     - .gs-contact-experts / .gs-contact-expert — inline glass-pill
       chips in the hero. Photo, stacked name+role, outlined CTA.
     - .gs-contact-info — left column of the muted info section:
       address block, phone/email links, security-disclosure callout.

   Form chrome reuses .gs-wgs-form from form.css; 2-col layout
   reuses .gs-wgs-experts from expert-card.css.
   ============================================ */

/* ─── Hero background ────────────────────────────────────────
   .gs-uc-hero--centered (the centered-hero modifier we get from
   uc-modernization.css) swaps the default dark-blue-waves bg for
   gs23-lp-background-1.svg. On the contact page we want the
   default waves bg back — restore it scoped to this hero only. */
.gs-contact-hero {
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-dark-blue-waves-bg.svg');
}

/* ─── Hero expert pills ──────────────────────────────────────
   Two pills side by side, centered under the hero lede. Each
   pill is a glass element on the dark waves bg — frosted look,
   thin white border, soft lift shadow. Pill shape (border-radius
   999px) so they read as "tap to talk to someone" chips rather
   than full cards. */
.gs-contact-experts {
  list-style: none;
  margin: 2.5rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.gs-contact-expert {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  /* Generous vertical padding so the pill reads as a card-sized
     element, not a chip. Horizontal padding tuned to leave air
     around the content. */
  padding: 1rem 1.5rem;
  /* Force a baseline width so each pill reads as a "card", not
     packed-to-content. Combined with `margin-left: auto` on the
     CTA below, the photo+meta cluster sits on the left and the
     button flushes to the right edge — same balance as the live
     page. */
  min-width: 400px;
  border-radius: 999px;
  /* Glass effect — same recipe as PATTERNS.md §5.2 but tuned for
     a smaller, denser element (less blur, slightly more visible
     fill). */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  isolation: isolate;
}

/* CTA inside an expert pill — drop the default white outline from
   .gs-btn--secondary and use the same subtle white-on-glass color
   as the pill's own border. Keeps the chip visually cohesive — the
   button reads as part of the pill, not bolted on.
   `margin-left: auto` pushes the CTA to the right edge of the pill
   when the pill is wider than the intrinsic content (which it is,
   given the min-width above). */
.gs-contact-expert .gs-btn--secondary {
  border-color: rgba(255, 255, 255, 0.14);
  margin-left: auto;
}
.gs-contact-expert .gs-btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.gs-contact-expert__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gs-contact-expert__meta {
  display: flex;
  flex-direction: column;
  /* Name+role text is in the hero (white on dark). Keep them
     close together — they're identifying labels, not paragraphs. */
  line-height: var(--leading-tight);
  text-align: left;
  margin: 0 0.5rem 0 0;
}

.gs-contact-expert__name {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0;
}

.gs-contact-expert__role {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.125rem 0 0;
}

/* ─── Info section 2-col override ────────────────────────────
   Form must stay at exactly 50% of the section width. Text column
   is narrower (32%), and the remaining 18% becomes the gap between
   them via `justify-content: space-between`. Result on a 1280px
   section: text ≈ 410px, gap ≈ 230px, form ≈ 640px (exactly half).

   Use-case pages keep their own 2fr 3fr split because this
   override is scoped via .gs-contact-info-row.

   Wrapped in min-width 901px so the base .gs-wgs-experts ≤900px
   rule (single-column stacked) still wins on tablet/mobile. */
@media (min-width: 901px) {
  .gs-contact-info-row .gs-wgs-experts {
    grid-template-columns: 32% 50%;
    justify-content: space-between;
  }
}

/* ─── Mailing address column ─────────────────────────────────
   Left column of the muted info section. Title + postal address +
   inline channel rows (phone, email) + a coral-bordered security
   callout box at the bottom. */
.gs-contact-info {
  /* Sits in the .gs-wgs-experts 2fr column. No internal max-width
     — let the grid track size it. */
}

.gs-contact-info__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.gs-contact-info__postal {
  font-style: normal;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0 0 1.5rem;
}

.gs-contact-info__channel {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0 0 0.5rem;
}

.gs-contact-info__channel strong {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
  margin-right: 0.25rem;
}

/* Security-disclosure callout — coral border, light bg, sits at
   the bottom of the info column. The coral border keys this as
   "important but quiet": same accent the brand uses for editorial
   emphasis, no hover/active state because the box itself isn't
   interactive (just the link inside is). */
.gs-contact-info__security {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-brand-accent);
  border-radius: 12px;
  background: var(--color-bg);
}

.gs-contact-info__security p {
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

.gs-contact-info__security strong {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}

/* Prose-link convention — inherit color, underlined, coral on
   hover. Same as .gs-wgs-section__lede / .gs-legal-body. Applies
   to the phone/email/security links inside .gs-contact-info. */
.gs-contact-info a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.gs-contact-info a:hover {
  color: var(--color-brand-accent);
}

/* ─── Responsive ─────────────────────────────────────────────
   Hero pills stack on small screens; .gs-wgs-experts handles the
   muted-section 2-col → 1-col collapse via its own breakpoint.

   Root cause of the mobile "messed up" bug: the pill kept its
   desktop single-row layout (photo + meta + button, all inline,
   border-radius: 999px) at every width. At a 393px viewport the
   section's 1.5rem side padding leaves ~345px for the pill — not
   enough room for a 64px photo + two-line name/role text + a
   nowrap "Book a meeting" button in one row. The row was forced
   taller to fit the squeezed text, and the 999px border-radius
   (a true pill, not a fixed-radius card) ballooned with that
   height, producing the oversized, oddly-rounded, cramped shape
   the admin saw.

   Fix: below 600px, switch each pill to a two-row card — photo +
   name/role stay inline on row 1 (they fit comfortably), and the
   button drops to its own row 2, full width, so it never has to
   compete with the text for horizontal space regardless of how
   long a name or role string is. Border-radius steps down from
   999px (true pill) to a fixed 20px so the shape stays a
   sensible rounded card at the new taller, two-row aspect ratio. */
@media (max-width: 600px) {
  .gs-contact-experts {
    flex-direction: column;
    align-items: stretch;
  }

  .gs-contact-expert {
    /* Reset the desktop min-width so the pill can shrink with the
       viewport, and switch from a single inline row to a 2-row
       stack: [photo | meta] on top, button on its own row below.
       justify-content: center centers the photo+meta cluster as a
       GROUP within the card's full width - this only has a visible
       effect because __meta below no longer has flex-grow eating
       the remaining row width (see its comment). Without that
       change, __meta would stretch edge-to-edge and its own
       text-align: left would keep the cluster looking pinned to
       the left, which was the actual "not centered" bug: the
       photo+name/role group was hugging the left edge with blank
       space to its right, not off-center within its own box. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
    border-radius: 20px;
  }

  /* Photo + meta cluster — always its own row, never wraps against
     the button. flex-basis: 100% forces the button (next sibling)
     onto a new line without needing to touch the button's markup. */
  .gs-contact-expert__photo {
    width: 48px;
    height: 48px;
  }

  .gs-contact-expert__meta {
    /* flex-grow dropped to 0 (was 1 1 auto) - letting this box size
       to its own content, instead of stretching to fill the row, is
       what lets justify-content: center on the parent actually
       center the photo+meta cluster instead of the meta box eating
       all the spare width and pinning everything to the left. */
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
  }

  .gs-contact-expert .gs-btn--secondary {
    /* Full-width button on its own row — consistent card sizing
       no matter how long the name/role text is, and no more
       nowrap-vs-cramped-space conflict. */
    flex-basis: 100%;
    margin-left: 0;
    justify-content: center;
  }
}