/* =========================================================================
   Etéra Work — Layout
   Container, grid de colunas e mídia responsiva.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Container
   mobile: 100% com 16px de padding  ($column-grid-sm)
   lg:     1120px, sem padding       ($column-grid-lg)
   xl:     1440px, sem padding       ($column-grid-xl)
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* -------------------------------------------------------------------------
   Grid de colunas
   mobile: 4 colunas, gap 16px
   lg/xl:  12 colunas, gap 32px
   ------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }

@media (min-width: 1366px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

@media (min-width: 1920px) {
  .col-xl-1  { grid-column: span 1; }
  .col-xl-2  { grid-column: span 2; }
  .col-xl-3  { grid-column: span 3; }
  .col-xl-4  { grid-column: span 4; }
  .col-xl-5  { grid-column: span 5; }
  .col-xl-6  { grid-column: span 6; }
  .col-xl-7  { grid-column: span 7; }
  .col-xl-8  { grid-column: span 8; }
  .col-xl-9  { grid-column: span 9; }
  .col-xl-10 { grid-column: span 10; }
  .col-xl-11 { grid-column: span 11; }
  .col-xl-12 { grid-column: span 12; }
}

/* =========================================================================
   Mídia responsiva

   Vários assets do handoff mudam de proporção entre breakpoints (art
   direction), então cada família tem seu próprio aspect-ratio por
   breakpoint. Usar sempre <picture> com as três variações:

   <figure class="media media--hero">
     <picture>
       <source
         media="(min-width: 1920px)"
         srcset="assets/img/img-hero-xl.jpg 1x, assets/img/img-hero-xl@2x.jpg 2x">
       <source
         media="(min-width: 1366px)"
         srcset="assets/img/img-hero-lg.jpg 1x, assets/img/img-hero-lg@2x.jpg 2x">
       <img
         src="assets/img/img-hero.jpg"
         srcset="assets/img/img-hero.jpg 1x, assets/img/img-hero@2x.jpg 2x"
         width="360" height="698"
         alt="Descrição da imagem"
         decoding="async">
     </picture>
   </figure>

   width/height sempre presentes (reserva de espaço, evita CLS).
   loading="lazy" em tudo abaixo da dobra; nunca no LCP.
   ========================================================================= */

.media {
  display: block;
  width: 100%;
  overflow: hidden;
}

.media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media--contain img {
  object-fit: contain;
}

/* --- img-hero -----------------------------------------------------------
   No mobile o bloco da imagem tem 360x581 no Figma, e não 360x698 como o
   arquivo exportado. Vale a caixa do design; o excesso do arquivo é cortado
   pelo object-fit.
   ------------------------------------------------------------------------ */
.media--hero { aspect-ratio: 360 / 581; }

@media (min-width: 1366px) { .media--hero { aspect-ratio: 1366 / 698; } }
@media (min-width: 1920px) { .media--hero { aspect-ratio: 1920 / 698; } }

/* --- bg-loc ------------------------------------------------------------- */
.media--bg-loc { aspect-ratio: 360 / 765; }

@media (min-width: 1366px) { .media--bg-loc { aspect-ratio: 1366 / 595; } }
@media (min-width: 1920px) { .media--bg-loc { aspect-ratio: 1920 / 595; } }

/* --- bg-complex-home / -stay / -udi -------------------------------------- */
.media--bg-complex { aspect-ratio: 328 / 488; }

@media (min-width: 1366px) { .media--bg-complex { aspect-ratio: 672 / 480; } }
@media (min-width: 1920px) { .media--bg-complex { aspect-ratio: 944 / 674; } }

/* --- img-gallery-1..4 ---------------------------------------------------- */
.media--gallery { aspect-ratio: 328 / 184; }

@media (min-width: 1366px) { .media--gallery { aspect-ratio: 736 / 414; } }
@media (min-width: 1920px) { .media--gallery { aspect-ratio: 1034 / 582; } }

/* --- img-imp-1-sub / -3-sub / -terreo ------------------------------------ */
.media--imp { aspect-ratio: 327 / 147; }

@media (min-width: 1366px) { .media--imp { aspect-ratio: 1120 / 502; } }
@media (min-width: 1920px) { .media--imp { aspect-ratio: 1574 / 706; } }

/* --- img-loc ------------------------------------------------------------- */
.media--loc { aspect-ratio: 328 / 223; }

@media (min-width: 1366px) { .media--loc { aspect-ratio: 640 / 435; } }
@media (min-width: 1920px) { .media--loc { aspect-ratio: 900 / 611; } }

/* --- img-project --------------------------------------------------------- */
.media--project { aspect-ratio: 328 / 218; }

@media (min-width: 1366px) { .media--project { aspect-ratio: 544 / 362; } }
@media (min-width: 1920px) { .media--project { aspect-ratio: 765 / 509; } }

/* --- img-placeholder ----------------------------------------------------- */
.media--placeholder { aspect-ratio: 328 / 246; }

@media (min-width: 1366px) { .media--placeholder { aspect-ratio: 618 / 464; } }
@media (min-width: 1920px) { .media--placeholder { aspect-ratio: 901 / 676; } }