/*
 * Contacts — the office list, the two cards under it and their responsive
 * rules.
 *
 * These lived in a <style> block inside contact_2.php, with three more rules
 * stranded in legacy-responsive.css. The block sat after every stylesheet in
 * the document, so it won all three of those on equal specificity and they
 * never applied — they were dropped rather than moved here, which is why this
 * file has no 991px or 660px breakpoint.
 *
 * Everything else is the same declarations in the same order, so the page
 * looks exactly as it did. That includes the breakpoints coming in the order
 * 900 → 1100 → 700 at the bottom: between 700 and 900 the 1100 rule is the
 * later one and wins, so the grid is two columns there and not one. It reads
 * like a mistake and probably is one, but fixing it would change the page,
 * which this pass does not do.
 *
 * The page wrapper (.content.contact_page, .container/.row) and the map still
 * belong to the legacy layer — see legacy.css — and are picked up when this
 * screen is redesigned.
 */

.union-contact {
   --c-navy: #163a81;
   --c-blue: #1c4da1;
   --c-white: #ffffff;

   padding: 80px 0;
   background: var(--c-white);
}

/* container */

.union-contact__container {
   max-width: 1200px;
   margin: 0 auto;
   padding-left: 16px;
   padding-right: 16px;
}

/* header */

.union-contact__header {
   text-align: center;
   margin-bottom: 50px;
}

/*
 * These two were written nested inside the rule above. Native CSS nesting is
 * young — Chrome 112, Safari 16.5 — and anything older dropped both blocks on
 * the floor. Flattened, so they apply everywhere; the selectors carry the same
 * specificity nesting gave them, so nothing moves in a browser that did
 * support it.
 */
.union-contact__header h2 {
   font-size: 40px;
   color: var(--c-navy);
   margin-bottom: 10px;
}

.union-contact__header p {
   color: var(--c-blue);
   font-size: 18px;
}

/* offices */

.union-contact__offices {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-bottom: 40px;
}

/* office card */

.union-office {
   display: flex;
   gap: 18px;

   padding: 26px;

   border-radius: 16px;
   border: 1px solid #e8edf5;
   background: var(--c-white);

   transition: 0.3s;
}

.union-office:hover {
   transform: translateY(-6px);
   border-color: var(--c-blue);
   box-shadow: 0 10px 30px rgba(22, 58, 129, 0.15);
}

.union-office__country {
   font-weight: 700;
   color: var(--c-white);
   background: var(--c-navy);

   width: 52px;
   height: 52px;
   flex-shrink: 0;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 12px;
}

.union-office__country svg {
   width: 36px;
   height: 24px;
   display: block;
   border-radius: 3px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.union-office__content {
   width: calc(100% - 18px - 52px);
}

.union-office__content h3 {
   margin-bottom: 6px;
   color: var(--c-navy);
}

.union-office__content p {
   font-size: 14px;
   color: #555;
   margin-bottom: 10px;
}

.union-office__content a {
   font-weight: 600;
   text-decoration: none;
}

.union-office__content a:hover {
   text-decoration: underline;
}

.union-office__address {
   display: block;
   color: #4b587c;
   font-size: 14px;
   line-height: 1.65;
   text-decoration: none;
   margin-bottom: 12px;
   transition: color .25s ease;
}

.union-office__address:hover {
   color: var(--c-blue);
}

.union-office__phone {
   display: inline-flex;
   color: var(--c-blue);
   font-weight: 700;
   text-decoration: none;
   border-bottom: 1px solid rgba(28, 77, 161, .22);
   transition: color .25s ease, border-color .25s ease;
}

.union-office__phone:hover {
   color: var(--c-navy);
   border-color: var(--c-navy);
}

/* bottom cards */

.union-contact__extra {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

.union-contact__card {
   padding: 24px;
   border-radius: 16px;

   background: var(--c-navy);
   color: white;

   display: flex;
   flex-direction: column;
}

.union-contact__card span {
   opacity: 0.7;
   margin-bottom: 8px;
}

.union-contact__card a {
   color: white;
   font-size: 18px;
   text-decoration: none;
}

.union-contact__card a:hover {
   opacity: 0.8;
}

/* mobile — order kept as it was, see the note at the top */

@media (max-width: 900px) {

   .union-contact__offices {
      grid-template-columns: 1fr;
   }

   .union-contact__extra {
      grid-template-columns: 1fr;
   }

}

@media (max-width: 1100px) {
   .union-contact__offices {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 700px) {
   .union-contact__offices {
      grid-template-columns: 1fr;
   }
}