/* ==========================================================
   Progetto Sentinel v2.0
   File: components.css
   Versione RC1
   ========================================================== */

/* ==========================================================
   BUTTONS
   ========================================================== */

.s-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    height: var(--button-height);

    padding-inline: var(--button-padding-x);

    border-radius: var(--button-radius);

    border: 1px solid transparent;

    font-family: var(--font-body);

    font-size: var(--font-size-base);

    font-weight: var(--font-weight-semibold);

    text-decoration: none;

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}

.s-button:hover {

    transform: translateY(-2px);

}

.s-button:active {

    transform: translateY(0);

}

.s-button:focus-visible {

    box-shadow: var(--focus-ring);

}

.s-button-primary {

    background: var(--color-primary);

    color: var(--text-white);

    border-color: var(--color-primary);

}

.s-button-primary:hover {

    background: var(--color-primary-dark);

    border-color: var(--color-primary-dark);

}

.s-button-outline {

    background: transparent;

    color: var(--text-primary);

    border-color: var(--border-color);

}

.s-button-outline:hover {

    background: rgba(255,255,255,.05);

    border-color: var(--color-primary);

    color: var(--color-primary);

}

/* ==========================================================
   CARD
   ========================================================== */

.s-card {

    height: 100%;

    padding: var(--card-padding);

    background: var(--bg-card);

    border: 1px solid var(--card-border);

    border-radius: var(--card-radius);

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);

}

.s-card:hover {

    transform: translateY(-6px);

    background: var(--bg-card-hover);

    border-color: rgba(10,132,255,.35);

    box-shadow: var(--shadow-md);

}

.s-card-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

    margin-bottom: 1.5rem;

    border-radius: var(--radius-lg);

    background: rgba(10,132,255,.12);

    color: var(--color-primary);

    font-size: 1.8rem;

}

.s-card h3 {

    margin-bottom: 1rem;

    font-size: var(--font-size-lg);

}

.s-card p {

    color: var(--text-secondary);

    line-height: var(--line-height-body);

}
/* ==========================================================
   FEATURE
   ========================================================== */

.s-feature {

    height: 100%;

    padding: 2rem;

    text-align: center;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-xl);

    background: var(--bg-card);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}

.s-feature:hover {

    transform: translateY(-6px);

    border-color: rgba(10,132,255,.35);

    box-shadow: var(--shadow-md);

}

.s-feature-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: var(--feature-icon-size);

    height: var(--feature-icon-size);

    margin-bottom: 1.75rem;

    border-radius: var(--feature-icon-radius);

    background: rgba(10,132,255,.12);

    color: var(--color-primary);

    font-size: 2rem;

}

.s-feature h3 {

    margin-bottom: 1rem;

    font-size: var(--font-size-xl);

}

.s-feature p {

    color: var(--text-secondary);

}

/* ==========================================================
   TIMELINE
   ========================================================== */

.s-timeline {

    position: relative;

    max-width: 980px;

    margin: 0 auto;

    padding-left: 2.5rem;

}

.s-timeline::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: .55rem;

    width: var(--timeline-line-width);

    background: rgba(255,255,255,.08);

}

.s-timeline-item {

    position: relative;

    padding-bottom: 3rem;

}

.s-timeline-item:last-child {

    padding-bottom: 0;

}

.s-timeline-dot {

    position: absolute;

    top: .4rem;

    left: -2rem;

    width: var(--timeline-dot-size);

    height: var(--timeline-dot-size);

    border: 4px solid var(--bg-surface);

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow: 0 0 0 5px rgba(10,132,255,.18);

}

.s-timeline-content {

    padding: 1.75rem;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    background: var(--bg-card);

    transition:
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}

.s-timeline-content:hover {

    transform: translateY(-4px);

    border-color: rgba(10,132,255,.30);

    box-shadow: var(--shadow-md);

}

.s-timeline-version {

    display: inline-block;

    margin-bottom: .75rem;

    padding: .35rem .85rem;

    border-radius: var(--radius-pill);

    background: rgba(10,132,255,.12);

    color: var(--color-primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    text-transform: uppercase;

    letter-spacing: .05em;

}

.s-timeline-content h3 {

    margin-bottom: .75rem;

    font-size: var(--font-size-lg);

}

.s-timeline-content p {

    color: var(--text-secondary);

}
/* ==========================================================
   COUNTER
   ========================================================== */

.s-counter {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    height: 100%;

    padding: 2rem 1.5rem;

    text-align: center;

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}

.s-counter:hover {

    transform: translateY(-5px);

    border-color: rgba(10,132,255,.30);

    box-shadow: var(--shadow-md);

}

.s-counter-value {

    display: block;

    font-family: var(--font-heading);

    font-size: var(--counter-size);

    font-weight: var(--font-weight-extrabold);

    line-height: 1;

    color: var(--color-primary);

}

.s-counter-label {

    display: block;

    color: var(--text-secondary);

    font-size: var(--font-size-base);

    font-weight: var(--font-weight-medium);

    letter-spacing: .02em;

}

/* ==========================================================
   CTA
   ========================================================== */

.s-cta {

    padding-block: 7rem;

    background:
        linear-gradient(
            180deg,
            var(--bg-body),
            var(--bg-surface)
        );

}

.s-cta-box {

    padding: 4rem;

    text-align: center;

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-2xl);

    box-shadow: var(--shadow-lg);

}

.s-cta-box h2 {

    margin-bottom: 1.5rem;

    font-size: var(--font-size-section-title);

}

