/* ==========================================================
   CASE STUDY COMPONENTS
   A deliberately simple, reusable stylesheet for case pages.
   Homepage layout remains in styles.css; this file only handles
   the case-study content between the fixed header and footer.
   ========================================================== */

/* ==========================================================
   SIMPLE PAGE CONTROLS
   Change these first. Most future case studies should only need
   the theme colours and these few spacing controls.
   ========================================================== */

:root{
  /* Width */
  --case-content-width:calc(var(--wrap) * .85);

  /* Main vertical rhythm */
  --case-page-top:120px;              /* Space from header rule to title block */
  --case-block-gap:100px;              /* Standard gap between components */
  --case-rule-gap:72px;               /* Space between divider line and next component */
  --case-caption-gap:18px;            /* Image to caption gap */
  --case-caption-bottom:0px;          /* Extra space after captions if needed */
  --case-footer-gap:120px;             /* Last case component to footer */

  /* Full-bleed colour panel */
  --case-full-panel-bg:#1728a3;
  --case-full-panel-padding-top:0px;
  --case-full-panel-padding-bottom:100px;

  /* Detail grid */
  --case-detail-gap:32px;
  --case-detail-row-gap:64px;
  --case-detail-caption-width:340px;

  /* Type */
  --case-title-size:52px;
  --case-subtitle-size:36px;
  --case-body-size:13px;
  --case-caption-size:13px;
  --case-body-leading:1.8em;
  --case-caption-leading:1.8em;
}

/* ==========================================================
   CASE PAGE BASE
   ========================================================== */

body.case-page{
  background:var(--case);
  color:var(--case-ink);
}

body.case-page main,
body.case-page footer{
  background:var(--case);
}

.case-study{
  min-height:100vh;
  padding-top:var(--case-page-top);
  color:var(--case-ink);
}

.case-study a,
.case-footer a{
  color:var(--case-ink);
}

.case-wrap{
  width:min(var(--case-content-width),calc(100vw - 80px));
  margin-inline:auto;
}

/* ==========================================================
   THEMES
   Add future case-specific colour overrides here.
   ========================================================== */

.case-study--spotify,
body.case-spotify{
  --case:#000078;
  --case-ink:#ffffff;
  --case-rule:rgba(255,255,255,.9);
  --case-caption-ink:#ffffff;
  --case-full-panel-bg:#1728a3;
}

/* ==========================================================
   COMPONENT 01: TEXT BLOCK
   Title, subtitle, divider line and intro copy.
   ========================================================== */

.case-text-block h1{
  margin:0 0 6px;
  font-family:'DM Serif Text',Georgia,serif;
  font-size:var(--case-title-size);
  line-height:1;
  font-weight:400;
  letter-spacing:var(--serif-tracking);
}

.case-subtitle{
  margin:0 0 58px;
  font-family:"baskerville-display-pt",Baskerville,Georgia,serif;
  font-size:var(--case-subtitle-size);
  font-style:italic;
  line-height:1.05;
  letter-spacing:var(--intro-subtitle-tracking);
}
.case-subtitle .mobile-break{
  display:inline;
}

.case-summary{
  border-top:1px solid var(--case-rule);
  padding-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--case-detail-gap);
}

.case-summary-column{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.case-summary p{
  margin:0;
  max-width:46ch;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--case-body-size);
  line-height:var(--case-body-leading);
  letter-spacing:0;
  font-weight:500;
}

/* Backwards compatibility: old class name still works */
.case-kicker{
  margin:0 0 58px;
  font-family:"baskerville-display-pt",Baskerville,Georgia,serif;
  font-size:var(--case-subtitle-size);
  font-style:italic;
  line-height:1.05;
  letter-spacing:var(--intro-subtitle-tracking);
}

/* ==========================================================
   COMPONENT 02: STANDARD IMAGE BLOCK
   One full-width image with a centred caption underneath.
   Add .has-rule when the component needs a divider line above.
   ========================================================== */

.case-image-block{
  margin-top:var(--case-block-gap);
}

.case-image-block.has-rule{
  border-top:1px solid var(--case-rule);
  padding-top:var(--case-rule-gap);
}

