/* ==========================================================================
   MEI VENTURES — Contact information page

   Loads on top of style.css (tokens, reset) and contact.css (masthead, footer,
   glow, .aside-* helpers). This file only adds this page's own blocks.
   ========================================================================== */

.info-main { padding-bottom: 88px; }

/* --------------------------------------------------------------------------
   PRIMARY DETAIL CARDS
   -------------------------------------------------------------------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 88px;
}

.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 20px;
  padding: 28px 26px 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}

.info-card:hover {
  border-color: var(--bg-card-border-hover);
  transform: translateY(-3px);
}

.info-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bg-card-border);
  color: var(--text-primary);
  margin-bottom: 5px;
}

.info-icon svg { width: 18px; height: 18px; }

/* Optical normalisation.

   All three SVGs are 18x18 in identical 38x38 tiles, but each path fills a
   different share of its 24x24 viewBox -- so the *drawn* marks came out
   15.5x12.5, 13.25x13.25 and 11.75x14.75. Equal boxes, unequal artwork: the
   map pin read as taller and lower than its neighbours.

   Each is scaled on the geometric mean of its own ink (so tall-narrow and
   short-wide marks carry the same visual weight rather than matching on one
   axis), then nudged vertically to put every optical centre on the same line.
   Measured from 8x screenshots, not estimated. */
.info-icon .icon-mail  { width: 19.6px; height: 19.6px; transform: translateY(0.8px); }
.info-icon .icon-phone { width: 18.5px; height: 18.5px; transform: translateY(0.7px); }
.info-icon .icon-pin   { width: 16.6px; height: 16.6px; }

.info-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-value {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  word-break: break-word;
  transition: color 0.25s ease;
}

/* Address and hours are text, not links -- no hover affordance on those. */
.info-value-static { cursor: default; }

a.info-value:hover { color: var(--accent-crimson); }

.info-tz {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.info-note {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Row alignment across the cards, while they sit side by side.

   `margin-top: auto` pins each note to the bottom of its own card, which means
   a one-line note starts ~20px lower than a two-line one and the notes read as
   misaligned. Reserving a fixed height instead would only hold at one viewport
   width, because how many lines the text wraps to changes as the cards narrow.

   Subgrid solves it properly: the four bands (icon / label / value / note)
   become shared rows sized by the tallest card, so every band lines up at any
   width without hardcoding a single measurement. Applied only in multi-column
   mode -- once the cards stack there is nothing to align them against. */
@media (min-width: 901px) {
  .info-grid {
    grid-template-rows: repeat(4, auto);
    row-gap: 0;
  }

  .info-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    justify-items: start;
    row-gap: 9px;
  }

  /* The shared row already provides the spacing; pushing to the bottom of it
     would reintroduce exactly the misalignment this is fixing. */
  .info-note { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   DEPARTMENT ROUTING
   -------------------------------------------------------------------------- */
.info-section { margin-bottom: 88px; }

.info-section-head { margin-bottom: 28px; }

.info-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.info-section-head p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.route-list {
  list-style: none;
  border: 1px solid var(--bg-card-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  transition: background 0.25s ease;
}

.route + .route { border-top: 1px solid var(--bg-card-border); }

.route:hover { background: rgba(255, 255, 255, 0.03); }

.route-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.route-desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.route-email {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* Scoped to anchors only. The addresses on this page are plain text, so they
   must not light up on hover as though something will happen when clicked. */
a.route-email:hover { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   RESPONSE + SOCIAL
   -------------------------------------------------------------------------- */
.info-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 34px 0;
  border-top: 1px solid var(--bg-card-border);
  border-bottom: 1px solid var(--bg-card-border);
  margin-bottom: 72px;
}

.info-block { display: flex; flex-direction: column; gap: 11px; }

.info-block-text {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 460px;
}

/* Stacked, so each account sits on its own line rather than running along a
   single row. Aligned to the start so the links only take their own width and
   the hover target does not stretch across the column. */
.info-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.info-socials a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}

.info-socials a:hover { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   BRIDGE TO THE ENQUIRY FORM
   -------------------------------------------------------------------------- */
.info-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 22px;
  padding: 38px 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.info-cta-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.info-cta-text p {
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.info-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-inverse);
  background: var(--text-primary);
  border-radius: 100px;
  padding: 15px 30px;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}

.info-cta-btn svg { width: 13px; height: 13px; transition: transform 0.25s ease; }

.info-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.18);
}

.info-cta-btn:hover svg { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   ENTRANCE
   -------------------------------------------------------------------------- */
.info-grid,
.info-section,
.info-split,
.info-cta {
  animation: contactRise 0.9s var(--ease-out-expo) backwards;
}

.info-grid    { animation-delay: 0.26s; }
.info-section { animation-delay: 0.34s; }
.info-split   { animation-delay: 0.40s; }
.info-cta     { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  .info-grid,
  .info-section,
  .info-split,
  .info-cta { animation: none; }
  .info-card:hover,
  .info-cta-btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
/* Three cards, so two columns would always orphan one onto its own row.
   Holds three across until the cards get genuinely cramped, then goes to one. */
@media (max-width: 900px) {
  .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .info-split { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  .info-main { padding-bottom: 64px; }
  .info-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 64px; }
  .info-section { margin-bottom: 64px; }
  .info-card { padding: 24px 22px; border-radius: 18px; }

  /* Stack the email under the department name rather than squeezing it. */
  .route {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 22px;
  }
  .route-email { white-space: normal; word-break: break-word; }

  /* Once the row stacks, the address is on its own line and the desktop
     right-alignment -- which existed to pin it to the far side of a two-column
     row -- just leaves it hanging off the right edge under left-aligned text.
     Centred, it reads as part of the card. */
  .route-copy { justify-content: center; }

  .info-cta {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px;
    border-radius: 18px;
  }
}

/* ==========================================================================
   MOBILE — touch targets and legibility only; desktop untouched
   ========================================================================== */
@media (max-width: 860px) {
  /* 11.2px is below comfortable reading size on a phone. */
  .info-label { font-size: 0.76rem; }

  /* Standalone links sat at 22px tall. Padding lifts them to the 44px minimum
     without changing the type size or the stacked rhythm. */
  .info-socials { gap: 0; }

  .info-socials a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Routing rows: give the whole row breathing space for thumbs. */
  .route { padding: 20px 22px; }
}