/* ==========================================================================
   Hero carousel — first slide (branding image) on mobile
   --------------------------------------------------------------------------
   Slide 1 uses a landscape branding image (1536x1024) inside a 100dvh
   container with `object-cover`. On a portrait phone the image is scaled to
   fill the height, cropping ~438px from EACH side, which cuts the "MB"
   monogram and the "MOREIRA BRAGA ADVOGADOS" wordmark in half.

   Fix: below 1024px the image is letterboxed (`object-contain`) instead.
   Centred by default, the logo lockup lands on the optical centre of the
   viewport — clear of the fixed header and the bottom CTA.

   The image's edge pixels are #0D101E / #0A0D19 while --color-surface-darker
   is #171B2D, which would leave a visible seam, so the letterbox is painted
   in the image's own tone rather than the theme's.

   Desktop (>=1024px) is untouched and keeps its full-bleed `object-cover`.
   ========================================================================== */

@media (max-width: 1023px) {
  /* The .carousel__branding class on the <img> is the primary hook; the
     attribute selector keeps the fix working if the class is ever dropped.
     Scoped by src so slides 2 and 3 keep their full-bleed cover crop. */
  .carousel__branding,
  img[src*="logo-azul-moreira-braga-advogados"] {
    object-fit: contain;
  }

  .carousel__slide--branding {
    background-color: #0d101e;
  }
}