/* ==========================================================================
   Eloise — post-export adjustments
   ==========================================================================
   css/eloise-2026.webflow.css is the source of truth and is never edited.
   Anything that has to change after the Webflow export lives in this file,
   which loads immediately after it, so the original stays byte-identical.
   Every rule below notes what it overrides and why.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Project / press thumbnails — let the image shrink inside its flex column
   --------------------------------------------------------------------------
   .thumb-project / .press-link are flex columns holding [image, .datos-project]
   inside a box of fixed height, with justify-content: space-between so the
   PROJECT / YEAR row sits at the bottom.

   The image carries height: 100%, and a flex item's default min-height: auto
   refuses to shrink it below its intrinsic height (the thumbnails are
   571x718). The image therefore claimed the entire box and pushed the label
   row past the bottom edge. On desktop the surrounding section has slack so
   it went unnoticed; on mobile .single-scroll-responsive is exactly 100vh, so
   PROJECT / YEAR fell off the screen.

   min-height: 0 lets flexbox do what the layout was always asking for.
   -------------------------------------------------------------------------- */
.img-project,
.image-press {
  min-height: 0;
}


/* --------------------------------------------------------------------------
   2. Cookie notice — modal and type 20% smaller
   --------------------------------------------------------------------------
   Overrides .content-cookies / .p-cookies / .link-cookies / .btns-cookies.
   Each value is exactly 80% of the exported one.
   -------------------------------------------------------------------------- */
.content-cookies {
  width: 42.4%;                      /* was 53%                 */
  padding: 3.68rem 1.6rem 2.88rem;   /* was 4.6rem 2rem 3.6rem  */
}

.p-cookies {
  font-size: 1.04rem;                /* was 1.3rem              */
}

.btns-cookies {
  margin-top: 2.88rem;               /* was 3.6rem              */
}

.link-cookies {
  font-size: 1.04rem;                /* was 1.3rem              */
}

/* The "click here to find out more" words inside the notice copy. */
.p-cookies .link-cookies-more {
  color: inherit;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. About — portrait photo beside the copy
   --------------------------------------------------------------------------
   The export centres a 66vh row holding a 55% landscape slideshow and a 42.5%
   text column. The client's layout runs a portrait photo (9:16) down the left,
   from under the header to the bottom of the screen, with the copy filling the
   width beside it.

   The photo box takes its HEIGHT from the section and derives its width from
   `aspect-ratio`, never the other way round, so it cannot overflow a short
   screen; and because the box then has the same shape as the photo, the
   `object-fit: cover` on .img-slider has nothing left to crop. `max-width`
   only bites on unusually tall, narrow windows, where cropping beats
   overflowing.

   Both blocks are inside media queries on purpose: this file loads after the
   export, so an unqualified rule here would also override the export's phone
   rules, which live in a `max-width: 479px` block.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .section-content-about {
    align-items: stretch;           /* was center: the row fills the section */
    padding-top: 13.85rem;          /* the 9.25rem header plus a gutter      */
  }

  .content-about {
    height: auto;                   /* was 66vh — the section sets it now    */
  }

  .slideshow-about {
    flex: 0 0 auto;
    width: auto;                    /* was 55%                               */
    max-width: 32%;
    aspect-ratio: 1125 / 2000;      /* images/about_2.jpg                    */
  }

  /* Takes whatever the photo leaves, so the gap between the two stays the
     1.8% the layout shows instead of growing with the window. */
  .col-b-about {
    flex: 1 1 auto;
    width: auto;                    /* was 42.5%                             */
    margin-left: 1.8%;
    top: 0;                         /* was -.3rem                            */
  }
}


/* --------------------------------------------------------------------------
   6. About stacked — tablets and phones
   --------------------------------------------------------------------------
   A portrait photo beside a paragraph needs width the small screens do not
   have, so the photo goes on top, at its own shape, and the copy runs the full
   width underneath. The export letterboxes it into 35svh and squeezes the copy
   into a 54% column, which on a portrait photo leaves a band across the middle
   and a very narrow text column.

   The section grows past 100vh when photo and copy together need it, instead
   of the copy spilling out of a fixed-height box.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .section-content-about {
    align-items: flex-start;
    height: auto;                   /* was 100vh                             */
    min-height: 100vh;
    padding-top: 13.85rem;          /* the 9.25rem header plus a gutter      */
  }

  .content-about {
    height: auto;                   /* was 66vh                              */
    display: block;
  }

  .slideshow-about {
    width: auto;                    /* was 55% / 100% on phones              */
    height: 60svh;                  /* was 100% / 35svh on phones            */
    aspect-ratio: 1125 / 2000;
    margin-left: auto;
    margin-right: auto;
  }

  .col-b-about {
    width: 100%;                    /* was 42.5%                             */
    padding-top: 4svh;              /* was 12svh on phones                   */
    top: 0;
  }

  /* .p-about is shared with the press detail, so only About's copy changes. */
  .section-content-about .p-about {
    width: 100%;                    /* was 54% on phones                     */
  }
}


@media screen and (max-width: 479px) {
  /* ------------------------------------------------------------------------
     3. Projects on mobile — bring PROJECT / YEAR back on screen
     ------------------------------------------------------------------------
     .single-scroll-responsive is height: 100vh, and on phones 100vh means the
     viewport WITHOUT the browser chrome. The address bar therefore covers the
     last 60-100px of the section — exactly where the label row sits, flush
     against the bottom of the box. The photo read as "too long" and
     PROJECT / YEAR were never reachable.

     svh is the visible height, and this breakpoint already uses it everywhere
     else (15.5svh, 35svh, 54.5svh), so switching these two to svh matches the
     designer's own approach. Browsers without svh simply keep the 100vh they
     use today. The extra padding-bottom then lifts the labels clear of the
     bottom edge instead of leaving them flush against it.
     ------------------------------------------------------------------------ */
  .snap-scroll-container {
    height: 100svh;
  }

  .single-scroll-responsive {
    height: 100svh;
    padding-bottom: 3svh;
  }

  /* 4. Cookie notice, 20% smaller on mobile too. */
  .content-cookies {
    width: 80%;                      /* was 100%                */
    padding: .96rem .8rem;           /* was 1.2rem 1rem         */
  }

  .p-cookies {
    font-size: .4rem;                /* was .5rem               */
  }

  .btns-cookies {
    margin-top: .48rem;              /* was .6rem               */
  }

  .link-cookies {
    font-size: .4rem;                /* was .5rem               */
  }

  /* 7. About on phones — the header is taller here, so keep the export's
     own top padding instead of the 13.85rem used from tablet up. */
  .section-content-about {
    padding-top: 9.5rem;
  }
}