/**
 * Passione Strumenti remodel — hand-written CSS, no build step required.
 *
 * Loaded after assets/css/style.css (compiled Tailwind, still pink/rounded)
 * so these plain rules can simply override it. Design tokens (colors, type,
 * spacing, radius) live in src/app.css as the documented source of truth and
 * are mirrored at :root by functions.php::gearnews_custom_css(); this file
 * adds the actual component patterns from the mockup
 * (html/Passione Mobile News.html) that don't exist in the compiled CSS yet.
 */

:root {
    --color-hairline-list: #e2e2df;
}

/* BBC-style clean white canvas — drop the grey/tinted <main> background that
   every template applied via a Tailwind bg-* utility (bg-lightGray,
   bg-[#f4f4f4], …). One override here beats editing each template. */
.site-main {
    background-color: #fff !important;
}

/* A fixed content width for sidebar-free, single-column pages (category
   archives, single posts, search) — wider than the article-with-sidebar
   grid used to be, centered, no percentage-split column to fight with. */
.gn-wide {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* The brand's default corner is near-square (2px); photographic elements get
   a slightly softer 5px. Tailwind's rounded-full stays untouched — it's used
   for actual circles (avatars, icon buttons, dots) which must stay round. */
.rounded-md,
.rounded-lg {
    border-radius: var(--radius-default, 2px) !important;
}
.rounded-xl,
.rounded-2xl {
    border-radius: var(--radius-image, 5px) !important;
}

/* The theme's custom "card shadow" utility — the brand uses flat hairline
   borders instead, everywhere this wasn't already rewritten by hand. */
.shadow-light {
    box-shadow: none !important;
    border: 1px solid var(--color-grey-panel-border, #e5e7eb);
}

/* ── Utility: hide scrollbar on horizontal-scroll rails ────────────────── */
.noscroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.noscroll::-webkit-scrollbar {
    display: none;
}

/* ── Chips / pills ───────────────────────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border: 1px solid var(--color-grey-hairline, #ddd);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    background: #fff;
    text-decoration: none;
    transition: background var(--dur-hover, .2s) var(--ease-default, ease),
                color var(--dur-hover, .2s) var(--ease-default, ease);
}
.chip:hover {
    border-color: #000;
    color: #000;
    text-decoration: none;
}
.chip.is-active {
    background: #000;
    color: #fff;
    border-color: #000;
}
.chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* ── Section head: 3px black rule + title + "Tutte ›" link ─────────────── */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-top: 3px solid #000;
    padding-top: 12px;
}
.section-head__title {
    font-size: 22px;
    font-weight: 700;
    color: #000;
}
.section-head__count {
    font-size: 14px;
    color: var(--color-grey-muted, #888);
    white-space: nowrap;
}
.section-head__link {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    text-decoration: underline;
    white-space: nowrap;
}

/* Lime highlight behind a bold title — "In Primo Piano", "Offerte", etc. */
.section-mark {
    display: inline-block;
    background: var(--color-lime, #D1FF8A);
    padding: 0 5px;
}

/* ── Category label: plain text, no colored underline (the per-category
   rainbow strip was dropped — see .card-meta below, which is where the
   category now lives on every card: bottom of the meta row). ──────────── */
.cat-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
}
.cat-label:hover {
    text-decoration: underline;
}

/* ── Card meta: category (plain text, not a colored strip) + date, shared
   by every post card footer (content-card, homepage-sections cards,
   post-rail, vetrina, related-posts grid) — see
   gearnews_render_card_meta() in inc/template-functions.php. ──────────── */
.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-grey-muted, #888);
    margin-top: 10px;
}
.card-meta__cat {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}
a.card-meta__cat:hover {
    text-decoration: underline;
}
.card-meta__sep {
    color: var(--color-grey-hairline, #ddd);
}

/* ── Post row: 50/50 image+headline, hairline divider ──────────────────── */
.post-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-hairline-list);
    text-decoration: none;
    color: #000;
}
.post-row:last-child {
    border-bottom: none;
}
.post-row__thumb {
    flex: 0 0 40%;
    width: 40%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-default, 2px);
}
.post-row__body {
    flex: 1;
    min-width: 0;
}
.post-row__title {
    font-size: 16px;
    line-height: 1.28;
    font-weight: 700;
    color: #000;
}
.post-row__rank {
    flex: 0 0 auto;
    width: 28px;
    font-size: 26px;
    font-weight: 700;
    color: #c9c9c6;
    line-height: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-outline {
    display: block;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    padding: 13px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    background: #fff;
    text-decoration: none;
    transition: background var(--dur-hover, .2s) ease, color var(--dur-hover, .2s) ease;
}
.btn-outline:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}
.btn-lime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    padding: 13px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    background: var(--color-lime, #D1FF8A);
    text-decoration: none;
}
.btn-lime:hover {
    color: #000;
    text-decoration: none;
    filter: brightness(0.95);
}

