/* =============================================================================
   EMARAT REALTY — Single Project Page CSS
   Lọc và chỉ giữ lại các CSS liên quan đến templates/project/single.php
   ============================================================================= */

/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

.font-display,
.font-display-alt {
  font-family:    var(--font-display);
  font-weight:    400;
  letter-spacing: 0.07rem;
}

.font-script {
  font-family:    var(--font-script);
  font-weight:    400;
  letter-spacing: normal;
}

.h-page {
  font-size:   clamp(2.5rem, 6vw, 5rem);
  line-height: 1.08;
  letter-spacing: 0.07rem;
  text-shadow: 0 0 0.6px currentColor;
  overflow-wrap: break-word;
}

.h-section {
  font-size:   clamp(2rem, 5vw, 5rem);
  line-height: 1.08;
  letter-spacing: 0.07rem;
  overflow-wrap: break-word;
}

.h-sub {
  font-family:    var(--font-display);
  font-size:      clamp(1.75rem, 5vw, 4.5rem);
  line-height:    1.1;
  letter-spacing: 0.07rem;
  overflow-wrap:  break-word;
}

:where(.theme-light) :where(.h-page, .h-section, .h-sub) {
  color: var(--brand-green);
}

/* Eyebrow label */
.eyebrow > :first-child::before {
  content:       "";
  display:       inline-block;
  width:         1.5rem;
  height:        1.5px;
  background:    var(--accent);
  vertical-align: middle;
  margin-right:  0.75rem;
  margin-bottom: 2px;
}
.theme-light .eyebrow > :first-child::before {
  background: var(--brand-green);
  opacity:    0.9;
}


/* =============================================================================
   4. ANIMATIONS & KEYFRAMES
   ============================================================================= */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: reveal-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.reveal.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity:   1;
  }
}


/* =============================================================================
   5. LAYOUT UTILITIES
   ============================================================================= */

.container-xl { max-width: 1400px; margin-inline: auto; }

