/* Qazzly home page: the dealt tokens (start.mjs brand, navy / cream / coral) and the page CSS the kit
   allows (inside visuals, section heights, one brand band). CSP: no inline styles anywhere, so every
   value the kit would put in a style="" attribute lives here. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* start.mjs brand --page product --bg "#F4EDE0" --ink "#14213D" --accent "#FF6B5B" --type schibsted;
   the accent's ink set to the brand navy (owner's rule: coral buttons carry navy text, 5.9:1) */
:root {
  --p-bg: #f4ede0; --p-surface: #e7e2d7; --p-ink: #14213d; --p-muted: #596274;
  --p-accent: #ff6b5b; --p-accent-ink: #14213d; --p-action: #ff6b5b; --p-action-ink: #14213d;
  --p-inv-bg: #14213d; --p-inv-surface: #212d48; --p-inv-ink: #f4ede0; --p-inv-muted: #b4b6bb;
  --p-inv-accent: #ff6b5b; --p-inv-accent-ink: #14213d; --p-inv-action: #ff6b5b; --p-inv-action-ink: #14213d;
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-text: "Schibsted Grotesk", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.042em;
  --ly-scale: 0.98;
}

/* the kit's marks and button glyph are data: URLs, which img-src 'self' blocks: the same shapes as files */
.mark[data-mark="stack"] { -webkit-mask-image: url("glyphs/stack.svg"); mask-image: url("glyphs/stack.svg"); }
html[data-buttons="pill"] .btn--primary::after { -webkit-mask-image: url("glyphs/chevron.svg"); mask-image: url("glyphs/chevron.svg"); }

/* the brand band: the brand's own navy (the dealt brand-band; the accent coral is too light to carry
   7:1 body text), cream words, coral buttons and links */