/* ── Score bar (rating widget) ──────────────────────────────────────── */
.score-bar-track {
    height: 6px;
    background: rgba(0, 0, 0, .12);
    border-radius: 999px;
    margin-top: 6px;
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    background: var(--color-lime, #D1FF8A);
    border-radius: 999px;
}
.score-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

/* ── Footer link grid (wraps the existing wp_nav_menu <ul>, no markup
       change needed) ───────────────────────────────────────────────────── */
.footer-links-grid {
    columns: 2;
    column-gap: 16px;
}
.footer-links-grid li {
    break-inside: avoid;
    margin-bottom: 10px !important;
}

/* ── Social icon circles: white circle / black glyph ────────────────── */
.social-icons a,
.footer-social a,
.gn-sticky-social a {
    background: #fff !important;
    color: #000 !important;
    border-radius: 50%;
}
.social-icons a:hover,
.footer-social a:hover,
.gn-sticky-social a:hover {
    background: var(--color-lime, #D1FF8A) !important;
    color: #000 !important;
}

/* ── Header: "Ultime News" ticker (gearnews_render_live_ticker()): label
   pill left (aligned with the content column), headlines slide
   horizontally, small arrows on the right — initLiveTicker() in
   assets/js/home-sliders.js. ───────────────────────────────────────── */
.live-ticker {
    background: var(--color-lime, #D1FF8A);
    color: #000;
}
.live-ticker__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.live-ticker__pill {
    flex: 0 0 auto;
    background: #000;
    color: var(--color-lime, #D1FF8A);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: var(--radius-default, 2px);
    white-space: nowrap;
    text-transform: uppercase;
}
.live-ticker__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.live-ticker__track {
    display: flex;
    transition: transform .45s ease;
    will-change: transform;
}
.live-ticker__text {
    flex: 0 0 100%;
    min-width: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.live-ticker__text:hover {
    text-decoration: underline;
}
.live-ticker__nav {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}
.live-ticker__btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    background: transparent;
    color: #000;
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--dur-hover, .2s) ease, color var(--dur-hover, .2s) ease;
}
.live-ticker__btn:hover,
.live-ticker__btn:focus-visible {
    background: #000;
    color: var(--color-lime, #D1FF8A);
}
@media (prefers-reduced-motion: reduce) {
    .live-ticker__track { transition: none; }
}

/* ── Article: reading-progress bar ──────────────────────────────────── */
.reading-progress-track {
    position: sticky;
    top: 80px; /* = header height (h-20) */
    z-index: 30;
    transition: top .25s ease; /* in step with the header shrinking */
    height: 3px;
    background: rgba(0, 0, 0, .12);
}
.reading-progress-fill {
    height: 3px;
    width: 0%;
    background: var(--color-lime, #D1FF8A);
    transition: width .1s linear;
}

/* ── HotOrNot widget contrast: the label block inherits --color-accent,
       which this theme now defaults to lime — force dark text/icon on it. ── */
.hon-label {
    color: #000 !important;
}
.hon-label strong,
.hon-label span {
    color: #000 !important;
}

/* ── Pro/Con grid (recensioni rating block) ─────────────────────────── */
.conclusione-container-lists .pie-heading {
    text-transform: uppercase;
}

/* ── Content + sidebar layout: fixed 300px sidebar (desktop mockup used
   1fr 330px; narrowed to give the article body more room — 300px keeps
   room for standard 300px-wide ad units in the sidebar) ─────────────── */
@media (min-width: 1024px) {
    .gn-content-grid {
        display: grid !important;
        grid-template-columns: 1fr 300px;
    }
}

/* ── Desktop header CTA pill ("Offerte") ────────────────────────────── */
.header-cta {
    background: var(--color-lime-logo, #d6ff8f);
    color: #000 !important;
    border-radius: var(--radius-default, 2px);
    padding: 9px 16px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.header-cta:hover {
    color: #000 !important;
    filter: brightness(0.95);
}
.header-cta {
    position: relative;
}

/* ── Compact header on scroll (navigation.js toggles .is-scrolled once the
   page is scrolled past 60px): lower bar, smaller logo plate. ────────── */
#masthead > .container > .flex {
    transition: height .25s ease;
}
#masthead.is-scrolled > .container > .flex {
    height: 56px;
}
#masthead .site-branding-plate,
#masthead .site-branding-plate img {
    transition: padding .25s ease, height .25s ease;
}
#masthead.is-scrolled .site-branding-plate {
    padding: 4px 6px;
}
#masthead.is-scrolled .site-branding-plate img {
    height: 18px;
}
#masthead.is-scrolled .header-cta {
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Reading-progress bar stays glued to the lower header (no gap). */
html.gn-header-compact .reading-progress-track {
    top: 56px;
}
/* Sticky sidebar ad follows the lower header. */
html.gn-header-compact .gearnews-halfpage-ad {
    top: 66px;
}
html.gn-header-compact body.admin-bar .gearnews-halfpage-ad {
    top: 98px;
}
@media (prefers-reduced-motion: reduce) {
    #masthead > .container > .flex,
    #masthead .site-branding-plate,
    #masthead .site-branding-plate img,
    .reading-progress-track { transition: none; }
}

/* ── Active-deals count bubble (gearnews_deals_count_badge(), inc/deals.php):
   top-right of the "Offerte" CTA and of the "Offerte" mobile menu item. ── */
.deals-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-dark, #000);
    pointer-events: none;
}
.deals-badge-anchor {
    position: relative;
    display: inline-block;
    padding-right: 14px;
}
.deals-badge--menu {
    top: -6px;
    right: -10px;
}

/* ── Featured post panel (homepage + category "hero"): grey box with a
   lime square peeking out behind it — no slider ───────────────────────── */
.featured-panel {
    position: relative;
}
.featured-panel__flourish {
    position: absolute;
    width: 45%;
    max-width: 400px;
    height: 60%;
    max-height: 300px;
    background: var(--color-lime, #D1FF8A);
    bottom: -30px;
    right: -10px;
    z-index: 0;
}
.featured-panel__inner {
    position: relative;
    z-index: 1;
    background: var(--color-grey-01, #f4f4f4);
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 768px) {
    .featured-panel__inner {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}
.featured-panel__image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    background: #eee;
}
@media (min-width: 1024px) {
    .featured-panel__image {
        height: 320px;
    }
}

/* ── Table of contents (inc/toc.php): lime left-border on the active item,
   matching the article-sidebar "Indice" pattern ───────────────────────── */
.gn-toc-list a.gn-toc-active {
    border-left-color: var(--color-lime, #D1FF8A) !important;
    color: #000 !important;
}
.gn-toc-list a:hover {
    border-left-color: var(--color-lime, #D1FF8A) !important;
    color: #000 !important;
    background: var(--color-grey-01, #f4f4f4) !important;
}
.gn-toc-toggle:hover {
    border-color: #000 !important;
    color: #000 !important;
}
.gn-toc--open .gn-toc-toggle {
    border-color: #000 !important;
}

/* ── Homepage rails: video / offers ──────────────────────────────────── */
.rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}
.rail > a {
    scroll-snap-align: start;
}
/* Stays a true horizontal-scroll rail at every breakpoint — see the
   arrow-nav buttons added to the video/offers rail section heads
   (inc/homepage-rails.php) and assets/js/home-sliders.js, which they'd
   have nothing to do against a static grid. Cards just get a bit larger
   on desktop, matching the mockup's bigger rail tiles there. */
@media (min-width: 1024px) {
    .video-rail-item {
        width: 280px;
    }
    .video-rail-item__thumb {
        width: 280px;
        height: 158px;
    }
    #offers-rail .offer-rail-item {
        width: 200px;
    }
    #offers-rail .offer-rail-item__thumb {
        width: 200px;
        height: 134px;
    }
}
.rail__spacer {
    flex: 0 0 20px;
}
/* ── Video rail dark band: self-contained full-bleed background so this
   works both in its old fixed spot (front-page.php) and as a
   drag-and-drop-positioned "YouTube" homepage-builder block (see
   gearnews_render_homepage_section_youtube() in inc/homepage-rails.php),
   which renders inside the normal max-width container. The 100vw/
   translateX trick breaks out to the true viewport edges regardless of
   that parent's width. ─────────────────────────────────────────────── */
.video-rail-dark {
    background: #000;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 44px 0;
}
.video-rail-dark__inner {
    /* Same content width as every other homepage section: .site-main
       .container is max-width 1200px incl. its 16px (px-4) side padding. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
/* As a homepage-builder block it sits between other sections, which all
   carry mb-12 — give the dark band the same breathing room below. */
.video-rail-dark--section {
    margin-bottom: 48px;
}
.video-rail-item {
    width: 212px;
    flex: 0 0 auto;
    text-decoration: none;
    color: #000;
}
.video-rail-item__thumb-wrap {
    position: relative;
}
.video-rail-item__thumb {
    width: 212px;
    height: 120px;
    object-fit: cover;
    display: block;
    background: #111;
    border-radius: var(--radius-default, 2px);
}
.video-rail-item__duration {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: var(--color-lime, #D1FF8A);
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: var(--radius-default, 2px);
}
/* ── Play-button overlay on the YouTube rail's lightbox-triggering thumbs
   (see gearnews_render_homepage_section_youtube() and data-video-lightbox
   in assets/js/home-sliders.js) ────────────────────────────────────── */
.video-rail-item__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background .2s;
}
.video-rail-item__play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    transition: border-color .2s;
}
.video-rail-item:hover .video-rail-item__play {
    background: var(--color-lime, #D1FF8A);
}
.video-rail-item:hover .video-rail-item__play::before {
    border-left-color: #000;
}
.video-rail-item__title {
    font-size: 17px;
    line-height: 1.26;
    font-weight: 700;
    margin-top: 10px;
}
.video-rail-item__excerpt {
    font-size: 13px;
    line-height: 1.45;
    color: #9ca3af;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Dark band: whole cards per view — 1 on phones (no half-cut second
   card), 2 on tablets, 4 on desktop. Overrides the fixed 212/280px widths
   above; mandatory snap so a swipe always lands on a full card. */
.video-rail-dark .rail {
    scroll-snap-type: x mandatory;
}
.video-rail-dark .video-rail-item {
    width: auto;
    flex: 0 0 100%;
}
.video-rail-dark .video-rail-item__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
.video-rail-dark .rail__spacer {
    display: none;
}
@media (min-width: 640px) {
    .video-rail-dark .video-rail-item {
        flex-basis: calc((100% - 14px) / 2);
    }
}
@media (min-width: 1024px) {
    .video-rail-dark .video-rail-item {
        flex-basis: calc((100% - 3 * 14px) / 4);
    }
}
.offer-rail-item {
    width: 150px;
    flex: 0 0 auto;
    text-decoration: none;
    color: #000;
}
.offer-rail-item__thumb {
    width: 150px;
    height: 100px;
    object-fit: cover;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-default, 2px);
}
.offer-rail-item__badge {
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    margin-top: 8px;
    border-radius: var(--radius-default, 2px);
}
.offer-rail-item__name {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    margin-top: 6px;
}
.offer-rail-item__price {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
}

/* ── Newsletter signup block ─────────────────────────────────────────── */
.newsletter-signup {
    background: var(--color-lime, #D1FF8A);
    padding: 24px 20px;
    border-radius: var(--radius-default, 2px);
    text-align: center;
}
.newsletter-signup__heading {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}
.newsletter-signup__body {
    font-size: 14px;
    color: #000;
    margin-top: 6px;
}
.newsletter-signup__form {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.newsletter-signup__input {
    flex: 1;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    padding: 12px 14px;
    font-size: 15px;
    background: #fff;
    color: #000;
}
.newsletter-signup__submit {
    flex: 0 0 auto;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    background: #000;
    color: #fff;
    cursor: pointer;
}

/* ── Content card: a plain vertical card at every breakpoint (image on top,
   text below) — no row-on-mobile transform, so padding stays consistent
   regardless of how many grid columns are active. ─────────────────────── */
.content-card {
    border: 1px solid var(--color-grey-panel-border, #e5e7eb);
    border-radius: var(--radius-default, 2px);
}

/* ── Post labels (HOT, DEAL, NAMM, UPDATE, …): get_tag_list() in
   inc/features/post-labels.php, ported from the old theme but never wired
   into markup until now — template-parts/content-card.php echoes it inside
   .content-card__thumb-wrap (position:relative there anchors this). Only
   appears when Theme Funktionen → "Post-Labels aktivieren" is on. ──────── */
.gn-label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--radius-default, 2px);
    background: #000;
    color: #fff;
}
.gn-label--deal,
.gn-label--available {
    background: var(--color-lime, #D1FF8A);
    color: #000;
}
.gn-label--hot {
    background: #e11d48;
    color: #fff;
}
.gn-label--update {
    background: #2563eb;
    color: #fff;
}
.gn-label--archiv {
    background: #6b7280;
    color: #fff;
}
.gn-label--audio {
    background: #7c3aed;
    color: #fff;
}
.gn-label--freeware {
    background: #16a34a;
    color: #fff;
}
/* Expired-deal dimming — only on the "Offerte" category archive itself
   (template-parts/content-card.php sets this class there, via
   gearnews_is_expired_deal() in inc/deals.php), not other listings that
   include a deal post. */
.content-card__thumb-wrap--expired img {
    filter: grayscale(100%);
    opacity: .55;
}
.content-card__thumb-wrap--expired {
    background: #e5e7eb;
}
.gn-label--expired,
.content-card__thumb-wrap--expired .gn-label--deal {
    background: #6b7280;
    color: #fff;
}

/* ── Category / search pagination: brand colors (real, crawlable
       pagination — see category.php / category-recensioni.php / search.php;
       infinite scroll was removed) ──────────────────────────────────────── */
.pagination-links .page-numbers.current,
.pagination .page-numbers.current {
    background: var(--color-lime, #D1FF8A) !important;
    color: #000 !important;
    border-radius: var(--radius-default, 2px);
}
.pagination-links .page-numbers,
.pagination .page-numbers {
    border-radius: var(--radius-default, 2px);
}

/* ── Rail arrow-nav: shared prev/next buttons for every horizontal-scroll
   rail (Top News slider, homepage "rail" blocks, video rail, offers rail).
   Wired up client-side against the nearest [data-rail-track] by
   assets/js/home-sliders.js — scrolling itself is native CSS scroll-snap,
   so touch/trackpad swipe works with zero JS. ─────────────────────────── */
.section-head__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}
.rail-nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.rail-nav__btn {
    width: 34px;
    height: 34px;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    background: #fff;
    color: #000;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-hover, .2s) ease, color var(--dur-hover, .2s) ease;
}
.rail-nav__btn:hover {
    background: var(--color-lime, #D1FF8A);
}
.rail-nav--dark .rail-nav__btn {
    border-color: #fff;
    background: transparent;
    color: #fff;
}
.rail-nav--dark .rail-nav__btn:hover {
    background: var(--color-lime, #D1FF8A);
    color: #000;
}

/* ── Top News slider: one full-width slide at a time, scroll-snap track,
   arrows + dots ─────────────────────────────────────────────────────── */
.top-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.top-slider__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #000;
}
.top-slider__label-top {
    background: var(--color-lime, #D1FF8A);
    padding: 2px 6px;
}
.top-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--radius-image, 5px);
}
.top-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    text-decoration: none;
    color: #000;
    display: block;
}
.top-slider__image {
    /* Natural aspect ratio, not a fixed-height crop — a set height +
       object-fit:cover was cutting off heads/text on images whose ratio
       didn't match the box. One slide is shown at a time here (not a
       grid), so a per-image height has no sibling to misalign with. */
    width: 100%;
    height: auto;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-image, 5px);
}
.top-slider__title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin: 14px 0 0;
    text-wrap: pretty;
}
.top-slider__excerpt {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.42;
}
.top-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 18px;
}
.top-slider__dot {
    width: 28px;
    height: 4px;
    padding: 0;
    border: none;
    background: #d9d9d6;
    cursor: pointer;
}
.top-slider__dot.is-active {
    background: #000;
}
@media (min-width: 1024px) {
    .top-slider__slide {
        display: grid;
        grid-template-columns: 1fr 330px;
        gap: 30px;
        align-items: center;
    }
    .top-slider__slide > .top-slider__image {
        order: 1;
    }
    .top-slider__slide > .top-slider__body {
        order: 2;
    }
}

/* ── Post rail: the "some slider blocks" builder type (rail display) —
   light-theme horizontal card rail, same scroll mechanics as .rail. ──── */
.post-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}
.post-rail__item {
    width: 220px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    text-decoration: none;
    color: #000;
}
.post-rail__thumb {
    width: 220px;
    height: 120px;
    object-fit: cover;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-default, 2px);
}
.post-rail__title {
    font-size: 18px;
    line-height: 1.28;
    font-weight: 700;
    margin-top: 8px;
    text-wrap: pretty;
}

