/* =========================================================
   ROEMAH KENTANG 1908
   Home Page Stylesheet
   ========================================================= */

/* =========================================================
   1. HERO HOME
   ========================================================= */
.hero__image {
  object-position: center 52%;
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 20%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(20, 20, 18, 0.24)
    );
  content: "";
}

.hero__content {
  max-width: 1080px;
}

.hero__title {
  text-shadow:
    0 6px 32px rgba(0, 0, 0, 0.16);
}

.hero__title em {
  margin-top: 0.05em;
}

.hero__description {
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.24);
}

/* =========================================================
   2. HOME WELCOME
   ========================================================= */
.home-intro {
  overflow: hidden;
}

.home-intro__content {
  position: relative;
  z-index: 2;
}

.home-intro__visual {
  isolation: isolate;
}

.intro-visual__main {
  z-index: 1;
}

.intro-visual__secondary {
  z-index: 3;
}

.intro-visual__main img,
.intro-visual__secondary img {
  transition: transform 1.2s var(--ease-smooth);
}

.intro-visual:hover .intro-visual__main img {
  transform: scale(1.025);
}

.intro-visual:hover .intro-visual__secondary img {
  transform: scale(1.04);
}

.intro-visual__year {
  z-index: 2;
  user-select: none;
}

/* =========================================================
   3. STORY HOME
   ========================================================= */
.story-sticky__image img {
  object-position: center center;
}

.story-item__content {
  max-width: 720px;
}

/* =========================================================
   4. FEATURED MENU
   ========================================================= */
.menu-featured__media img {
  object-position: center 58%;
}

.menu-card__media img {
  object-position: center;
}

.menu-card:nth-child(3) .menu-card__media img {
  object-position: center 30%;
}

/* =========================================================
   5. HOME SPACES
   ========================================================= */
.spaces-showcase {
  position: relative;
}

.space-card:first-child .space-card__image img {
  object-position: center 52%;
}

.space-card:nth-child(2) .space-card__image img {
  object-position: center 52%;
}

.space-card:nth-child(3) .space-card__image img {
  object-position: center;
}

.space-card:nth-child(4) .space-card__image img {
  object-position: center;
}

.space-card:nth-child(5) .space-card__image img {
  object-position: center 45%;
}

/* =========================================================
   6. HOME EVENT
   ========================================================= */
.event-highlight__media img {
  object-position: center 52%;
}

.event-highlight__content {
  background:
    linear-gradient(
      90deg,
      rgba(20, 20, 18, 0.1),
      transparent
    );
}

/* =========================================================
   7. HOME GALLERY
   ========================================================= */
.gallery-item {
  padding: 0;
  border: 0;
  color: inherit;
  text-align: inherit;
}

.gallery-item:focus-visible {
  outline-offset: 5px;
}

.gallery-item:nth-child(1) img {
  object-position: center;
}

.gallery-item:nth-child(2) img {
  object-position: center;
}

.gallery-item:nth-child(3) img {
  object-position: center 58%;
}

.gallery-item:nth-child(4) img {
  object-position: center;
}

/* =========================================================
   8. GALLERY LIGHTBOX ENHANCEMENT
   ========================================================= */
.gallery-lightbox {
  grid-template-columns:
    minmax(48px, 80px)
    minmax(0, 1fr)
    minmax(48px, 80px);
  grid-template-rows: 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.gallery-lightbox__content {
  display: flex;
  width: 100%;
  max-width: 1200px;
  max-height: 88vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.gallery-lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(88vh - 74px);
}

.gallery-lightbox__caption {
  max-width: 760px;
  color: rgba(255, 253, 248, 0.72);
  font-size: var(--fs-sm);
  line-height: 1.65;
  text-align: center;
}

.gallery-lightbox__previous,
.gallery-lightbox__next {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.06);
  color: var(--color-warm-white);
  font-size: 1.2rem;
  transition:
    background-color var(--duration-base) ease,
    border-color var(--duration-base) ease,
    transform var(--duration-base) var(--ease-standard);
  backdrop-filter: blur(12px);
}

.gallery-lightbox__previous {
  justify-self: end;
}

.gallery-lightbox__next {
  justify-self: start;
}

.gallery-lightbox__previous:hover,
.gallery-lightbox__next:hover {
  border-color: var(--color-potato-gold);
  background: var(--color-potato-gold);
  color: var(--color-charcoal);
  transform: scale(1.05);
}

.gallery-lightbox__previous:disabled,
.gallery-lightbox__next:disabled,
.gallery-lightbox__previous[hidden],
.gallery-lightbox__next[hidden] {
  display: none;
}

/* =========================================================
   9. RESERVATION HOME
   ========================================================= */
#reservasi {
  overflow: hidden;
}

#reservasi .visit-layout {
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.85fr);
  align-items: stretch;
}

#reservasi .visit-content:first-child {
  justify-content: flex-start;
  background: var(--color-warm-white);
}

#reservasi .visit-content:last-child {
  position: relative;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at top right,
      rgba(199, 154, 69, 0.12),
      transparent 34%
    ),
    var(--color-heritage-cream);
}

#reservasi .visit-content:last-child::before {
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(199, 154, 69, 0.14);
  border-radius: 50%;
  content: "";
}

#reservasi .visit-content:last-child::after {
  position: absolute;
  right: 4%;
  bottom: 5%;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(199, 154, 69, 0.12);
  border-radius: 50%;
  content: "";
}

#reservasi .visit-content:last-child > * {
  position: relative;
  z-index: 1;
}

#reservasi .form-grid {
  margin-top: var(--space-8);
}

