/* ===================================
   Mi Trabajo - covers and masonry galleries
   ===================================

   Replaces portfolio-gallery.css. The layout follows the erikalmas.com
   reference Diana picked: the photographs carry the page and everything else
   gets out of the way. Both places below sit on white, unlike the hero, About
   and Contact, which stayed on the near-black Diana chose to keep.

   This file now covers two places, because "Mi Trabajo" is no longer one
   scrolling wall:

     - the cover grid on the home page (.gallery-covers), two photos per
       category on a white ground, each a link into that category's own page;
     - the category pages themselves (deportes.html and friends), which are
       where the full masonry now lives.

   What changed from the old grid, and why:

     - Natural aspect ratios. The old grid used the pre-cropped thumbnails
       (300x300, 600x300, 300x600 - the template's mosaic units), so every
       photo was forced into one of three cell shapes. These sections use the
       "-full" files instead, which keep each photo's real proportions
       (measured range: 0.56 to 1.79). Nothing is cropped to fit the layout.

     - CSS multi-column instead of CSS Grid. Grid needs to know each cell's
       span up front, which is what forced the fixed shapes. Columns just flow
       items of any height, which is the whole point here. The tradeoff is
       reading order: columns fill top-to-bottom, so item 2 sits below item 1
       rather than beside it. That matches how the reference's own galleries
       are laid out (measured: 3 columns, ~607px wide, ~25px gutters at 1920).

     - No filter pills, no hover scrims, no captions, no "Ver mas" gate. Each
       category has its own page now, so filtering has nothing left to do.

     - No accent colour. The reference carries none at all; the purple that
       used to run through this section is gone rather than restyled.

   Widths and heights are set on every <img> in the markup so each column
   reserves the right height before the photo arrives - without them a
   lazy-loaded masonry reflows continuously as you scroll.
====================================== */

/* White, matching the reference's own ground (measured: rgb(255,255,255)) -
   and only here. The hero above and the About and Contact sections below stay
   on the near-black Diana chose to keep, so this section reads as a lightbox
   cut into the middle of the page.

   No section heading at all any more, the way the reference has none. The nav
   still links to #portfolio, which lands on the section box itself rather than
   on a title. */
#portfolio {
    background-color: #ffffff;
    padding: 96px 0 104px;
    /* anchor for the absolutely-positioned chevron below, same as #about-us */
    position: relative;
}

/* Same scroll cue as the hero and About (shape and position shared in
   hero-fullbleed.css), but this section sits on white rather than their
   near-black, so the light-on-dark glyph is invisible here - dark-on-white
   instead, matching the rest of this section's ink colour (#16171a). */
.portfolio-scroll::after {
    border-right-color: rgba(22, 23, 26, .55);
    border-bottom-color: rgba(22, 23, 26, .55);
}

.portfolio-scroll:focus-visible {
    outline-color: rgba(22, 23, 26, .55);
}

/* ===================================
   The masonry

   Edge-to-edge with a 25px inset, matching the reference's own outer margin.
   Column count steps down rather than letting columns get narrow: a photo
   below ~300px wide stops being a photograph and starts being a thumbnail.
====================================== */

.gallery-masonry {
    padding: 0 25px;
    column-count: 3;
    column-gap: 25px;
}

.gallery-item {
    /* Multi-column will happily slice an element across a column boundary;
       break-inside is what keeps each photo whole. margin-bottom has to match
       column-gap so vertical and horizontal rhythm agree. */
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 25px;
    display: block;
}

.gallery-link {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #ececee;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .45s ease;
}

/* The only hover state left. The old grid darkened the photo and slid a
   caption up over it; this just lifts the image slightly out of the page,
   which is as much as the reference does. */
.gallery-link:hover img,
.gallery-link:focus-visible img {
    opacity: .78;
}

.gallery-link:focus-visible {
    outline: 1px solid #16171a;
    outline-offset: 3px;
}

