/* ==========================================================================
   layout.css: page frame (sections, containers, header, phone menu, footer)
   ----------------------------------------------------------------------------
   Breakpoints used across the site (all "max-width"):
     1400px, 1300px, 1100px  a few grids that need more room
     1200px  laptops and below
      991px  tablets and below (the phone menu replaces the top menu)
      767px  large phones and below (and the phone type scale, tokens.css)
      600px  small tablets and large phones (a few grids)
      480px  phones
      359px  the smallest phones
   ========================================================================== */

/* --------------------------------------------------------------------------
   Band: a full-width strip of the page with the standard padding
   (32px top and bottom; 80px at the sides, 48px from 767px, 24px from 480px).
   A <section> is usually one band: <section class="band"> … </section>
   -------------------------------------------------------------------------- */

.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--space-6) var(--space-9);
  background-color: var(--color-surface);
}

@media (max-width: 767px) {
  .band {
    padding-right: var(--space-7);
    padding-left: var(--space-7);
  }
}

@media (max-width: 480px) {
  .band {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
  }
}

/* Container: limits content to the widest content width (1200px). */
.container {
  width: 100%;
  max-width: var(--container-max);
}

/* ==========================================================================
   SITE HEADER
   Logo on the left, menu in the middle, "Apply now" on the right; on
   tablets and phones the menu is replaced by a menu button (two lines that
   turn into an X) which opens the phone menu below.
   The header stays at the top of the screen, is slightly see-through
   (frosted glass) and gets a soft shadow once the page is scrolled
   (class is-scrolled, set by assets/js/main.js). main.js also marks the
   link to the current page with aria-current="page".
   The same markup is used on every page (see tools/check_shared.py).
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  border-bottom: 1px solid var(--color-line);
  background-color: var(--color-surface);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

/* Frosted glass where the browser supports it (otherwise plain white) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px -12px var(--color-shadow);
}

/* Logo | menu | Apply now: the menu sits exactly in the middle. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--space-9));
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--space-9);
}

.site-header__logo {
  display: flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
}

.site-header__logo img {
  width: auto;
  height: 35px;
}

/* Top menu (wide screens) */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Each link has a green underline that slides in on hover and stays under
   the current page. */
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-weight: 500;
  line-height: var(--leading-none);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-nav__link::after {
  position: absolute;
  right: var(--space-3);
  bottom: 6px;
  left: var(--space-3);
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
  content: "";
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-brand);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Apply now and (on small screens) the menu button */
.site-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
}

/* "Apply now": primary button colour, with an arrow that nudges forward */
.site-header__apply {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-on-dark);
  background-color: var(--color-cta);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.site-header__apply:hover,
.site-header__apply:active {
  background-color: var(--color-cta-hover);
}

.site-header__apply-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-standard);
}

.site-header__apply:hover .site-header__apply-arrow {
  transform: translateX(3px);
}