.case-figure,
.case-mobile-tile,
.case-detail-card{
  margin:0;
}

.case-art,
.case-detail-art img,
.case-mobile-art-panel img{
  display:block;
  width:100%;
  height:auto;
}

.case-figure figcaption,
.case-mobile-tile figcaption,
.case-detail-card figcaption{
  margin:var(--case-caption-gap) auto var(--case-caption-bottom);
  max-width:620px;
  color:var(--case-caption-ink);
  font-family:Inter,Arial,sans-serif;
  font-size:var(--case-caption-size);
  line-height:var(--case-caption-leading);
  letter-spacing:0;
  font-weight:400;
  text-align:center;
}

/* ==========================================================
   COMPONENT 03: FULL-BLEED PANEL
   Browser-width colour band with centred case-width content.
   Useful for the mobile/context graphic.
   ========================================================== */

.case-full-bleed-panel{
  margin-top:var(--case-block-gap);
  width:100%;
  background:var(--case-full-panel-bg);
  padding:var(--case-full-panel-padding-top) 0 var(--case-full-panel-padding-bottom);
}

.case-full-bleed-panel .case-mobile-tile{
  width:min(var(--case-content-width),calc(100vw - 80px));
  margin-inline:auto;
}

.case-mobile-art-panel{
  background:transparent;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.case-mobile-art-panel img{
  object-fit:contain;
  object-position:top center;
  margin-inline:auto;
}

/* ==========================================================
   COMPONENT 04: DETAIL GRID
   Two columns on desktop, one column on mobile.
   ========================================================== */

.case-detail-block{
  margin-top:var(--case-block-gap);
}

.case-detail-block.has-rule{
  border-top:1px solid var(--case-rule);
  padding-top:var(--case-rule-gap);
}

.case-detail-heading{
  margin-bottom:52px;
}

.case-detail-heading h2{
  margin:0;
  font-family:'DM Serif Text',Georgia,serif;
  font-size:34px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:var(--serif-tracking);
}

.case-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--case-detail-gap);
  row-gap:var(--case-detail-row-gap);
}

.case-detail-art{
  overflow:hidden;
}

.case-detail-card figcaption{
  max-width:var(--case-detail-caption-width);
}

/* ==========================================================
   FOOTER TWEAKS FOR CASE PAGES
   ========================================================== */

.case-footer{
  display:block;
  margin-top:var(--case-footer-gap);
  border-top:0;
  color:var(--case-ink);
  text-align:center;
  font-family:Inter,Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  font-weight:300;
}

.case-footer::before{
  content:"";
  display:block;
  height:1px;
  background:var(--case-rule);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:28px;
}

.case-footer p{
  margin:0;
  color:var(--case-ink);
}

.case-footer p + p{
  margin-top:18px;
}

.case-footer a{
  display:inline;
  color:var(--case-ink);
  text-decoration:none;
  white-space:nowrap;
}

.case-footer .footer-desktop-break{
  display:block;
}
/* Case-study text links */
.case-study p a,
.case-footer a,
.case-study p a:link,
.case-study p a:visited,
.case-study p a:active,
.case-footer a:link,
.case-footer a:visited,
.case-footer a:active{
  color:var(--case-ink);
}

.case-study p a:not([style*="text-decoration"]):hover,
.case-footer a:not([style*="text-decoration"]):hover{
  text-decoration:underline;
  text-underline-offset:0.18em;
}
/* ==========================================================
   OLD CLASS SUPPORT
   These keep the current Spotify HTML working while moving
   toward clearer component names.
   ========================================================== */

