/* ============================================================
   Karolina Lundqvist – styles.css
   Statisk sajt. Länkas från <head> på varje sida.
   Genereras inte – redigera den här filen direkt.
   ============================================================ */

@font-face {
  font-family: 'RecklessNeue';
  src: url('/assets/fonts/RecklessNeue-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RecklessNeue';
  src: url('/assets/fonts/RecklessNeue-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RecklessNeue';
  src: url('/assets/fonts/RecklessNeue-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RecklessNeue';
  src: url('/assets/fonts/RecklessNeue-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--yellow:#F5F0A0;--black:#1a1a18;--serif:'RecklessNeue',Georgia,serif;--sans:'DM Sans',sans-serif;--max:1100px;--pad:40px}
html{scroll-behavior:smooth}
body{background:var(--yellow);color:var(--black);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:24px var(--pad);z-index:100;
  background:linear-gradient(to bottom,var(--yellow) 60%,transparent);
}
.nav-logo{
  font-family:var(--serif);
  font-size:clamp(22px,2.8vw,34px);
  font-weight:700;line-height:1.05;letter-spacing:-0.015em;
  cursor:pointer;
}
.nav-links{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding-top:4px;
}
.nav-links a{
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;
  opacity:0.5;cursor:pointer;transition:opacity 0.15s;user-select:none;
  line-height:1.7;
}
.nav-links a:hover{opacity:1}
.nav-links a.active{font-weight:600;opacity:1}

/* ── SPRÅKVÄXLARE ── */
.nav-lang{display:flex;align-items:center;gap:6px;margin-top:9px}
.nav-lang__sep{font-size:11px;opacity:0.28;line-height:1.7}

/* ── PAGES ── */
.page-content{display:block;padding-top:220px;min-height:100vh}

/* ── ART DIRECTOR / CASES ── */
.case{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) 88px;
  border-top:1px solid rgba(26,26,24,0.11);
}
.case:first-child{border-top:none}

.case-hero{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:3px;display:block;
  margin-top:44px;margin-bottom:32px;
}
.case-hero.wide{aspect-ratio:21/9}

.case-label{font-family:var(--sans);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;opacity:0.38;margin-bottom:6px}
.case-client{font-family:var(--serif);font-style:italic;font-size:clamp(13px,1.4vw,15px);opacity:0.48;margin-bottom:4px;font-weight:400}
.case-title{font-family:var(--serif);font-size:clamp(26px,4vw,48px);font-weight:700;line-height:0.96;letter-spacing:-0.02em}
.case-awards{margin-top:13px;display:flex;flex-wrap:wrap;gap:5px}
.award-tag{background:var(--black);color:var(--yellow);font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:4px 11px;border-radius:20px;display:inline-block}

/* Förklaring av svenskt ordlek-namn (används på EN-sidorna) */
.case-note{
  font-family:var(--sans);font-size:11px;line-height:1.6;
  opacity:0.45;margin-top:10px;max-width:44ch;font-style:italic;
}

.case-body{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:30px}
.case-body.reverse{direction:rtl}
.case-body.reverse>*{direction:ltr}
.case-text p{font-family:var(--sans);font-size:clamp(13px,1.3vw,15px);line-height:1.85;opacity:0.76;margin-bottom:11px}
.case-text p:last-child{margin-bottom:0}

.case-img{width:100%;border-radius:3px;object-fit:cover}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.grid2 img{border-radius:3px;width:100%;aspect-ratio:4/3;object-fit:cover}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:28px}
.grid4 img{border-radius:3px;width:100%;aspect-ratio:4/3;object-fit:cover}
.ooh-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:28px}
.ooh-grid img{width:100%;object-fit:cover;border-radius:3px}
.ooh-wide{grid-column:1/-1;aspect-ratio:21/9}
.ooh-sq{aspect-ratio:4/3}

.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:4px;background:#111;margin-top:28px}
.video-wrap video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.phone-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:28px}
.phone-wrap{position:relative;padding-bottom:177.78%;height:0;overflow:hidden;border-radius:8px;background:#111}
.phone-wrap video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

.sub-case{margin-top:52px;padding-top:40px;border-top:1px solid rgba(26,26,24,0.09)}
.sub-title{font-family:var(--serif);font-size:clamp(20px,3vw,36px);font-weight:700;line-height:1;letter-spacing:-0.02em;margin-bottom:26px}

/* ── ABOUT ── */
.about-wrap{max-width:var(--max);margin:0 auto;padding:48px var(--pad) 88px}

/* Top section: photo left, text + contact right */
.about-top{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:56px;
  align-items:center;
  margin-bottom:64px;
}
.about-photo{
  width:100%;max-width:320px;border-radius:3px;
  transform:rotate(2.5deg);
  transform-origin:bottom right;
  margin-left:auto;
}
.about-right{
  display:flex;flex-direction:column;
  justify-content:center;
  padding-top:0;
}
.about-intro{
  font-family:var(--serif);
  font-size:clamp(14px,1.4vw,17px);
  line-height:1.58;
  font-weight:400;
  margin-bottom:32px;
}
.about-intro strong{font-weight:700}
.about-contacts{display:flex;flex-direction:column;gap:10px}
.about-contacts a{
  font-family:var(--serif);
  font-size:clamp(13px,1.3vw,17px);
  font-weight:700;
  border-bottom:1.5px solid var(--black);
  padding-bottom:2px;
  width:fit-content;
  transition:opacity 0.18s;
}
.about-contacts a:hover{opacity:0.38}

/* CV below */
.cv-heading{
  font-family:var(--serif);
  font-size:clamp(28px,4vw,44px);
  font-weight:700;line-height:1;letter-spacing:-0.02em;
  margin-bottom:28px;
}
.cv-divider{
  height:1px;background:rgba(26,26,24,0.13);
  margin-bottom:40px;
}

/* CV-layout */
.cv-block{margin-bottom:44px}
.cv-block:last-child{margin-bottom:0}
.cv-section-title{
  font-family:var(--sans);
  font-size:14px;font-weight:700;
  letter-spacing:0.02em;text-transform:uppercase;
  margin-bottom:20px;
}
.cv-row{
  display:grid;
  grid-template-columns:1fr 2.5fr;
  gap:48px;
  align-items:start;
  margin-bottom:14px;
}
.cv-row:last-child{margin-bottom:0}
.cv-date{
  font-family:var(--sans);
  font-size:14px;
  font-weight:400;
  line-height:1.35;
}
.cv-entry{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.35;
}
.cv-entry-org{font-weight:700;text-transform:uppercase}
.cv-entry-loc{font-style:italic;font-weight:400}
.cv-entry-role{font-weight:400;display:block;margin-top:0}
.cv-entry-desc{font-weight:400;display:block;margin-top:0}

/* ── VOICE OVER ── */
.vo-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 88px}
.vo-intro{font-family:var(--serif);font-size:clamp(14px,1.4vw,17px);line-height:1.58;font-weight:400;margin-bottom:80px;max-width:440px}
.vo-intro strong{font-weight:700}
.vo-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.vo-video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:3px;background:#111;margin-bottom:12px}
.vo-video-wrap video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.vo-card-title{font-family:var(--serif);font-size:clamp(16px,2vw,20px);font-weight:700;line-height:1.2}
.vo-audio-wrap{background:rgba(26,26,24,0.06);border-radius:3px;padding:24px 20px;margin-bottom:12px;display:flex;align-items:center}
.vo-audio-wrap audio{width:100%;accent-color:var(--black)}

/* ── ANIM ──
   .fade-in startar dolt och avslöjas av IntersectionObserver-skriptet
   i Art Director-blocket. Använd bara på sidor som har det skriptet. */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:none}

