/*
 * Department Contact Component — style.css
 *
 * Full-bleed split layout:
 *  - Map iframe fills the entire row as a background (position: absolute).
 *  - Left overlay (50% width) carries the contact info with a semi-transparent
 *    primary-blue background.
 *  - Text left-padding matches the page's normal content margin so it aligns
 *    with all other content on the page.
 *  - The iframe is 150% wide starting from left:0, so its centre (= the map
 *    marker) sits at 75% of the container — the horizontal centre of the right
 *    half. overflow:hidden on the container clips the excess.
 *
 * CSS class prefix: com-dept-contact-*
 */

/* ── Outer container — full-bleed ───────────────────────────────────────────── */
.com-dept-contact {
  /* Break out of the template's max-width constraint. */
  width: 100vw !important;
  max-width: 100vw !important;
  /* Centre-anchor so the negative-margin trick works in any layout. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  overflow: hidden;
  min-height: 420px;
}

/* ── Map iframe — absolute background ───────────────────────────────────────── */
.com-dept-contact-map-bg {
  position: absolute;
  top: 0; left: 0;
  /* 150% width → centre of iframe at 75% of container = centre of right half. */
  width: 150%;
  height: 100%;
  border: 0;
  /* The map is decorative/supplementary; pointer-events kept on so users can
     interact with it on the right half when the overlay doesn't cover it. */
}

/* ── Left overlay — semi-transparent panel ──────────────────────────────────── */
.com-dept-contact-overlay {
  /*
   * Sits above the iframe (z-index:1) and covers the left 50% of the
   * full-bleed container. The background bleeds all the way to the
   * viewport's left edge because the container IS the viewport width.
   */
  position: relative;
  z-index: 1;
  width: 50%;
  min-height: 420px;
  background: hsl(216 100% 19% / 0.90); /* primary blue at 90% opacity */
}

/* ── Panel — content aligned to page margins ─────────────────────────────────── */
.com-dept-contact-panel {
  /*
   * Left padding = page content left margin:
   *   max(--mobile-content-edge-padding, (100vw - --content-max-width) / 2)
   *
   * On a 1520px screen: max(20px, 0px) = 20px  (flush to content edge)
   * On a 1920px screen: max(20px, 200px) = 200px  (matches page margins)
   *
   * The right side of the panel gets generous padding so text doesn't crowd
   * the map seam.
   */
  padding-top:    3.5rem;
  padding-bottom: 3.5rem;
  padding-left:   max(
    var(--mobile-content-edge-padding, 20px),
    calc((100vw - var(--content-max-width, 1520px)) / 2)
  );
  padding-right: 4rem;
}

/* ── Typography ──────────────────────────────────────────────────────────────── */
.com-dept-contact-name {
  margin-top: 0;
  margin-bottom: 0.6rem;
  color: hsl(0 0% 100% / 1);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.2;
}

.com-dept-contact-description {
  margin-bottom: 1.4rem;
  color: hsl(0 0% 90% / 1);
  line-height: 1.6;
  font-size: 0.95rem;
  p:last-child { margin-bottom: 0; }
}

/* ── Contact detail rows ─────────────────────────────────────────────────────── */
.com-dept-contact-details {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.com-dept-contact-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 0.75rem;
  align-items: baseline;

  dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: hsl(0 0% 70% / 1);
    padding-top: 0.15em; /* optical baseline alignment with the value */
  }

  dd {
    margin: 0;
    color: hsl(0 0% 100% / 1);
    font-size: 0.95rem;
    line-height: 1.4;

    a {
      color: hsl(0 0% 100% / 1);
      text-decoration: none;
      border-bottom: 1px solid hsl(0 0% 100% / 0.35);
      transition: border-color 150ms ease;
      &:hover { border-color: hsl(0 0% 100% / 1); }
    }
  }
}

/* ── Without map: plain info card ───────────────────────────────────────────── */
.com-dept-contact:not(.has-map) {
  /* No full-bleed needed without a map — fall back to a contained card. */
  width: auto !important;
  max-width: var(--mobile-content-max-width) !important;
  left: auto;
  transform: none;
  min-height: unset;
}

.com-dept-contact:not(.has-map) .com-dept-contact-overlay {
  width: 100%;
  min-height: unset;
  background: hsl(216 100% 19% / 1); /* solid when no map behind it */
  border-radius: 12px;
}

.com-dept-contact:not(.has-map) .com-dept-contact-panel {
  padding: 2.5rem;
}

/* ── Mobile — narrow screens ─────────────────────────────────────────────────── */
@media (width <= 768px) {

  /*
   * On mobile the iframe is no longer a background — it becomes a normal block
   * map below the info panel. We switch to flex-column so we can use `order`
   * to put the overlay (DOM position 2) above the iframe (DOM position 1)
   * without changing the markup.
   *
   * DOM order: iframe → overlay
   * Visual order: overlay (top) → iframe/map (bottom)
   */
  .com-dept-contact.has-map {
    display: flex;
    flex-direction: column;
    min-height: unset;
    overflow: visible; /* no clipping needed once iframe is in flow */
  }

  .com-dept-contact-map-bg {
    /* Pull out of absolute positioning and become a normal flex item. */
    position: static !important;
    order: 1;        /* renders below the overlay */
    width: 100% !important;
    height: 280px;
  }

  .com-dept-contact-overlay {
    order: 0;        /* renders above the map */
    width: 100%;
    min-height: unset;
    background: hsl(216 100% 19% / 1); /* solid on mobile — no map behind it */
  }

  .com-dept-contact-panel {
    padding: 2rem var(--mobile-content-edge-padding, 20px);
  }

}