/* ==========================================================================
   Notodden Airport – Post Grid (Modern)
   - 3 x 1fr grid (2/1 on smaller screens)
   - Modern card with soft border + subtle lift
   - Consistent media aspect-ratio (image zoom on hover)
   - Accessible focus states
   - Built-in SVG placeholder when no image
   ========================================================================== */

:root {
    --naw-brand: #234188;
    --naw-text: #0f172a;
    --naw-muted: #667085;

    --card-bg: #fff;
    --card-border: color-mix(in oklab, #000 12%, transparent);
    --card-shadow-hover: 0 16px 42px rgba(0, 0, 0, .10);

    --gap: 1.25rem;
}

/* ====== GRID ====== */
.naw-post-grid__inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    gap: var(--gap, 20px);
    grid-gap: 20px;
    grid-gap: var(--gap, 20px);
}

/* Responsive */
@media (max-width: 1100px) {
    .naw-post-grid__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .naw-post-grid__inner {
        grid-template-columns: 1fr;
    }
}

/* ====== CARD ====== */
.naw-post-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    will-change: transform;
}

/* ====== MEDIA ====== */
.naw-post-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    /* consistent thumbnail height */
    overflow: hidden;
    background: color-mix(in oklab, var(--naw-brand) 8%, #e9eefb);
    isolation: isolate;
}

/* Real image */
.naw-post-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transform: translateZ(0);
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

/* ====== PLACEHOLDER (when no image) ======
   Markup uses: <div class="naw-post-card__img naw-post-card__img--placeholder"></div>
*/
.naw-post-card__img--placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(100% 70% at 50% 0%, color-mix(in oklab, var(--naw-brand) 12%, #f3f6ff), transparent 70%),
        linear-gradient(0deg, color-mix(in oklab, #000 5%, transparent), color-mix(in oklab, #000 5%, transparent));
}

/* Centered camera glyph via inline SVG (no network) */
.naw-post-card__img--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    opacity: .55;
    background:
        url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24' fill='none' stroke='%23234188' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>\
      <path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3l2-3h8l2 3h3a2 2 0 0 1 2 2z'/>\
      <circle cx='12' cy='13' r='4'/>\</svg>") center/contain no-repeat;
}

/* ====== BODY ====== */
.naw-post-card__body {
    display: grid;
    font-family: inherit;
    gap: .6rem;
    padding: 1.5rem;
}

.naw-post-card__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
    line-height: 1.25;
    letter-spacing: .2px;
}

.naw-post-card__title a {
    color: var(--naw-text);
    text-decoration: none;
}

.naw-post-card__title a:hover {
    text-decoration: underline;
}

.naw-post-card__meta {
    font-size: .85rem;
    color: var(--naw-muted);
}

.naw-post-card__excerpt {
    margin: .25rem 0 0;
    color: var(--naw-text);
    line-height: 1.6;
}

/* CTA button */
.naw-post-card__btn {
    margin-top: .4rem;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    border-radius: 9px;
    background: var(--naw-brand);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .15s ease, transform .12s ease;
}

.naw-post-card__btn:hover {
    background: #1f3975;
    transform: translateY(-1px);
}

/* ====== INFINITE SCROLL UI ====== */
.naw-post-grid {
    position: relative;
}

.naw-post-grid__sentinel {
    height: 1px;
}

.naw-post-grid__manual {
    margin: 1rem auto 0;
    display: none;
    /* JS shows as fallback when needed */
    padding: .65rem 1rem;
    border: 1px solid color-mix(in oklab, var(--naw-brand) 45%, #bcd0ff);
    background: #fff;
    color: var(--naw-brand);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

.naw-post-grid__manual:hover {
    background: var(--naw-brand);
    color: #fff;
    transform: translateY(-1px);
}

.naw-post-grid.is-loading .naw-post-grid__manual {
    opacity: .6;
    cursor: wait;
}

/* Show the fallback button on small viewports */
@media (max-width: 640px) {
    .naw-post-grid__manual {
        display: inline-flex;
    }
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {

    .naw-post-card,
    .naw-post-card__img,
    .naw-post-card__btn {
        transition: none !important;
    }
}

.naw-post-grid.is-loading .naw-post-grid__manual {
    position: relative;
}

.naw-post-grid.is-loading .naw-post-grid__manual::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    animation: naw-spin 0.8s linear infinite;
}

@keyframes naw-spin {
    to {
        transform: rotate(360deg);
    }
}