/* ==================================================
   Portfolio "Recent Projects" mosaic -- photos in two tile widths
   (normal / double-wide) plus raw bold statement typography woven in,
   filling right-to-left, edge-to-edge with no gaps. Scoped to
   #portfolio-grid.pf-mosaic only (this page's dynamic grid), so the
   homepage/categories page's plain .case-study-grid elsewhere on the
   site is untouched.

   Card anatomy: the photo is always fully visible. Its title and a
   small "View More" button sit together in ONE compact strip overlaid
   on the image's bottom edge, hidden until hover -- and always shown
   (still small) on touch, where there's no hover. The strip itself has
   pointer-events:none so clicks pass through to the image everywhere
   except the title link/button, so the photo is never blocked.

   Every tile is exactly one row tall -- only width varies. Mixing in
   taller tiles looked more "random" but left CSS Grid's dense packing
   unable to fill some gaps, which is exactly the stray white space
   that kept showing up. Uniform row height is what actually
   guarantees a gap-free mosaic.
   ================================================== */
:root {
    --gm-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --gm-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --gm-orange: #ff5e14;
    --gm-orange-light: #ff7c3d;
    --gm-ink: #14161a;
}

#portfolio-grid.pf-mosaic {
    display: grid;
    /* RTL makes the dense auto-placement fill right-to-left (each row
       starts from the right edge); content itself is reset to LTR
       below on every tile so text/links still read normally. */
    direction: rtl;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto 40px;
}

#portfolio-grid.pf-mosaic .case-study-single-box {
    direction: ltr;
    grid-column: span 1;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

#portfolio-grid.pf-mosaic .case-study-single-box:hover {
    transform: none;
    box-shadow: none;
}

#portfolio-grid.pf-mosaic .gm-wide { grid-column: span 2; }

/* ---------- Photo tile ---------- */
#portfolio-grid.pf-mosaic .case-study-thumb2 {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    background: #eef0f2;
}

#portfolio-grid.pf-mosaic .case-study-thumb2 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#portfolio-grid.pf-mosaic .case-study-thumb2 img.gm-img-loaded {
    opacity: 1;
}

/* Small hover strip: title on one line, two small buttons below it.
   Hidden by default -- most of the photo is always plain and visible. */
#portfolio-grid.pf-mosaic .case-study-contents {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: flex-start;
    padding: 10px 12px 11px;
    background: linear-gradient(180deg, transparent 0%, rgba(20, 22, 26, 0.78) 80%);
    border: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

#portfolio-grid.pf-mosaic .case-study-single-box:hover .case-study-contents {
    opacity: 1;
    transform: translateY(0);
}

#portfolio-grid.pf-mosaic .case-text { min-width: 0; width: 100%; }

#portfolio-grid.pf-mosaic .case-study-title.style2 h3 {
    margin: 0 0 7px;
    font-size: 13px;
    line-height: 1.3;
}

#portfolio-grid.pf-mosaic .case-study-title.style2 h3 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--gm-font);
    font-weight: 600;
    color: #fff;
    pointer-events: auto;
}

/* The long description doesn't fit a compact strip -- it's still in
   the DOM (used as the lightbox caption) but hidden here. */
#portfolio-grid.pf-mosaic .case-study-title.style2 > p { display: none; }

#portfolio-grid.pf-mosaic .category-link {
    display: flex;
    gap: 6px;
    margin: 0;
}

#portfolio-grid.pf-mosaic .category-link .btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--gm-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: auto;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#portfolio-grid.pf-mosaic .category-link .btn-primary {
    background: var(--gm-orange);
    color: #fff;
    border: 1px solid transparent;
}

#portfolio-grid.pf-mosaic .category-link .btn-primary:hover {
    background: var(--gm-orange-light);
    color: #fff;
}

#portfolio-grid.pf-mosaic .category-link .btn-outline-primary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

#portfolio-grid.pf-mosaic .category-link .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

/* ---------- Statement tile: raw bold type, no card ----------
   Sized per tile so the words actually fill their box instead of
   floating in a sea of white space -- a "gm-wide" tile is roughly
   double the width of a "gm-sq" one, so its type runs noticeably
   bigger. */
#portfolio-grid.pf-mosaic .gm-statement {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 4px;
}

#portfolio-grid.pf-mosaic .gm-statement-text {
    margin: 0;
    width: 100%;
    font-family: var(--gm-font);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.96;
    letter-spacing: -0.02em;
    font-size: clamp(28px, 3.6vw, 40px);
}

#portfolio-grid.pf-mosaic .gm-wide .gm-statement-text {
    font-size: clamp(36px, 5vw, 56px);
}