.s-cta-box p {

    max-width: 760px;

    margin: 0 auto 2.5rem;

    color: var(--text-secondary);

    font-size: var(--font-size-lg);

}

/* ==========================================================
   NEWS CARD
   ========================================================== */

.s-news-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 2rem;

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-xl);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}

.s-news-card:hover {

    transform: translateY(-6px);

    border-color: rgba(10,132,255,.30);

    box-shadow: var(--shadow-md);

}

.s-news-date {

    display: inline-flex;

    align-self: flex-start;

    margin-bottom: 1.25rem;

    padding: .45rem .85rem;

    background: rgba(10,132,255,.12);

    color: var(--color-primary);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-semibold);

    text-transform: uppercase;

    letter-spacing: .08em;

}

.s-news-card h3 {

    margin-bottom: 1rem;

    font-size: var(--font-size-xl);

    line-height: 1.3;

}

.s-news-card p {

    color: var(--text-secondary);

    line-height: var(--line-height-body);

    margin-top: auto;

}
/* ==========================================================
   SCROLL TO TOP
   ========================================================== */

.s-scroll-top {

    position: fixed;

    right: 2rem;

    bottom: 2rem;

    display: flex;

    align-items: center;

    justify-content: center;

    width: var(--scroll-button-size);

    height: var(--scroll-button-size);

    border: none;

    border-radius: 50%;

    background: var(--color-primary);

    color: var(--text-white);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    box-shadow: var(--shadow-lg);

    z-index: var(--z-sticky);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition),
        background var(--transition);

}

.s-scroll-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.s-scroll-top:hover {

    background: var(--color-primary-dark);

    transform: translateY(-3px);

}

.s-scroll-top i {

    font-size: 1.1rem;

}

/* ==========================================================
   PAGE LOADER
   ========================================================== */

.s-loader {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--bg-body);

    z-index: var(--z-loader);

    transition:
        opacity .5s ease,
        visibility .5s ease;

}

.s-loader.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.s-loader-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: min(420px, 78vw);

    height: auto;

    min-height: 0;

    animation: sentinelPulse 2s infinite ease-in-out;

}

.s-loader-logo img {

    width: 100%;

    height: auto;

    object-fit: contain;

}

/* ==========================================================
   MOBILE OVERLAY
   ========================================================== */

.s-mobile-overlay {

    position: fixed;

    inset: 0;

    background: var(--bg-overlay);

    backdrop-filter: blur(var(--blur-sm));

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    /* Deve oscurare la pagina, ma restare sotto l'header che contiene
       il pannello di navigazione mobile. */
    z-index: calc(var(--z-header) - 1);

    transition:
        opacity var(--transition),
        visibility var(--transition);

}

.s-mobile-overlay.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

/* ==========================================================
   SOCIAL ICONS
   ========================================================== */

.s-social i {

    font-size: 1rem;

    transition:
        transform var(--transition);

}

.s-social a:hover i {

    transform: scale(1.1);

}

/* ==========================================================
   LINK TRANSITIONS
   ========================================================== */

.s-footer-links a,
.s-nav a {

    transition:
        color var(--transition);

}

/* ==========================================================
   BADGES
   ========================================================== */

.s-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: var(--badge-height);

    padding-inline: var(--badge-padding-x);

    border-radius: var(--badge-radius);

    background: rgba(10,132,255,.12);

    color: var(--color-primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    white-space: nowrap;

}
/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes sentinelPulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.08);

        opacity: .75;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}

@keyframes sentinelFadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes sentinelFade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes sentinelRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* ==========================================================
   ANIMATION HELPERS
   ========================================================== */

.s-fade-up {

    animation:
        sentinelFadeUp var(--animation-duration)
        ease forwards;

}

.s-fade {

    animation:
        sentinelFade var(--animation-duration)
        ease forwards;

}

.s-rotate {

    animation:
        sentinelRotate 8s linear infinite;

}

/* ==========================================================
   COMPONENT STATES
   ========================================================== */

.is-hidden {

    display: none !important;

}

.is-disabled {

    opacity: var(--opacity-disabled);

    pointer-events: none;

    user-select: none;

}

.is-loading {

    cursor: progress;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {

    .s-card,
    .s-feature,
    .s-news-card,
    .s-cta-box {

        padding: 2rem;

    }

    .s-counter {

        min-height: 180px;

    }

}

@media (max-width: 767.98px) {

    .s-button {

        width: 100%;

    }

    .s-card,
    .s-feature,
    .s-news-card {

        padding: 1.5rem;

    }

    .s-card-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    .s-feature-icon {

        width: 60px;

        height: 60px;

        font-size: 1.6rem;

    }

    .s-timeline {

        padding-left: 2rem;

    }

    .s-timeline-dot {

        left: -1.55rem;

    }

    .s-cta {

        padding-block: 4rem;

    }

    .s-cta-box {

        padding: 2rem 1.5rem;

    }

    .s-cta-box h2 {

        font-size: var(--font-size-section-title);

    }

    .s-cta-box p {

        font-size: var(--font-size-base);

    }

    .s-scroll-top {

        right: 1rem;

        bottom: 1rem;

    }

}

@media (hover: none) {

    .s-card:hover,
    .s-feature:hover,
    .s-news-card:hover,
    .s-counter:hover,
    .s-button:hover {

        transform: none;

    }

}

/* ==========================================================
   END OF FILE
   ========================================================== */

.visually-hidden {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;

}