/* =====================================================
   ASCOT GALLERY
===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #17191d;

  background: #fff;
}


/* =====================================================
   HEADER
===================================================== */

.gallery-header {

  position: sticky;

  top: 0;

  z-index: 100;

  height: 76px;

  padding: 0 6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background:
    rgba(255, 255, 255, .96);

  border-bottom:
    1px solid #eee;

  backdrop-filter:
    blur(12px);
}


.gallery-logo img {

  width: 115px;

  display: block;
}


.back-button {

  color: #17191d;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition: .3s ease;
}


.back-button:hover {

  color: #e30613;
}


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

.gallery-hero {
  position: relative;

  min-height: 390px;

  display: flex;

  align-items: center;

  padding: 70px 8%;

  overflow: hidden;

  color: white;

  background:
    url("../images/gallery/bangunan-02.webp")
    center / cover no-repeat;
}


/* Overlay tipis supaya foto tetap terlihat */

.gallery-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .45),
      rgba(0, 0, 0, .08)
    );

  z-index: 0;
}


.gallery-hero-content {
  position: relative;

  z-index: 1;

  max-width: 680px;
}

.gallery-hero-content span {

  display: block;

  margin-bottom: 14px;

  color: #e30613;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;
}


.gallery-hero-content h1 {

  margin: 0 0 18px;

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

  line-height: .95;

  letter-spacing: -2px;
}


.gallery-hero-content h1 span {

  display: inline;

  color: #e30613;
}


.gallery-hero-content p {

  max-width: 620px;

  margin: 0;

  color:
    rgba(255, 255, 255, .82);

  font-size: 16px;

  line-height: 1.7;
}


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

.gallery-navigation {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  padding:
    35px 6% 10px;
}


.gallery-filter {

  border: 0;

  padding:
    11px 20px;

  border-radius: 50px;

  background: #f3f3f3;

  color: #444;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: .3s ease;
}


.gallery-filter:hover {

  background: #e8e8e8;
}


.gallery-filter.is-active {

  background: #e30613;

  color: white;
}


/* =====================================================
   GALLERY GRID
===================================================== */

.gallery-section {

  padding:
    30px 6% 90px;
}


.gallery-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 25px;
}


/* =====================================================
   FOTO CARD
===================================================== */

.gallery-card {

  position: relative;

  height: 430px;

  overflow: hidden;

  border-radius: 18px;

  background: #111;

  cursor: pointer;
}


.gallery-card img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .7s
    cubic-bezier(.22, .61, .36, 1);
}


.gallery-card:hover img {

  transform:
    scale(1.05);
}


/* OVERLAY */

.gallery-card::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      to top,
      rgba(0, 0, 0, .80),
      transparent 55%
    );
}


/* FOTO TEXT */

.gallery-card-info {

  position: absolute;

  z-index: 2;

  left: 24px;

  right: 24px;

  bottom: 22px;

  color: white;
}


.gallery-card-info small {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


.gallery-card-info h3 {

  margin: 6px 0 0;

  font-size: 22px;
}


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

.lightbox {

  position: fixed;

  inset: 0;

  z-index: 999;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 50px;

  background:
    rgba(5, 5, 5, .96);
}


.lightbox.is-open {

  display: flex;
}


.lightbox img {

  max-width: 88vw;

  max-height: 82vh;

  object-fit: contain;

  border-radius: 8px;
}


/* BUTTON */

.lightbox button {

  position: absolute;

  width: 48px;

  height: 48px;

  border:
    1px solid
    rgba(255, 255, 255, .4);

  border-radius: 50%;

  background:
    rgba(0, 0, 0, .4);

  color: white;

  font-size: 30px;

  cursor: pointer;

  transition: .25s ease;
}


.lightbox button:hover {

  background: #e30613;

  border-color: #e30613;
}


.lightbox-close {

  top: 25px;

  right: 30px;
}


.lightbox-prev {

  left: 30px;

  top: 50%;

  transform:
    translateY(-50%);
}


.lightbox-next {

  right: 30px;

  top: 50%;

  transform:
    translateY(-50%);
}


.lightbox-counter {

  position: absolute;

  bottom: 25px;

  color: white;

  font-size: 13px;

  opacity: .8;
}


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

@media (max-width: 800px) {

  .gallery-header {

    height: 65px;

    padding: 0 5%;
  }


  .gallery-logo img {

    width: 95px;
  }


  .gallery-hero {

    min-height: 340px;

    padding:
      55px 7%;
  }


  .gallery-hero-content h1 {

    font-size: 44px;
  }


  .gallery-navigation {

    padding:
      25px 5% 5px;
  }


  .gallery-section {

    padding:
      25px 5% 60px;
  }


  .gallery-grid {

    grid-template-columns: 1fr;

    gap: 16px;
  }


  .gallery-card {

    height: 340px;
  }


  .lightbox {

    padding: 20px;
  }


  .lightbox img {

    max-width: 94vw;

    max-height: 75vh;
  }


  .lightbox-prev {

    left: 12px;
  }


  .lightbox-next {

    right: 12px;
  }

}