#portfolio-grid.pf-mosaic .gm-align-l { justify-content: flex-start; }
#portfolio-grid.pf-mosaic .gm-align-l .gm-statement-text { text-align: left; }

#portfolio-grid.pf-mosaic .gm-align-r { justify-content: flex-end; }
#portfolio-grid.pf-mosaic .gm-align-r .gm-statement-text { text-align: right; }

#portfolio-grid.pf-mosaic .gm-align-c { justify-content: center; }
#portfolio-grid.pf-mosaic .gm-align-c .gm-statement-text { text-align: center; }

#portfolio-grid.pf-mosaic .gm-tone-ink .gm-statement-text { color: var(--gm-ink); }
#portfolio-grid.pf-mosaic .gm-tone-orange .gm-statement-text { color: var(--gm-orange); }

/* ---------- Tablet: 2 columns ---------- */
@media (max-width: 992px) {
    #portfolio-grid.pf-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 270px; }
    #portfolio-grid.pf-mosaic .gm-statement-text { font-size: clamp(26px, 4.6vw, 34px); }
    #portfolio-grid.pf-mosaic .gm-wide .gm-statement-text { font-size: clamp(32px, 5.6vw, 44px); }
}

/* ---------- Mobile: simple single-column stack (no masonry, no
   sideways scans -- clean and quick to scroll on a phone). Touch has
   no hover, so the strip is always shown, still compact. ---------- */
@media (max-width: 680px) {
    #portfolio-grid.pf-mosaic {
        direction: ltr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 18px;
    }
    #portfolio-grid.pf-mosaic .case-study-single-box,
    #portfolio-grid.pf-mosaic .gm-wide {
        grid-column: span 1;
    }
    #portfolio-grid.pf-mosaic .case-study-thumb2 { aspect-ratio: 4 / 3; height: auto; }
    #portfolio-grid.pf-mosaic .case-study-contents {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    #portfolio-grid.pf-mosaic .gm-statement { padding: 2px 0; }
    #portfolio-grid.pf-mosaic .gm-statement-text,
    #portfolio-grid.pf-mosaic .gm-wide .gm-statement-text { font-size: 27px; }
    #portfolio-grid.pf-mosaic .gm-align-l,
    #portfolio-grid.pf-mosaic .gm-align-r,
    #portfolio-grid.pf-mosaic .gm-align-c { justify-content: flex-start; }
    #portfolio-grid.pf-mosaic .gm-align-l .gm-statement-text,
    #portfolio-grid.pf-mosaic .gm-align-r .gm-statement-text,
    #portfolio-grid.pf-mosaic .gm-align-c .gm-statement-text { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    #portfolio-grid.pf-mosaic .case-study-thumb2 img,
    #portfolio-grid.pf-mosaic .case-study-contents { transition: none; }
}

/* ---------- "Load More Projects" button --------------------------
   The site-wide .btn-load-more class turned blue on hover and used a
   generic sharp-cornered/uppercase style -- doesn't match the orange
   pill buttons used everywhere else on this page. Scoped to this
   page's own wrapper so nothing else that might reuse the class
   elsewhere is affected. */
#portfolio-loadmore-wrap {
    text-align: center;
    margin-top: 8px;
}

#portfolio-loadmore-wrap .btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gm-orange);
    color: #fff;
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 14px 30px;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

#portfolio-loadmore-wrap .btn-load-more:hover {
    background: var(--gm-orange-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

#portfolio-loadmore-wrap .btn-load-more:disabled {
    background: #d8dade;
    color: #fff;
    transform: none;
}

#portfolio-loadmore-wrap .btn-load-more i {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-size: 12px;
}

@media (max-width: 680px) {
    #portfolio-loadmore-wrap .btn-load-more { padding: 12px 24px; font-size: 13px; }
}

/* Phones: the title strip is always visible (no hover), so give the two
   buttons a comfortable tap size. */
@media (max-width: 768px) {
    #portfolio-grid.pf-mosaic .category-link { gap: 8px; }
    #portfolio-grid.pf-mosaic .category-link .btn { padding: 9px 16px; font-size: 12px; }
}

/* Loading skeleton for tiles: the photo is invisible (opacity 0) until it has
   loaded, so the same soft sweep as other images (assets/css/img-skeleton.css)
   is drawn on the tile frame while its photo is still on the way. */
#portfolio-grid.pf-mosaic .case-study-thumb2:has(> img:not(.gm-img-loaded)) {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 65%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: sk-sweep 1.5s linear 0.12s 4 both;
}

@media (prefers-reduced-motion: reduce) {
    #portfolio-grid.pf-mosaic .case-study-thumb2:has(> img:not(.gm-img-loaded)) { animation: none; background-image: none; }
}