/* ==========================================================================
   Nest Plus – Exclusive Offers (homepage promotions section)
   Markup + offer data come from [nest_plus_offers] (inc/nest-plus-offers.php);
   rendering/animation in assets/js/nest-plus.js. .np-plain = no banner
   ("More offers" on the offer landing pages). Everything is scoped to
   .np-section so theme/Bootstrap styles (.card, .content…) are unaffected.
   ========================================================================== */
.np-section {
    --wine: #4e131e; --wine-deep: #260a10; --ink: #1d0a0f;
    --gold: #b3a58f; --gold-lt: #ddd5c8; --ivory: #f7f3ec;
    --overlap: 96px;
    position: relative;
    background: #fff;
    font-family: Inter, system-ui, sans-serif;
    color: var(--ink);
}
.np-section *, .np-section *::before, .np-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- banner ---------- */
.np-banner { position: relative; height: clamp(300px, 34vw, 470px); overflow: hidden;
    background: radial-gradient(120% 90% at 50% 28%, #5d1824 0%, var(--wine) 40%, var(--wine-deep) 100%); }
.np-banner::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(221,213,200,.55) 25%, rgba(221,213,200,.8) 50%, rgba(221,213,200,.55) 75%, transparent); }
.np-banner canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.np-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.np-meta { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.np-rule { display: block; height: 1px; width: 0; margin: 0 auto 14px !important; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.np-section .np-tag { font-family: Inter, system-ui, sans-serif; font-size: clamp(15px, 2.1vw, 28px); line-height: 1.3; font-weight: 600; color: #fff; letter-spacing: .42em; margin-right: -.42em;
    text-shadow: 0 2px 14px rgba(0,0,0,.35); text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease; }
.np-banner.is-done .np-rule { width: min(340px, 50%); }
.np-banner.is-done .np-tag { opacity: 1; transform: none; }

/* ---------- no-banner variant ---------- */
.np-section.np-plain { --overlap: 0px; background: transparent; }
.np-section .np-plain-title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15;
    color: var(--wine); text-align: center; margin: 0 0 8px !important; padding: 0 16px !important; }

/* ---------- offers carousel ---------- */
.np-offers { position: relative; margin-top: calc(var(--overlap) * -1) !important; padding: 0 24px 64px !important; z-index: 2; }
.np-carousel { position: relative; width: 77%; margin: 0 auto !important; }
.np-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 16px 10px 44px !important; margin: 0 -10px -14px !important; scroll-padding: 0 10px;
    scrollbar-width: none; -ms-overflow-style: none; cursor: grab; overscroll-behavior-x: contain; }
.np-track::-webkit-scrollbar { display: none; }
.np-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.np-track.dragging .np-card { pointer-events: none; }
.np-track .np-card { flex: 0 0 calc((100% - 22px * 3) / 4); scroll-snap-align: start; }
@media (min-width: 1700px) { .np-track .np-card { flex-basis: calc((100% - 22px * 4) / 5); } }
.np-section .np-nav { position: absolute; top: calc(50% - 8px); transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(179,165,143,.7); background: rgba(38,10,16,.82); color: #fff; display: grid; place-items: center; cursor: pointer;
    backdrop-filter: blur(4px); transition: opacity .3s, background .3s; box-shadow: none; outline-offset: 2px; }
.np-section .np-nav:hover { background: var(--wine); }
.np-section .np-nav[disabled] { opacity: 0; pointer-events: none; }
.np-nav svg { width: 16px; height: 16px; }
.np-prev { left: -66px; } .np-next { right: -66px; }
.np-dots { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 2px !important; }
/* 32px click/tap target, 12px visible dot drawn by ::before */
.np-section .np-dots button { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: none; }
.np-section .np-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    border: 1.5px solid #b3a58f; background: transparent; transition: background .3s, transform .3s, border-color .3s; }
.np-section .np-dots button:hover::before { border-color: var(--wine); background: rgba(78,19,30,.18); }
.np-section .np-dots button.on::before { background: var(--wine); border-color: var(--wine); transform: scale(1.25); }

/* ---------- card ---------- */
.np-section .np-card { position: relative; display: block; aspect-ratio: 300 / 430; color: #fff; text-decoration: none;
    filter: drop-shadow(0 12px 14px rgba(45,6,14,.22)); opacity: 0; transform: translateY(28px);
    transition: opacity .9s ease calc(var(--i) * 110ms + 200ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 110ms + 200ms); }
