/* =====================================================================
   Johannesdal Village - News page redesign (news.css)
   Needs gallery.css (brand variables, .jv-wrap, .jv-btn, .jv-eyebrow, .jv-tile + lightbox).
   Everything is scoped under .jv-news.
   ===================================================================== */
.jv-news { background: var(--jv-sand); }

/* ---------- header with aerial background ---------- */
.jv-nhead {
    --jv-nhead-shade: linear-gradient(90deg, rgba(27,31,36,.86) 0%, rgba(27,31,36,.62) 50%, rgba(27,31,36,.3) 100%), linear-gradient(180deg, rgba(27,31,36,.1) 0%, rgba(27,31,36,.5) 100%);
    min-height: 320px; display: flex; align-items: flex-end; padding: 64px 0 48px; color: #fff;
    background-color: var(--jv-gunmetal); background-repeat: no-repeat; background-size: cover; background-position: center, center, 60% 56%;
    background-image: var(--jv-nhead-shade), var(--jv-nhead-1280);
}
.jv-nhead > .jv-wrap { width: 100%; }
.jv-nhead .jv-eyebrow { color: #f2b97a; margin: 0; }
.jv-nhead h1 { font-family: 'Josefin Sans', sans-serif; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: .3em 0 .25em; padding: 0; line-height: 1.05; text-shadow: 0 1px 18px rgba(0,0,0,.25); }
.jv-nhead__lead { font-size: 1.1rem; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0; max-width: 36em; }
@media (min-width: 1500px), (min-width: 601px) and (min-resolution: 1.5dppx) {
    .jv-nhead { background-image: var(--jv-nhead-shade), var(--jv-nhead-1728); }
}

/* ---------- body ---------- */
.jv-nbody { padding: 40px 0 72px; }
.jv-nnotice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 32px; padding: 16px 20px; background: #fff; border: 1px solid var(--jv-line); border-left: 4px solid var(--jv-fulvous); border-radius: 0 12px 12px 0; }
.jv-nnotice__text { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; flex: 1 1 280px; font-size: 1.05rem; color: var(--jv-gunmetal); }
.jv-nnotice__tag { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--jv-fulvous); padding: .45em .7em .3em; border-radius: 4px; }
.jv-nstrip { display: grid; grid-template-columns: repeat(4, 112px); gap: 8px; margin: 0; padding: 0; list-style: none; }
.jv-nstrip__item { aspect-ratio: 4 / 3; border-radius: 8px; }
.jv-nstrip__item a:focus-visible { outline: 2px solid var(--jv-fulvous); outline-offset: 2px; }
.jv-nbody__title { margin: 56px 0 24px; }