#reservasi .form-control {
  background: rgba(255, 253, 248, 0.96);
}

#reservasi textarea.form-control {
  min-height: 130px;
}

#reservasi [data-submit-button] {
  width: 100%;
}

#reservasi .visit-detail {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

#reservasi .visit-detail:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#reservasi .visit-detail__value {
  display: inline-block;
}

#reservasi a.visit-detail__value {
  transition: color var(--duration-base) ease;
}

#reservasi a.visit-detail__value:hover {
  color: var(--color-potato-gold);
}

/* =========================================================
   10. FORM HOME DETAILS
   ========================================================= */
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="number"],
.form-control[type="tel"] {
  min-width: 0;
}

.form-control[type="date"],
.form-control[type="time"] {
  color-scheme: light;
}

.form-control:disabled,
.form-control[readonly] {
  cursor: not-allowed;
  background: rgba(245, 240, 231, 0.72);
}

.form-control.is-valid {
  padding-right: 2.8rem;
  background:
    linear-gradient(
      90deg,
      rgba(52, 76, 61, 0.045),
      transparent 40%
    ),
    var(--color-warm-white);
}

.form-status {
  margin-top: 0;
}

.form-status--success {
  border: 1px solid rgba(52, 76, 61, 0.18);
}

.form-status--error {
  border: 1px solid rgba(142, 58, 45, 0.18);
}

/* =========================================================
   11. CLOSING HOME
   ========================================================= */
.closing-cta__media img {
  object-position: center 44%;
}

.closing-cta__content {
  background:
    radial-gradient(
      circle at center,
      transparent 10%,
      rgba(20, 20, 18, 0.14) 100%
    );
}

/* =========================================================
   12. FOOTER HOME
   ========================================================= */
.site-footer__brand .site-footer__logo {
  display: inline-block;
}

.site-footer__brand .site-footer__logo:hover {
  color: var(--color-potato-gold-soft);
}

.site-footer__legal span {
  color: rgba(255, 253, 248, 0.48);
}

/* =========================================================
   13. MOBILE HOME
   ========================================================= */
@media (max-width: 1023px) {
  #reservasi .visit-layout {
    grid-template-columns: 1fr;
  }

  #reservasi .visit-content:last-child {
    min-height: 560px;
  }

  .gallery-lightbox {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px;
  }

  .gallery-lightbox__previous,
  .gallery-lightbox__next {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 767px) {
  .hero__image {
    object-position: center 50%;
  }

  .hero__title em {
    margin-top: 0.15em;
  }

  .hero__description {
    padding-inline: 0.35rem;
  }

  .intro-visual__main img {
    object-position: center;
  }

  .story-sticky__image img {
    object-position: center;
  }

  .menu-featured__media img {
    object-position: center 56%;
  }

  .event-highlight__media img {
    object-position: center;
  }

  #reservasi .visit-layout {
    border-radius: var(--radius-lg);
  }

  #reservasi .visit-content:first-child,
  #reservasi .visit-content:last-child {
    padding: 1.5rem;
  }

  #reservasi .visit-content:last-child {
    min-height: auto;
  }

  #reservasi .visit-content:last-child::before {
    right: -120px;
    bottom: -120px;
  }

  #reservasi .form-grid {
    margin-top: var(--space-6);
  }

  .gallery-lightbox {
    display: flex;
    padding:
      4.5rem
      1rem
      5rem;
  }

  .gallery-lightbox__content {
    max-height: 78vh;
  }

  .gallery-lightbox__image {
    max-height: calc(78vh - 82px);
  }

  .gallery-lightbox__previous,
  .gallery-lightbox__next {
    position: absolute;
    bottom: 1.25rem;
    width: 48px;
    height: 48px;
  }

  .gallery-lightbox__previous {
    right: calc(50% + 0.4rem);
  }

  .gallery-lightbox__next {
    left: calc(50% + 0.4rem);
  }

  .gallery-lightbox__close {
    top: 1rem;
    right: 1rem;
  }

  .gallery-lightbox__caption {
    padding-inline: 0.5rem;
    font-size: var(--fs-xs);
  }
}

@media (max-width: 575px) {
  .hero__image {
    object-position: 52% center;
  }

  #reservasi .visit-content:first-child,
  #reservasi .visit-content:last-child {
    padding: 1.25rem;
  }

  #reservasi .cluster {
    align-items: stretch;
    flex-direction: column;
  }

  #reservasi .cluster .btn {
    width: 100%;
  }

  .gallery-lightbox {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .gallery-lightbox__image {
    max-width: 100%;
  }
}

/* =========================================================
   14. TOUCH SAFETY
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  .intro-visual:hover .intro-visual__main img,
  .intro-visual:hover .intro-visual__secondary img {
    transform: none;
  }

  .gallery-lightbox__previous:hover,
  .gallery-lightbox__next:hover {
    border-color: rgba(255, 253, 248, 0.28);
    background: rgba(255, 253, 248, 0.06);
    color: var(--color-warm-white);
    transform: none;
  }
}

/* =========================================================
   15. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .intro-visual__main img,
  .intro-visual__secondary img,
  .gallery-lightbox__previous,
  .gallery-lightbox__next {
    transition: none !important;
  }
}

[data-open-status] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

[data-open-status]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

[data-open-status].is-open {
  color: var(--color-colonial-green);
}

[data-open-status].is-open::before {
  box-shadow:
    0 0 0 5px
    rgba(52, 76, 61, 0.1);
}

[data-open-status].is-closed {
  color: var(--color-muted-gray);
}