/* Projects page (LT `projektai` = page 66, EN `projects` = page 67).
   The page used to be one wp:html blob in patterns/page-projektai.php with
   every rule as an inline style. Nothing on this page needs JavaScript (the
   old onmouseover/onmouseout attributes only ever set a CSS transform, and
   the bookmark glyph on each card was decorative with no click handler), so
   the whole page converts to real, editable core blocks and this file
   replaces every inline style with a className rule. Gated in functions.php
   to pages 66/67. Selectors are two-class (0,2,0) so they outrank both
   core's flow layout `> *` margin reset and blocks.css. */

/* The old markup painted background on BOTH <main class="ap-page"> and the
   section itself; the native <main> is bare, so both need restating here to
   fully cover the decorative page contour (assets/css/apglebk.css) the way
   the old full-width <main> did. */
body.page-id-66 #main-content,
body.page-id-67 #main-content { background: #FAF7F5; }
.visi-projektai { background: #FAF7F5; }

/* ---- back link --------------------------------------------------------- */
.visi-projektai > .projects-back { margin: 0 0 1.5rem; }
.visi-projektai .projects-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F2421;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}
.visi-projektai .projects-back a::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background: center / 18px 18px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231F2421' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}

/* ---- title -------------------------------------------------------------- */
.visi-projektai .projects-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    color: #1F2421;
    margin: 0 0 3rem;
    text-align: left;
}

/* ---- card grid ------------------------------------------------------------ */
.visi-projektai > .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    text-align: center;
}
.project-card { display: flex; flex-direction: column; gap: 1rem; }
.project-card a,
.project-card__caption a {
    text-decoration: none;
    color: inherit;
}
.project-card__media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    aspect-ratio: 16/10;
    transition: transform 0.2s;
    margin: 0;
}
.project-card__media:hover { transform: scale(1.02); }
/* core/image's linked markup is <figure><a><img></a></figure>; the inline <a>
   has no intrinsic height, so the img's height:100% needs its immediate
   parent (the <a>) turned into a block that actually fills the figure --
   otherwise the browser falls back to the image's natural aspect ratio and
   object-fit crops from the wrong box. */
.project-card__media a {
    display: block;
    width: 100%;
    height: 100%;
}
.project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.project-card__media::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0,0,0,0.6) center / 14px 14px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.project-card__caption {
    font-weight: 800;
    font-size: 1.05rem;
    color: #1F2421;
    font-family: var(--font-heading);
    margin: 0;
}

/* No responsive breakpoint here: the original inline-style grid had none
   either (unlike the gallery mosaic), so the 3-column layout is kept as-is
   at every width to stay pixel-identical to the old markup. */