/* ==========================================================================
   AVRA - single project page
   Values from the Figma frame (desktop 1920 / mobile 430).
   ========================================================================== */

/* ---- Shared section label: hairline + small uppercase caption ------------- */

.avra-seclabel { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.avra-seclabel__rule { display: block; height: 1px; width: 100%; background: var(--avra-rule); }
.avra-seclabel__text {
  font-family: var(--avra-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .84px;
  text-transform: uppercase;
  color: var(--avra-seclabel-color, var(--avra-umbra));
  opacity: var(--avra-seclabel-opacity, .7);
  font-feature-settings: "salt" 1;
}

/* ---- Hero ---------------------------------------------------------------- */

.avra-phero { position: relative; height: 100%; min-height: 750px; }
.avra-phero__text { position: absolute; left: 0; bottom: 64px; width: 620px; }
.avra-phero__sector {
  margin: 0;
  font-family: var(--avra-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: #E4CDB5;
  opacity: .8;
  font-feature-settings: "salt" 1;
}
.avra-phero__title {
  margin: 16px 0 0;
  font-family: var(--avra-display);
  font-size: 56px;
  font-weight: 350;
  line-height: 64px;
  letter-spacing: -.56px;
  text-transform: uppercase;
  color: #fff;
}
.avra-phero__intro {
  margin: 8px 0 0;
  font-family: var(--avra-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: .18px;
  color: #fff;
  font-feature-settings: "ss01" 1;
}

.avra-phero__actions { position: absolute; right: 0; bottom: 64px; display: flex; align-items: center; gap: 8px; }
.avra-pact,
.avra-pact:hover,
.avra-pact:focus,
.avra-pact:active {
  background: #fff;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--avra-umbra);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease;
}
.avra-pact--icon { width: 48px; height: 48px; padding: 12px; }
.avra-pact--icon svg { width: 24px; height: 24px; display: block; }
.avra-pact--tile { width: 48px; height: 48px; padding: 0; background: none; }
.avra-pact--tile svg { width: 48px; height: 48px; display: block; }
.avra-pact--text {
  padding: 12px 24px;
  font-family: var(--avra-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .64px;
  text-transform: uppercase;
}
.avra-hover .avra-pact--icon:hover,
.avra-hover .avra-pact--text:hover { background: var(--avra-dust); }
.avra-pact:focus-visible { outline: 2px solid var(--avra-accent); outline-offset: 3px; }

/* ---- Details sidebar ----------------------------------------------------- */

.avra-pdetails { display: flex; flex-direction: column; gap: 40px; }
.avra-pdetails__list { display: flex; flex-direction: column; gap: 24px; }
.avra-pdetails__row { display: flex; align-items: center; gap: 16px; }
.avra-pdetails__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: rgba(247, 240, 233, .6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avra-pdetails__icon svg {
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
  display: block;
  overflow: visible;
}
.avra-pdetails__pair { display: flex; flex-direction: column; justify-content: space-between; min-height: 40px; flex: 1 1 auto; min-width: 0; }
.avra-pdetails__label {
  font-family: var(--avra-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .48px;
  text-transform: uppercase;
  color: var(--avra-grey);
  opacity: .7;
  font-feature-settings: "salt" 1;
}
.avra-pdetails__value {
  font-family: var(--avra-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .16px;
  color: var(--avra-grey);
  font-feature-settings: "ss01" 1;
}
.avra-pdetails__value sup { font-size: .62em; vertical-align: super; line-height: 0; }

/* ---- Description --------------------------------------------------------- */

.avra-pbody { display: flex; flex-direction: column; }
.avra-pbody__title {
  margin: 47px 0 0;
  font-family: var(--avra-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -.84px;
  color: var(--avra-umbra);
  font-feature-settings: "ss12" 1, "ss01" 1;
}
.avra-pbody__lead {
  margin: 4px 0 0;
  font-family: var(--avra-display);
  font-size: 22px;
  font-weight: 350;
  line-height: 32px;
  letter-spacing: .22px;
  color: var(--avra-accent);
  font-feature-settings: "ss01" 1, "ss06" 1;
}
.avra-pbody__text {
  margin-top: 33px;
  font-family: var(--avra-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: .18px;
  color: var(--avra-grey);
  font-feature-settings: "ss01" 1;
}
.avra-pbody__text p { margin: 0 0 28px; }
.avra-pbody__text p:last-child { margin-bottom: 0; }

/* ---- Location ------------------------------------------------------------ */

.avra-plocation { display: flex; flex-direction: column; gap: 47px; }
.avra-plocation__map { position: relative; width: 100%; height: 250px; overflow: hidden; }
.avra-plocation__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(.9); }
.avra-plocation__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avra-plocation__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--avra-accent);
  color: #fff;
  padding: 6px 14px;
  font-family: var(--avra-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .28px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease;
}
.avra-hover .avra-plocation__btn:hover { background: #8f6a41; color: #fff; }

/* ---- Features ------------------------------------------------------------ */

.avra-pfeatures {
  max-width: 936px;
  background: rgba(228, 205, 181, .1);
  border-top: 2px solid var(--avra-sand);
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.avra-pfeatures__title {
  margin: 0;
  font-family: var(--avra-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: .64px;
  text-transform: uppercase;
  color: var(--avra-accent);
  font-feature-settings: "salt" 1;
}
.avra-pfeatures__cols { display: flex; gap: 32px; align-items: flex-start; }
.avra-pfeatures__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.avra-pfeatures__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--avra-body);
  font-size: 16px;
  font-weight: 350;
  line-height: 26px;
  letter-spacing: .16px;
  color: var(--avra-grey);
  font-feature-settings: "ss01" 1;
}
.avra-pfeatures__dot { flex: 0 0 4px; width: 4px; height: 4px; background: var(--avra-accent); }

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .avra-phero { min-height: 650px; }
  .avra-phero__text { width: 100%; bottom: 120px; }
  .avra-phero__title { font-size: 40px; line-height: 56px; letter-spacing: -1.2px; font-weight: 400; }
  .avra-phero__intro { font-size: 18px; line-height: 28px; }
  .avra-phero__sector { color: var(--avra-sand); opacity: 1; }
  .avra-phero__actions { bottom: 40px; right: auto; left: 0; flex-wrap: wrap; }
  /* 10 spec rows cannot fit Figma's 398px band in one column - it is a 2-up grid */
  .avra-pdetails__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .avra-pdetails__icon { flex: 0 0 32px; width: 32px; height: 32px; }
  .avra-pdetails__icon svg { max-width: 20px; max-height: 20px; }
  .avra-pdetails__pair { min-height: 32px; }
  .avra-pdetails__value { font-size: 16px; line-height: 22px; }
  .avra-phero__actions { flex-wrap: nowrap; width: 100%; gap: 8px; }
  .avra-pact--text { font-size: 16px; letter-spacing: .64px; flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .avra-pact--icon, .avra-pact--tile { flex: 0 0 48px; }

  .avra-pbody__title { margin-top: 47px; font-size: 40px; line-height: 48px; letter-spacing: -.6px; }
  .avra-pbody__lead { margin-top: 4px; font-size: 22px; line-height: 32px; }
  .avra-pbody__text { margin-top: 33px; font-size: 16px; line-height: 26px; }
  .avra-pbody__text p { margin-bottom: 24px; }

  .avra-pdetails { gap: 32px; }
  .avra-plocation { gap: 32px; }
  .avra-pfeatures__cols { flex-direction: column; gap: 4px; }

}

@media (max-width: 1024px) {
  /* mobile hero rhythm */
  /* Figma: sector 306, title 346, intro 418 - 24 and 16 gaps, bottom-anchored */
  .avra-phero__title { margin-top: 24px; }
  .avra-phero__intro { margin-top: 16px; }
}

/* action states */
/* Figma has every action tile on bg-white - no accent state. Saved is shown
   by inking the star itself, not by inverting the tile. */
.avra-pact.is-saved svg path { fill: var(--avra-accent); stroke: none; }
.avra-pact.is-flashing { background: var(--avra-dust); }
.avra-pact--text { white-space: nowrap; }
@media print {
  .avra-phero__actions, .elementor-location-header, .elementor-location-footer,
  .avra-pgallery__nav, .avra-simsec, .avra-cta { display: none !important; }
}

.avra-simlab .elementor-heading-title { opacity: .7; font-feature-settings: "salt" 1; }

/* Share: label on desktop, Share_Android glyph on mobile (Figma 25502:2149). */
.avra-pact--share {
  padding: 12px 24px;
  font-family: var(--avra-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .64px;
  text-transform: uppercase;
}
.avra-pact--share .avra-pact__glyph { display: none; }
.avra-pact--share svg { width: 20px; height: 20px; display: block; }

@media (max-width: 1024px) {
  .avra-pact--share {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 14px;
  }
  .avra-pact--share .avra-pact__label { display: none; }
  .avra-pact--share .avra-pact__glyph { display: inline-flex; }
  /* Download PDF carries px20 on mobile */
  .avra-pact--text { padding: 12px 20px; }
}

/* ---- MOBILE FIGMA CORRECTIONS (measured against 430px frame) ------------- */
@media (max-width: 1024px) {
  /* Figma 25502:2279 - flat 24 padding, and a 48px gap above the block
     (body frame 25502:2270 ends 2317, Features starts 2365). */
  .avra-pfeatures { margin-top: 48px; padding: 24px; }

  /* Figma 25502:2277 - Basel Classic Book 20/28 ls .2.
     22/32 is the DESKTOP value (25502:1361) and was applied here by mistake. */
  .avra-pbody__lead { font-size: 20px; line-height: 28px; letter-spacing: .2px; }

  /* Figma 25502:2278 - ls .16 on mobile; .18 is desktop (25502:1360). */
  .avra-pbody__text { letter-spacing: .16px; }


  /* CTA mobile typography lives on the Elementor heading widget (spctahead),
     because per-widget typography outranks this stylesheet. */
}

/* ---- Saved projects ------------------------------------------------------- */
.avra-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.avra-saved svg { width: 24px; height: 24px; display: block; }
.avra-saved svg path { fill: currentColor; stroke: none; }
.avra-saved__count {
  font-family: var(--avra-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .48px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--avra-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avra-pact { position: relative; }
.avra-note {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: #201F1E;
  color: #fff;
  font-family: var(--avra-body);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .12px;
  padding: 6px 10px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease;
  z-index: 5;
}
.avra-note.is-out { opacity: 0; }
.avra-saved__empty {
  margin: 0;
  font-family: var(--avra-body);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .16px;
  color: var(--avra-grey);
}

/* Laptop band (1025-1919): the desktop row is fixed at 120 gutter + 240 details
   + 48 + 960 body + 48 + 384 location + 120 = 1920. Below the design width those
   fixed columns overflow. The centre column is the one that should absorb it. */
@media (min-width: 1025px) and (max-width: 1919px) {
  .elementor-element-spmid {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
  }
  .elementor-element-spmid > .e-con { width: 100% !important; max-width: 100%; min-width: 0; }
  .avra-pgallery__track { padding-inline: 120px; }
}

/* header saved star: the globe next to it is 32px white, so match both */
.avra-header .avra-saved { gap: 6px; align-items: center; }
.avra-header .avra-saved svg { width: 24px; height: 24px; }
@media (max-width: 1024px) {
  .avra-header .avra-saved svg { width: 32px; height: 32px; }
}
.avra-header .avra-saved svg path { fill: #fff !important; stroke: none !important; }

/* Header saved control: the count badge sat inline, making the block 56px wide
   against 32px neighbours and leaving no gap after the globe. The badge now
   overlays the star, so the control is exactly icon-sized and the row spaces
   evenly. Figma mobile 25502:2135 puts globe and menu 28px apart. */
.avra-header .avra-saved {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 24px;
  height: 24px;
}
.avra-header .avra-saved__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 8px;
}
@media (max-width: 1024px) {
  .avra-header .avra-saved { width: 32px; height: 32px; }
  .avra-header__right { display: flex !important; align-items: center; gap: 28px !important; }
  .avra-header__right > * { margin-right: 0 !important; }
}

/* A class-level `display` beats the UA's [hidden] { display: none }, so the
   saved control kept rendering (with a '0' badge) when nothing is saved. */
.avra-header .avra-saved[hidden] { display: none !important; }

/* The star is a filled outline and reads heavier than the stroked globe beside
   it; 21px inside the 24px box matches them optically. */
.avra-header .avra-saved svg { width: 21px; height: 21px; }
@media (max-width: 1024px) {
  .avra-header .avra-saved svg { width: 28px; height: 28px; }
}