/* =========================================
   ITAPROFILE / APPLE-STYLE MINIMAL POLISH
   Add after the main CSS file.
   Requires Inter variable font loaded in the main stylesheet.
   ========================================= */

::root {
    --bg-main: #ececef;
    --bg-stage: #ececef;

    --bg-card: #ffffff;
    --bg-card-strong: #ffffff;
    --bg-card-solid: #ffffff;
    --bg-dark: #1d1d1f;

    --text-main: #1d1d1f;
    --text-muted: rgba(29, 29, 31, 0.58);
    --text-soft: rgba(29, 29, 31, 0.44);

    --accent-bg: #c9fb00;
    --accent-text: #101010;

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --gap-main: 12px;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.025);
    --shadow-hover: 0 3px 10px rgba(0, 0, 0, 0.04);
    --hairline: rgba(29, 29, 31, 0.08);
}

html,
body {
    font-optical-sizing: auto;
    font-feature-settings: "cv01", "cv05", "cv08", "ss03";
    text-rendering: optimizeLegibility;
}

/* quieter premium glass */
.city-selector,
.year-segmented-control,
.nav-pill,
.about-shortcut,
.profile-chip,
.mobile-section-bar,
.breaking-head,
.event-card,
.bento-item,
.about-item,
.onair-card,
.place-card,
.places-cta,
.empty-state {
    border: 1px solid rgba(29, 29, 31, 0.06);
    box-shadow: none;
}

.bento-item,
.event-card,
.about-item,
.onair-card,
.place-card,
.places-cta,
.empty-state {
    background-color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.bento-item:not([style*="background-image"]) {
    background: #ffffff;
    box-shadow: none;
}

.bento-item:not([style*="background-image"]):hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
}

.bento-item:hover,
.about-item:hover,
.onair-card:hover,
.place-card:hover,
.event-card:hover,
.dual-access-card:hover,
.dashboard-pill:hover,
.profile-chip:hover,
.about-shortcut:hover,
.onair-link:hover,
.place-more:hover,
.places-cta a:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.nav-pill:hover {
    background: rgba(255, 255, 255, 0.62);
}

.nav-pill.is-active {
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 10px 28px rgba(0, 0, 0, 0.045);
}

/* typography refinement */
.bento-item h2,
.onair-card h2,
.place-card h2,
.event-info h3,
.about-item h2,
.about-item h3,
.empty-state h2,
.places-cta h2,
.dual-access-top h4 {
    letter-spacing: -0.045em;
    font-weight: 660;
}

.bento-item p,
.onair-card p,
.place-card p,
.event-info p,
.about-item p,
.empty-state p,
.places-cta p,
.nav-subtitle,
.dual-access-top p,
.dual-access-card span {
    color: var(--text-muted);
    font-weight: 470;
}

.item-label,
.label-mini,
.event-date,
.event-tag,
.ticket-text,
.breaking-head,
.mobile-section-kicker,
.pill-text,
.nav-title {
    letter-spacing: 0.11em;
}

/* image cards: softer contrast, more editorial */
.bento-item[style*="background-image"]::before,
.place-card::before,
.onair-photo::before,
.about-item.has-bg::before {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.72) 100%),
        radial-gradient(circle at 75% 12%, rgba(201, 251, 0, 0.10), transparent 34%);
}

.bento-item[style*="background-image"],
.onair-card[style*="background-image"],
.place-card[style*="background-image"],
.about-item[style*="background-image"],
.nav-icon[style*="background-image"] {
    filter: saturate(0.9) contrast(1.015);
}

/* cleaner dark/accent blocks */
.dashboard-pill,
.event-card.type-art,
.onair-dark,
.empty-state,
.about-item.manifesto {
    background: var(--bg-dark);
}

.selector-thumb,
.year-thumb,
.year-seg-btn.active,
.month-divider.active,
.places-cta,
.onair-green,
.dual-prime:hover {
    background-color: var(--accent-bg);
}

/* focus states for keyboard accessibility */
a:focus-visible,
button:focus-visible,
.nav-pill:focus-visible,
.profile-chip:focus-visible,
.year-seg-btn:focus-visible,
.sel-btn:focus-visible {
    outline: 2px solid rgba(29, 29, 31, 0.72);
    outline-offset: 3px;
}

/* mobile: slightly tighter, more app-like */
@media (max-width: 720px) {
    :root {
        --radius-xl: 28px;
        --gap-main: 10px;
    }

    .portal-wrapper {
        padding: 8px;
    }

    .sidebar,
    .stage {
        padding-left: 12px;
        padding-right: 12px;
    }

    .bento-item,
    .onair-card,
    .place-card,
    .places-cta,
    .empty-state,
    .about-item {
        padding: 24px;
    }

    .mobile-section-bar {
        border-radius: 24px;
        padding: 16px;
    }
}