/* ── MOBILE STRIP ── */
.mobile-strip{
  display:none;
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(26,26,24,0.72);
  padding:8px 14px;
  align-items:center;justify-content:space-between;
  pointer-events:none;
}
.mobile-strip__text{color:#F5F0A0;font-family:var(--sans);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;}
.mobile-strip__arrow{color:#F5F0A0;font-size:15px;opacity:0.85;}

/* ── HERO TILES (AD page) ── */
.hero-tile{
  position:relative;
  width:100%;
  aspect-ratio:16/8;
  overflow:hidden;
  cursor:pointer;
}
.hero-tile--wide{
  aspect-ratio:21/8;
}
.hero-tile__img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease, filter 0.5s ease;
  transform-origin:center center;
}
.hero-tile:hover .hero-tile__img{
  transform:scale(1.04);
  filter:brightness(0.55);
}
.hero-tile__overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.hero-tile:hover .hero-tile__overlay{
  opacity:1;
}
.hero-tile__client{
  font-family:var(--serif);
  font-size:clamp(22px,4vw,52px);
  font-weight:700;
  color:var(--yellow);
  letter-spacing:-0.015em;
  text-align:center;
  padding:0 32px;
  line-height:1.1;
}
/* open state: image stays darkened */
.hero-tile.is-open .hero-tile__img{
  filter:brightness(0.7);
}
.hero-tile.is-open .hero-tile__overlay{
  opacity:1;
}

/* case body: collapsed by default */
.case-body-wrap{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.6s cubic-bezier(0.4,0,0.2,1);
}
.case-body-wrap.is-open{
  max-height:4000px;
}
.case-inner-pad{
  max-width:var(--max);margin:0 auto;
  padding:52px var(--pad) 80px;
}

/* override old case styles for new layout */
.case{
  max-width:none;
  padding:0;
  border-top:none;
  margin:0;
}
.case + .case{
  border-top:none;
}

.print-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.print-label{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  opacity:0.55;margin-bottom:10px;
  text-decoration:underline;text-underline-offset:3px;
}

/* ── MOBILE ── */
@media(max-width:720px){
  :root{--pad:20px}
  nav{padding:16px 20px}
  .case-body,.case-body.reverse,.about-top{grid-template-columns:1fr;direction:ltr}
  .case-body.reverse>*{direction:ltr}
  .phone-row,.grid4,.ooh-grid,.grid2,.vo-grid,.print-grid{grid-template-columns:1fr}
  .ooh-wide{aspect-ratio:16/9}
  .case-hero{aspect-ratio:4/3}
  .case-hero.wide{aspect-ratio:16/9}
  .about-photo{transform:rotate(2deg);margin-left:0}
  .mobile-strip{display:flex;}
  .cv-row{grid-template-columns:1fr;gap:6px}
  .cv-date{font-size:13px;opacity:0.6}
}