.px-site {
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .px-site { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .px-site { padding-inline: 2.5rem; } }

.py-section {
  padding-block: 2.5rem;
}
@media (min-width: 640px)  { .py-section { padding-block: 3.125rem; } }
@media (min-width: 1024px) { .py-section { padding-block: 6.25rem; } }


/* =============================================================================
   6. COMPONENTS: BUTTONS
   ============================================================================= */

.link-hover {
  position:        relative;
  isolation:       isolate;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid #e2a724;
  border-radius:   9999px;
  transition:      color 0.4s;
}

.link-hover__circle {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  width:          100%;
  height:         100%;
  overflow:       visible;
}
.link-hover__circle rect {
  fill:                none;
  stroke:              #ffffff;
  stroke-width:        2;
  vector-effect:       non-scaling-stroke;
  stroke-dasharray:    var(--len, 800);
  stroke-dashoffset:   var(--len, 800);
  transition:          stroke-dashoffset 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-hover:hover .link-hover__circle rect,
.link-hover:focus-visible .link-hover__circle rect {
  stroke-dashoffset: 0;
}

.link-hover--filled {
  background: #e2a724;
  color:      var(--bg);
}
.link-hover--filled .link-hover__circle rect {
  stroke:       #f5efe1;
  stroke-width: 2;
}
.theme-light .link-hover--filled .link-hover__circle rect {
  stroke:       var(--bg);
  stroke-width: 2;
}

.btn-sm {
  height:         2.5rem;
  padding-inline: 1.25rem;
  font-size:      0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.btn-md {
  height:         3rem;
  padding-inline: 1.75rem;
  font-size:      0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


/* =============================================================================
   7. COMPONENTS: PAGE HERO
   ============================================================================= */

.page-hero {
  position:       relative;
  isolation:      isolate;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  min-height:     90svh;
  overflow:       hidden;
  padding-top:    6rem;
  padding-bottom: 1.5rem;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .page-hero {
    min-height:    70svh;
    padding-top:   7rem;
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .page-hero {
    padding-top:    10rem;
    padding-bottom: 2.5rem;
    padding-inline: 2.5rem;
  }
}

.page-hero__bg {
  position:       absolute;
  inset:          0;
  z-index:        -2;
}
.page-hero__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     sepia(0.18) saturate(0.85) brightness(0.45) contrast(1.05);
}

.page-hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    -1;
  background: rgba(1, 31, 20, 0.5);
}


@media (min-width: 1024px) { .page-hero__glow { display: block; } }

.page-hero__eyebrow {
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  font-size:      0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color:          var(--muted);
}
.page-hero__eyebrow-line {
  display:    inline-block;
  height:     1px;
  width:      2rem;
  background: var(--brand-green);
}
.page-hero__eyebrow-dot {
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--brand-green);
}



.page-hero__title-top {
  display:     block;
  font-family: var(--font-display);
  color:var(--fg);
}
.page-hero__title-bottom {
  display: block;
  color:   var(--accent);
  font-family: var(--font-display);
}

.page-hero__subtitle {
  margin-top:   1.5rem;
  max-width:    36rem;
  font-size:    1rem;
  line-height:  1.625;
  color:        var(--muted);
}
@media (min-width: 1024px) {
  .page-hero__subtitle { margin-top: 2.5rem; font-size: 1.125rem; }
}

.brand-green-strip {
  height:     4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 35%,
    var(--accent-2) 50%,
    var(--accent) 65%,
    transparent 100%
  );
}


/* =============================================================================
   8. COMPONENTS: FORMS
   ============================================================================= */

.form-stack {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.form-grid-2 {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.5rem;
}
@media (min-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

.form-field {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width:       100%;
  background:  transparent;
  border:      none;
  outline:     none;
  font-family: var(--font-sans);
  font-size:   0.875rem;
  color:       #f5efe1;
}
.form-field input::placeholder,
.form-field select::placeholder,
.form-field textarea::placeholder {
  color: var(--muted);
}
.form-field select {
  color: var(--muted);
  cursor: pointer;
}
.form-field select option {
  background: var(--bg);
  color:      #f5efe1;
}
.form-field textarea {
  resize:  vertical;
  min-height: 120px;
}

.form-consent {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  cursor:      pointer;
}
.form-consent input[type="checkbox"] {
  margin-top:  0.125rem;
  width:       1rem;
  height:      1rem;
  flex-shrink: 0;
  cursor:      pointer;
  accent-color: var(--accent);
}
.form-consent__text {
  font-size:   0.75rem;
  line-height: 1.625;
  color:       var(--muted);
}


/* =============================================================================
   9. UTILITIES
   ============================================================================= */

.mb-4 { margin-bottom: 1rem; }


/* =============================================================================
   10. PROJECT DETAIL SPECIFIC STYLES
   ============================================================================= */

/* Sticky Project Sub-Navigation */
.sticky-project-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: rgba(1, 31, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sticky-project-nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow-x: auto;
  padding-block: 0.875rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sticky-project-nav__inner::-webkit-scrollbar { display: none; }

.sticky-project-nav__link {
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.3s ease;
}
.sticky-project-nav__link:hover,
.sticky-project-nav__link.is-active {
  color: #f5efe1;
}

.sticky-project-nav__brochure {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid rgba(226, 167, 36, 0.5);
  padding: 0.375rem 1rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sticky-project-nav__brochure:hover {
  background-color: rgba(226, 167, 36, 0.15);
  color: #f5efe1;
}

/* Floor Plans Tabs */
.project-tab {
  border-radius: 9999px;
  border: 1px solid var(--line);
  padding: 0.625rem 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s ease;
}
.project-tab:hover {
  border-color: rgba(226, 167, 36, 0.5);
  color: #f5efe1;
}
.project-tab.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

/* Amenity Cards */
.amenity-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--line);
  padding: 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.amenity-card:hover {
  border-color: rgba(226, 167, 36, 0.4);
  transform: translateY(-2px);
}
.amenity-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
}
.amenity-card__name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #f5efe1;
}


/* =============================================================================
   11. GALLERY FLICKITY SLIDER & THUMBNAILS
   ============================================================================= */
.gallery-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--bg-alt);
  margin-bottom: 1rem;
}
.gallery-main .flickity-viewport,
.gallery-main .flickity-slider {
  width: 100%;
  height: 100% !important;
}
.gallery-main__cell {
  width: 100% !important;
  height: 100% !important;
}
.gallery-main__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-main__caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg);
  background: rgba(1, 31, 20, 0.75);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  backdrop-filter: blur(4px);
  z-index: 3;
}

/* Gallery Thumbnails (Đè hoàn toàn Flatsome CSS .flickity-slider>div:not(.col)) */
.gallery-thumbs {
  width: 100%;
  margin-top: 1rem;
}
.gallery-thumbs .gallery-thumbs__cell,
.gallery-thumbs .flickity-slider > div.gallery-thumbs__cell,
.gallery-thumbs .flickity-slider > div:not(.col) {
  width: 160px !important;
  height: 100px !important;
  margin-right: 12px !important;
  border-radius: 0.25rem;
  padding:0px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.gallery-thumbs .gallery-thumbs__cell:hover,
.gallery-thumbs .gallery-thumbs__cell.is-selected,
.gallery-thumbs .gallery-thumbs__cell.is-nav-selected,
.gallery-thumbs .flickity-slider > div:not(.col).is-selected,
.gallery-thumbs .flickity-slider > div:not(.col).is-nav-selected {
  opacity: 1 !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px);
}
.gallery-thumbs .gallery-thumbs__cell img,
.gallery-thumbs .flickity-slider > div:not(.col) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.project-single-page .breadcrumb{
    margin-bottom: auto;
    display: flex;
    flex:1;
}
.project-single-page .page-hero__content{
    display: flex;
    flex:1;
    flex-direction: column;
}