/* ==========================================================
   PEDERSEN ART STUDIO
   COLLECTION GALLERY
========================================================== */


.gallery-page {

  background:
    radial-gradient(
      circle at 75% 5%,
      rgba(182, 146, 88, 0.05),
      transparent 20%
    ),
    #0b0b0d;

}



/* ==========================================================
   GALLERY HERO
========================================================== */


.gallery-hero {

  padding:
    175px
    var(--pad)
    80px;

  border-bottom: 1px solid var(--line);

}


.gallery-hero-inner {

  width: min(var(--max), 100%);

  margin: 0 auto;

}


.gallery-back {

  display: inline-block;

  margin-bottom: 65px;

  color: var(--muted);

  font-size: 12px;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  transition: color 0.2s ease;

}


.gallery-back:hover {

  color: var(--text);

}


.gallery-hero h1 {

  margin: 0;

  max-width: 1100px;

  font-family: var(--serif);

  font-size:
    clamp(
      68px,
      10vw,
      150px
    );

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.045em;

}


.gallery-description {

  max-width: 760px;

  margin: 38px 0 0;

  color: var(--muted);

  font-size:
    clamp(
      17px,
      1.5vw,
      22px
    );

  line-height: 1.7;

}


.gallery-stats {

  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-top: 75px;

  padding-top: 18px;

  border-top: 1px solid var(--line);

  color:
    rgba(
      255,
      255,
      255,
      0.45
    );

  font-size: 10px;

  letter-spacing: 0.18em;

}



/* ==========================================================
   COLLECTION FILTER
========================================================== */


.gallery-filter-section {

  position: sticky;

  top: 76px;

  z-index: 50;

  padding:
    18px
    var(--pad);

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(
      11,
      11,
      13,
      0.93
    );

  backdrop-filter:
    blur(18px);

}


.gallery-filter {

  width: min(var(--max), 100%);

  margin: 0 auto;

  display: flex;

  gap: 9px;

  overflow-x: auto;

  scrollbar-width: thin;

  padding-bottom: 2px;

}


.gallery-filter a {

  flex: 0 0 auto;

  padding:
    10px
    15px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  color: var(--muted);

  text-decoration: none;

  text-transform: uppercase;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.13em;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;

}


.gallery-filter a:hover {

  color: var(--text);

  border-color:
    rgba(
      255,
      255,
      255,
      0.25
    );

}


.gallery-filter a.active {

  color: #0b0b0d;

  border-color: var(--text);

  background: var(--text);

}



/* ==========================================================
   LEGENDS NOTICE
========================================================== */


.gallery-legends-notice {

  padding:
    55px
    var(--pad)
    0;

}


.gallery-legends-notice-inner {

  width: min(var(--max), 100%);

  margin: 0 auto;

  padding:
    30px
    34px;

  border:
    1px solid
    rgba(
      182,
      146,
      88,
      0.25
    );

  background:
    rgba(
      182,
      146,
      88,
      0.035
    );

}


.gallery-legends-notice-inner p:not(.section-kicker) {

  max-width: 820px;

  margin:
    0
    0
    15px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.8;

}


.gallery-legends-notice-inner a {

  color: var(--gold-light);

  font-size: 11px;

  font-weight: 600;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



/* ==========================================================
   ARTWORK ARCHIVE
========================================================== */


.archive-section {

  width: min(var(--max), 100%);

  margin: 0 auto;

  padding:
    clamp(
      65px,
      7vw,
      110px
    )
    var(--pad)
    140px;

}


/* Masonry-style layout */


.archive-grid {

  columns:
    3
    320px;

  column-gap: 24px;

}



/* ==========================================================
   ARTWORK CARD
========================================================== */


.archive-card {

  display: inline-block;

  width: 100%;

  margin:
    0
    0
    34px;

  break-inside: avoid;

  cursor: zoom-in;

}


.archive-media {

  position: relative;

  overflow: hidden;

  width: 100%;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  background: var(--surface);

}


.archive-media img {

  display: block;

  width: 100%;

  height: auto;

  transition:
    transform
    0.65s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );

}


.archive-card:hover
.archive-media img {

  transform:
    scale(1.025);

}


.archive-media::after {

  content: "";

  position: absolute;

  inset:
    65%
    0
    0;

  pointer-events: none;

  background:
    linear-gradient(
      transparent,
      rgba(
        0,
        0,
        0,
        0.22
      )
    );

}



/* ==========================================================
   MISSING IMAGE PLACEHOLDER
========================================================== */