/* ---------- cards ---------- */
.jv-ncard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--jv-line); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(41,47,54,.06); transition: box-shadow .2s, transform .2s; }
.jv-ncard:hover { box-shadow: 0 16px 40px rgba(41,47,54,.12); transform: translateY(-2px); }
.jv-ncard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e9e6df; }
.jv-ncard__tile { border-radius: 0; aspect-ratio: 16 / 10; }
.jv-ncard__tile .jv-ncard__media { position: absolute; inset: 0; aspect-ratio: auto; }
.jv-ncard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.jv-ncard:hover .jv-ncard__media img { transform: scale(1.04); }
.jv-ncard--portrait .jv-ncard__media img { object-position: 50% 35%; }
.jv-ncard__media--doc { cursor: pointer; }
.jv-ncard__media--doc img { image-rendering: auto; }
.jv-ncard__badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: .35em; padding: .45em .65em .3em; border-radius: 4px; background: rgba(20,24,28,.75); color: #fff; font: 600 .75rem/1 'Josefin Sans', sans-serif; letter-spacing: .08em; pointer-events: none; }
.jv-ncard__badge svg { width: 14px; height: 14px; margin-top: -2px; }
.jv-ncard__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,24,28,.55); border: 2px solid rgba(255,255,255,.85); color: #fff; pointer-events: none; transition: transform .25s, background-color .25s; }
.jv-ncard__play svg { width: 28px; height: 28px; margin-left: 3px; }
.jv-ncard:hover .jv-ncard__play { transform: scale(1.08); background-color: rgba(97,97,41,.85); }
.jv-ncard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.jv-ncard__date { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--jv-fulvous); margin-bottom: 10px; }
.jv-ncard__title { font-family: 'Josefin Sans', sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35; text-transform: none; color: var(--jv-gunmetal); margin: 0 0 8px; padding: 0; }
.jv-ncard__text { margin: 0; color: #5c636b; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jv-ncard__actions { margin-top: auto; padding-top: 16px; }
.jv-news .jv-more { display: inline-flex; align-items: center; gap: .4em; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font: 600 .82rem/1.2 'Josefin Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--jv-olive) !important; }
.jv-news .jv-more:hover { color: var(--jv-fulvous) !important; text-decoration: none; }
.jv-news .jv-more svg { width: 1em; height: 1em; flex: none; }
.jv-news .jv-more:focus-visible, .jv-ncard__media:focus-visible { outline: 2px solid var(--jv-fulvous); outline-offset: 3px; }

/* featured (latest) article: large image + text side by side */
.jv-ncard--featured { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.jv-ncard--featured:hover { transform: none; }
.jv-ncard--featured .jv-ncard__tile { aspect-ratio: auto; min-height: 380px; }
.jv-ncard--featured .jv-ncard__body { padding: 36px 36px 34px; justify-content: center; }
.jv-ncard--featured .jv-ncard__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: .04em; line-height: 1.25; margin-bottom: 14px; }
.jv-ncard--featured .jv-ncard__actions { margin-top: 18px; }

/* grid */
.jv-ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* ---------- CTA ---------- */
.jv-ncta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding: 34px 36px; border-radius: 14px; background: var(--jv-gunmetal); color: #fff; }
.jv-ncta h2 { font-family: 'Josefin Sans', sans-serif; font-size: 1.6rem; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 6px; padding: 0; }
.jv-ncta p { margin: 0; color: rgba(255,255,255,.8); max-width: 36em; }
.jv-ncta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jv-ncta .jv-btn svg { width: 1.1em; height: 1.1em; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .jv-ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jv-ncard--featured { grid-template-columns: 1fr; }
    .jv-ncard--featured .jv-ncard__tile { min-height: 0; aspect-ratio: 16 / 10; }
    .jv-ncard--featured .jv-ncard__body { padding: 24px 24px 26px; }
}
@media (max-width: 600px) {
    .jv-nhead { min-height: 0; padding: 40px 0 34px; background-position: center, 58% 50%; background-image: var(--jv-nhead-shade), var(--jv-nhead-800);
        --jv-nhead-shade: linear-gradient(180deg, rgba(27,31,36,.55) 0%, rgba(27,31,36,.8) 100%); }
    .jv-nhead h1 { font-size: 2.3rem; }
    .jv-nhead__lead { font-size: 1rem; }
    .jv-nbody { padding: 24px 0 48px; }
    .jv-nnotice { padding: 14px 16px; margin-bottom: 22px; }
    .jv-nnotice__text { font-size: .98rem; }
    .jv-nstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .jv-ngrid { grid-template-columns: 1fr; gap: 18px; }
    .jv-nbody__title { margin: 40px 0 18px; }
    .jv-ncard__body { padding: 18px 18px 20px; }
    .jv-ncta { padding: 26px 20px; margin-top: 40px; }
    .jv-ncta__actions, .jv-ncta__actions .jv-btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) and (min-resolution: 1.5dppx) {
    .jv-nhead { background-image: var(--jv-nhead-shade), var(--jv-nhead-1280); }
}
@media (prefers-reduced-motion: reduce) { .jv-ncard, .jv-ncard img, .jv-ncard__play { transition: none !important; } .jv-ncard:hover { transform: none; } }