/*
  Moravia Prime: the page's own CSS. The design system lives untouched in /assets
  (system.css, layout.css, motion.css, cards.css). Only what that system leaves to the
  page is here: the fonts, the photograph that develops, the film slot, the legal
  documents, the cookie notice, and a guard for short and very tall desktop screens.
*/

/* ---------------------------------------------------------------- fonts (self-hosted, no request to Google) */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- screens the system does not plan for
   The system sets every section to exactly one screen from 1280px wide. On a laptop whose browser
   window is under 900px tall (most of them) a full section would run into the next one, so there a
   section is at least one screen and grows with what it holds, as the system itself does on a tablet. */
@media (min-width: 1280px) and (max-height: 899px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--h, 1) * 100svh); display: flex; flex-direction: column;
  }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; }
  main > :is(section, .section) > .wrap > .fill, .group > .fill { flex: 1 0 auto; }
  .develop { height: min(520px, max(360px, var(--ly-fit))); }
}
@media (min-width: 1280px) and (max-height: 699px) {
  main > :is(.hero, .section--hero) { height: auto; min-height: 100svh; }
}
/* a very tall monitor: a section stops growing at 1100px, so it is never a strip of content over an empty screen */
@media (min-width: 1280px) and (min-height: 1101px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing { height: calc(var(--h, 1) * 1100px); }
  :root { --ly-fit: calc(1100px - var(--padt, 120px) - var(--padb, 72px)); }
}

/* ---------------------------------------------------------------- the nav
   the client's own mark beside the name; the phone number is a plain word that gives way on a small laptop */
.nav__logo svg { height: 26px; width: auto; color: var(--p-accent); }
.footer__mark svg { height: .82em; width: auto; margin-right: .22em; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav__actions > .nav__link { display: none; } }
.menu-col--wide { grid-column: auto / span 3; }
@media (min-width: 1024px) { .menu-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }

/* ---------------------------------------------------------------- photographs
   picture-develops: the section's one photograph on the split's right column, as tall as the text beside it */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(708px, var(--ly-fit)); background: var(--surface); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }
@media (max-width: 639px) { .develop { margin-top: var(--s-6); } }

/* a pair of photographs, or a photograph and a short film, down to the section's foot */
.pair { align-items: stretch; }
.pair > .frame { height: 100%; min-height: 0; }
.pair > .frame > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pair > .frame--clip { background: #000; }
@media (max-width: 1023px) {
  .grid.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .pair > .frame { grid-column: auto; height: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 639px) {
  .grid.pair { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .pair > .frame { aspect-ratio: 4 / 3; }
  .pair > .frame--clip { aspect-ratio: 3 / 4; }
}

/* a row's name that is a link, and the small line under a row's name */
.rows__name > a { text-decoration: none; }
.rows .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); }
.rows--links > li { grid-template-columns: minmax(0, 1fr); }

/* two columns of plain links (the service areas, a list of services) */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }


/* the contact facts beside a form */
.facts { display: grid; gap: var(--s-4); margin: 0; }
.facts > div { display: grid; gap: 2px; }
.facts dt { font-size: var(--t-small); color: var(--muted); }
.facts dd { margin: 0; font-size: var(--t-lead); font-weight: 500; }
.form-panel { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); }
@media (max-width: 639px) { .form-panel { padding: var(--s-5); } }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .field--full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- legal documents and the 404 page
   plain reading pages: one column, the system's type, no section boxes */
.doc { padding: calc(var(--nav) + var(--s-8)) 0 var(--s-9); }
.doc__body { max-width: 70ch; }
.doc__body > * + * { margin-top: var(--s-4); }
.doc__body h1 { font-size: var(--t-h2); margin-bottom: var(--s-5); }
.doc__body h2 { font-size: var(--t-h3); margin-top: var(--s-8); }
.doc__body h3 { font: 500 var(--t-lead)/1.4 var(--font-text); letter-spacing: 0; margin-top: var(--s-6); }
.doc__body ul { list-style: disc; padding-left: 1.25em; display: grid; gap: var(--s-2); }
.doc__body a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.doc__body a:hover { color: var(--action); }
.doc__meta { color: var(--muted); font-size: var(--t-small); }
.doc__body table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.doc__body th, .doc__body td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.doc__body th { font-weight: 500; }
.doc__table { overflow-x: auto; }

/* ---------------------------------------------------------------- the cookie notice
   Shown only while analytics is switched on and no choice has been made. Not a modal: the page
   stays usable, both buttons weigh the same, and Decline is as easy as Accept. */