.case-intro{ }
.case-block{ margin-top:var(--case-block-gap); }
.case-rule-top{
  border-top:1px solid var(--case-rule);
  padding-top:var(--case-rule-gap);
}
.case-figure--full{ width:100%; }
.case-mobile-tile{ }
.case-detail-heading + .case-detail-grid{ }
.case-intro.case-wrap{ }
.case-intro{ }
.case-intro h1{
  margin:0 0 6px;
  font-family:'DM Serif Text',Georgia,serif;
  font-size:var(--case-title-size);
  line-height:1;
  font-weight:400;
  letter-spacing:var(--serif-tracking);
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px){
  :root{
    --case-content-width:90vw;
    --case-page-top:110px;
    --case-block-gap:58px;
    --case-rule-gap:50px;
    --case-caption-gap:14px;
    --case-full-panel-padding-bottom:44px;
    --case-detail-row-gap:50px;
    --case-title-size:46px;
    --case-subtitle-size:34px;
    --case-body-size:15px;
    --case-caption-size:12px;
  }
  .case-text-block h1,
  .case-intro h1{
    margin-bottom:14px;
  }
  .case-subtitle .mobile-break{
    display:block;
  }
  .case-wrap,
  .case-full-bleed-panel .case-mobile-tile{
    width:90vw;
  }

  .case-footer .footer-desktop-break{
    display:inline;
  }

  .case-footer .footer-desktop-break::before{
    content:" ";
  }
	
  .case-summary{
  grid-template-columns:1fr;
  row-gap:34px;
}

.case-summary-column{
  gap:24px;
}

  .case-summary p{
    max-width:none;
  }

  .case-art--icons{
    aspect-ratio:1/1;
    height:auto;
    object-fit:cover;
    object-position:center center;
  }

  .case-detail-grid{
    grid-template-columns:1fr;
  }

  .case-figure figcaption,
  .case-mobile-tile figcaption{
    max-width:90%;
  }

  .case-detail-card figcaption{
    max-width:min(var(--case-detail-caption-width),90%);
  }
}

/* ==========================================================
   ELECTROLUX CASE STUDY
   Light page with a blue introductory flood panel, technical
   proportion tiles and a fading pictogram animation.
   ========================================================== */

.case-study--electrolux,
body.case-electrolux{
  --case:#ffffff;
  --case-ink:#030081;
  --case-rule:#030081;
  --case-caption-ink:#030081;
  --case-full-panel-bg:#b5e0ef;
  --electrolux-panel:#b5e0ef;
  --electrolux-tile:#eff5f8;
  --electrolux-radius:10px;
  --electrolux-tile-padding:54px;
  --electrolux-tile-gap:32px;
  --electrolux-animation-speed:900ms;
  --electrolux-animation-scale:50%;
  --electrolux-technical-caption-gap:32px;
}

.case-electrolux-top-panel{
  margin-top:calc(var(--case-page-top) * -1);
  padding-top:var(--case-page-top);
  padding-bottom:var(--case-full-panel-padding-bottom);
  background:var(--electrolux-panel);
}

.case-electrolux-top-panel .case-image-block{
  margin-top:var(--case-block-gap);
}

.case-electrolux-technical{
  background:var(--electrolux-tile);
  border-radius:var(--electrolux-radius);
  padding:var(--electrolux-tile-padding);
  display:grid;
  gap:var(--electrolux-tile-gap);
}

.case-electrolux-technical img{
  display:block;
  width:100%;
  height:auto;
}

.case-electrolux-technical + figcaption{
  margin-top:var(--electrolux-technical-caption-gap);
}

.case-electrolux-technical-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--electrolux-tile-gap);
}

.case-electrolux-technical-item{
  margin:0;
}

.case-electrolux-animation{
  position:relative;
  width:100%;
  display:grid;
  place-items:center;
}

.case-electrolux-animation img{
  grid-area:1 / 1;
  display:block;
  width:var(--electrolux-animation-scale);
  height:auto;
  opacity:0;
  transition:opacity var(--electrolux-animation-speed) ease;
}

.case-electrolux-animation img.is-active{
  opacity:1;
}

@media(max-width:760px){
  .case-art--electrolux-selection{
    aspect-ratio:auto;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center center;
  }

  .case-electrolux-animation img{
    width:100%;
  }

  .case-electrolux-top-panel{
    padding-bottom:44px;
  }

  .case-electrolux-technical{
    background:transparent;
    border-radius:0;
    padding:0;
    gap:var(--case-detail-row-gap);
  }

  .case-electrolux-technical-row{
    grid-template-columns:1fr;
    gap:var(--case-detail-row-gap);
  }

  .case-electrolux-technical-item{
    background:var(--electrolux-tile);
    border-radius:var(--electrolux-radius);
    padding:24px;
  }
}