/* ── Vetrina: the "Grid Posts" second-area block — 1 large feature + a
   2-up pair on the left (2/3), a text-only post list on the right (1/3).
   See gearnews_render_homepage_section_vetrina() in
   inc/homepage-sections.php. ───────────────────────────────────────────── */
.vetrina {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}
@media (min-width: 1024px) {
    .vetrina {
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        align-items: start;
    }
}
.vetrina__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}
.vetrina__feature {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    text-decoration: none;
    color: #000;
}
@media (min-width: 768px) {
    .vetrina__feature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: center;
    }
}
.vetrina__feature-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-image, 5px);
}
@media (min-width: 768px) {
    .vetrina__feature-image {
        height: 320px;
    }
}
.vetrina__feature-title {
    font-size: 26px;
    line-height: 1.16;
    font-weight: 700;
    text-wrap: pretty;
}
.vetrina__feature-excerpt {
    font-size: 15px;
    line-height: 1.45;
    color: #333;
    margin-top: 12px;
}
.vetrina__feature .card-meta {
    margin-top: 14px;
}
.vetrina__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.vetrina__pair-item {
    text-decoration: none;
    color: #000;
    display: block;
}
.vetrina__pair-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-default, 2px);
}
.vetrina__pair-title {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    margin-top: 10px;
    text-wrap: pretty;
}
.vetrina__pair-item .card-meta {
    margin-top: 8px;
}
.vetrina__list {
    border-top: 1px solid var(--color-hairline-list);
}
.vetrina__list-item {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-hairline-list);
}
.vetrina__list-item:last-child {
    border-bottom: none;
}
.vetrina__list-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-default, 2px);
    margin-bottom: 12px;
}
.vetrina__list-title {
    font-size: 17px;
    line-height: 1.28;
    font-weight: 700;
    text-wrap: pretty;
}
.vetrina__list-item .card-meta {
    margin-top: 8px;
}

