/* ==========================================================================
   CVR — contacts.css
   "Contacts". Loads after base.css, which carries the tokens, the shared
   chrome, the page banner, the dark band and glow, and the underlined form.
   Only the details strip and the form's placing are here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ways in
   Five groups across the band under the banner: the meeting CTA, then the
   addresses the mockup ranges after it.
   -------------------------------------------------------------------------- */

.contact-info {
  padding-block: var(--space-11) var(--space-9);
}

.contact-info__grid {
  display: grid;
  gap: var(--space-9) var(--grid-gutter);
  color: var(--color-white);
}

.contact-info__cta {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}

.contact-info__cta p {
  margin: 0;
}

/* The mockup stacks these as plain lines, with no space between them beyond
   the line box. */
.contact-info__list,
.contact-info__address {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  line-height: var(--leading-body);
  list-style: none;
}

.contact-info__list a {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.contact-info__list a:hover,
.contact-info__list a:focus-visible {
  color: var(--color-lime);
}

/* --------------------------------------------------------------------------
   Get in touch
   The shared underlined form, centred under a lime heading. The band's glow
   sits behind its right half, where the mockup puts it.
   -------------------------------------------------------------------------- */

.contact-band__glow {
  top: 62%;
  left: 74%;
  width: min(130vw, 1000px);
}

.contact-form {
  padding-block: var(--space-9) var(--space-13);
  text-align: center;
}

.contact-form__title {
  color: var(--color-lime);
  text-transform: uppercase;
  margin-block: -0.22em var(--space-5);
}

.contact-form__lead {
  color: var(--color-white);
  margin: 0 auto;
  max-width: 68ch;
}

.contact-form__form {
  margin-top: var(--space-10);
}

/* The message field runs to the rule at the foot of the form, so the last
   row of the mockup is a tall, empty well rather than a one-line input. */
.contact-form__message textarea {
  min-height: 132px;
}

@media (min-width: 768px) {
  .contact-info__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-info__cta {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .contact-info {
    padding-block: calc(var(--space-12) + var(--space-6)) var(--space-11);
  }
  /* The CTA holds a third of the row; the four address groups share the rest,
     as the mockup ranges them. */
  .contact-info__grid {
    grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }
  .contact-info__cta {
    grid-column: auto;
  }
  .contact-form {
    padding-block: var(--space-11) calc(var(--space-12) * 1.5);
  }
  .contact-form__form {
    margin-top: calc(var(--space-12) + var(--space-4));
  }
  .contact-form__message textarea {
    min-height: 168px;
  }
}

/* --------------------------------------------------------------------------
   Schedule a meeting (see mockups/Meeting.png)
   The CTA above opens one ink card over a dimmed page. Same ground as the
   band behind it (#012b26), so the card reads as a lifted piece of the page
   rather than a foreign panel; every rule on it is white at low alpha, which
   is what the mockup's greys resolve to over that ink.
   -------------------------------------------------------------------------- */

.meeting[hidden] {
  display: none;
}

.meeting {
  position: fixed;
  inset: 0;
  /* over the header, which sits at 50 */
  z-index: 60;
  display: grid;
  /* minmax(0,…) rather than the implicit auto: an auto column would size to
     the card's max-content and push the whole modal off a narrow screen */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.meeting__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 12, 10, 0.72);
  backdrop-filter: blur(4px);
  animation: meeting-scrim var(--duration-base) var(--ease);
}

.meeting__card {
  position: relative;
  width: min(100%, 1120px);
  /* the card scrolls inside itself on short screens, so the confirm pill is
     always reachable without the page moving underneath */
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-9) var(--space-5) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-white);
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
  animation: meeting-in var(--duration-base) var(--ease);
  /* Boldonse sets very wide — "SCHEDULE" alone can outrun a 320px screen */
  overflow-wrap: break-word;
}

.meeting__card:focus {
  outline: none;
}

@keyframes meeting-scrim {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes meeting-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Not in the mockup, which shows the card alone — but a modal needs a visible
   way out, so it sits in the corner the title leaves empty. */
.meeting__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.meeting__close:hover,
.meeting__close:focus-visible {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-ink);
}

.meeting__title {
  color: var(--color-lime);
  margin-block: -0.22em var(--space-4);
}

.meeting__lead {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--color-white);
}

.meeting__grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-9);
  text-align: left;
}

.meeting__label {
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-regular);
  color: var(--color-white);
}

.meeting__foot {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-9);
}

/* The mockup sets this one larger than the pills in the page chrome — it is
   the card's only commitment, so it is allowed the extra weight. */
.meeting__foot .pill {
  padding: var(--space-4) var(--space-7);
  font-size: var(--size-body-02);
  gap: var(--space-3);
}

.meeting__foot .pill__dot {
  width: 7px;
  height: 7px;
}

/* --- The month ------------------------------------------------------------ */

.calendar {
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.calendar__nav {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
}

.calendar__nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar__nav:hover:not(:disabled),
.calendar__nav:focus-visible {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-ink);
}

/* The month before today's holds nothing bookable, so back stops there */
.calendar__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar__month {
  margin: 0;
  text-align: center;
  /* "April  2026" — the mockup sets the year off from the month */
  word-spacing: 0.4em;
}

.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.calendar__weekdays {
  margin-bottom: var(--space-3);
  text-align: center;
  color: var(--color-white);
}

.day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-white);
  font-size: var(--size-body-02);
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.day:hover:not(:disabled),
.day:focus-visible {
  border-color: var(--color-lime);
  color: var(--color-lime);
}

/* Spill from the neighbouring months: shown for the shape of the grid, with
   the box dropped so they read as out of reach. */
.day--outside {
  border-color: transparent;
  color: rgba(255, 255, 255, 0.28);
}

.day:disabled {
  cursor: not-allowed;
}

.day--past {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.28);
}

/* --- The slots ------------------------------------------------------------ */

.slots {
  display: grid;
  gap: var(--space-4) var(--grid-gutter);
}

.slot {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-white);
  font-size: var(--size-body-02);
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.slot:hover,
.slot:focus-visible {
  border-color: var(--color-lime);
  color: var(--color-lime);
}

/* --- The one chosen day, and the one chosen slot -------------------------- */
/* The mockup fills both in lime. Its day number is white and its slot label
   is ink; ink wins here, because white on lime does not carry. */

.day[aria-pressed="true"],
.slot[aria-pressed="true"],
.day[aria-pressed="true"]:hover,
.slot[aria-pressed="true"]:hover,
.day[aria-pressed="true"]:focus-visible,
.slot[aria-pressed="true"]:focus-visible {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-ink);
}

.meeting .form-message {
  margin: 0;
  min-height: 1.3em;
  color: var(--color-white);
}

.meeting .form-message.is-error {
  color: var(--color-highlight);
}

@media (min-width: 768px) {
  .meeting__card {
    padding: var(--space-11) var(--space-9) var(--space-9);
  }
  .meeting__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
    margin-top: var(--space-10);
  }
  .calendar {
    padding: var(--space-6);
  }
  /* Chronological in the DOM, but read down the columns the way the mockup
     ranges them: mornings on the left, afternoons on the right. */
  .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-auto-flow: column;
  }
  .meeting__foot {
    margin-top: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .meeting__card {
    padding: var(--space-12) var(--space-11) var(--space-11);
  }
  .day {
    font-size: var(--size-body-01);
  }
  .slot {
    font-size: var(--size-body-01);
  }
}