.ground-brand {
  --bg: #14213d; --surface: #212d48; --card: #212d48; --ink: #f4ede0; --muted: #c9c6c0;
  --accent: #ff6b5b; --accent-ink: #14213d; --action: #ff6b5b; --action-ink: #14213d;
  --line: color-mix(in oklab, #f4ede0 16%, transparent); --line-strong: color-mix(in oklab, #f4ede0 32%, transparent);
  background: var(--bg); color: var(--ink);
}
.ground-brand :focus-visible { outline-color: #ff6b5b; }

/* ---------------------------------------------------------------- hero collage (one still set) */
.ly-collage { container-type: size; }
.ly-collage__set.qz-set {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  align-content: center; justify-self: center;
  width: min(100cqw, 86cqh); margin-inline: auto;
}
.ly-collage__set.qz-set .ly-piece { position: relative; inset: auto; aspect-ratio: 16 / 9; }
.ly-collage__set.qz-set .ly-piece--main { grid-column: 1 / -1; }
.ly-collage__set.qz-set .ly-piece > img { object-fit: cover; object-position: 0 0; }
@media (max-width: 1023px) {
  .ly-collage__set.qz-set { position: absolute; inset: 0; }
}

/* ---------------------------------------------------------------- product tiles */
.qz-tiles .tile { --tile-ratio: 16 / 9; text-decoration: none; }
.tile__media > img { object-position: 0 0; }
.tile__head > h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.tile__price { font-weight: 500; }
.tile > .tile__meta { color: var(--muted); font-size: var(--t-small); margin-top: calc(-1 * var(--s-2)); }
.tile > .tile__go { font-weight: 500; text-decoration: underline; text-decoration-color: var(--action); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- licensure peek list */
.frame--wide { --ratio: 56.25%; }
#licensure .rows > li { align-items: start; }
#licensure .rows a { color: inherit; }
#licensure .rows__link { grid-column: 1; font-weight: 500; text-decoration: underline; text-decoration-color: var(--action); text-decoration-thickness: 2px; text-underline-offset: 4px; justify-self: start; }

/* ---------------------------------------------------------------- details: one figure set large */
.type-moment { font: var(--display-weight) var(--t-h2)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.qz-figure { display: grid; gap: var(--s-4); align-content: start; }
.qz-figure { gap: var(--s-6); }

/* ---------------------------------------------------------------- footer */
.footer__legal .legal-links a { margin-left: var(--s-4); }
.footer__contact { font-size: var(--t-lead); }

/* the skip link: the first child of the header's .wrap, out of the flow until focused (system.md) */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; padding: var(--s-2) var(--s-4); background: var(--bg); color: var(--ink); z-index: 20; top: var(--s-2); }

/* ---------------------------------------------------------------- the two tile sections: one row of
   three from 640px; on a phone two screens (.g2m): the head and the first tile, then the other two */
@media (min-width: 640px) {
  main > section.section.qz-split > .wrap.wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; }
  main > section.qz-split > .wrap > .group.group, main > section.qz-split > .wrap > .group > .grid.grid, main > section.qz-split > .wrap > .grid.grid { display: contents; }
  .qz-split .section-head { grid-column: 1 / -1; }
  main > section.section.qz-split > .wrap.wrap .grid.grid > a.tile.tile.span-4 { grid-column: auto / span 4; }
}
@media (max-width: 639px) {
  .qz-split .tile > .tile__go { display: none; }
  main > section.section.qz-split > .wrap.wrap .grid.grid > a.tile.tile.span-4 { grid-column: 1 / -1; }
  .qz-split > .wrap > .grid { align-content: start; }
}
a.tile:hover .tile__go, .rows__link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- free tools: picture beside its words, 2 x 2,
   on the page's own column lines (each item is six columns: the picture on three, the words on three) */
.qz-media { row-gap: var(--s-7); }
.qz-media__item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-3); align-content: start; color: inherit; text-decoration: none; }
.qz-media__item > .tile__media { grid-column: 1; grid-row: 1 / span 2; position: relative; overflow: clip; aspect-ratio: 5 / 4; border-radius: var(--r-lg); background: var(--surface); }
.qz-media__item > :not(.tile__media) { grid-column: 2; }
.qz-media__item > .tile__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.qz-media__item:hover > .tile__media > img { transform: scale(1.03); }
.qz-media__item > .tile__head > h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.qz-media__item > .tile__head > h3::after { content: " \2192"; display: inline-block; transition: transform var(--dur) var(--ease); }
.qz-media__item:hover > .tile__head > h3::after { transform: translateX(3px); }
.qz-media__item > p { color: var(--ink); align-self: start; }
.qz-media__item > .tile__head { align-self: end; }
@media (max-width: 1023px) { .qz-media > .qz-media__item { grid-column: auto / span 6; } }
@media (max-width: 639px) {
  .qz-media { row-gap: var(--s-5); }
  .qz-media__item { grid-template-columns: minmax(0, 1fr); }
  .qz-media__item > .tile__media, .qz-media__item > :not(.tile__media) { grid-column: 1; grid-row: auto; }
  .qz-media__item > .tile__media { aspect-ratio: 1 / 1; border-radius: var(--r-md); }
  .qz-media__item > p { display: none; }
  #faq .qz-desk { display: none; }
}

/* ---------------------------------------------------------------- the two tile sections on a tablet: one tile a
   row, its picture on five columns and its words on seven */
@media (min-width: 640px) and (max-width: 1023px) {
  main > section.section.qz-split > .wrap.wrap .grid.grid > a.tile.tile.span-4 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-2); align-content: start; margin-bottom: var(--s-5); }
  .qz-split a.tile > .tile__media { grid-column: 1 / span 5; grid-row: 1 / span 5; align-self: start; }
  .qz-split a.tile > :not(.tile__media) { grid-column: 6 / span 7; }
}