/* ── Single post hero image: full width, between the title/meta header and
   the article-body+sidebar grid (see single.php / single-recensioni.php). ── */
.single-hero-image {
    /* Natural aspect ratio, not a fixed-height crop — see .top-slider__image
       above for why (same head/text-cropping issue, and this is a
       standalone full-width image with no grid row to stay aligned with). */
    width: 100%;
    height: auto;
    display: block;
    background: var(--color-grey-01, #f4f4f4);
}

/* ── Related posts ("Continua a leggere"): a horizontal slider, reusing
   .post-rail — see template-parts/single/related-posts.php. A section-head
   with arrow-nav buttons in it centers instead of baseline-aligns (a 34px
   button against a text baseline looks off). ───────────────────────────── */
.section-head:has(.rail-nav) {
    align-items: center;
}

/* ── Video lightbox: modal built + wired by initVideoLightbox() in
   assets/js/home-sliders.js, triggered by any [data-video-lightbox="<yt-id>"]
   link (currently the YouTube homepage-builder rail). Appended straight to
   <body> on first open, so it's never nested inside a transformed ancestor
   like .video-rail-dark (a CSS transform makes position:fixed descendants
   behave like position:absolute against it instead of the viewport). ──── */
.video-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    /* Above the mobile ad bar (200) and share menu (300). */
    z-index: 1000;
}
.video-lightbox.is-open {
    display: block;
}
.video-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.video-lightbox__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Also capped by height, so the close button above the video stays on
       screen on a phone in landscape (100px = button + breathing room). */
    width: min(94vw, 1100px, (100vh - 100px) * 16 / 9);
    width: min(94vw, 1100px, (100dvh - 100px) * 16 / 9);
}
.video-lightbox__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.video-lightbox__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-lightbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
body.video-lightbox-open {
    overflow: hidden;
}

