/* GLOBAL */
* {
  box-sizing: border-box;
}

html {
  background: #ffffff;
}

body {
  margin: 25px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #202020;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}

/* HEADER */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.site-name {
  display: inline-block;
}

.header-right {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem; /* Consistent spacing using rem units */
}

.header-left {
  line-height: 1.35;
}

.nav-link {
  margin: 0;
  padding: 0;
}

@media (hover: hover) {
  .nav-link:hover,
  .site-name:hover {
    text-decoration: underline;
  }
}

/* PROJECTS LIST */
.projects {
  margin-top: 70px;
}

.projects-list {
  border-bottom: 1px solid #202020;
}

/* FOOTER */
.site-footer {
  margin-top: 1.5rem;
  font-size: 12px;
  line-height: 1.35;
}

.project {
  border-top: 1px solid #202020;
}

/* Grid layout for project rows */
.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0.75rem;
}

/* Accordion triggers */
.accordion-trigger {
  width: 100%;
  text-align: left;
  padding: 0.4rem 0; /* tighter spacing */
  cursor: pointer;
  outline: none; /* remove dotted outline on click */
  transform: translateZ(0); /* Force hardware acceleration for smoother hover */
}

.accordion-trigger .col {
  transition: color 0.05s ease-out;
}

.accordion-trigger:focus {
  outline: none; /* per request */
}

/* Hover: change only the project name (first column) to grey - only on devices with hover capability */
@media (hover: hover) {
  .accordion-trigger:hover .col {
    color: #b5d1cc;
  }
}

/* Category headers and section breaks */
.category-header {
  pointer-events: none;
  border-top: none !important;
}

.category-header .row {
  padding: 0.4rem 0;
}

.section-break {
  pointer-events: none;
}

.section-break .row {
  padding: 0.8rem 0;
  min-height: 2em;
  line-height: 1;
}

/* Accordion panels */
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  will-change: max-height;
  transform: translateZ(0);
}

.panel-inner {
  padding: 0.4rem 0 0.6rem 0;
  color: #707070;
  line-height: 1.35;
}

.panel-inner-link a {
  color: #707070;
  text-decoration: underline;
  text-decoration-thickness: 0.8px;
  text-underline-offset: 1.25px;
  text-decoration-color: #707070;
  -webkit-text-decoration-color: #707070;
}

/* Italic text styling */
.panel-inner em,
.panel-inner i {
  font-style: italic;
}

.panel-inner p {
  max-width: 40vw;
  text-wrap: pretty; 
  orphans: 3; 
  widows: 3; 
}

/* ============================================
   MEDIA CONTAINERS
   ============================================ */


/* Simple Audio Player */
.audio-player-container {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  background: #ffffff;
  padding: 0;
  display: grid;
  grid-template-columns: auto 2fr 1fr 1fr;
  column-gap: 0rem;
  align-items: center;
  position: relative;
}

.audio-play-btn {
  width: auto;
  height: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  font-size: 0;
  grid-column: 1;
}

.audio-play-btn::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 12px solid #080808;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.audio-play-btn.playing::before {
  border: none;
  width: 12px;
  height: 14px;
  background: linear-gradient(to right, #080808 0%, #080808 33%, transparent 33%, transparent 66%, #080808 66%, #080808 100%);
}

@media (hover: hover) {
  .audio-play-btn:hover::before {
    opacity: 0.7;
  }
  
  .audio-play-btn.playing:hover::before {
    opacity: 0.7;
  }
}

.audio-progress-container {
  cursor: pointer;
  margin: 0;
  grid-column: 2;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
}

/* Horizontal line (track) */
.audio-progress-container::before {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  height: 1px;
  background-color: #d0d0d0;
  transform: translateY(-50%);
  z-index: 1;
}

/* Progress bar (filled portion) */
.audio-progress-bar {
  position: absolute;
  left: 15px;
  top: 50%;
  height: 1px;
  background-color: #3a3a3a;
  transform: translateY(-50%);
  width: 0;
  z-index: 2;
}

/* Vertical cursor */
.audio-progress-cursor {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 1px;
  height: 15px;
  background-color: #3a3a3a;
  transform: translateY(-50%);
  z-index: 3;
}

.audio-time {
  font-size: 12px;
  color: #3a3a3a;
  text-align: left;
  padding: 0;
  line-height: 1;
  grid-column: 3;
}

#audioElement {
  display: none;
}