/* ---------------------------------------------------------------- licensure: stays a split on a tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  #licensure .grid > .rows { grid-column: 1 / span 6; }
  #licensure .grid > .frame { grid-column: 7 / span 6; }
  #details .grid > .qz-figure { grid-column: 1 / span 6; }
  #details .grid > .qz-sheet { grid-column: 7 / span 6; }
  .closing__cta > .btn--xl { width: min(100%, 50%); }
  .footer .closing__links .footer__col { grid-column: auto / span 4; }
}
@media (max-width: 639px) { #licensure .rows > li > p { display: none; } }

/* ---------------------------------------------------------------- details picture: a square sheet */
.frame--four { --ratio: 75%; }
.qz-sheet { overflow: clip; border-radius: var(--r-lg); }
.qz-sheet > .frame__img { transition: transform 600ms var(--ease); }
.qz-sheet:hover > .frame__img { transform: scale(1.03); }
@media (max-width: 639px) { #details .qz-desk { display: none; } }

/* ---------------------------------------------------------------- hero below 1024: the main piece alone, full width */
@media (max-width: 1023px) {
  .ly-collage__set.qz-set { width: 100%; grid-template-columns: 1fr; }
  .ly-collage__set.qz-set .ly-piece:not(.ly-piece--main) { display: none; }
  .hero--triptych .hero__cta .btn { width: auto; }
}
@media (max-width: 639px) { .hero--triptych .hero__cta .btn { width: 100%; } }

.qz-sheet { align-self: start; }
#details .qz-figure > .btn { justify-self: start; }
#licensure .grid > .frame { align-self: start; }

/* the questions two across from 640px: three rows of two */
@media (min-width: 640px) {
  .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .faq > .faq__item:nth-child(-n+2) { padding-top: 0; }
}

/* the hero from 1024: one split. The headline, the lead and the one button on the left four columns,
   the cover collage on the right seven (the kit's 1024-1279 split, kept on wide screens too, so no
   button floats alone in a third column) */
@media (min-width: 1024px) {
  .hero--triptych .hero__grid { grid-template-rows: 1fr auto 1fr; }
  .hero--triptych .hero__grid > :first-child { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
  .hero--triptych .ly-collage { grid-column: 6 / span 7; grid-row: 1 / span 3; }
  .hero--triptych .hero__cta { grid-column: 1 / span 4; grid-row: 2; justify-content: flex-start; margin-top: var(--s-6); }
  .hero--triptych .hero__cta .btn { height: 56px; font-size: var(--t-body); }
  .hero--triptych .hero__lead { max-width: 34ch; }
}

/* footer column titles are h3 (after the closing h2), styled as the kit styles its footer h4 */
.footer .footer__col > h3 { font: 500 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-4); }

/* focus ring: coral on cream is only about 2.4:1, so on the cream grounds the ring is navy (the brand
   band keeps its coral ring, set above) */
:focus-visible { outline-color: #14213d; }
.ground-brand :focus-visible { outline-color: #ff6b5b; }

/* ---------------------------------------------------------------- books on Amazon: cover square on top, words below;
   on a phone the cover sits beside the words (one third) so the three books stay short */
.qz-books { row-gap: var(--s-7); }
.qz-book { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); align-content: start; }
.qz-book > .tile__media { position: relative; overflow: clip; aspect-ratio: 1 / 1; border-radius: var(--r-lg); background: var(--surface); }
.qz-book > .tile__media > img { width: 100%; height: 100%; object-fit: cover; }
.qz-book__text { display: grid; gap: var(--s-2); align-content: start; }
.qz-book__text > h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.qz-book__text > .tile__meta { color: var(--muted); font-size: var(--t-small); }
.qz-book__formats { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.qz-book__buy { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--action); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.qz-book__buy::after { content: " \2197"; }
.qz-book__buy:hover { text-decoration-color: currentColor; }
@media (min-width: 640px) and (max-width: 1023px) {
  .qz-books > .qz-book { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .qz-book > .tile__media { grid-column: 1 / span 4; }
  .qz-book > .qz-book__text { grid-column: 5 / span 8; }
}
@media (max-width: 639px) {
  .qz-books { row-gap: var(--s-6); }
  .qz-books > .qz-book { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s-4); }
  .qz-book > .tile__media { border-radius: var(--r-md); }
  .qz-book__text > p:not(.tile__meta) { display: none; }
  .qz-book__formats { flex-direction: column; }
}

/* the Qazzly logo in the nav and the closing footer (kit default for .nav__logo img is 24px) */
.nav__logo .logo-img { display: block; height: 40px; width: auto; }
.closing__links .nav__logo .logo-img { height: 34px; }