/*
Theme Name: Manuel Harlan
*/

:root {

  --header-height:60px;
  --padding:26px; 
  --grid-gap: 0.58565154vw;
  --body-padding:210px;
  --container-padding: 10.2489019vw;
  --lightbox-padding: 120px;

  --font-regular:14px;
  --font-sans-serif: 'Apercu', sans-serif;

  --black: #000;
  --white: #FFFFFF;
  --orange: #EB8917;
  --red: #6C0000;
  --blue: #013474;

  --transition-height: 1s ease-out max-height;
  --transition-transform: 0.3s ease-out transform, 0.3s ease-out visibility;
  --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-color: 0.3s ease-out color;
  --transition-background: 0.3s ease-out background-color;

}

/* Fonts */
@font-face {
  font-family: 'Apercu';
  src: url('../fonts/apercuregular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Colours */
.white { color: var(--white); }
.black { color: var(--black); }
.orange { color: var(--orange); }
.red { color:var(--red); }
.blue { color:var(--blue); }
.bg-white { background-color:var(--white); }
.bg-black { background-color:var(--black); }
.bg-orange { background-color:var(--orange); }

/* Structure */
html, body { height: 100%; }
.container { margin-left:auto; margin-right:auto; width: 100%; padding:0 var(--padding); /* max-width: var(--container); */ }
.narrow { max-width: var(--container-narrow); }

/* Swup */
html.is-changing .transition-fade { transition: opacity 1s; opacity: 1; }
html.is-animating .transition-fade { opacity: 0; }

/* Typography */
body { color: var(--black); background: var(--white); font-weight: 400; line-height: 1.21; letter-spacing: -0.02em; font-size: var(--font-regular); font-family: var(--font-sans-serif); }
a { transition: var(--transition-fade); }
p { margin-bottom: 0.5lh; }
p:last-of-type { margin-bottom:0; }
button { font-family: inherit; }
.font-regular { font-size: var(--font-regular); }

/* Header */
.header { left:0; right:0; top:0; padding:0 var(--padding); height:var(--header-height); line-height: var(--header-height); z-index: 2; transition: var(--transition-color); }

/* Menu */
.header-menu { margin-left: auto; }
.header-menu-item { margin-left:16px; }
.header-menu-item svg { opacity: 0; transition: opacity 0.5s; stroke: currentColor; }
.header-menu-item.is-active svg { opacity: 1; }
.icon-menu-projects { width: 61px; height: 18px; left:-6px; }
.icon-menu-info { width: 40px; height: 5px; left: -7px; }

/* Layout : Slideshow */
.layout-slideshow { height: 100dvh; z-index: 0; }
.slide-image { width: 100%; height: 100%; }
.slide-production { left:var(--padding); bottom:var(--padding); z-index: 1; }

/* Projects */
.layout-projects { padding: var(--body-padding) var(--container-padding) var(--container-padding) var(--container-padding); grid-gap: var(--grid-gap); }
.project-image { cursor: pointer; }
.project-image.landscape { aspect-ratio: 266/190; }
.project-image.portrait { aspect-ratio: 266/388; grid-row: span 2; }

/* Info */
.layout-info { min-height: 100dvh; }
.info-contact { line-height: 1.5; }

/* Lightbox */
.lightbox-container, .lightbox-overlay { inset: 0; }
.lightbox-container { z-index: 1; transition: opacity 0.5s, visibility 0.5s; opacity: 1; visibility: visible; pointer-events: all; }
.lightbox-container[aria-hidden='true'] { visibility: hidden; opacity: 0; pointer-events: none; }
.lightbox-overlay { background-color: rgb(43 46 56 / 0.9); }
.lightbox { height:100dvh; margin: auto; z-index: 2; position: relative; background-color: var(--white); -wekbit-user-select: none; user-select: none; }
.lightbox img { margin: auto; display: none; }
.lightbox .swiper-slide-active img { display: block; }
.lightbox-swiper { height: 100%; }
.lightbox-swiper .swiper-slide { display: flex; }
.lightbox-caption { left:0; right:0; bottom: 20px; line-height: 1.71428571; }
.lightbox-button-prev, .lightbox-button-next { top:0; bottom:0; width: 21.15666179vw; cursor: pointer; z-index: 2; transition:var(--transition-fade); }
.lightbox-button-next svg, .lightbox-button-prev svg { width: 60px; height: 60px; margin: auto; }
.lightbox-button-prev { left: 0; }
.lightbox-button-next { right: 0; }

/* Swiper */
.swiper-button-disabled { opacity: 0; pointer-events: none; }

@media (hover: hover) {

  /* Info */
  .info-contact a { transition: var(--transition-fade); }
  .info-contact a:hover { opacity:0.5; }

  /* Lightbox : Cursor */
  .lightbox-cursor { visibility: hidden; display: block; opacity: 0; transition: opacity 0.5s, visibility 0.5s; top:0; left:0; width:60px; height:60px; }
  .lightbox-cursor svg { display: none; }
  .lightbox-cursor.is-visible { visibility: visible; opacity: 1; }
  .lightbox-cursor.is-prev .icon-left { display: block; }
  .lightbox-cursor.is-next .icon-right { display: block; }
  .lightbox-button-prev, .lightbox-button-next { width: 50%; cursor: none; }
  .lightbox-button-prev svg, .lightbox-button-next svg { display: none; }
}

/* Landscape */
@media (orientation: landscape) {
  /* Lightbox */
  .lightbox { padding: var(--lightbox-padding) 0;}
  .lightbox img { height: 100%; width: auto; }
}


/* Portrait */
@media (orientation: portrait) {
  /* Lightbox */
  .lightbox { padding: var(--header-height) var(--lightbox-padding) 90px var(--lightbox-padding);}
  .lightbox img { width: 100%; height: auto; object-fit: contain; max-height: 100%; }
}

@media (min-width: 768px) {

  /* Menu */
  .icon-menu-projects { bottom:9px; }
  .icon-menu-info { bottom: 13px; }

  /* Info */
  .layout-info { padding: var(--body-padding) var(--container-padding) var(--container-padding) var(--container-padding); grid-gap: 5vw; }
  .info-text { max-width: 340px; margin-left: auto; }
  .info-image { position: sticky; top:var(--body-padding); }

}

/* Mobile */
@media (max-width: 768px) {

  :root {
    --header-height:45px;
    --body-padding:84px;
    --padding:20px; 
    --container-padding: 20px;
    --grid-gap:0.53333333vw;
    --lightbox-padding: 20px;
  }

  /* Menu */
  .icon-menu-projects { bottom:0; }
  .icon-menu-info { bottom:4px; }

  /* Info */
  .layout-info { padding: 120px var(--container-padding) var(--container-padding) var(--container-padding); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-gap:var(--container-padding); }
  .info-text { max-width: 340px; }
  .info-image { order:2; margin-top:var(--container-padding); }
  .info-contact { margin-top: var(--container-padding); }

  /* Lightbox */
  .lightbox-button-next, .lightbox-button-prev { display: none; }

}