/* Menu button: two lines that turn into an X when the menu is open */
.site-header__menu-button {
  position: relative;
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: calc(-1 * var(--space-2));
  border: 0;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.site-header__menu-button:hover {
  background-color: var(--color-surface-soft);
}

.site-header__menu-line {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: top var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.site-header__menu-line--top {
  top: 17px;
}

.site-header__menu-line--bottom {
  top: 25px;
}

.site-header__menu-button[aria-expanded="true"] .site-header__menu-line--top {
  top: 21px;
  transform: rotate(45deg);
}

.site-header__menu-button[aria-expanded="true"] .site-header__menu-line--bottom {
  top: 21px;
  transform: rotate(-45deg);
}

@media (max-width: 1200px) {
  .site-header__logo img {
    height: 32px;
  }

  .site-nav__link {
    padding: 0 var(--space-2);
  }

  .site-nav__link::after {
    right: var(--space-2);
    left: var(--space-2);
  }

  .site-header__apply-arrow {
    display: none;
  }
}

/* Tablets and phones: the menu button replaces the top menu. */
@media (max-width: 991px) {
  :root {
    --header-height: 64px;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }

  .site-header__menu-button {
    display: block;
  }

  .site-header__logo img {
    height: 32px;
  }
}

@media (max-width: 767px) {
  .site-header__inner {
    padding: 0 var(--space-7);
  }
}

@media (max-width: 480px) {
  .site-header__inner {
    gap: var(--space-3);
    padding: 0 var(--space-5);
  }

  .site-header__logo img {
    height: 28px;
  }

  .site-header__apply {
    height: 40px;
    padding: 0 14px;
    font-size: var(--text-sm);
  }
}

@media (max-width: 359px) {
  .site-header__inner {
    padding: 0 var(--space-4);
  }

  /* No room: "Apply now" is in the phone menu instead. */
  .site-header__apply {
    display: none;
  }
}

/* While the phone menu is open the header is solid and the page behind
   does not scroll (class menu-open on <html>, set by main.js). */
.menu-open {
  overflow: hidden;
}

.menu-open .site-header {
  background-color: var(--color-surface);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Phone menu (tablets and phones; opened by the menu button, see main.js)
   A full-screen panel below the header: one large row per page, each with a
   short description and an arrow, then "Apply now", the dates and the email.
   The rows slide in one after another.
   -------------------------------------------------------------------------- */

.mobile-menu {
  display: none;
}

@media (max-width: 991px) {
  .mobile-menu {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-2) var(--space-9) calc(var(--space-6) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-surface);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s;
  }
}

/* side margins line up with the logo */
@media (max-width: 767px) {
  .mobile-menu {
    padding-right: var(--space-7);
    padding-left: var(--space-7);
  }
}

@media (max-width: 480px) {
  .mobile-menu {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
  }
}

@media (max-width: 359px) {
  .mobile-menu {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

.mobile-menu__item {
  border-bottom: 1px solid var(--color-line);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}

.mobile-menu.is-open .mobile-menu__item {
  opacity: 1;
  transform: none;
}

/* one after another */
.mobile-menu__item:nth-child(2) {
  transition-delay: 40ms;
}

.mobile-menu__item:nth-child(3) {
  transition-delay: 80ms;
}

.mobile-menu__item:nth-child(4) {
  transition-delay: 120ms;
}

.mobile-menu__item:nth-child(5) {
  transition-delay: 160ms;
}

/* Page name (large), a one-line description below it, an arrow on the right */
.mobile-menu__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-4) 0;
}

.mobile-menu__label {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  transition: color var(--duration-fast) var(--ease-standard);
}

.mobile-menu__hint {
  grid-column: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

.mobile-menu__arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 19px;
  height: 19px;
  color: var(--color-muted);
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.mobile-menu__link:hover .mobile-menu__arrow {
  color: var(--color-brand);
  transform: translateX(4px);
}

/* The page you are on: name and arrow in brand green */
.mobile-menu__link[aria-current="page"] .mobile-menu__label,
.mobile-menu__link[aria-current="page"] .mobile-menu__arrow {
  color: var(--color-brand);
}

/* "Apply now", dates and email at the bottom */
.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  text-align: center;
}

.mobile-menu__apply {
  width: 100%;
}

.mobile-menu__meta {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

/* Contact us, as in the footer: WhatsApp, WeChat, Email and Call (all but
   Email open a pop-up) in one row, each an icon with its name underneath */
.mobile-menu__contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
}

.mobile-menu__contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  cursor: pointer;
}

.mobile-menu__contact-item:hover .mobile-menu__contact-text {
  color: var(--color-brand);
  text-decoration: underline;
}

/* No movement for visitors who ask their device for less motion */
@media (prefers-reduced-motion: reduce) {
  .site-header__menu-line,
  .mobile-menu,
  .mobile-menu.is-open,
  .mobile-menu__item,
  .mobile-menu__arrow,
  .site-header__apply-arrow,
  .site-nav__link::after {
    transition: none;
  }

  .mobile-menu,
  .mobile-menu__item {
    transform: none;
  }
}

/* ==========================================================================
   SITE FOOTER
   White, under a thin line, lined up with the page grid (the line runs
   across the content width, 64px below the closing card).
   Five columns from 1400px: brand (logo, name, one line) | Contact us
   (WhatsApp, WeChat, Email, Call) | Follow us (LinkedIn, Instagram, RedNote,
   WeChat Channels) | Programme | Apply. Each column is as wide as its
   content and the spare space is shared between them.
   1100-1399px: brand across the top, the four columns below.
   768-1099px: brand on top, then Contact us | Follow us, Programme | Apply.
   Phones: brand, Contact us (2 x 2), Follow us (2 x 2), Programme | Apply.
   Bottom line: "CUNJC Cambridge Summer School 2027" and the legal links on
   the left, "Back to top" on the right.
   Every link and button is at least 44px tall on tablets and phones. The
   Programme and Apply links use the same rows as Contact us and Follow us
   (32px on desktop, 44px on tablets and phones), so the four columns line
   up row by row.
   The same markup is used on every page (see tools/check_shared.py).
   ========================================================================== */

.site-footer {
  margin-top: var(--space-6);
  padding: 0 var(--space-9);
  background-color: var(--color-surface);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* 40px from the line to the headings, 32px from the columns to the bottom
     line: the bottom looks larger than its number (the rows end below their
     text, and the link columns end above the brand), so the two gaps look
     about the same (owner's choice, 20 October 2026) */
  padding: calc(var(--space-6) + var(--space-2)) 0 var(--space-4);
  border-top: 1px solid var(--color-line);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: space-between;
  gap: var(--space-7) var(--space-6);
  padding-bottom: var(--space-6);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Brand: logo, name, one line */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-card);
}

.site-footer__logo-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  /* Room between the Centre's logo and the summer school's name. When the
     brand sits beside the other columns, this centres the name on their
     second row (WeChat, Instagram, Faculty, Key dates): 44 + 10 + 12 = 66px
     from the top = heading 18 + 12, one 32px row, and 4px (the 32px row
     less the 24px name, halved). */
  margin-bottom: 10px;
}