/* ===================================
   Responsive

   Breakpoints are chosen so the column width stays in the 300-620px band at
   every step, which is where these sources (max 875px on the long edge) still
   look like photographs rather than crops or blowups.
====================================== */

@media (max-width: 1199px) {
    .gallery-masonry {
        column-count: 2;
    }
}

@media (max-width: 767px) {
    #portfolio {
        padding: 72px 0 78px;
    }

    .gallery-masonry {
        column-count: 1;
        column-gap: 0;
        padding: 0 16px;
    }

    .gallery-item {
        margin-bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item img {
        transition: none;
    }
}

/* ===================================
   Cover grid - home page

   Two photos per category, eight tiles over four galleries, both tiles in a
   pair linking to the same page.

   It started as one cover each in a uniform 2x2 grid, which read as four big
   slabs rather than as a gallery index. Eight tiles at natural proportions in
   three columns is much closer to the reference, whose own overview page is a
   3-column masonry (measured: ~607px columns, ~25px gutters, heights ranging
   321-622px). The pairs are deliberately one landscape and one portrait each,
   because that height variation is most of what makes that layout read.

   So unlike the previous version, nothing here is cropped either - the covers
   use the same natural-ratio treatment as the galleries they link into.

   The label sits under its photo rather than over it. Text over an image
   needs a scrim to stay legible, and scrims are exactly what came out of
   this section.
====================================== */

/* Desktop: CSS Grid, placed by coordinate.
   Grid ignores DOM order, which is the whole reason it is used here - the four
   figures are written in the order the NARROW masonry needs (see index.html),
   and grid can still put the two landscapes together in column one.

       col1        col2        col3
     +-------+   +-------+   +-------+
     |  land |   |       |   | port  |
     +-------+   | port  |   | short |
     +-------+   | tall  |   +-------+
     |  land |   |       |
     +-------+   +-------+

   align-items: start keeps every photo at its natural height instead of
   stretching it to fill the row - the difference in proportion between the two
   portraits is the point, so nothing may normalise it. */
.gallery-covers {
    padding: 0 25px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: start;
}

.gallery-covers > .gallery-cover--landscape:first-child { grid-column: 1; grid-row: 1; }
.gallery-covers > .gallery-cover--landscape:last-child  { grid-column: 1; grid-row: 2; }
.gallery-covers > .gallery-cover--portrait-tall         { grid-column: 2; grid-row: 1 / span 2; }
.gallery-covers > .gallery-cover--portrait-short        { grid-column: 3; grid-row: 1 / span 2; }

.gallery-cover {
    break-inside: avoid;
    page-break-inside: avoid;
    /* No margin: the grid and the multi-column layout below both supply their
       own spacing (gap / column-gap), and a margin here would double it. The
       narrow layout re-adds a bottom margin because column-gap only separates
       columns, never the items stacked inside one. */
    margin: 0;
    display: block;
}

.gallery-cover-link {
    display: block;
    text-decoration: none;
}

.gallery-cover-frame {
    /* A <span>, so display needs saying explicitly - an inline box has no
       height and collapses the tile to nothing. It is a span rather than a div
       because it lives inside the <a> alongside the label. */
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #ececee;
}

.gallery-cover-frame img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s ease, opacity .45s ease;
}

.gallery-cover-link:hover .gallery-cover-frame img,
.gallery-cover-link:focus-visible .gallery-cover-frame img {
    transform: scale(1.04);
    opacity: .85;
}

/* Dark on the white ground. Same size and tracking as the nav, which is the
   only other type at this scale on the page. */
.gallery-cover-label {
    display: block;
    color: #16171a;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 200;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 14px;
    transition: color .25s ease;
}

.gallery-cover-count {
    color: #9a9ea6;
    letter-spacing: 1.5px;
    margin-left: 8px;
}

.gallery-cover-link:hover .gallery-cover-label {
    color: #6f737b;
}