/* ==========================================================
   NISSAN CASE STUDY
   Light page with a pink introductory flood panel and simple
   technical/process image sections.
   ========================================================== */

.case-study--nissan,
body.case-nissan{
  --case:#ffffff;
  --case-ink:#030081;
  --case-rule:#030081;
  --case-caption-ink:#030081;
  --case-full-panel-bg:#ffe1dc;
  --header-bg:#ffe1dc;
  --header-ink:#030081;
  --nissan-panel:#ffe1dc;
  --nissan-process-gap:32px;
  --nissan-process-row-gap:64px;

  /* Nissan image scale controls */
  --nissan-hero-scale:90%;
  --nissan-structure-scale:90%;
  --nissan-two-up-scale:90%;
}

.case-nissan-top-panel{
  margin-top:calc(var(--case-page-top) * -1);
  padding-top:var(--case-page-top);
  padding-bottom:var(--case-full-panel-padding-bottom);
  background:var(--nissan-panel);
}

.case-nissan-top-panel .case-image-block{
  margin-top:var(--case-block-gap);
}

.case-nissan-medley{
  display:block;
  width:var(--nissan-hero-scale);
  max-width:100%;
  height:auto;
  margin-inline:auto;
}


/* Keep the Nissan header/nav bar exactly matched to the pink top panel,
   even after a stored page-transition colour has been applied by JavaScript. */
body.case-nissan .site-header::before{
  background:var(--nissan-panel)!important;
}

.case-nissan-structure > picture,
.case-nissan-structure-row{
  width:var(--nissan-structure-scale);
  max-width:100%;
  margin-inline:auto;
}

.case-nissan-two-up{
  width:var(--nissan-two-up-scale);
  max-width:100%;
  margin-inline:auto;
}

.case-nissan-structure{
  display:grid;
  gap:var(--nissan-process-gap);
}

.case-nissan-structure img,
.case-nissan-two-up img{
  display:block;
  width:100%;
  height:auto;
}

.case-nissan-structure-row,
.case-nissan-two-up{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--nissan-process-gap);
  align-items:start;
}

.case-nissan-structure-item,
.case-nissan-two-up-item{
  margin:0;
}

.case-nissan-structure + figcaption{
  margin-top:var(--case-caption-gap);
}

@media(max-width:760px){
  body.case-nissan{
    --nissan-hero-scale:100%;
    --nissan-structure-scale:100%;
    --nissan-two-up-scale:100%;
  }

  .case-nissan-top-panel{
    padding-bottom:44px;
  }

  .case-nissan-structure{
    gap:var(--nissan-process-row-gap);
  }

  .case-nissan-structure-row,
  .case-nissan-two-up{
    grid-template-columns:1fr;
    gap:var(--nissan-process-row-gap);
  }
}

/* ==========================================================
   NET-A-PORTER / NET SUSTAIN CASE STUDY
   Light page with full-bleed grey presentation panels.
   ========================================================== */

.case-study--nap,
body.case-nap{
  --case:#ffffff;
  --case-ink:#030081;
  --case-rule:#030081;
  --case-caption-ink:#030081;
  --header-bg:#ffffff;
  --header-ink:#030081;
  --nap-panel:#546176;
  --nap-panel-caption-ink:#ffffff;
  --nap-panel-padding-top:64px;
  --nap-panel-padding-bottom:64px;
  --nap-panel-art-scale:90%;
}

.case-nap-hero,
.case-nap-panel-art{
  display:block;
  width:100%;
  height:auto;
}

.case-nap-grey-panel{
  margin-top:var(--case-block-gap);
  background:var(--nap-panel);
  padding:var(--nap-panel-padding-top) 0 var(--nap-panel-padding-bottom);
}

.case-nap-grey-panel .case-wrap{
  width:min(var(--case-content-width),calc(100vw - 80px));
  margin-inline:auto;
}

.case-nap-grey-panel .case-art{
  width:var(--nap-panel-art-scale);
  max-width:100%;
  margin-inline:auto;
}

.case-nap-grey-panel figcaption{
  color:var(--nap-panel-caption-ink);
}

body.case-nap .case-nap-screens-panel{
  margin-bottom:0;
}

