/****************************ASISA FOUNDATION CONTACT US****************************/
/* 6.8 About - Contact Us (AB#100775 / AB#100776). Foundation only, and one page only: every rule is
   scoped under .brand-foundation .fnd-contact, which only Views/FoundationContactUs.cshtml renders, so
   nothing here can reach ASISA, Academy or ESD, or any other Foundation page.

   Measured off design/foundation-contact-us/reference.jpg (1440 wide; subtract the 132 px caption strip
   from any file y). Every value says where it came from: "frame:" is a measurement, ESTIMATE is not.

   The legacy office markup (contactUsBlocksSection and friends, styled by the shared main.css) is left
   alone: it still draws while the new office list is empty, exactly as before this change. */

.brand-foundation .fnd-contact {
  --fnd-contact-card: #FBF8EF;            /* frame: the office card fill, sampled (251, 248, 239) */
  --fnd-contact-accent: #A137B7;          /* frame: corner and icon discs; ASISA Foundation Signature Colour/100 */
  --fnd-contact-ink: #262626;             /* the Foundation's body text, as the navigation and bands use */
  --fnd-contact-width: 1326px;            /* frame: x 59 to 1385, two cards and the gap */
  --fnd-contact-gap: 50px;                /* frame: x 697 to 747 between the cards */
  --fnd-contact-pad: 42px;                /* frame: the heading and address ink start 42 px inside the card */
  --fnd-contact-pad-top: 48px;            /* frame: the heading's cap line sits 55 px below the card top; ESTIMATE for the box */
  --fnd-contact-line: 24.5px;             /* frame: address lines at y 765, 789, 814, 837, 862 */
  --fnd-contact-heading: 30px;            /* ESTIMATE: the office heading's ink is 30 px tall, y 703 to 733 */
  --fnd-contact-icon: 48px;               /* ESTIMATE: the discs read about 49 px across at 1440 */
  --fnd-contact-corner: 56px;             /* ESTIMATE: the accent triangle reads about 56 px along each edge */
  --fnd-contact-radius: 20px;             /* ESTIMATE: the map's lower corners */
  --fnd-contact-map: 380px;               /* frame: the map runs y 1094 to about 1475 */

  color: var(--fnd-contact-ink);
}

/* ---- the heading and the introduction, centred as the frame draws them ---- */

.brand-foundation .fnd-contact .fnd-contact__intro {
  margin: 48px auto 56px auto;            /* ESTIMATE: the breadcrumb to the H1, and the lede to the cards */
  max-width: 900px;                       /* frame: the lede wraps inside x 290 to 1150 */
  text-align: center;
}

.brand-foundation .fnd-contact .fnd-contact__heading {
  font-size: 56px;                        /* ESTIMATE: "Contact Us" reads 56 to 58 px at 1440 */
  line-height: 1.1;
  margin: 0 0 24px 0;
}

.brand-foundation .fnd-contact .fnd-contact__lede p {
  margin: 0 0 16px 0;
}

/* ---- the two office cards ---- */

.brand-foundation .fnd-contact .fnd-contact__offices {
  display: grid;
  gap: var(--fnd-contact-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* proportional, so a tablet width squeezes both evenly */
  margin: 0 auto 96px auto;               /* ESTIMATE: the cards to the form heading */
  max-width: var(--fnd-contact-width);
}

.brand-foundation .fnd-contact .fnd-contact__office {
  background: var(--fnd-contact-card);
  border-radius: 0 0 var(--fnd-contact-radius) var(--fnd-contact-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;                       /* clips the map to the rounded lower corners */
  position: relative;
}

.brand-foundation .fnd-contact .fnd-contact__office-body {
  flex: 1 1 auto;
  padding: var(--fnd-contact-pad-top) var(--fnd-contact-pad) 40px var(--fnd-contact-pad);
}

/* The accent triangle in the card's top right corner, the same mark the news cards carry. */
.brand-foundation .fnd-contact .fnd-contact__corner {
  border-left: var(--fnd-contact-corner) solid transparent;
  border-top: var(--fnd-contact-corner) solid var(--fnd-contact-accent);
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}

.brand-foundation .fnd-contact .fnd-contact__office-heading {
  font-size: var(--fnd-contact-heading);
  line-height: 1.2;
  margin: 0 0 24px 0;
  padding-right: var(--fnd-contact-corner);   /* a long office name never runs under the corner */
}

.brand-foundation .fnd-contact .fnd-contact__addresses {
  display: grid;
  gap: 0 var(--fnd-contact-pad);
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* frame: the columns start at x 101 and 380 */
  margin: 0 0 32px 0;
}

.brand-foundation .fnd-contact .fnd-contact__address {
  font-style: normal;                     /* <address> is italic by default; the frame is upright */
  line-height: var(--fnd-contact-line);
}

/* ---- the call and email rows ---- */

.brand-foundation .fnd-contact .fnd-contact__rows {
  display: grid;
  gap: 24px;                              /* ESTIMATE: the two rows sit 77 px apart, label to label */
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-foundation .fnd-contact .fnd-contact__row {
  align-items: center;
  display: flex;
  gap: 18px;                              /* ESTIMATE: disc to label */
}

.brand-foundation .fnd-contact .fnd-contact__icon {
  align-items: center;
  background: var(--fnd-contact-accent);
  border-radius: 50%;
  color: #FFFFFF;
  display: inline-flex;
  flex: 0 0 var(--fnd-contact-icon);
  height: var(--fnd-contact-icon);
  justify-content: center;
  width: var(--fnd-contact-icon);
}

.brand-foundation .fnd-contact .fnd-contact__row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-foundation .fnd-contact .fnd-contact__row-label {
  font-weight: 700;
}

.brand-foundation .fnd-contact .fnd-contact__row-value {
  color: inherit;
  text-decoration: none;
  word-break: break-word;                 /* a long email address wraps inside the card */
}

.brand-foundation .fnd-contact a.fnd-contact__row-value:hover,
.brand-foundation .fnd-contact a.fnd-contact__row-value:focus-visible {
  text-decoration: underline;
}

/* ---- the map, inside the card ---- */

.brand-foundation .fnd-contact .fnd-contact__map {
  flex: 0 0 var(--fnd-contact-map);
  height: var(--fnd-contact-map);
}

.brand-foundation .fnd-contact .fnd-contact__map iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

/* ---- narrow screens: the cards stack, and the two address columns stay side by side
        until there is no room for them. ESTIMATE breakpoints, no mobile frame was delivered. ---- */

@media screen and (max-width: 900px) {
  .brand-foundation .fnd-contact .fnd-contact__offices {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 64px;
  }

  .brand-foundation .fnd-contact .fnd-contact__heading {
    font-size: 40px;
  }
}

@media screen and (max-width: 480px) {
  .brand-foundation .fnd-contact .fnd-contact__office-body {
    padding: 32px 24px 32px 24px;
  }

  .brand-foundation .fnd-contact .fnd-contact__addresses {
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
  }
}