.archive-placeholder {

  display: grid;

  place-items: center;

  min-height: 400px;

  padding: 35px;

  background:

    radial-gradient(
      circle at 65% 30%,
      rgba(
        182,
        146,
        88,
        0.13
      ),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #14151a,
      #09090c
    );

  color:
    rgba(
      255,
      255,
      255,
      0.33
    );

  text-align: center;

}


.archive-placeholder.portrait {

  aspect-ratio: 4 / 5;

}


.archive-placeholder.landscape {

  aspect-ratio: 16 / 10;

}


.archive-placeholder.square {

  aspect-ratio: 1;

}


.archive-placeholder span {

  max-width: 220px;

  font-size: 10px;

  line-height: 1.8;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



/* ==========================================================
   CARD INFORMATION
========================================================== */


.archive-card-info {

  padding-top: 16px;

}


.archive-card-code {

  margin: 0 0 6px;

  color: var(--gold-light);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}


.archive-card-title {

  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      24px,
      2vw,
      33px
    );

  font-weight: 500;

  line-height: 1.1;

}


.archive-card-meta {

  margin: 8px 0 0;

  color: var(--muted);

  font-size: 11px;

  letter-spacing: 0.06em;

}



/* ==========================================================
   EMPTY STATE
========================================================== */


.archive-empty {

  max-width: 650px;

  padding:
    70px
    0;

}


.archive-empty h2 {

  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      42px,
      5vw,
      72px
    );

  font-weight: 500;

}


.archive-empty p:not(.section-kicker) {

  color: var(--muted);

}



/* ==========================================================
   LIGHTBOX
========================================================== */


.archive-lightbox {

  width:
    min(
      1500px,
      calc(
        100% - 32px
      )
    );

  height:
    min(
      94vh,
      1050px
    );

  padding: 0;

  border:
    1px solid
    var(--line);

  background:
    #08080a;

  color:
    var(--text);

}


.archive-lightbox::backdrop {

  background:
    rgba(
      0,
      0,
      0,
      0.92
    );

  backdrop-filter:
    blur(12px);

}


.archive-lightbox-layout {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(
      300px,
      390px
    );

  height: 100%;

}


.archive-lightbox-image-wrap {

  display: grid;

  place-items: center;

  min-width: 0;

  min-height: 0;

  padding: 30px;

  background: #050507;

}


.archive-lightbox-image {

  display: block;

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}


.archive-lightbox-info {

  overflow-y: auto;

  padding:
    clamp(
      35px,
      5vw,
      70px
    )
    35px;

  border-left:
    1px solid
    var(--line);

}


.archive-lightbox-info h2 {

  margin:
    0
    0
    18px;

  font-family: var(--serif);

  font-size:
    clamp(
      36px,
      4vw,
      58px
    );

  font-weight: 500;

  line-height: 1;

}


.archive-lightbox-meta {

  color:
    var(--gold-light);

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}


.archive-lightbox-description {

  margin-top: 30px;

  color:
    var(--muted);

  line-height: 1.8;

}


.archive-lightbox-notice {

  margin-top: 35px;

  padding-top: 25px;

  border-top:
    1px solid
    var(--line);

  color:
    var(--gold-light);

  font-size: 10px;

  line-height: 1.7;

  letter-spacing: 0.09em;

  text-transform: uppercase;

}


.archive-lightbox-close {

  position: absolute;

  top: 14px;

  right: 16px;

  z-index: 20;

  width: 44px;

  height: 44px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.17
    );

  background:
    rgba(
      0,
      0,
      0,
      0.55
    );

  color: white;

  font-size: 28px;

  cursor: pointer;

}



/* ==========================================================
   TABLET
========================================================== */


@media
(max-width: 900px) {


  .gallery-hero {

    padding-top: 140px;

  }


  .archive-lightbox-layout {

    grid-template-columns: 1fr;

  }


  .archive-lightbox-image-wrap {

    min-height: 62vh;

  }


  .archive-lightbox-info {

    border-top:
      1px solid
      var(--line);

    border-left: 0;

  }

}



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


@media
(max-width: 600px) {


  .gallery-hero {

    padding-top: 125px;

    padding-bottom: 55px;

  }


  .gallery-back {

    margin-bottom: 45px;

  }


  .gallery-stats {

    flex-direction: column;

    gap: 8px;

    margin-top: 50px;

  }


  .gallery-filter-section {

    top: 76px;

  }


  .archive-section {

    padding-top: 45px;

  }


  .archive-grid {

    columns: 1;

  }


  .archive-lightbox {

    width:
      calc(
        100% - 12px
      );

    height:
      96vh;

  }


  .archive-lightbox-image-wrap {

    min-height: 58vh;

    padding: 14px;

  }


  .archive-lightbox-info {

    padding: 32px 24px;

  }

}