/* home.css: the start page. "Who Solved-IT?" with Nora's picture, then the booking calendar.
   Everything is brand yellow except the projects (Nora, 5 Nov). */
body.home { background: var(--yellow); }
.hello-section, .book-section { background: var(--yellow); color: var(--black); padding: calc(80px + var(--space-6)) var(--space-6) var(--space-7); }
.book-section { padding-top: var(--space-5); }
.hello-title { font: 700 clamp(44px, 6vw, 88px)/1 var(--font-heading); max-width: 1200px; margin: 0 auto var(--space-6); }
.hello-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); align-items: center; }
.hello-media { margin: 0; aspect-ratio: 720 / 1106; overflow: hidden; }
.hello-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hello-media.is-empty { border: var(--line-thin) dashed var(--black); }
.hello-text { font: 400 clamp(22px, 2.4vw, 32px)/1.4 var(--font-body); margin: 0; max-width: 24ch; }
.book-title { font: 700 clamp(32px, 4vw, 56px)/1.1 var(--font-heading); max-width: 1200px; margin: 0 auto var(--space-2); }
.book-text { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; max-width: 1200px; margin: 0 auto var(--space-5); }
.book-widget { max-width: 1100px; margin: 0 auto; min-width: 320px; height: 720px; }
@media (max-width: 760px) {
  .hello-section, .book-section { padding-left: calc(var(--rail) + var(--space-3)); padding-right: var(--space-3); }
  .hello-section { padding-top: var(--space-6); }
  .hello-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .book-widget { height: 1000px; }
}

/* Desktop: every section on the start page is one full screen high, the same height as the
   carousel on "Mitt arbete", so scrolling feels even (Nora, 5 Nov). */
@media (min-width: 761px) {
  .hello-section, .book-section, .board-section, .services-section, .references-section {
    min-height: 100svh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(68px + var(--space-5)); padding-bottom: var(--space-6);
  }
  /* Start: picture sized to fit the screen */
  .hello-title { margin-bottom: var(--space-5); }
  .hello-media { width: 100%; max-width: calc(100svh - 300px); justify-self: start; }
  /* Booking: calendar fills the rest of the screen */
  .book-widget { width: 100%; height: clamp(560px, calc(100svh - 300px), 760px); }
  /* Projects: the collage keeps its shape but fits in one screen */
  .board-section { padding-left: var(--space-6); padding-right: var(--space-6); }
  .board.is-laid-out { width: min(1440px, 100%, calc((100svh - 150px) * 1440 / 1260)); }
  /* Services: the wavy banner is the top of this screen */
  .services-section { padding-left: 0; padding-right: 0; justify-content: flex-start; padding-top: 68px; }
  .services-section .wave-banner { background: transparent; margin-bottom: var(--space-4); }
  .services-section .wave-banner svg { height: clamp(100px, 15svh, 180px); }
  .services-title, .service-grid { padding-left: var(--space-6); padding-right: var(--space-6); box-sizing: content-box; }
  .services-title { margin-bottom: var(--space-4); }
  .service-card { min-height: clamp(150px, 19svh, 240px) !important; padding: var(--space-4) var(--space-5); }
  .service-card:nth-child(2), .service-card:nth-child(4) { transform: translateY(var(--space-5)); }
  .services-section .service-grid { margin-bottom: var(--space-6); }
}
@media (min-width: 761px) {
  .book-widget { height: clamp(460px, calc(100svh - 340px), 760px); }
  .service-card { min-height: clamp(130px, 16svh, 240px) !important; }
  .service-card p { font-size: clamp(15px, 1.9svh, 17px); }
  .services-section .wave-banner svg { height: clamp(90px, 13svh, 180px); }
  .references-section .logo-band { height: clamp(110px, 16svh, 180px); }
  .references-section .quotes { margin-top: var(--space-5); gap: var(--space-5); }
  .references-section .quote blockquote { font-size: clamp(15px, 2svh, 19px); }
  .references-section .quote blockquote::before { font-size: clamp(56px, 8svh, 88px); }
}
@media (min-width: 761px) {
  /* keep each section's content at its normal width inside the full-screen sections */
  .hello-section > *, .book-section > *, .board-section > *, .services-section > *, .references-section > * { width: 100%; box-sizing: border-box; }
  .services-title, .service-grid { box-sizing: border-box; max-width: calc(1200px + 2 * var(--space-6)); }
  .board-section > .board.is-laid-out { width: min(1440px, 100%, calc((100svh - 150px) * 1440 / 1260)); }
}
@media (min-width: 761px) {
  .board.is-laid-out .board-text .big { font-size: clamp(22px, 3.6svh, 44px); line-height: .95; }
  .board.is-laid-out .board-text .small { font-size: clamp(12px, 1.6svh, 17px); }
  .board.is-laid-out .board-text { gap: var(--space-2); padding: clamp(10px, 1.6svh, 24px); }
}