.site-footer__logo {
  display: block;
  width: 210px;
  height: auto;
}

.site-footer__name {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.site-footer__text {
  max-width: 40ch;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Contact us and Follow us: compact rows (32px) with a brand-green icon;
   44px and 4px apart on tablets and phones, for fingers (see below).
   WeChat is a button (it opens the QR pop-up); the others are links. */
.site-footer__contact {
  display: flex;
  flex-direction: column;
}

.site-footer__contact-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--space-6);
  border: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: left;
  cursor: pointer;
}

/* The icon is the shared .contact-icon (components.css) */
.site-footer__contact-item:hover .site-footer__contact-text {
  color: var(--color-brand);
  text-decoration: underline;
}

/* A link whose address is not known yet: no pointer, no hover */
a.site-footer__contact-item:not([href]) {
  cursor: default;
}

a.site-footer__contact-item:not([href]):hover .site-footer__contact-text {
  color: inherit;
  text-decoration: none;
}

/* "Email": the address shows in a small label above on hover and keyboard
   focus; screen readers always hear it */
.site-footer__tip {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 2px);
  left: 48px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-on-dark);
  background-color: var(--color-ink);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

/* A small arrow pointing down to the label */
.site-footer__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  border: 5px solid transparent;
  border-top-color: var(--color-ink);
}

.site-footer__contact-item:hover .site-footer__tip,
.site-footer__contact-item:focus-visible .site-footer__tip {
  opacity: 1;
  transform: translateY(0);
}

/* Programme and Apply links: the same rows as Contact us and Follow us
   (32px; 44px and 4px apart on tablets and phones), so the columns line up
   row by row */
.site-footer__links {
  display: flex;
  flex-direction: column;
}

.site-footer__links a {
  display: flex;
  align-items: center;
  min-height: var(--space-6);
  font-size: var(--text-sm);
}

.site-footer__links a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

/* Bottom line: programme name and legal links on the left, back to top on the right */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.site-footer__legal,
.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
}

