/* ------------------------------------------------------------
   Mobile view: phones and tablets held upright
   Loaded last on every page; only applies to narrow or upright
   windows (the media query below). Everything is stacked in one
   column and scrolls inside the frame.

   Units: --u is redefined here as 1/780 of the window width, so
   the sizes from the desktop files (in --u) become sensible on a
   phone; --tu / --mu keep their readable minimum sizes.
   --mobile: 1 tells the scripts (bar.js, home.js, about.js) that
   the mobile view is on.
   ------------------------------------------------------------ */

/* Desktop: no menu button */
.cell--menu {
  display: none;
}

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root {
    --mobile: 1;
    --u: calc(100vw / 780);
    --margin: 16px;
  }

  /* Content scrolls inside the frame on every page */
  .content {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .content::-webkit-scrollbar {
    display: none;
  }

  /* ---------- Bar: logo, current page, MENU ----------
     The other pages and ENG / DE fold out below the MENU card */

  /* --i: draws in with the bar like the first card (start page
     intro); without it the card would show before everything else */
  .cell--menu {
    --i: 0;
    --bold-stretch: 97%;
    display: flex;
    width: var(--w-menu);
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: calc(19 * var(--mu));
    cursor: pointer;
    transition: font-weight 0.4s ease, font-stretch 0.4s ease;
  }

  /* Above the content, so the folded-out menu covers it and can
     be tapped (and above the filters and pop-ups) */
  .bar {
    --w-menu: calc(160 * var(--mu));
    z-index: 6;
  }

  /* Start page too: PB instead of PAULABAMBACH (more room in the bar) */
  .logo.is-full .logo__more {
    width: 0;
  }

  .logo.is-full .logo__more--paula {
    margin-left: 0;
  }

  .bar.is-open .cell--menu,
  .cell--menu:hover,
  .cell--menu:focus-visible {
    font-weight: 700;
    font-stretch: var(--bold-stretch);
  }

  .menu {
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 0;
    flex-direction: column;
    width: var(--w-menu);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s 0.25s;
  }

  .bar.is-open .menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0s;
  }

  .menu .cell {
    width: 100%;
    height: var(--bar-height);
    margin-top: calc(-1 * var(--stroke));
    box-shadow: inset 0 0 0 var(--stroke) var(--ink);
    background: var(--bg);
    animation: none;
  }

  .menu .cell::before,
  .menu .cell::after {
    display: none;
  }

  /* No sliding cards on the phone, only the fade (bar.js) */
  .bar-leaving .cell {
    transition: none;
  }

  /* Safari's balanced line breaking ("pretty") shortens lines on
     the phone at odd places; plain line breaking fills them */
  .intro-text,
  .popup__scroll,
  .entry,
  .legal__body {
    text-wrap: wrap;
  }

  /* ---------- Imprint / privacy ---------- */

  .legal-links {
    top: calc(100svh - var(--margin) + 3px);
    font-size: 11px;
  }

  .legal {
    /* Its top line lies on the bar's bottom line (not doubled) */
    inset: calc(var(--margin) + var(--bar-height) - var(--stroke)) var(--margin) var(--margin);
    width: auto;
    height: auto;
    margin: 0;
  }

  .legal__body {
    padding: calc(90 * var(--tu) + 15px) 24px 40px;
  }

  /* The cross keeps a little distance from the lines */
  .legal__close {
    top: 15px;
    right: 15px;
  }

  /* ---------- Start page ---------- */

  .home-text {
    --size: 44;
    --leading: 50;
    --big-size: 74;
    --big-leading: 72;
    top: calc(60 * var(--u));
    left: calc(40 * var(--u));
    width: calc(100% - 80 * var(--u));
    max-width: none;
  }

  .home-text.is-wide {
    width: calc(100% - 80 * var(--u));
  }

  /* No float beside the controls: the text stays above them */
  .home-text::before {
    display: none;
  }

  .home-controls {
    right: calc(30 * var(--u));
    bottom: calc(30 * var(--u));
    gap: calc(24 * var(--mu));
  }

  .home-images {
    inset: calc(24 * var(--u));
  }

  /* ---------- Projects: one column, titles always shown ---------- */

  .projects-page .content {
    padding: calc(40 * var(--u) + 83 * var(--tu) + 30 * var(--u)) calc(30 * var(--u)) calc(60 * var(--u));
  }

  .projects-grid {
    --columns: 1;
  }

  .projects-grid::before,
  .projects-grid::after {
    display: none;
  }

  .project__info {
    height: 30%;
    transform: none;
  }

  .filters {
    --top: calc(var(--margin) + var(--bar-height) + 40 * var(--u));
  }

  /* ---------- Project pop-up: title, photos, text ----------
     Fills the area below the bar and scrolls as a whole */

  .popup {
    inset: calc(var(--margin) + var(--bar-height)) var(--margin) var(--margin);
    flex-direction: column;
    padding: 0 calc(30 * var(--u)) calc(60 * var(--u));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    box-shadow: none;
  }

  /* Only while open (a closed dialog must stay hidden) */
  .popup[open] {
    display: flex;
  }

  .popup::-webkit-scrollbar {
    display: none;
  }

  /* The cross stays at the top right while scrolling, a little
     away from the lines */
  .popup__close {
    position: sticky;
    order: 0;
    top: 15px;
    flex-shrink: 0;
    align-self: flex-end;
    margin: 15px calc(15px - 30 * var(--u)) calc(-83 * var(--tu) - 15px) 0;
  }

  .popup__head {
    position: static;
    order: 1;
    padding: calc(40 * var(--u) + 15px) calc(83 * var(--tu) + 10px) calc(30 * var(--u)) 0;
  }

  .popup__media {
    position: relative;
    order: 2;
    inset: auto;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 4 / 3.4;
  }

  .popup__text {
    position: relative;
    order: 3;
    inset: auto;
    flex-shrink: 0;
    width: 100%;
    max-height: none;
    margin-top: calc(40 * var(--u));
  }

  .popup__text.has-award {
    margin-top: calc(40 * var(--u) + 42 * var(--u));
  }

  .popup__scroll {
    overflow: visible;
    padding-bottom: calc(42 * var(--tu));
  }

  .popup__more {
    display: none !important;
  }

  /* ---------- About me: photo, text, tiles, CVs ----------
     about.js leaves the positions to the page in this view */

  .about {
    display: flex;
    flex-direction: column;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: calc(50 * var(--u)) calc(30 * var(--u)) calc(100 * var(--u));
  }

  .portrait {
    position: relative;
    order: 1;
    top: auto;
    left: auto;
    width: 62%;
    padding: calc(30 * var(--u));
  }

  .intro-text {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    width: auto;
    margin: calc(-90 * var(--u)) 0 0 14%;
  }

  .tiles {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--u));
    margin-top: calc(70 * var(--u));
  }

  .tile,
  .tile.is-open {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .tile__inner {
    width: 100%;
  }

  /* Letterings a little further left, and never under the cross:
     space for it is kept on the right; a lettering that would still
     be too wide gets a little smaller */
  .tile__open {
    padding: 0 calc(41 * var(--tu) + 27 * var(--tu) + 14px) 0 calc(26 * var(--tu));
  }

  .tile__lettering {
    max-width: 100%;
  }

  .tile__lettering svg {
    max-width: 100%;
  }

  .downloads {
    position: relative;
    order: 4;
    top: auto;
    height: calc(190 * var(--u) + 84 * var(--tu) + 100 * var(--tu));
    margin-top: calc(70 * var(--u));
  }

  .downloads__icon {
    left: calc(20 * var(--u));
    width: calc(170 * var(--u));
  }

  /* Same size in both languages (longer German labels wrap) */
  .download {
    width: 60%;
    min-width: 0;
    height: auto;
    min-height: calc(100 * var(--tu));
    padding: calc(14 * var(--tu)) calc(30 * var(--tu));
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .download--en {
    top: calc(190 * var(--u));
    left: auto;
    right: 0;
  }

  .download--de {
    top: calc(190 * var(--u) + 84 * var(--tu));
    left: 0;
  }

  /* ---------- Contact: everything below each other ---------- */

  .contact {
    --talk-size: calc(150 * var(--u));
    --mail-top: calc(560 * var(--u));
    top: calc(60 * var(--u));
    left: calc(40 * var(--u));
    width: calc(100% - 80 * var(--u));
    height: calc(560 * var(--u) + 200 * var(--tu));
  }

  .talk__word--lets { --x: -6;  --y: 0; }
  .talk__word--talk { --x: 70;  --y: 125; }

  .smiley {
    right: auto;
    left: calc(400 * var(--u));
    top: calc(330 * var(--u));
    width: calc(180 * var(--u));
  }

  /* Arranged like the CV buttons on the about page: e-mail on the
     right (the address on its own line), LinkedIn lower on the left,
     overlapping it */
  .contact-box--mail {
    right: 0;
    width: 72%;
    padding-right: calc(30 * var(--tu));
    white-space: normal;
    line-height: 1.3;
    z-index: 1;
  }

  .contact-box--linkedin {
    right: auto;
    left: 0;
    top: calc(var(--mail-top) + 84 * var(--tu));
    z-index: 2;
  }

  /* Touch: no focus frames after a tap (e.g. on the arrow when a
     project opens); keyboards still get them */
  @media (hover: none) {
    .popup button:focus-visible,
    .legal__close:focus-visible,
    .theme-link:focus-visible,
    .tile__open:focus-visible,
    .tile__close:focus-visible,
    .control__button:focus-visible {
      outline: none;
    }
  }
}