/* Video Players - Vertical */
.media--video-vertical {
  height: auto;
  max-height: min(80vh, 900px);
  width: auto;
  max-width: min(60vw, 800px);
  aspect-ratio: 9 / 16; /* portrait 1080 / 1920 */
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

.media--video-vertical iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video Players - Horizontal */
.media--video-horizontal {
  width: auto;
  max-width: min(70vw);
  max-height: min(80vh);
  position: relative;
  overflow: hidden;
  background: #ffffff;
  margin-top: 1rem;
  /* Default to 16:9, can be overridden with inline style or modifier class */
  aspect-ratio: var(--video-aspect, 16 / 9);
}

/* Common aspect ratio modifiers */
.media--video-horizontal.ratio-16-9 {
  aspect-ratio: 16 / 9; /* 1920x1080 */
}

.media--video-horizontal.ratio-5-3 {
  aspect-ratio: 5 / 3; /* 1800x1080 */
}

.media--video-horizontal.ratio-4-3 {
  aspect-ratio: 4 / 3; /* 1440x1080 */
}

.media--video-horizontal iframe,
.media--video-horizontal vimeo-video,
.media--video-horizontal video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Media Chrome Styling */
media-controller.media--video-horizontal,
media-controller.media--video-vertical,
media-controller.media--audio {
  display: block;
  line-height: 0;
  overflow: hidden;
  background: #ffffff;
  --media-primary-color: #080808;
  --media-secondary-color: #b4b4b4;
  --media-control-background: #e8e8e8;
  --media-control-hover-background: none;
  --media-range-track-background: #c8c8c8;
  --media-range-bar-color: #3a3a3a;
  --media-time-range-buffered-color: #797979;
  --media-range-track-pointer-background: none;
  --media-range-thumb-background: none;
  --media-text-color: #3a3a3a;
  --media-font-family: Helvetica, Arial, sans-serif;
  --media-font-size: 11px; 
  --media-control-height: 36px; 
  --media-button-icon-width: 18px; 
  --media-button-icon-height: 18px;
  --media-range-thumb-width: 0px; 
  --media-range-thumb-height: 0px;
  --media-range-track-height: 4px;
}

media-controller.media--video-horizontal vimeo-video,
media-controller.media--video-horizontal video,
media-controller.media--video-vertical vimeo-video,
media-controller.media--video-vertical video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
  line-height: 0;
  transform: scale(1.002);
  transform-origin: center;
}

/* Control bar grayscale styling */
media-control-bar {
  background: #e8e8e8;
  transition: none !important;
}

/* Remove fade transition from media controller */
media-controller.media--video-horizontal,
media-controller.media--video-vertical,
media-controller.media--audio {
  --media-control-bar-transition: none !important;
}

/* Button hover states - only on devices with hover capability */
@media (hover: hover) {
  media-play-button:hover,
  media-mute-button:hover,
  media-volume-range:hover,
  media-fullscreen-button:hover {
    background: none;
  }
}

/* Remove tooltips on hover */
media-play-button::part(tooltip),
media-mute-button::part(tooltip),
media-fullscreen-button::part(tooltip),
media-volume-range::part(tooltip),
media-time-range::part(tooltip) {
  display: none !important;
  visibility: hidden !important;
}

/* Scale buttons to 3/4 size */
media-play-button,
media-mute-button,
media-fullscreen-button {
  width: 36px;
  height: 36px;
  padding: 6px;
}

/* Scale time display to 3/4 size */
media-time-display {
  font-size: 10px;
  padding: 0 6px;
}

/* Scale ranges to 3/4 size */
media-time-range {
  height: 36px;
}

/* Image Grids */
.media--image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: flex-end;
  max-width: 100vw;
  margin-top: 1rem;
}

.media--image-grid img {
  display: block;
  object-fit: contain;
  width: auto;
  height: auto;
  touch-action: manipulation;
}

/* Two desktop image sizes: 35% (default) and 25% (small) - width only, no height restrictions */

/* Default: 35% width */
.media--image-grid.single-image img {
  max-width: 35vw;
}

/* Small: 25% width */
.media--image-grid.single-image-small img {
  max-width: 25vw;
}

/* Multi-image grids - Desktop Gallery Layout */
.media--image-grid.multi-image {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 100vw;
  align-items: flex-start;
}

/* Main image display */
.media--image-grid.multi-image .gallery-main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.media--image-grid.multi-image .gallery-main img {
  height: 550px;
  width: auto;
  max-width: 75vw;
  cursor: pointer;
  display: block;
}

/* Thumbnail row */
.media--image-grid.multi-image .gallery-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
}

.media--image-grid.multi-image .gallery-thumbnails .img-wrapper {
  display: flex;
  cursor: pointer;
  align-items: flex-end;
}

.media--image-grid.multi-image .gallery-thumbnails .img-wrapper:hover {
  opacity: 1;
}

.media--image-grid.multi-image .gallery-thumbnails .img-wrapper.active {
  opacity: 1;
}

.media--image-grid.multi-image .gallery-thumbnails img {
  height: 55px;
  width: auto;
  display: block;
  opacity: 0.9;
}

/* Gallery counter - hidden on desktop, shown on mobile */
.media--image-grid.multi-image .gallery-counter {
  display: none;
}

/* Gallery description wrapper - hidden on desktop */
.gallery-description-wrapper {
  display: none;
}

/* Firefox focus ring fix */
button::-moz-focus-inner {
  border: 0;
}