/* ── Missing Tailwind utility: mt-3 is used in templates (category.php
   article count, homepage hero/featured) but was never compiled into
   assets/css/style.css (no build step in this repo). ─────────────────── */
.mt-3 {
    margin-top: .75rem;
}

/* ── Sidebar blocks: "Più Letti" + "Marche Popolari" (see
   template-parts/single/sidebar-extras.php) ───────────────────────────── */
.sidebar-block + .sidebar-block {
    margin-top: 32px;
}
.brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #fff;
    border: 1px solid #fff;
}
.brand-grid__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 12px 12px 26px;
    background: var(--color-grey-01, #f4f4f4);
    color: #000;
    text-decoration: none;
    transition: background var(--dur-hover, .2s) var(--ease-default, ease);
}
.brand-grid__item:hover {
    background: #e9e9e6;
}
.brand-grid__logo {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    display: block;
}
.brand-grid__name {
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}
.brand-grid__count {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    background: #fff;
    font-size: 12px;
    color: var(--color-grey-muted, #888);
}

/* ── Homepage: "Più Letti" + rectangle ad side by side ──────────────────── */
.home-mostread {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 1024px) {
    .home-mostread {
        grid-template-columns: 1fr 300px;
        align-items: start;
    }
}
.home-ad--leaderboard .gearnews-ad-leaderboard {
    min-height: 90px;
}
.home-ad--leaderboard .gearnews-ad-rectangle2,
.home-ad--rect .gearnews-ad-rectangle {
    min-height: 250px;
}
/* Mobile-only rectangles below the Vetrina block and inside the black
   YouTube box (gearnews_render_home_mobile_rect_ad() in inc/ads.php). */
.home-ad--mobile {
    margin-top: 32px;
}

/* ── Billboard band: white like the rest of the page (overrides the grey /
   dark backgrounds still in the compiled style.css until its next rebuild —
   src/app.css and critical.css already say #fff). ─────────────────────── */
.gearnews-billboard-outer,
.home .gearnews-billboard-outer {
    background: #fff;
}

/* ── Search results: excerpt / meta description under the title
   (gearnews_get_post_summary(), see search.php) ──────────────────────── */
.post-row__excerpt {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Article lists: Tailwind's preflight strips list-style/padding from
   every ul/ol and the compiled style.css has no .prose rules, so list
   blocks in articles rendered as bare lines. Scoped to list blocks and
   class-less direct children so component lists (TOC, slideshows, pro/con)
   stay untouched. ──────────────────────────────────────────────────────── */
.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list,
.entry-content > ul:not([class]),
.entry-content > ol:not([class]) {
    padding: 10px 1.5rem 10px calc(1.5rem + 1.25em);
    margin: 0;
}
.entry-content ul.wp-block-list,
.entry-content > ul:not([class]) {
    list-style: disc outside;
}
.entry-content ol.wp-block-list,
.entry-content > ol:not([class]) {
    list-style: decimal outside;
}
.entry-content .wp-block-list li,
.entry-content > ul:not([class]) li,
.entry-content > ol:not([class]) li {
    margin: .4em 0;
    padding-left: .25em;
}
.entry-content .wp-block-list li::marker,
.entry-content > ul:not([class]) li::marker,
.entry-content > ol:not([class]) li::marker {
    color: #000;
}
/* Nested lists */
.entry-content .wp-block-list ul,
.entry-content .wp-block-list ol {
    padding: 0 0 0 1.25em;
    margin: .25em 0;
}
.entry-content .wp-block-list ul { list-style: circle outside; }
.entry-content .wp-block-list ol { list-style: decimal outside; }

/* ── Article billboard: smaller on article pages so the headline isn't
   pushed below the fold — 728px wide keeps the 970x250 ratio (~188px tall
   instead of 250px). Homepage/archives keep the full 970px. ──────────── */
.single .gearnews-billboard-outer .gearnews-billboard {
    max-width: 728px;
}

/* ── Table of contents: bottom-right instead of bottom-left — the Borlabs
   Cookie consent icon lives bottom-left and covered the "Indice" pill. ── */
.gn-toc {
    left: auto !important;
    right: 20px;
}
.gn-toc-panel {
    left: auto !important;
    right: 0;
}
@media (max-width: 767px) {
    .gn-toc { right: 14px; }
}

/* ── Mobile menu: accordion sub-menus. The nav walker's sub-menu <ul>s are
   absolute, hover-revealed desktop dropdowns; in the slide-out panel they
   become inline, collapsed lists toggled by tapping the parent item
   (assets/js/navigation.js adds/removes .is-open). ───────────────────── */
#mobile-menu-panel li > ul {
    position: static !important;
    display: none !important;
    min-width: 0;
    box-shadow: none;
    border-top: 0;
    background: transparent;
    padding: 0 0 8px 12px;
}
#mobile-menu-panel li.is-open > ul {
    display: block !important;
}
#mobile-menu-panel li.menu-item-has-children > a {
    justify-content: space-between;
}
#mobile-menu-panel li.menu-item-has-children > a svg {
    width: 20px;
    height: 20px;
    margin-left: auto;
    transition: transform var(--dur-hover, .2s) ease;
}
#mobile-menu-panel li.is-open > a svg {
    transform: rotate(180deg);
}
#mobile-menu-panel li > ul a {
    white-space: normal;
}
#mobile-menu-panel .gn-submenu-all > a {
    font-weight: 600;
}

