/* ==========================================================================
   AVRA - mobile corrections

   Every value below is taken from the Figma mobile frame (430px wide, node
   25502:1893). Loaded last so it wins over the component sheets. Body gutter
   is 24px; the header alone sits on a 32px gutter, per the design.
   ========================================================================== */

@media (max-width: 1024px) {

  /* ---- Header: logo left, globe + burger clustered right ------------------ */
  /* space-between across three children pushed the globe to the centre; the
     right-hand pair must travel together with a 28px gap. */
  .avra-header__bar {
    justify-content: flex-start;
    padding-inline: 32px;
    height: 38px;
    margin-top: 32px;
  }
  .avra-header__bar { gap: 0 !important; }
  .elementor-element.avra-header__logo img,
  .avra-header__logo img,
  .avra-header__logo svg { width: 107px !important; height: 38px; }
  .avra-header__right { margin-left: auto; gap: 0; }
  .avra-header__lang,
  .avra-header__lang img,
  .avra-header__lang svg { width: 32px; height: 32px; }
  .avra-header__navwrap { margin-left: 28px; }
  .avra-header__navwrap .elementor-menu-toggle { width: 32px; height: 24px; }
  .avra-header__navwrap .elementor-menu-toggle::before,
  .avra-header__navwrap .elementor-menu-toggle::after { width: 32px; }
  .avra-header__navwrap .elementor-menu-toggle {
    background-size: 32px 2px !important;
    background-position: 0 11px !important;
  }

  /* ---- Featured projects -------------------------------------------------- */
  .avra-projects__badges { top: 8px; left: 8px; gap: 8px; }
  .avra-badge { padding: 7px 12px; }
  .avra-projects__title { font-size: 18px; line-height: 26px; letter-spacing: 1.08px; }
  .avra-projects__excerpt { font-size: 16px; line-height: 26px; letter-spacing: .16px; margin-top: 16px; }
  .avra-projects .avra-arrows { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
  .avra-projects .avra-arrow,
  .avra-projects .avra-arrow svg { width: 44px; height: 44px; }

  /* ---- Testimonials ------------------------------------------------------- */
  /* Figma: rules at y40 and y860 of a 908 section; image 72, mark 386,
     quote 442, author 706, arrows 776. */
  .avra-testimonials__inner {
    padding-block: 31px 40px;
    min-height: 0;
  }
  .avra-testimonials__inner > * { min-height: 0; }
  .avra-testimonials__aside { padding-top: 0; }
  .avra-testimonials__aside img { height: 282px !important; }
  .avra-testimonials__item { padding-top: 0; padding-right: 0; }
  .avra-testimonials__mark,
  .avra-testimonials__mark svg { width: 43px; height: 32px; }
  .avra-testimonials__aside { order: 1; }
  .avra-testimonials__mark { position: static; left: auto; top: auto; order: 2; margin: 32px 0 24px; }
  .avra-testimonials__vp { order: 3; }
  .avra-testimonials__nav { order: 4; }
  .avra-testimonials__quote {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    height: 264px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
  }
  .avra-testimonials__quote p { margin-bottom: 24px; }
  .avra-testimonials__author { margin-top: 0; }
  .avra-testimonials__row { align-items: stretch; }
  .avra-testimonials__nav { position: static; margin-top: 32px; width: 100%; }
  .avra-testimonials__nav .avra-arrows { justify-content: center; gap: 16px; }
  .avra-testimonials .avra-arrow,
  .avra-testimonials .avra-arrow svg { width: 44px; height: 44px; }

  /* ---- News: arrows sit centred below the cards, 48px ---------------------- */
  .avra-news__heading { font-size: 32px; line-height: 36px; letter-spacing: -.64px; max-width: none; }
  .avra-news__lead .avra-arrows { display: none; }
  .avra-news > .avra-arrows {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 40px;
  }
  .avra-news .avra-arrow,
  .avra-news .avra-arrow svg { width: 48px; height: 48px; }
  .avra-news__card { gap: 24px; }

  /* ---- Footer ------------------------------------------------------------- */
  .avra-footer__bottom { margin-top: 44px; }
  .avra-footer__col .elementor-nav-menu--main > ul { gap: 12px; }
}


/* Mobile section rhythm. Matched as GAPS, not absolute offsets: this page is
   dynamic, so a project with fewer features than the Figma sample must not
   inherit dead space. Figma mobile (Villa Magnolia):
     Features 25502:2279 y2365 h660 -> bottom 3025; Location 2343 y3073  = 48
     Location bottom 3385 (map 2347 y3151 h234); Gallery 2350 y3441       = 56
     Gallery h546 -> bottom 3987; Similar 2367 y4027                      = 40 (spsim padding-top)
     CTA 2374 y5825 h550 -> bottom 6375; Footer 2381 y6423                = 48 */
@media (max-width: 1024px) {
  .elementor-element-spright { margin-top: 48px !important; }
  .elementor-element-spgal   { margin-top: 9px !important; }
  .elementor-element-spsim   { margin-top: 0 !important; }
  .elementor-element-spcta   { margin-bottom: 48px; }
}

/* Card anatomy from Figma mobile Entry 25502:2371 (382 x 520):
     image      I..;23323:307  y0   h302
     Locations  I..;23323:308  y326 h194   (gap 24 under the image)
       title 26 + 6 + specs 12   = head 44
       status 16                 (16 above)
       desc  I..;23323:327 h66   = 3 lines x 22 (16 above)
       meta  I..;23323:310 h12   (24 above)
   The image was taking 344 and squeezing the description to 32px, so the
   3-line clamp never applied and the text was cut mid-line. */
@media (max-width: 1024px) {
  .avra-card__figure { height: 302px; flex: 0 0 302px; }
  .avra-card__head { gap: 6px; }
  .avra-card__desc {
    flex: 0 0 auto;
    height: 66px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .avra-card__meta { margin-top: 8px; }
}

/* Figma mobile: footer 25502:2381 starts at 6423 and the logo 25502:2407 sits
   at 6423 too - flush with the footer top, no padding above it. */
@media (max-width: 1024px) {
  .avra-footer__main { padding-top: 0; }
}