.site-footer__legal-links a,
.site-footer__top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer__legal-links a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.site-footer__top {
  gap: 6px;
  font-weight: 600;
  color: var(--color-brand);
}

.site-footer__top-icon {
  width: 14px;
  height: 14px;
}

/* Laptops: brand across the top, the four columns below */
@media (max-width: 1400px) {
  .site-footer__columns {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.75fr);
    justify-content: stretch;
    gap: var(--space-6) var(--space-6);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  /* the brand has the row to itself: the logo and name sit closer */
  .site-footer__logo-link {
    margin-bottom: var(--space-3);
  }

  .site-footer__text {
    max-width: 70ch;
  }
}

/* Tablets: brand on top, then Contact us | Follow us, Programme | Apply */
@media (max-width: 1100px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--gap-grid);
  }
}

/* Tablets and phones: every row 44px tall and 4px apart, for fingers */
@media (max-width: 991px) {
  .site-footer__contact,
  .site-footer__links {
    gap: var(--space-1);
  }

  .site-footer__contact-item,
  .site-footer__links a {
    min-height: 44px;
  }
}

/* Phones: Contact us and Follow us each as a 2 x 2 grid across the width */
@media (max-width: 767px) {
  .site-footer {
    padding: 0 var(--space-7);
  }

  .site-footer__columns {
    gap: var(--space-6) var(--gap-grid);
  }

  .site-footer__contact-col,
  .site-footer__follow {
    grid-column: 1 / -1;
  }

  .site-footer__contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-4);
  }

  .site-footer__logo {
    width: 200px;
  }
}

/* Small phones: "Back to top" first, then the programme name and legal links */
@media (max-width: 480px) {
  .site-footer {
    padding: 0 var(--space-5);
  }

  .site-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__tip {
    transition: none;
  }
}

/* ==========================================================================
   CONTACT POP-UPS (in the footer): native <dialog>s, opened by a button
   with data-dialog="wechat-chat", "whatsapp-chat" or "call-us" (main.js).
   WeChat and WhatsApp are built the same way: one larger code with the
   name to search for (and WhatsApp's number), a line, and an "Open WeChat"
   or "Open WhatsApp" button for visitors already on their phone
   (qr-dialog__btn, in components.css after the buttons, so that it can
   narrow the full-width .btn). Call: the UK and China numbers side by
   side. The X, the Escape key or a click
   outside closes them.
   The faculty biographies use the same box (qr-dialog bio-dialog; see
   pages.css).
   ========================================================================== */

.qr-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background-color: var(--color-surface);
  box-shadow: 0 24px 48px -12px var(--color-shadow-strong);
}

.qr-dialog::backdrop {
  background-color: var(--color-backdrop);
}

.qr-dialog__inner {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
}

.qr-dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-round);
  color: var(--color-muted);
  cursor: pointer;
}

.qr-dialog__close:hover {
  color: var(--color-ink);
  background-color: var(--color-surface-soft);
}

.qr-dialog__close svg {
  width: 20px;
  height: 20px;
}

.qr-dialog__title {
  margin-bottom: var(--space-4);
  padding: 0 var(--space-6);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.qr-dialog__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.qr-dialog__qr {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.qr-dialog__code figcaption {
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

.qr-dialog__code figcaption strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.qr-dialog__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* WeChat and WhatsApp: one code, a little larger */
.qr-dialog__code--one {
  margin-bottom: var(--space-4);
}

.qr-dialog__code--one .qr-dialog__qr {
  max-width: 200px;
}

/* Call: the two numbers side by side (stacked on small phones), each in a
   box with its place, the number (a tel: link) and when it is answered */
.call-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.call-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.call-line__place {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-heading);
}

.call-line__number {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.call-line__number:hover {
  text-decoration-thickness: 2px;
}

.call-line__hours {
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

@media (max-width: 480px) {
  .call-lines {
    grid-template-columns: minmax(0, 1fr);
  }
}

.qr-dialog .to-confirm {
  font-size: inherit;
}