/**
 * Hero v2 — dark-navy gradient redesign for /country/italy/ hero.
 *
 * Loaded as a SECOND stylesheet after newcataloge-italy.css so every
 * rule here cleanly overrides the original. To revert: comment out
 * the wp_enqueue_style call in inc/newcataloge-italy.php and the
 * original light hero comes back instantly — no markup changes needed.
 */

/* ── Hero shell ───────────────────────────────────────────────── */

.newcataloge-italy-page .newcataloge-hero {
    background: linear-gradient(135deg, #2c4875 0%, #314b72 100%);
    padding: 0;
    color: #fff;
    /* Belt-and-suspenders: even if a child mis-calculates its width
       (the cities nowrap row is the usual suspect), clip horizontal
       overflow at the hero boundary so the page itself never gains a
       horizontal scrollbar. */
    overflow-x: hidden;
}
/* City variant has no right-column image to anchor visual height —
   without explicit top/bottom padding the breadcrumbs end up glued
   to the site header. Mirror the v1 hero's vertical rhythm so the
   text block has room to breathe. */
.newcataloge-italy-page-root--city .newcataloge-hero {
    padding: 56px 0 48px;
}
@media (max-width: 1023px) {
    .newcataloge-italy-page-root--city .newcataloge-hero {
        padding: 32px 0 28px;
    }
}
/* Grid items default to `min-width: auto`, which equals the size of
   their content — that lets the cities nowrap row push the entire
   hero wider than the viewport. Explicit `min-width: 0` lets the grid
   item shrink so its inner overflow-x:auto can do its job. */
.newcataloge-italy-page .newcataloge-hero-text {
    min-width: 0;
}
/* Compact city pills inside the hero — desktop too. Slightly smaller
   than the global default (8px/16px, 13px) so the cities row reads as
   a navigation strip rather than a stack of buttons. */
.newcataloge-italy-page .newcataloge-cities .newcataloge-city-pill {
    gap: 5px;
    padding: 5px 11px;
    font-size: 12px;
}
.newcataloge-italy-page .newcataloge-cities .newcataloge-city-count {
    font-size: 11px;
}

/* Mobile-only tweaks. */
@media (max-width: 1023px) {
    .newcataloge-italy-page .newcataloge-hero {
        padding: 18px 0 22px;
    }
    /* One-row guarantee on phones: nowrap + horizontal scroll. With 4
       cities + "View all" the row may overflow narrow viewports
       (<360px); horizontal scroll keeps everything reachable without
       wrapping into a 2nd row that crowds the hero. The row stays
       inside the container width so the page itself never gains a
       horizontal scrollbar — only the pills row scrolls. */
    .newcataloge-italy-page .newcataloge-cities {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;     /* allow flex container to shrink under content width */
        max-width: 100%;
        scrollbar-width: none;             /* Firefox */
        -webkit-overflow-scrolling: touch; /* iOS momentum */
        /* Fade the rightmost 40px so the last pill appears to dissolve
           into the hero — universally-recognised affordance ("there's
           more content, swipe →"). Same pattern Apple Music / Netflix
           / Instagram use for horizontal carousels. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .newcataloge-italy-page .newcataloge-cities::-webkit-scrollbar { display: none; }
    .newcataloge-italy-page .newcataloge-cities .newcataloge-city-pill {
        flex: 0 0 auto;     /* never shrink, stay readable */
    }
    .newcataloge-italy-page .newcataloge-cities-label {
        flex: 0 0 auto;
    }
}

/* ── Breadcrumbs (now sit inside .newcataloge-hero-text, above H1) */

.newcataloge-italy-page .newcataloge-hero-text .newcataloge-breadcrumbs {
    padding: 0 0 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
.newcataloge-italy-page .newcataloge-hero-text .newcataloge-breadcrumbs a {
    color: rgba(255, 255, 255, 0.85);
}
.newcataloge-italy-page .newcataloge-hero-text .newcataloge-breadcrumbs a:hover {
    color: #fff;
}
.newcataloge-italy-page .newcataloge-hero-text .newcataloge-bc-sep {
    color: rgba(255, 255, 255, 0.35);
}
.newcataloge-italy-page .newcataloge-hero-text .newcataloge-bc-current {
    color: #fff;
    font-weight: 500;
}

/* ── Title block — tighter spacing for the compact hero ───────── */

.newcataloge-italy-page .newcataloge-hero-titlerow {
    margin: 10px 0 12px;
}
.newcataloge-italy-page .newcataloge-hero-title {
    color: #fff;
}

.newcataloge-italy-page .newcataloge-hero-stat {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 12px;
}
.newcataloge-italy-page .newcataloge-hero-stat strong {
    color: #fff;
    border-bottom-color: #e9a82a6e;
}

.newcataloge-italy-page .newcataloge-hero-desc {
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 16px;
}

/* Cities row hidden on the v2 hero — popular cities now surface in
   the explore-footer pillrow at the bottom of the page, so duplicating
   them in the hero is just visual noise. To re-enable: drop the next
   rule. The PHP markup still renders, so no template edit is needed. */
.newcataloge-italy-page .newcataloge-cities { display: none; }

/* ── Cities row ───────────────────────────────────────────────── */

.newcataloge-italy-page .newcataloge-cities-label {
    color: rgba(255, 255, 255, 0.55);
}
/* City + "View all" pills share the same warm parchment background
   so the row reads as one cohesive control strip on the dark hero. */
.newcataloge-italy-page .newcataloge-city-pill {
    background: #f5efde;
    border-color: transparent;
    color: var(--nc-navy);
}
.newcataloge-italy-page .newcataloge-city-pill:hover {
    background: #f5efde;
    border-color: var(--nc-gold);
}
.newcataloge-italy-page .newcataloge-city-count {
    color: #6b7280;
}

.newcataloge-italy-page .newcataloge-city-pill--more {
    background: #f5efde;
    border-color: var(--nc-gold);
    color: var(--nc-gold);
}
.newcataloge-italy-page .newcataloge-city-pill--more:hover {
    background: #efe6c9;  /* slightly deeper parchment on hover */
    color: var(--nc-gold);
}

/* ── Hero image — slightly tighter so the gradient breathes ───── */

@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-hero--with-image .newcataloge-hero-grid {
        gap: 32px;
        align-items: center;
    }
    .newcataloge-italy-page .newcataloge-hero-image img {
        max-height: 380px;
    }
}

/* Hero image wrapper — holds the picture and acts as the click
   surface for hero pins. No pin elements live in the DOM; click +
   mousemove are delegated to this wrap and resolved against pin
   bounding boxes carried in the data-hero-pins JSON attribute (see
   the inline JS at the bottom of taxonomy-property_country-italy.php).
   The pointer cursor is set programmatically when the mouse is over
   a pin region. */
.newcataloge-italy-page .newcataloge-hero-image-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* Brass-glow backdrop behind the hero image — pure radial gradient
   inside the aside (no filter:blur, no transform, no overflow risk).
   Adds visual weight under the polaroid collage so the image reads
   as anchored on the navy background instead of floating free.
   Opacity pulses gently to suggest a warm sun behind the scene.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-hero-image {
        position: relative;
    }
    .newcataloge-italy-page .newcataloge-hero-image::before {
        content: '';
        position: absolute;
        /* inset:0 keeps the gradient strictly within the aside box
           — no negative offsets, no scaling, nothing that could
           bleed past the hero's overflow guards. */
        inset: 0;
        background: radial-gradient(ellipse 70% 70% at center,
            rgba(201, 162, 39, 0.22) 0%,
            rgba(201, 162, 39, 0.10) 38%,
            rgba(201, 162, 39, 0.03) 60%,
            transparent 78%);
        z-index: 0;
        pointer-events: none;
        animation: nc-hero-glow-pulse 8s ease-in-out infinite;
    }
    /* Image sits above the glow's stacking layer. */
    .newcataloge-italy-page .newcataloge-hero-image-wrap {
        z-index: 1;
    }
}

/* Opacity-only pulse — no transform, no blur, no risk of layout
   shift or scrollbar surprises. */
@keyframes nc-hero-glow-pulse {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .newcataloge-italy-page .newcataloge-hero-image::before {
        animation: none;
    }
}