.accordion-trigger:-moz-focusring {
  outline: none;
}

/* ============================================
   MOBILE RESPONSIVE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  body {
    margin: 15px;
    font-size: 11px;
  }

  /* Header and navigation */
  .site-header {
    gap: 0.5rem;
    align-items: baseline;
  }

  .header-right {
    gap: 0.50rem;
    white-space: nowrap;
  }

  /* Projects list */
  .projects {
    margin-top: 50px;
  }
  
  /* Footer quote */
  .site-footer {
    margin-top: 1.5rem;
    font-size: 11px;
    line-height: 1.35;
  }

  .row {
    grid-template-columns: 2fr 0.9fr 0.9fr 0.6fr;
    column-gap: 0.5rem;
    font-size: 11px;
  }

  .row .col:nth-child(3) {
    text-align: center;
  }

  .row .col:last-child {
    text-align: right;
  }

  /* Panel content */
  .panel-inner {
    font-size: 11px;
  }

  .panel-inner p {
    max-width: 100%;
  }

  /* Video players */
  .media--video-horizontal,
  .media--video-vertical,
  media-controller.media--video-horizontal,
  media-controller.media--video-vertical {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
  }

  .media--video-vertical,
  media-controller.media--video-vertical {
    aspect-ratio: 9 / 16;
    max-height: none;
  }

  /* Media Chrome - Mobile: Only show centered play button */
  media-controller.media--video-horizontal media-control-bar,
  media-controller.media--video-vertical media-control-bar {
    background: transparent !important;
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  media-controller.media--video-horizontal media-time-range,
  media-controller.media--video-horizontal media-time-display,
  media-controller.media--video-horizontal media-mute-button,
  media-controller.media--video-horizontal media-fullscreen-button,
  media-controller.media--video-vertical media-time-range,
  media-controller.media--video-vertical media-time-display,
  media-controller.media--video-vertical media-mute-button,
  media-controller.media--video-vertical media-fullscreen-button {
    display: none !important;
  }

  media-controller.media--video-horizontal media-play-button,
  media-controller.media--video-vertical media-play-button {
    pointer-events: auto;
    margin: 0;
    background: transparent !important;
    --media-control-background: transparent !important;
    --media-control-hover-background: transparent !important;
    --media-primary-color: #ffffff;
    --media-button-icon-width: 28px;
    --media-button-icon-height: 28px;
    border: none !important;
    box-shadow: none !important;
  }

  /* Audio player */
  .audio-player-container {
    max-width: 100%;
    margin-top: 1rem;
    grid-template-columns: auto 1fr auto;
    column-gap: 0rem;
  }
  
  .audio-play-btn {
    grid-column: 1;
  }
  
  .audio-progress-container {
    grid-column: 2;
  }
  
  .audio-time {
    grid-column: 3;
    text-align: right;
    font-size: 11px;
  }

  /* Image grids - Mobile Override */
  .media--image-grid {
    max-width: 100% !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
  }

  /* Two mobile image sizes: 100% and 80% width, no height restrictions */
  
  /* Override all desktop classes - default to 100% width on mobile */
  .media--image-grid img,
  .media--image-grid.single-image img,
  .media--image-grid.single-image-small img,
  .media--image-grid.mobile-full img {
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    height: auto;
    touch-action: manipulation;
  }

  /* 80% width (mobile-medium) */
  .media--image-grid.mobile-medium img {
    max-width: 80% !important;
    width: 80% !important;
    max-height: none !important;
    touch-action: manipulation;
  }

  /* Multi-image grids - Mobile: Gallery with counter */
  .media--image-grid.multi-image {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-top: 0 !important;
  }

  /* Hide thumbnails on mobile */
  .media--image-grid.multi-image .gallery-thumbnails {
    display: none !important;
  }

  /* Mobile main image - full width */
  .media--image-grid.multi-image .gallery-main {
    display: flex !important;
    justify-content: flex-start;
    align-items: flex-start !important;
    width: 100%;
    margin-top: 1rem;
  }

  .media--image-grid.multi-image .gallery-main img {
    width: 100% !important;
    height: auto !important;
    cursor: pointer;
    display: block;
    touch-action: manipulation;
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Hide desktop-only counter */
  .media--image-grid.multi-image .gallery-main .gallery-counter {
    display: none !important;
  }

  /* Mobile description wrapper - simple text block */
  .gallery-description-wrapper {
    display: block !important;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .gallery-description-wrapper p {
    margin: 0 0 1rem 0;
  }

  .gallery-description-wrapper .gallery-counter {
    display: block !important;
    font-size: 11px;
    color: #808080;
    line-height: 1;
    margin-bottom: 0;
  }

  /* Hide original description when gallery is active */
  .gallery-original-description {
    display: none !important;
  }

  /* Hide original img-wrappers on mobile */
  .media--image-grid.multi-image .img-wrapper {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}