/*
 * Site-wide fixes for crystalchow.com.
 */

/* Elementor sizes hosted background videos to 16:9 once, from the container's
   size at that moment. When the container grows afterwards (late images, web
   fonts) the video no longer reaches the edges and black bands show above and
   below it. Make the video always cover its container instead. */
.elementor-background-video-container .elementor-background-video-hosted {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover;
  object-position: 50% 50%;
}

/* home: closing "Join the table" film, framed like the reference */
.elementor-element-dec8568 > .elementor-background-video-container .elementor-background-video-hosted {
  object-position: 50% 40%;
}
/* reference sizing: height tracks the viewport, copy sits at the foot */
.elementor-element-dec8568 {
  min-height: clamp(620px, 88vh, 940px) !important;
  padding-top: clamp(4rem, 14vh, 9rem) !important;
  padding-bottom: clamp(3.5rem, 10vh, 6.5rem) !important;
  justify-content: flex-end !important;
}
.elementor-element-dec8568 > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: flex-end !important;
  gap: clamp(1.1rem, 2.6vh, 1.8rem) !important;
}
.elementor-element-dec8568 .elementor-element-6247c10 { width: auto !important; }
.elementor-element-dec8568 .elementor-element-6247c10 img {
  height: clamp(4.5rem, 7vw, 6.5rem) !important;
  width: auto !important;
  filter: drop-shadow(0 .8rem 1.8rem #0c0909b3);
}
/* reference tint: dark behind the copy, warming to red, clear on the right,
   with a soft fade at the foot (replaces the flat 67% overlay) */
.elementor-element-dec8568::before {
  background:
    linear-gradient(180deg, #0c090900 0%, #0c090900 58%, #0c090973 100%),
    linear-gradient(100deg, #0c0909d9 0%, #0c0909b3 30%, #7f141666 56%, #0c090940 78%, #0c090914 100%) !important;
  opacity: 1 !important;
}

/* ================= Full-screen menu (Elementor popup #1384) =================
   Matches the reference overlay: one ink field (no second black panel), no
   close cross (the MENU button toggles it), numbered display links left and a
   4:5 portrait right; below 900px the links stack right-aligned over a 3:2 crop. */
#elementor-popup-modal-1384 .dialog-close-button { display: none !important; }
/* the lightbox backdrop was solid black and appeared instantly while only the
   panel faded, so opening/closing flashed black; with a clear backdrop the ink
   panel cross-fades over the page like the reference */
#elementor-popup-modal-1384 { background-color: transparent !important; }
#elementor-popup-modal-1384 .dialog-widget-content { animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important; }
#elementor-popup-modal-1384 .dialog-widget-content,
#elementor-popup-modal-1384 .dialog-message { background: #0c0909 !important; }

.elementor-1384 .elementor-element-42a32f0 {
  background: transparent !important;
  min-height: calc(100dvh - 112px);
  padding: clamp(24px, 3.5vw, 50px) max(20px, 4vw) max(20px, 4vw) !important;
  align-items: center;
}
.elementor-1384 .elementor-element-42a32f0 > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem) !important;
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
}

/* links */
.elementor-1384 .elementor-element-6632adb { align-self: center !important; display: flex !important; flex-direction: column; gap: clamp(1.6px, .6vh, 8px) !important; }
.elementor-1384 .hover-item { margin: 0 !important; }
.elementor-1384 .hover-item .elementor-icon-list-item { padding-block: clamp(2.4px, .5vh, 6.4px) !important; }
.elementor-1384 .hover-item .elementor-icon-list-text {
  font-family: "Aperitif Serif", Georgia, serif !important;
  font-size: clamp(32px, 5.4vh, 57.6px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  color: #f2f0e3 !important;
  transition: color .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1) !important;
}
.elementor-1384 .hover-item .hover-number {
  display: inline-block;
  margin-right: clamp(16px, 2.5vw, 32px) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 14.4px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  color: #b0aca0 !important;
  white-space: nowrap;
  transition: color .2s cubic-bezier(.22, 1, .36, 1);
}
.elementor-1384 .hover-item:hover { transform: none !important; }
.elementor-1384 .hover-item:hover .elementor-icon-list-text { color: #a61b1e !important; transform: translateX(.4em); }
.elementor-1384 .hover-item:hover .hover-number { color: #a61b1e !important; }

/* page inventory */
.elementor-1384 .elementor-element-b4d47d2 {
  width: auto !important;
  max-width: none !important;
  align-self: flex-start;
  margin: clamp(17.6px, 3vh, 28.8px) 0 0 !important;
  padding: clamp(16px, 2.5vh, 22.4px) 0 0 !important;
  border-top: 1px solid #b49b6240 !important;
  transform: none !important;
}
.elementor-1384 .elementor-element-b4d47d2 .elementor-icon-list-items { justify-content: flex-start !important; }
.elementor-1384 .elementor-element-b4d47d2 .elementor-icon-list-text {
  font-size: clamp(10.88px, calc(8px + .4vw), 13.12px) !important;
  line-height: 1.08 !important;
  letter-spacing: .2em !important;
  color: #b0aca0 !important;
  transition: color .2s cubic-bezier(.22, 1, .36, 1);
}
.elementor-1384 .elementor-element-b4d47d2:hover .elementor-icon-list-text { color: #d5bc84 !important; }

/* portrait + line */
.elementor-1384 .elementor-element-27aec97 {
  justify-self: end;
  width: 100% !important;
  max-width: 480px;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
}
.elementor-1384 .elementor-element-af1469d { width: 100% !important; margin: 0 !important; }
.elementor-1384 .elementor-element-af1469d img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
.elementor-1384 .elementor-element-8a784b8 { width: 100% !important; padding: 0 !important; margin: clamp(20px, 3vh, 32px) 0 0 !important; }
.elementor-1384 .elementor-element-8a784b8 .elementor-heading-title {
  text-align: left !important;
  white-space: nowrap;
  font-size: clamp(11.2px, calc(8.32px + .55vw), 15.2px) !important;
  line-height: 1.62 !important;
  letter-spacing: .2em !important;
  color: #b49b62 !important;
}

@media (max-width: 900px) {
  /* links start where the reference's do: gutter + 6.5rem from the top, less the popup's own header */
  .elementor-1384 .elementor-element-42a32f0 { align-items: flex-start; padding-top: 23px !important; }
  .elementor-1384 .elementor-element-42a32f0 > .e-con-inner { grid-template-columns: 1fr; align-items: start; align-content: start; }
  .elementor-1384 .elementor-element-6632adb { align-items: flex-end !important; text-align: right; }
  .elementor-1384 .hover-item .elementor-icon-list-items,
  .elementor-1384 .hover-item .elementor-icon-list-item { justify-content: flex-end !important; text-align: right; }
  .elementor-1384 .elementor-element-b4d47d2 { align-self: flex-end; }
  .elementor-1384 .elementor-element-b4d47d2 .elementor-icon-list-items { justify-content: flex-end !important; }
  .elementor-1384 .elementor-element-27aec97 { max-width: 240px; }
  .elementor-1384 .elementor-element-af1469d img { aspect-ratio: 3 / 2; }
  .elementor-1384 .elementor-element-8a784b8 .elementor-heading-title { text-align: right !important; }
}
@media (max-width: 767px) {
  .elementor-1384 .elementor-element-42a32f0 { padding-top: 52px !important; }
}
@media (max-width: 900px) and (max-height: 720px) {
  .elementor-1384 .elementor-element-af1469d { display: none; }
}