/* ── Article slideshows (Jetpack "Slideshow" block markup): rendered by
   the theme as a native scroll-snap slider — Jetpack's own Swiper script
   is dequeued (functions.php), it wasn't initialising and left the
   slides stacked one below the other. assets/js/article-slideshow.js adds
   the arrows + dots. The :not() guards leave a Swiper-initialised
   slideshow alone should Jetpack's script still run. ─────────────────── */
.entry-content .wp-block-jetpack-slideshow {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) {
    position: relative;
    overflow: hidden;
    background: var(--color-grey-01, #f4f4f4);
    border-radius: var(--radius-image, 5px);
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) .wp-block-jetpack-slideshow_swiper-wrapper {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) .wp-block-jetpack-slideshow_swiper-wrapper::-webkit-scrollbar {
    display: none;
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) .wp-block-jetpack-slideshow_slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) .wp-block-jetpack-slideshow_slide figure {
    margin: 0;
    padding: 0 !important;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) .wp-block-jetpack-slideshow_image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 560px);
    object-fit: contain;
    margin: 0 auto;
}
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) .wp-block-jetpack-slideshow_caption {
    position: static !important;
    width: 100%;
    margin: 0;
    padding: 8px 12px 10px;
    background: none !important;
    color: #555 !important;
    font-size: .78rem;
    text-align: center;
}
/* Jetpack's own controls do nothing without its script — replaced below. */
.wp-block-jetpack-slideshow_container:not(.swiper-initialized):not(.swiper-container-initialized) :is(.wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next, .wp-block-jetpack-slideshow_button-pause, .wp-block-jetpack-slideshow_pagination) {
    display: none !important;
}
.gn-slideshow__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.gn-slideshow__btn--prev { left: 10px; }
.gn-slideshow__btn--next { right: 10px; }
.gn-slideshow__btn[disabled] {
    opacity: .35;
    cursor: default;
}
.gn-slideshow__dots {
    flex-wrap: wrap;
    padding-top: 12px;
}