.consent {
  position: fixed; z-index: 60; right: var(--s-5); bottom: var(--s-5); width: min(420px, calc(100vw - 2 * var(--s-5)));
  display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--line-strong);
}
.consent[hidden] { display: none; }
.consent p { font-size: var(--t-small); line-height: 1.5; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.consent .btn { width: 100%; }
@media (max-width: 639px) {
  .consent { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; border-width: 1px 0 0; padding: var(--s-4) var(--gut) calc(var(--s-4) + env(safe-area-inset-bottom)); }
}
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.linklike:hover { color: var(--action); }
@media (max-width: 639px) { .footer__legal .linklike { min-height: 44px; } }

/* a spec row's value is words, not figures: no tabular spacing round its commas */
.rows__value { font-variant-numeric: normal; }

/* ---------------------------------------------------------------- sections that grow
   Under 1280px the system lets a section grow past its screens. The block that fills what the screen
   leaves (.fill) then never shrinks under what it holds, so a list or a card row cannot run into
   the next section at any width. */
@media (max-width: 1279px) {
  main > :is(section, .section) > .wrap > .fill, .group > .fill { flex: 1 0 auto; }
}
/* two screens on a tablet held upright, for a section whose stacked content needs them (data-ht="2") */
@media (min-width: 640px) and (max-width: 1023px) {
  main > :is(section, .section)[data-ht="2"] { --h: 2; }
}

/* a phone: tiles marked lean keep the photograph and the title; the footer keeps the company,
   two link columns and the legal row, so the close and the footer are two screens (the menu holds every link) */
@media (max-width: 639px) {
  .tiles--lean > .tile > p { display: none; }
  .closing__links .footer__lede { display: none; }
  .closing__links .footer__col:is(:nth-of-type(3), :nth-of-type(4)) { display: none; }
  #process .panel { --p-h: 200px; }
}

/* the film hero's photograph as a <picture> (an upright file under 1024px) keeps its phone crop */
@media (max-width: 1023px) { .hero__media > picture > img { object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); } }

/* a tablet: a row of three tiles stays three across (two and one would run past the screen) */
@media (min-width: 640px) and (max-width: 1023px) { .grid.tiles-3 > .tile.span-4 { grid-column: auto / span 4; } }

/* a phone: a row's name that is a link is a 44px target */
@media (max-width: 639px) {
  .rows__name > a, ul > li > a.link { display: inline-flex; align-items: center; min-height: 44px; }
  .rows:has(.rows__name > a) > li { padding-block: var(--s-2) var(--s-3); }
  .rows:has(.rows__name > a) > li > p { margin-top: -6px; }
  ul.stack-2:has(> li > a.link) > li + li { margin-top: 0; }
}

/* stacked (under 1024px): the photograph under a split's words takes what the screen leaves, so a
   section of one or two screens ends in its picture and never in an empty band */
@media (max-width: 1023px) {
  main > :is(section, .section) > .wrap.grid:has(> .develop) { grid-template-rows: auto minmax(0, 1fr); }
  .develop { aspect-ratio: auto; height: auto; min-height: 320px; }
}
@media (max-width: 639px) {
  .develop { min-height: 200px; }
  /* the odd tile that takes the whole row is a wide crop, so three tiles and their heading fit one screen */
  .grid.tiles-3 > .tile:nth-child(odd of .tile):nth-last-child(1 of .tile) { --tile-ratio: 16 / 9; }
}

/* a phone: the photo hero's picture is a little shorter, so the words, the button and the link under it
   all stand on the first screen */
@media (max-width: 639px) { .hero--photo { --photo: 33svh; } }

/* a phone: a pair is two screens, the heading and the first picture on one, the second picture on the next;
   the two frames share what the screens leave */
@media (max-width: 639px) {
  .grid.pair { display: flex; flex-direction: column; gap: var(--s-4); }
  .pair > .frame, .pair > .frame--clip { aspect-ratio: auto; height: auto; flex: 1 1 0; min-height: 220px; }
}

/* ---------------------------------------------------------------- questions
   stacked (under 1024px) a photograph closes the section and takes what its screens leave */
.faq-split__photo { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); min-height: 200px; }
.faq-split__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 1024px) { .faq-split > .faq-split__photo { display: none; } }
@media (max-width: 1023px) {
  main > :is(section, .section) > .wrap.grid.faq-split { grid-template-rows: auto auto minmax(240px, 1fr); row-gap: var(--s-6); }
}
.faq-split > .faq-split__photo { align-self: stretch; }
/* three tiles across are square, so the row reaches the foot of its screen */
@media (min-width: 640px) { .grid.tiles-3 > .tile { --tile-ratio: 1 / 1; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .grid.tiles-3 > .tile.span-4:nth-child(odd of .tile):nth-last-child(1 of .tile) { grid-column: auto / span 4; }
}