/**
 * Applari References (referenssit)
 * Card grid: each reference shows a hand-drawn ink sketch of the site by
 * default, cross-fading to the real, full-colour screenshot on hover.
 *
 * GenerateBlocks structural model (matches this project's convention):
 *   <div class="color-section gb-container alignfull applari-references">
 *     <div class="gb-container ar-inner">
 *       <div class="gb-container ar-head"> ...eyebrow/title/lead... </div>
 *       <div class="gb-container ar-grid">
 *         <div class="gb-container ar-card">
 *           <div class="gb-container ar-stack">
 *             <img class="ar-photo" ...>   // real screenshot, underneath
 *             <img class="ar-sketch" ...>  // ink sketch, on top, hides on hover
 *           </div>
 *           <div class="gb-container ar-body"> ...tags/name/desc/link... </div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * Containers render WITHOUT an inner wrapper (blockVersion >= 3), so layout is
 * applied directly to the Global Class on each .gb-container.
 *
 * No card background / no image shadow by design (mockup feedback): the
 * sketch and screenshot sit directly on the section background. A hand-drawn
 * ink frame (css/img/rerefenssi-reunat-crop.png) is applied to `.ar-stack` via
 * `border-image`, which keeps the frame's line thickness constant regardless
 * of the card's aspect ratio (no fragile aspect-ratio/percentage math needed).
 *
 * Editor support: every selector has an `.editor-styles-wrapper` twin so the
 * rules win against the block editor's base styles. Hover works in the
 * editor canvas too (pure CSS, no JS dependency).
 */

 @media only screen and (min-width: 320px) {

    .gb-container.color-section.applari-references,
    .editor-styles-wrapper .applari-references {
        --ar-green: var(--dark-green);
        --ar-orange: var(--orange);
        --ar-ink-soft: rgba(43, 43, 40, 0.62);
        padding: 56px 5%;
    }

    .applari-references .ar-inner,
    .editor-styles-wrapper .applari-references .ar-inner {
        max-width: 1200px;
        margin: 0 auto;
    }

    .applari-references .ar-head,
    .editor-styles-wrapper .applari-references .ar-head {
        max-width: 640px;
        margin: 0 0 40px;
    }

    .applari-references .ar-eyebrow,
    .editor-styles-wrapper .applari-references .ar-eyebrow {
        margin: 0 0 14px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ar-orange);
    }

    .applari-references .ar-title,
    .editor-styles-wrapper .applari-references .ar-title {
        margin: 0 0 16px;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.12;
        letter-spacing: -0.01em;
        color: var(--ar-green);
    }

    .applari-references .ar-title .hl,
    .editor-styles-wrapper .applari-references .ar-title .hl {
        color: var(--ar-orange);
        font-style: italic;
        font-weight: 500;
    }

    .applari-references .ar-lead,
    .editor-styles-wrapper .applari-references .ar-lead {
        margin: 0;
        font-size: 16px;
        line-height: 1.65;
        color: var(--ar-ink-soft);
    }

    .applari-references .ar-grid,
    .editor-styles-wrapper .applari-references .ar-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .applari-references .ar-card,
    .editor-styles-wrapper .applari-references .ar-card {
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        padding: 16px;
    }
    .applari-references .ar-card figure img{
        object-position: bottom;
    }

    /* Image stack: sketch on top, real screenshot underneath, crossfade on hover.
       Each image is a core `wp:image` block (figure.wp-block-image + img), not a
       bare <img> or raw HTML block, so it works with the Media Library normally.
       `.ar-photo` stays in normal flow, so its own image ratio sizes the stack
       (works with any screenshot dimensions, no aspect-ratio guesswork); the
       `.ar-sketch` overlay is absolutely positioned to match that same box.
       The hand-drawn ink frame (css/img/rerefenssi-reunat-crop.png, 768x377px)
       is applied as a border-image so it 9-slices around the box: the corner
       pieces and edge thickness stay fixed no matter the card's aspect ratio,
       only the straight edges stretch to fit. Slice values are the artwork's
       own border thickness in source pixels (measured directly from the PNG);
       width values are the rendered on-screen thickness. */
    .applari-references .ar-stack,
    .editor-styles-wrapper .applari-references .ar-stack {
        position: relative;
        border-style: solid;
        border-color: transparent;
        /* border-width must match border-image-width: border-image-width alone
           does not reserve layout space, so without this the frame paints
           thicker than the space available and gets covered by the photo. */
        border-width: 10px 13px 16px 13px;
        border-image-source: url(../img/rerefenssi-reunat-crop.png);
        border-image-slice: 22 29 36 30;
        border-image-width: 10px 13px 16px 13px;
        border-image-repeat: stretch;
    }

    .applari-references .ar-stack figure,
    .editor-styles-wrapper .applari-references .ar-stack figure {
        margin: 0;
        display: block;
    }

    .applari-references .ar-stack .ar-photo img,
    .editor-styles-wrapper .applari-references .ar-stack .ar-photo img {
        display: block;
        width: 100%;
        height: auto;
    }

    .applari-references .ar-stack .ar-sketch,
    .editor-styles-wrapper .applari-references .ar-stack .ar-sketch {
        position: absolute;
        inset: 0;
    }

    .applari-references .ar-stack .ar-photo img,
    .applari-references .ar-stack .ar-sketch img,
    .editor-styles-wrapper .applari-references .ar-stack .ar-photo img,
    .editor-styles-wrapper .applari-references .ar-stack .ar-sketch img {
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .applari-references .ar-stack .ar-sketch img,
    .editor-styles-wrapper .applari-references .ar-stack .ar-sketch img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .applari-references .ar-card:hover .ar-sketch img{
        opacity: 0;
    }

    .applari-references .ar-hint,
    .editor-styles-wrapper .applari-references .ar-hint {
        position: absolute;
        left: 12px;
        bottom: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 13px;
        border-radius: 999px;
        background: rgba(22, 51, 44, 0.9);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
    }

    .applari-references .ar-hint::before,
    .editor-styles-wrapper .applari-references .ar-hint::before {
        content: '\25CF';
        font-size: 8px;
        color: var(--ar-orange);
    }

    .applari-references .ar-card:hover .ar-hint,
    .editor-styles-wrapper .applari-references .ar-card:hover .ar-hint {
        opacity: 1;
        transform: translateY(0);
    }

    .applari-references .ar-body,
    .editor-styles-wrapper .applari-references .ar-body {
        padding: 18px 8px 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
        align-items:flex-start;
    }

    .applari-references .ar-tags,
    .editor-styles-wrapper .applari-references .ar-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .applari-references .ar-tag,
    .editor-styles-wrapper .applari-references .ar-tag {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ar-green);
        background: rgba(22, 51, 44, 0.08);
        border-radius: 999px;
        padding: 5px 11px;
    }
    .applari-references .ar-tag:hover,
    .editor-styles-wrapper .applari-references .ar-tag:hover{
        background: var(--orange);
        color:#ffffff;
    }

    .applari-references .ar-name,
    .editor-styles-wrapper .applari-references .ar-name {
        margin: 2px 0 0;
        font-weight: 600;
        font-size: 18px;
        color: var(--ar-green);
        font-family: var(--main-font);
    }

    .applari-references .ar-desc,
    .editor-styles-wrapper .applari-references .ar-desc {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--ar-ink-soft);
    }

    .applari-references .ar-link,
    .editor-styles-wrapper .applari-references .ar-link {
        margin-top: 6px;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ar-orange);
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* ---- Tablet ---- */
@media only screen and (min-width: 768px) {
    .applari-references .ar-grid,
    .editor-styles-wrapper .applari-references .ar-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .applari-references .ar-title,
    .editor-styles-wrapper .applari-references .ar-title {
        font-size: 38px;
    }
}

/* ---- Desktop ---- */
@media only screen and (min-width: 1280px) {
    .applari-references,
    .editor-styles-wrapper .applari-references {
        padding: 108px 5%;
    }

    .applari-references .ar-grid,
    .editor-styles-wrapper .applari-references .ar-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .applari-references .ar-title,
    .editor-styles-wrapper .applari-references .ar-title {
        font-size: 46px;
    }
}