.gallery-cover-link:focus-visible {
    outline: 1px solid #16171a;
    outline-offset: 4px;
}

/* ===================================
   Category pages

   White ground, the same as the cover section on the home page, so a category
   page reads as a continuation of the covers you clicked rather than a switch
   into a different site.

   These have no hero for the header to float over, so the content is pushed
   clear of it with top padding rather than sitting under photography.
====================================== */

.page-gallery {
    background-color: #ffffff;
}

/* The header bar itself is site-nav.css's business - it used to be given a
   dark fill here, which outlived the switch to a white ground and, being
   loaded later at equal specificity, beat the light treatment and left dark
   type on a dark bar. */

.gallery-page {
    padding: 150px 0 104px;
}

.gallery-page-head {
    padding: 0 25px;
    margin-bottom: 44px;
}

.gallery-back {
    display: inline-block;
    color: #9a9ea6;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 14px;
    transition: color .25s ease;
}

.gallery-back::before {
    content: '\2190';
    margin-right: 8px;
}

.gallery-back:hover,
.gallery-back:focus-visible {
    color: #16171a;
}

.gallery-page-title {
    color: #16171a;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

/* Links across to the other three categories, so a visitor can move between
   galleries without going back to the home page first. */
.gallery-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 0 25px;
    margin-top: 72px;
    border-top: 1px solid #e6e6e8;
    padding-top: 34px;
}

.gallery-pager a {
    color: #9a9ea6;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s ease;
}

.gallery-pager a:hover,
.gallery-pager a:focus-visible {
    color: #16171a;
}

/* The covers' own step-down has to live here rather than up with the masonry's,
   because .gallery-covers sets column-count further down the file than that
   block - at equal specificity the later base rule would simply win, and the
   tablet step would never apply. */
/* Narrow: two columns, alternating orientation, the way the reference does it.

       col1        col2
     +-------+   +-------+
     |  land |   | port  |
     +-------+   |       |
     +-------+   +-------+
     | port  |   +-------+
     |       |   |  land |
     +-------+   +-------+

   Multi-column rather than grid, and deliberately. Each column has to flow on
   its own: in a grid the two cells of a row share a height, so a short
   landscape sitting beside a tall portrait would leave a hole under it. Columns
   have no such coupling.

   The cost is that multi-column fills strictly in DOM order, which is why the
   figures are written landscape, portrait, portrait, landscape - and why the
   break below is needed. Left to balance the columns itself the browser would
   put both portraits together; forcing a break before the third figure puts the
   split exactly where it belongs. */
@media (max-width: 1199px) {
    .gallery-covers {
        display: block;
        column-count: 2;
        column-gap: 25px;
    }

    /* grid placement must not leak into the column layout */
    .gallery-covers > .gallery-cover {
        grid-column: auto;
        grid-row: auto;
        /* column-gap separates the columns; this separates the two photos
           stacked inside one. */
        margin: 0 0 25px;
    }

    .gallery-covers > .gallery-cover--portrait-short {
        break-before: column;
    }
}

@media (max-width: 767px) {
    /* Still two columns on a phone, not one. Four covers stacked single-file is
       a very long scroll for what is meant to be a glance at the four
       categories, and the alternating landscape/portrait pairing only reads as
       a composition when the columns sit side by side. Only the gutters
       tighten. */
    .gallery-covers {
        column-count: 2;
        column-gap: 16px;
        padding: 0 16px;
    }

    .gallery-covers > .gallery-cover {
        margin-bottom: 16px;
    }

    .gallery-page {
        padding: 110px 0 78px;
    }

    .gallery-page-head,
    .gallery-pager {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-cover-frame img {
        transition: none;
    }

    .gallery-cover-link:hover .gallery-cover-frame img,
    .gallery-cover-link:focus-visible .gallery-cover-frame img {
        transform: none;
    }
}