.np-section .np-card:hover, .np-section .np-card:focus { color: #fff; text-decoration: none; }
.np-offers.in .np-card { opacity: 1; transform: none; }
.np-offers.in .np-card:hover { transform: translateY(-10px); transition-delay: 0s; transition-duration: .45s; }
.np-card-clip { position: absolute; inset: 0; overflow: hidden; background: var(--wine-deep); }
/* gentle continuous float (each card slightly out of phase) */
.np-card-clip, .np-outline { animation: npFloat 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.8s); transform-origin: 50% 100%; }
@keyframes npFloat { from { translate: 0 6px; rotate: -.4deg; } to { translate: 0 -9px; rotate: .4deg; } }
.np-section .np-card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 100%);
    transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); user-select: none; }
.np-section .np-card:hover img { transform: scale(1.08); }
.np-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,4,8,0) 22%, rgba(30,5,11,.55) 52%, rgba(26,4,9,.94) 82%); }
.np-card-clip::after { content: ""; position: absolute; top: -10%; bottom: -10%; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent 0%, rgba(235,229,219,0) 30%, rgba(235,229,219,.22) 50%, rgba(235,229,219,0) 70%, transparent 100%);
    animation: npSheen 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.3s + 2.5s); }
@keyframes npSheen { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }
.np-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.np-outline path { fill: none; stroke: #bfa67a; stroke-width: 1.5; transition: stroke .4s, stroke-width .4s; }
.np-outline path.inner { stroke-width: 3.6; }
.np-card:hover .np-outline path { stroke: #d4bf94; stroke-width: 2; }
.np-card:hover .np-outline path.inner { stroke-width: 4; }
.np-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(14px, 1.5vw, 24px) clamp(14px, 1.4vw, 22px) !important; display: flex; flex-direction: column; gap: 8px; }
.np-eyebrow { font-size: clamp(9.5px, .73vw, 12px); line-height: 1.3; letter-spacing: .2em; white-space: nowrap; text-transform: uppercase; color: var(--gold-lt); display: flex; align-items: center; gap: 8px; }
.np-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gold); flex: none; }
.np-eyebrow i { font-family: "Playfair Display", serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 1.25em; }
.np-upto { font-size: clamp(9.5px, .77vw, 12px); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.np-big { font-family: "Playfair Display", Georgia, serif; font-weight: 700; line-height: .95; font-size: clamp(26px, 2.48vw, 46px);
    background: linear-gradient(180deg, #f4f0e9 0%, #d9cfbf 55%, #b7a88f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.np-big.sm { font-size: clamp(20px, 1.76vw, 33px); }
.np-sub { font-family: "Playfair Display", serif; font-size: clamp(14px, 1.12vw, 20px); line-height: 1.2; }
.np-section .np-desc { font-size: clamp(11px, .81vw, 14px); line-height: 1.5; color: rgba(255,255,255,.78); }
.np-cta { margin-top: 6px !important; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: clamp(10.5px, .86vw, 13px); line-height: 1.3; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; padding: 9px 0 !important; border-bottom: 1px solid var(--gold); color: #fff; }
.np-cta svg { width: 16px; height: 10px; transition: transform .35s; }
.np-card:hover .np-cta svg { transform: translateX(5px); }
.np-tc { font-size: 9px; line-height: 1.3; color: rgba(255,255,255,.5); letter-spacing: .04em; }

@media (max-width: 1100px) {
    .np-section { --overlap: 70px; }
    .np-carousel { width: 100%; }
    .np-track { margin: 0 !important; padding: 16px 4px 30px !important; scroll-padding: 0; }
    .np-track .np-card { flex-basis: clamp(220px, 34vw, 300px); }
    .np-prev { left: -6px; } .np-next { right: -6px; }
    .np-offers { padding: 0 16px 48px !important; }
    .np-big { font-size: 36px; } .np-big.sm { font-size: 26px; } .np-sub { font-size: 17px; } .np-section .np-desc { font-size: 12.5px; } .np-eyebrow { font-size: 10px; } .np-cta { font-size: 11px; }
}
@media (max-width: 600px) {
    .np-section { --overlap: 48px; }
    .np-track .np-card { flex-basis: 72vw; }
    .np-section .np-nav { display: none; }
    .np-section .np-tag { font-size: 15px; letter-spacing: .3em; margin-right: -.3em; padding: 0 16px !important; }
    .np-banner { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    .np-section .np-card, .np-rule, .np-section .np-tag { transition: none; }
    .np-card-clip::after { animation: none; display: none; }
    .np-card-clip, .np-outline { animation: none; }
}