/* ==========================================================================
   AVRA - homepage section components (part 2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Featured projects carousel
   Desktop: 1104x650 slides, 48px gutter, centre-peek both sides.
   -------------------------------------------------------------------------- */

.avra-projects { width: 100%; }
.avra-projects__vp {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.avra-projects__vp::-webkit-scrollbar { display: none; }
.avra-projects__track {
  display: flex;
  gap: 48px;
  width: max-content;
  padding-inline: calc((100% - 1104px) / 2);
}
.avra-projects__slide {
  flex: 0 0 1104px;
  width: 1104px;
  scroll-snap-align: center;
  text-decoration: none;
  display: block;
  color: inherit;
}
.avra-projects__figure {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
.avra-projects__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.avra-projects__slide:hover .avra-projects__figure img { transform: scale(1.03); }
.avra-projects__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.avra-badge {
  font-family: var(--avra-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 11px 16px;
  background: #fff;
  color: var(--avra-grey);
  white-space: nowrap;
}
.avra-badge.is-accent { background: var(--avra-accent); color: #fff; }

.avra-projects__body { display: flex; gap: 48px; margin-top: 32px; }
.avra-projects__title {
  flex: 0 0 384px;
  width: 384px;
  margin: 0;
  font-family: var(--avra-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--avra-black);
  opacity: .8;
}
.avra-projects__excerpt {
  flex: 0 0 672px;
  width: 672px;
  margin: 0;
  font-family: var(--avra-body);
  font-size: 16px;
  font-weight: 350;
  line-height: 26px;
  letter-spacing: .16px;
  color: var(--avra-grey);
}
.avra-projects .avra-arrows { display: none; }

@media (hover: hover) and (pointer: fine) {
  .avra-projects__vp { cursor: grab; }
}
.avra-projects__vp.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.avra-projects__vp.is-dragging * { user-select: none; }
.avra-projects__vp.is-dragging img { pointer-events: none; }

@media (max-width: 1024px) {
  .avra-projects__track { gap: 24px; padding-inline: var(--avra-gutter); }
  .avra-projects__slide { flex: 0 0 calc(100vw - (var(--avra-gutter) * 2)); width: calc(100vw - (var(--avra-gutter) * 2)); }
  .avra-projects__figure { height: 278px; }
  .avra-projects__body { flex-direction: column; gap: 0; margin-top: 24px; }
  .avra-projects__title { flex: none; width: 100%; line-height: 26px; }
  .avra-projects__excerpt { flex: none; width: 100%; margin-top: 16px; }
  .avra-projects .avra-arrows { display: flex; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   Development sector cards
   -------------------------------------------------------------------------- */

.avra-sectors { display: flex; gap: 48px; width: 100%; }
.avra-sectors__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.avra-sectors__figure { width: 100%; height: 490px; overflow: hidden; }
.avra-sectors__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.avra-sectors__card:hover .avra-sectors__figure img { transform: scale(1.04); }
.avra-sectors__meta { display: flex; flex-direction: column; gap: 16px; }
.avra-sectors__head { display: flex; flex-direction: column; gap: 4px; }
.avra-sectors__title {
  margin: 0;
  font-family: var(--avra-display);
  font-size: 20px;
  font-weight: 350;
  line-height: 30px;
  color: var(--avra-umbra);
}
.avra-sectors__count {
  margin: 0;
  font-family: var(--avra-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .56px;
  text-transform: uppercase;
  color: var(--avra-accent);
}
.avra-sectors__text {
  margin: 0;
  font-family: var(--avra-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .18px;
  color: var(--avra-grey);
}

@media (max-width: 1024px) {
  .avra-sectors { flex-direction: column; gap: 48px; }
  .avra-sectors__figure { height: 400px; }
}

/* Divider row: rule - label - rule */
.avra-divider-row { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.avra-divider-row__rule { flex: 1 1 0; min-width: 1px; height: 1px; background: var(--avra-rule); }
.avra-divider-row__label {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--avra-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: var(--avra-umbra);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .avra-divider-row { gap: 16px; }
  .avra-divider-row__label { white-space: normal; text-align: center; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.avra-cta { position: relative; overflow: hidden; }
.avra-cta__media { position: absolute; inset: 0; z-index: 0; }
.avra-cta__media img,
.avra-cta__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.avra-cta__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .24); pointer-events: none; }
.avra-cta__inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Hero + About layout offsets (Figma 1920 grid)
   -------------------------------------------------------------------------- */

/* Keep Elementor's gradient scrim above a background video (see G4). */
.avra-hero > .elementor-background-video-container { z-index: 0; }
.avra-hero > .elementor-background-overlay { z-index: 1; }
.avra-hero > .e-con-inner,
.avra-hero > .elementor-element { position: relative; z-index: 2; }

.avra-hero h1 { margin: 0; }
.avra-hero .elementor-widget-text-editor p { margin: 0; }

/* About: 288 | 144 | 528 | 192 | 528 across the 1680 content width. */
.avra-about__row > .elementor-element-abcolA { width: 17.143%; margin-top: 222px; }
.avra-about__row > .elementor-element-abcolB { width: 31.429%; margin-left: 8.571%; margin-top: 32px; }
.avra-about__row > .elementor-element-abcolC { width: 31.429%; margin-left: 11.429%; margin-top: 0; }

.avra-about .elementor-widget-text-editor p { margin: 0 0 28px; }
.avra-about .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.avra-about h2 { margin: 0; text-transform: capitalize; }
.avra-about .elementor-divider { padding: 0 !important; }
.avra-about .elementor-widget-divider { line-height: 0; }

@media (max-width: 1024px) {
  .avra-about__row > .elementor-element-abcolA,
  .avra-about__row > .elementor-element-abcolB,
  .avra-about__row > .elementor-element-abcolC {
    width: 100%;
    margin-left: 0;
  }
  .avra-about__row > .elementor-element-abcolA { margin-top: 0; order: 1; }
  .avra-about__row > .elementor-element-abcolB { margin-top: 40px; order: 2; }
  .avra-about__row > .elementor-element-abcolC { margin-top: 40px; order: 3; }
}
/* About image crops (Figma 288x354 and 528x650) */
.elementor-element-abimg2 img { width: 100%; height: auto; aspect-ratio: 288 / 354; object-fit: cover; display: block; }
.elementor-element-abimg1 img { width: 100%; height: auto; aspect-ratio: 528 / 650; object-fit: cover; display: block; }

/* mobile crops */
@media (max-width: 1024px) {
  .elementor-element-abimg2 img { aspect-ratio: 382 / 320; }
  .elementor-element-abimg1 img { aspect-ratio: 382 / 470; }
  .avra-about__row > .elementor-element-abcolC { margin-top: 64px; }
}

/* mobile heights - the widget emits a desktop-scoped height, so override here */
@media (max-width: 1024px) {
  .avra-sectors__figure { height: 400px !important; }
  .avra-projects__figure { height: 278px !important; }
  .avra-news__figure { height: 280px !important; }
  .avra-testimonials__aside img { height: 282px !important; }
}