/* Start screen: the picture is large and ends exactly at the bottom edge of the screen (Nora, 5 Nov) */
@media (min-width: 761px) {
  .hello-section { padding-bottom: 0; justify-content: flex-start; }
  .hello-grid { flex: 1; align-items: end; grid-template-columns: auto minmax(0, 1fr); }
  .hello-media { max-width: none; width: auto; height: calc(100svh - 68px - var(--space-5) - clamp(44px, 6vw, 88px) - var(--space-5)); aspect-ratio: 720 / 1106; align-self: end; }
  .hello-media img { object-fit: contain; object-position: bottom; }
  .hello-text { align-self: center; }
}

/* Hello text, as designed in Figma (Nora, 6 Nov): bold intro, lighter last line */
.hello-text { max-width: 22ch; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.3; }
.hello-strong { display: block; font-weight: 700; }
.hello-light { display: block; margin-top: var(--space-3); font-weight: 400; font-size: .75em; padding-left: .6em; }
.hello-light strong { font-weight: 700; }
@media (min-width: 761px) { .hello-text { max-width: 26ch; } }

/* The halo video (spins slowly, loops, no sound) */
.hello-media video { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
@media (prefers-reduced-motion: reduce) { .hello-media video { display: none; } .hello-media { background: url(../media/video/hello-halo-poster.jpg) bottom / contain no-repeat; } }

/* Start screen laid out like the Figma frame: picture left, text fills the rest of the width */
@media (min-width: 1025px) {
  .hello-title { max-width: none; }
  .hello-grid { max-width: none; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 0; }
  .hello-media { justify-self: center; }
  .hello-text { max-width: none; font-size: clamp(22px, min(3.6vw, 5.6svh), 76px); line-height: 1.3; padding-right: 2vw; }
}

/* Latest project, as designed in Figma "latest / desktop" (Nora, 5 Nov):
   title top left, project text on the left, the NP CARES phone on the right. */
.latest-section { background: var(--yellow); color: var(--black); padding: var(--space-6) var(--space-3) var(--space-6) calc(var(--rail) + var(--space-3)); display: grid; gap: var(--space-4); }
.latest-title { margin: 0; }
.latest-name { font: 700 clamp(28px, 2.6vw, 40px)/1.1 var(--font-heading); margin: 0 0 var(--space-2); }
.latest-tags { font-size: clamp(14px, 1.1vw, 17px); margin: 0 0 var(--space-4); }
.latest-desc { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; margin: 0 0 var(--space-5); max-width: 30em; }
.latest-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-5); border-radius: 999px; background: var(--black); color: var(--yellow); font: 700 18px/1 var(--font-heading); text-decoration: none; }
.latest-btn:hover, .latest-btn:focus-visible { background: transparent; color: var(--black); box-shadow: inset 0 0 0 2px var(--black); }
.latest-all { display: block; width: fit-content; margin-top: var(--space-4); font: 700 18px/1.2 var(--font-heading); color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.latest-phone { display: block; width: fit-content; margin: 0 auto; }
.latest-phone { order: 1; }
.latest-info { order: 2; }
.latest-phone img { display: block; height: min(calc(100svh - 220px), 1069px); width: auto; max-width: 100%; object-fit: contain; }
@media (min-width: 761px) {
  .latest-section { min-height: 100svh; box-sizing: border-box; padding: calc(68px + var(--space-5)) var(--space-6) var(--space-5);
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: auto 1fr; column-gap: var(--space-6); row-gap: 0; align-items: center; }
  .latest-section > * { width: auto; }
  .latest-title { grid-column: 1; grid-row: 1; align-self: start; max-width: none; }
  .latest-info { grid-column: 1; grid-row: 2; padding-left: 15%; align-self: center; }
  .latest-phone { grid-column: 2; grid-row: 1 / span 2; justify-self: start; align-self: center; }
  .latest-phone img { height: min(73svh, calc(100svh - 68px - var(--space-5) - var(--space-6)), 1069px); }
}

/* Latest project: name and tags look the same as in the carousel; button and link on one row (Nora, 5 Nov) */
.latest-name { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; margin: 0; }
.latest-tags { margin: var(--space-2) 0 var(--space-5); }
.latest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.latest-actions .latest-all { margin-top: 0; }
@media (min-width: 761px) { .latest-info { margin-top: var(--space-7); } }

/* Start picture: Nora's photo, whole and uncropped (Nora, 5 Nov) */
.hello-media { aspect-ratio: 900 / 1479 !important; }
.hello-media img { object-fit: contain; object-position: bottom; }

/* Start screen v3, from Nora's sketch "First webb screen" (9 Nov):
   the hello text top left, "Who / Solved-IT?" stacked as a block in the bottom left corner,
   the photo in the bottom right corner with air around it. Same screen height and text sizes as before. */
.hello-title-line { display: block; }
@media (min-width: 761px) {
  .hello-section { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
    grid-template-areas: "text photo" "title photo"; column-gap: var(--space-6); padding-bottom: 0; }
  .hello-section > .hello-grid { display: contents; }
  .hello-text { grid-area: text; align-self: start; justify-self: start; max-width: 30ch !important; margin: 0; padding: 0; }
  .hello-title { grid-area: title; align-self: end; justify-self: start; width: auto !important; max-width: none; margin: 0 0 clamp(32px, 9svh, 96px); line-height: .95; }
  .hello-media { grid-area: photo; align-self: end; justify-self: end; width: auto !important; max-width: none;
    height: clamp(240px, 42svh, 520px) !important; aspect-ratio: 900 / 1479 !important; margin: 0 clamp(24px, 6vw, 112px) clamp(32px, 9svh, 96px) 0; }
  .hello-media img { object-fit: cover; }
}

/* Start screen "box title" from Figma (Nora, 9 Nov). On desktop hello-layout.js places every
   line and the photo from the Figma numbers; these rules are the frame for it. */
@media (min-width: 761px) {
  .hello-section.is-figma { position: relative; display: block !important; height: 100svh; min-height: 0; padding: 0; overflow: hidden; }
  .hello-section.is-figma > .hello-grid { display: block; }
  .hello-section.is-figma .hello-text { position: static; max-width: none !important; font-size: inherit; }
  .hello-section.is-figma .hello-text br, .hello-section.is-figma .hello-strong { display: contents; }
  .hello-section.is-figma .hello-title { position: static; margin: 0; }
  .hello-section.is-figma .hello-title-line { display: block; }
  .hello-section.is-figma .hello-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hello-l3 { font-weight: 700; }
}
.hello-l1, .hello-l2 { font-weight: 600; }
.hello-light strong { font-weight: 700; }


/* Services "Fyra ess i rockärmen", from Nora's Figma (9 Nov). Desktop: services-layout.js places
   everything from the Figma numbers. Mobile: a simple column. */
.svc { background: var(--yellow); color: var(--black); }
.svc-title { font: 700 clamp(40px, 6vw, 88px)/1.1 var(--font-heading); margin: 0 0 var(--space-5); }
.svc-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.svc-card { position: relative; border: 1px solid var(--black); border-radius: 16px; padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.svc-icon { width: 48px; height: 48px; color: #BD8E04; flex: none; }
.svc-card p { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 28px; }
.svc-note { margin: var(--space-5) 0 0; font-size: 20px; line-height: 1.2; font-weight: 400; }
.svc-note strong { font-weight: 700; }
@media (max-width: 760px) { .svc { padding: var(--space-6) var(--space-3) var(--space-6) calc(var(--rail) + var(--space-3)); } }
@media (min-width: 761px) {
  .svc.is-figma { position: relative; display: block !important; height: 100svh; min-height: 0 !important; padding: 0 !important; overflow: hidden; }
  .svc.is-figma .svc-card p { text-align: center; }
}

/* Booking, from Nora's Figma "now / booking" (9 Nov). 1 Figma px = var(--u).
   Title "Ska vi fortsätta vårat samtal?" Bold 50/55 at x 120, y 104, with "eller" Regular 32 on the same baseline;
   "Vill du påbörja ett?" Bold 50/75 at y 150; Calendly box 1100 wide, centred, top 236, 48 px from the bottom,
   1 px black 15 % outline, radius 8. The box grows with Calendly's content, so nothing scrolls inside it. */
.bk { background: var(--yellow); color: var(--black); padding: var(--space-6) var(--space-3) var(--space-6) calc(var(--rail) + var(--space-3)); }
.bk-title { font: 700 clamp(30px, 5vw, 50px)/1.1 var(--font-heading); margin: 0; }
.bk-or { font-weight: 400; font-size: .64em; margin-left: .2em; }
.bk-sub { font: 700 clamp(30px, 5vw, 50px)/1.5 var(--font-heading); margin: 0 0 var(--space-4); }
.bk-box { border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px; overflow: hidden; background: var(--yellow); }
.bk-widget { min-width: 320px; height: 1000px; }
@media (min-width: 761px) {
  .bk.is-figma { position: relative; display: block !important; min-height: 100svh; box-sizing: border-box;
    padding: calc(236 * var(--u)) 0 calc(48 * var(--u)); }
  .bk.is-figma .bk-title { position: absolute; left: calc(120 * var(--u)); top: calc(104 * var(--u));
    font-size: calc(50 * var(--u)); line-height: calc(55 * var(--u)); white-space: nowrap; }
  .bk.is-figma .bk-or { margin-left: calc(13 * var(--u)); font-size: calc(32 * var(--u)); }
  .bk.is-figma .bk-sub { position: absolute; left: calc(120 * var(--u)); top: calc(150 * var(--u)); margin: 0;
    font-size: calc(50 * var(--u)); line-height: calc(75 * var(--u)); white-space: nowrap; }
  .bk.is-figma .bk-box { width: calc(1100 * var(--u)); margin: 0 auto; border-radius: calc(8 * var(--u)); }
  .bk.is-figma .bk-widget { height: max(calc(616 * var(--u) - 2px), 700px); min-height: 0; }
}

/* Bottom sentence: the first line ends on "interaktionsdesign," (Nora, 9 Nov) */
@media (max-width: 760px) { .svc-br { display: none; } }

/* Fix (9 Nov): the start-screen title rules (grid-area "title") also hit "Senaste projekt",
   which made that screen taller than the window. Put the title back in its own cell. */
@media (min-width: 761px) {
  .latest-section .latest-title { grid-area: 1 / 1 / 2 / 2; align-self: start; justify-self: start; margin: 0; line-height: 1; width: auto !important; }
}

/* "Alla arbeten →" peek: a small carousel window under the buttons (Nora, 9 Nov) */
.latest-info { position: relative; }
.latest-peek { position: absolute; left: 0; top: calc(100% + 20px); width: 420px; height: 158px;
  background: var(--peek-bg); border-radius: 10px; overflow: hidden; perspective: 900px; pointer-events: none;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .35s ease, transform .45s var(--ease-soft, ease); z-index: 3; }
.latest-peek.is-on { opacity: 1; transform: none; }
.latest-peek .pk { position: absolute; top: 50%; height: 78%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transition: transform .6s var(--ease-soft, ease); }
.latest-peek .pk-front { left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.latest-peek .pk-left  { left: -6%;  transform: translateY(-50%) rotateY(28deg) scale(.86); filter: blur(2px); opacity: .9; }
.latest-peek .pk-right { right: -6%; transform: translateY(-50%) rotateY(-28deg) scale(.86); filter: blur(2px); opacity: .9; }
.latest-peek.is-on .pk-left  { transform: translateY(-50%) translateX(4%) rotateY(28deg) scale(.86); }
.latest-peek.is-on .pk-right { transform: translateY(-50%) translateX(-4%) rotateY(-28deg) scale(.86); }
@media (prefers-reduced-motion: reduce) { .latest-peek, .latest-peek .pk { transition: none; } }