/* ── Stretched-link cards: rail items, Top News slides, vetrina, related
   posts, "in evidenza", two-column. The card is a plain element, only its
   title is the post link — whose ::after covers the whole card, so the
   entire card stays clickable — and the category link / action buttons
   sit above that layer (an <a> inside a card-wide <a> would be invalid
   HTML). See gearnews_render_card_meta() in inc/template-functions.php. ── */
.card-link {
    position: relative;
}
.card-link__main {
    color: inherit;
    text-decoration: none;
}
.card-link__main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.card-link__main:focus-visible {
    outline: none;
}
.card-link__main:focus-visible::after {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.card-link .card-meta a,
.card-link .card-actions {
    position: relative;
    z-index: 2;
}
.top-slider__body .card-meta {
    font-size: 14px;
}

/* ── Card actions: bookmark + share, right-aligned (inc/share.php) ──── */
.card-actions .gn-share-btn {
    cursor: pointer;
    line-height: 0;
}
.gn-share-menu {
    position: fixed;
    z-index: 300;
    min-width: 180px;
    background: #fff;
    border: 1px solid #000;
    border-radius: var(--radius-default, 2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}
.gn-share-menu[hidden] {
    display: none;
}
.gn-share-menu a,
.gn-share-menu button {
    display: block;
    width: 100%;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}
.gn-share-menu a:hover,
.gn-share-menu a:focus-visible,
.gn-share-menu button:hover,
.gn-share-menu button:focus-visible {
    background: var(--color-lime, #D1FF8A);
    outline: none;
}

/* ── Mobile: one card per swipe on every slider (homepage rails, related
   posts, offers, video rail, vetrina) — mandatory snap so a swipe always
   lands on a whole card; the arrow buttons page by exactly one card
   (home-sliders.js). ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .post-rail,
    .rail {
        scroll-snap-type: x mandatory;
        gap: 16px;
    }
    .post-rail__item,
    .rail > .offer-rail-item,
    .rail > .video-rail-item {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
    }
    .post-rail__thumb,
    .video-rail-item__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .offer-rail-item__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .post-rail .rail__spacer,
    .rail .rail__spacer {
        display: none;
    }

    /* Vetrina → slider: the main/pair/list wrappers dissolve
       (display:contents) so all 7 posts become sibling slides. */
    .vetrina {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .vetrina__main,
    .vetrina__pair,
    .vetrina__list {
        display: contents;
    }
    .vetrina__feature,
    .vetrina__pair-item,
    .vetrina__list-item {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        scroll-snap-align: start;
    }
    .vetrina__feature {
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 0;
    }
    .vetrina__feature-image,
    .vetrina__pair-image,
    .vetrina__list-image {
        height: auto;
        aspect-ratio: 16 / 10;
        margin-bottom: 0;
    }
    .vetrina__feature-title,
    .vetrina__pair-title,
    .vetrina__list-title {
        font-size: 20px;
        line-height: 1.25;
        margin-top: 12px;
    }
    .vetrina__feature-excerpt {
        display: none;
    }
    .vetrina__list-item {
        padding: 0;
        border-bottom: 0;
    }
}
@media (min-width: 768px) {
    .vetrina__list-image--slide,
    .vetrina__dots,
    .vetrina__mobile-head {
        display: none;
    }
}