/* Phones and tablets. One site: the desktop layout is untouched, and everything here only
   switches on below a width. Loaded last on every page, after the page's own <style>.

   Three widths:
     1080px and below  the header folds into ☰ (mobile-common.css, on every page)
     1000px and below  things that move by themselves or pin the page stop doing it, and are
                       swiped instead: the countries strip and "How it works". Touch screens
                       wider than that swipe the strip too.
      760px and below  the phone layout. Tested at 390 and 360.

   For readers of 45 and over, who mostly arrive from Facebook on a phone: text of 17px and up,
   nothing important in pale grey, and anything to tap at least 48px. */

/* Only the home page's own sections are here. What other pages share with it (the ☰ menu,
   spacing and headings, the FAQ, the last call to action, the footer, the swiped strip, the
   panels that come up from the bottom, the fixed button) is in mobile-common.css.
   The dial's centre plate, added by mobile.js, shows on a phone only */
.tel-call { display: none; }

/* ======================================================================
   1000px — swiped, not moving or pinned
   ====================================================================== */

@media (max-width: 1000px) {
  /* Packages table: narrower columns before the phone layout takes over */
  .cmp { --col: 170px; --pad: 32px; }

  /* Founders: the story first, then the two photos under it */
  .founders { grid-template-columns: 1fr; gap: 40px; }
  .founders > :last-child { order: -1; }
  .founders p { max-width: none; }

  /* "How it works" — nothing pinned. The telephone sits on top, the four steps are cards in
     a row underneath, and each card that comes to rest dials its digit (how-it-works.js). */
  .anim .how { height: auto; }
  .anim .how-stage { position: relative; top: auto; height: auto; }
  .how-stage::before { display: none; }
  .anim .how-stage .wrap { flex-direction: column; align-items: stretch; padding: 0; }
  .anim .how-dial { position: relative; right: auto; top: auto; translate: none; order: -1; width: min(80%, 480px); margin: 0 auto 12px; }
  .anim .how-card { width: auto; overflow: visible; display: flex; flex-direction: column; background: none; color: inherit; border-radius: 0; }
  .anim .how-top { order: 2; display: flex; justify-content: center; height: auto; padding-top: 14px; border: 0; }
  .anim .how-top .mono, .anim .how-icon { display: none; }
  .anim .how-dots { gap: 2px; border: 0; }
  /* A 36px square to tap; the dot itself is drawn inside it */
  .anim .how-dots button, .anim .how-dots button.is-active, .anim .how-dots button:hover {
    position: relative; width: 36px; height: 36px; border: 0; background: none; opacity: 1; transform: none;
  }
  .anim .how-dots button::before {
    content: ''; position: absolute; inset: 12px; border-radius: 50%;
    border: 1.5px solid rgba(246, 241, 232, .55); transition: background .3s, border-color .3s;
  }
  .anim .how-dots button.is-active::before { background: var(--terracotta); border-color: var(--terracotta); }

  .anim .how-steps {
    display: flex; gap: 12px; padding: 0 48px; scroll-padding: 0 48px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .anim .how-steps::-webkit-scrollbar { display: none; }
  .anim .how-step {
    grid-area: auto; flex: 0 0 min(84%, 460px); scroll-snap-align: start;
    background: var(--cream); color: var(--ink); border-radius: 24px; overflow: hidden;
  }
  /* Every card is readable as it slides in, not only the one in front */
  .anim .how .how-step .how-num, .anim .how .how-step h3, .anim .how .how-step .how-body { opacity: 1; transform: none; }
  .anim .how-step:not(.is-active) { pointer-events: auto; }

  /* The centre plate: tap it and the call is put through, i.e. the form opens */
  .anim .tel-call {
    display: block; position: absolute; z-index: 2; left: 27.753%; top: 38.514%; width: 23.82%;
    aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  }
  .anim .tel-call:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
}

/* ======================================================================
   760px — phones
   ====================================================================== */
@media (max-width: 760px) {
    /* ---------- Photo header ---------- */
  /* The tall crop (header-oxford-tall.jpg, 3:4) with the headline in the sky. The line under
     the headline and the button come out of the card onto the page, where they are easier to
     read than on the stone. The card becomes a grid: row 1 is the photo, and everything that
     lies on the photo (veil, line, menu, headline) is placed in that same cell. */
  .hero--photo { --gutter: 12px; --radius: 28px; margin-bottom: 8px; }
  .hero-card { display: grid; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
  .hero-card picture, .hero-text, .hero-text .wrap { display: contents; }
  .hero-card picture img {
    grid-area: 1 / 1; position: relative; inset: auto; width: 100%; height: auto;
    aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--cream-2);
  }
  .hero-card::before, .hero-card::after, .hero-line, .hdr--on-photo { grid-area: 1 / 1; }
  /* The layers on the photo are sized to the photo itself (3:4 of the width), not to the
     card, which now also holds the words and the button under the photo */
  .hero-card::before, .hero-line { bottom: auto; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius); }
  .hero-card::after { height: 30cqw; border-radius: var(--radius) var(--radius) 0 0; }
  /* The line. It does fit the tall crop (mobile.js gives it the crop's viewBox, and it still
     threads behind the roofs), but its loop lands in the last line of the headline — the sky
     on a phone is only tall enough for the words. So phones show the photograph alone; drop
     this rule to bring the line back if the headline is ever shorter. */
  .hero-line { display: none; }
  .hero-line > path { stroke-width: 3.4; } /* the phone's viewBox is smaller, so a unit is bigger */
  .hdr--on-photo .wrap { padding: 0 16px; }

  .hero--photo h1 {
    grid-area: 1 / 1; align-self: start; position: relative; z-index: 4;
    max-width: none; margin: 78px 20px 0; font-size: 8.4cqw; line-height: 1.05;
  }
  .hero--photo .hero-sub { grid-row: 2; max-width: none; margin: 24px 8px 0; font-size: 18px; line-height: 1.5; }
  .hero--photo .hero-text .btn { grid-row: 3; width: auto; margin: 22px 8px 0; min-height: 56px; justify-content: center; font-size: 17px; }

  /* ---------- About us ---------- */
  .hero--photo + .intro { padding-top: 56px; }
  .intro .mono { margin-bottom: 18px; }
  .intro p { font-size: 30px; line-height: 1.22; }
  .inline-ph { height: 36px; width: 72px; margin: -4px 2px 0; }
  .inline-ph.round { width: 36px; }

  /* ---------- Countries ---------- */
  .strip-track { gap: 22px; }
  .country { width: 74vw; height: calc(74vw * 4 / 3); max-height: 66vh; }
  .country-photo { border-radius: 24px; }
  .country-name { padding: 12px 22px; border-width: 2.5px; font-size: 18px; }
  .country-name.at-top-left { top: -14px; left: -10px; }
  .country-name.at-bottom-right { bottom: -14px; right: -10px; }
  .soon { font-size: 13px; padding: 9px 14px; }

  /* ---------- Universities ---------- */
  #universities { padding-top: 48px !important; } /* the page sets 20px inline for the desktop */
  .uni-cols { grid-template-columns: 1fr; gap: 44px; }
  .uni-cols h3 { font-size: 34px; }
  .uni { grid-template-columns: 60px 1fr auto; gap: 16px; min-height: 76px; padding: 14px 0; }
  .uni .ph { height: 52px; border-radius: 12px; }
  .uni b { font-size: 17px; line-height: 1.3; }
  .uni small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; opacity: .75; }
  .uni .mono { font-size: 18px; color: var(--terracotta); opacity: 1; }
  .uni-note { font-size: 13px; opacity: .7; }

  /* ---------- How it works ---------- */
  .dark { margin: 0 12px; border-radius: 28px; }
  #how { padding-bottom: 40px; }
  .anim .how-dial { width: min(92%, 400px); margin-bottom: 4px; }
  .anim .how-steps { padding: 0 20px; scroll-padding: 0 20px; }
  .anim .how-step { flex-basis: 84%; }
  .how-head { grid-template-columns: 84px 1fr; height: auto; min-height: 112px; }
  .how-num { padding: 16px 0 0 12px; font-size: 76px; }
  /* "Консультація" is the longest title and has to fit whole on a 360px phone */
  .how-head h3 { padding: 24px 12px 0; font-size: clamp(25px, 7.2vw, 30px); }
  .how-body { padding: 20px 20px 26px; }
  .how-sub { font-size: 18px; line-height: 1.35; }
  .how-body p { font-size: 17px; opacity: .85; }
  /* Animations off: the steps stay stacked in one card, without the side pictures */
  html:not(.anim) .how-stage .wrap { padding: 0 12px 12px; }
  html:not(.anim) .how-step { grid-template-columns: 1fr; }
  html:not(.anim) .how-still { display: none; }
  html:not(.anim) .how-top { grid-template-columns: 1fr; }
  html:not(.anim) .how-dots, html:not(.anim) .how-icon { display: none; }

  /* ---------- Packages ---------- */
  /* The same comparison, squeezed: the item on the left, two narrow columns of ticks */
  #packages .wrap { padding: 0 14px; }
  #packages .sec-head { padding: 0 6px; }
  .cmp { --col: 84px; --pad: 14px; }
  .cmp::before { bottom: -30px; border-radius: 20px; }
  .cmp-head { height: 104px; }
  .cmp-head h3, .cmp-head .silver h3 { font-size: 21px; line-height: 1.02; }
  .cmp-head .full { gap: 7px; padding: 0 4px; }
  .cmp-head .silver { padding-bottom: 16px; }
  .cmp-head .badge { padding: 3px 6px; font-size: 10px; letter-spacing: -.02em; }
  .cmp-body { border-radius: 20px; }
  .cmp-body .cmp-row { min-height: 66px; padding: 10px 0; font-size: 16px; line-height: 1.35; }
  .cmp-row > :first-child { padding-right: 10px; }
  .cmp .price { font-size: 21px; }
  .cmp svg { width: 26px; height: 26px; }
  #packages { padding-bottom: 94px; }
  .cmp-foot { margin-top: 62px; }
  .cmp-foot .btn { width: 100%; justify-content: center; min-height: 56px; font-size: 17px; }

  /* ---------- Founders ---------- */
  #founders { padding-top: 24px !important; }
  .founders { gap: 20px; }
  .founders h2 { margin: 14px 0 20px; font-size: 44px; }
  .founders p { font-size: 17px; }
  .founders-photos { grid-template-columns: 1fr; gap: 100px; padding-top: 86px; }
  .founder:last-child { margin-top: 0; }
  .founders-photos .ph { height: auto; aspect-ratio: 4 / 5; }
  .founder-name { top: -80px; font-size: 34px; }
  .founder-arrow { top: -64px; left: 104px; width: 76px; }
  .founder:last-child .founder-arrow { right: 104px; }
  .bio { padding: 20px 22px 22px; }
  .founders .bio p { font-size: 17px; line-height: 1.55; }
  .bio .mono { opacity: .75; }
}