body.case-nap .case-footer{
  margin-top:0;
  background:var(--nap-panel);
  color:var(--nap-panel-caption-ink);
  border-top-color:var(--nap-panel-caption-ink);
  position:relative;
  box-shadow:0 0 0 100vmax var(--nap-panel);
  clip-path:inset(0 -100vmax);
}

body.case-nap .case-footer h3,
body.case-nap .case-footer p,
body.case-nap .case-footer a{
  color:var(--nap-panel-caption-ink);
}

@media(max-width:760px){
  body.case-nap{
    --nap-panel-padding-top:44px;
    --nap-panel-padding-bottom:44px;
    --nap-panel-art-scale:100%;
  }

  .case-nap-hero-section.case-wrap{
    width:90vw;
  }

  .case-nap-hero-section.has-rule{
    border-top:1px solid var(--case-rule);
  }

  .case-nap-hero-section figcaption{
    max-width:90%;
  }

  .case-nap-grey-panel .case-wrap{
    width:90vw;
  }
}

/* ==========================================================
   DOWNTON DISTILLERY CASE STUDY
   Light page based on the standard GROHE-style image blocks.
   ========================================================== */

.case-study--downton,
body.case-downton{
  --case:#ffffff;
  --case-ink:#030081;
  --case-rule:#030081;
  --case-caption-ink:#030081;
  --header-bg:#ffffff;
  --header-ink:#030081;
  --downton-two-up-gap:32px;
  --downton-video-scale:70%;
}

.case-downton-two-up{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--downton-two-up-gap);
  row-gap:var(--case-detail-row-gap);
  align-items:start;
}

.case-downton-two-up .case-detail-card{
  margin:0;
}

.case-downton-video-link{
  display:block;
  width:var(--downton-video-scale);
  max-width:100%;
  margin-inline:auto;
}

.case-downton-video-link img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:760px){
  body.case-downton{
    --downton-video-scale:100%;
  }

  .case-downton-two-up{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   LLOYD'S CASE STUDY
   Light page with two full-bleed green presentation panels.
   ========================================================== */

.case-study--lloyds,
body.case-lloyds{
  --case:#ffffff;
  --case-ink:#030081;
  --case-rule:#030081;
  --case-caption-ink:#030081;
  --header-bg:#ffffff;
  --header-ink:#030081;
  --lloyds-panel-dark:#00482f;
  --lloyds-panel-light:#11b67a;
  --lloyds-panel-caption-ink:#ffffff;
  --lloyds-panel-padding-top:64px;
  --lloyds-panel-padding-bottom:64px;
  --lloyds-panel-art-scale:90%;
}

.case-lloyds-panel{
  margin-top:var(--case-block-gap);
  padding:var(--lloyds-panel-padding-top) 0 var(--lloyds-panel-padding-bottom);
}

.case-lloyds-panel--dark{
  background:var(--lloyds-panel-dark);
}

.case-lloyds-panel--light{
  background:var(--lloyds-panel-light);
}

.case-lloyds-panel .case-wrap{
  width:min(var(--case-content-width),calc(100vw - 80px));
  margin-inline:auto;
}

.case-lloyds-panel .case-art{
  width:var(--lloyds-panel-art-scale);
  max-width:100%;
  margin-inline:auto;
}

.case-lloyds-panel figcaption{
  color:var(--lloyds-panel-caption-ink);
}

@media(max-width:760px){
  body.case-lloyds{
    --lloyds-panel-padding-top:44px;
    --lloyds-panel-padding-bottom:44px;
    --lloyds-panel-art-scale:100%;
  }

  .case-lloyds-panel .case-wrap{
    width:90vw;
  }
}
/* ==========================================================
   LLOYD'S FINAL OVERRIDES
   Add at very bottom of case-studies.css
   ========================================================== */

/* 1. Reduce first Lloyd's icon set to 80% */
body.case-lloyds #system .case-art{
  width:90%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* 2. Remove gap between dark green and light green panels */
body.case-lloyds .case-lloyds-panel--dark + .case-lloyds-panel--light{
  margin-top:0;
}

/* 3. Make the Lloyd's UI graphic sit flush with the top of the light green panel */
body.case-lloyds .case-lloyds-panel--light{
  padding-top:0;
}