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

/* ==========================================================
   BODY
   ========================================================== */

body {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

/* ==========================================================
   MAIN
   ========================================================== */

main {

    flex: 1;

    display: flex;

    flex-direction: column;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container {

    width: 100%;

    max-width: var(--container-max);

    margin-inline: auto;

    padding-inline: 1.5rem;

}

/* ==========================================================
   SECTIONS
   ========================================================== */

.s-section {

    position: relative;

    padding-block: var(--section-padding-y);

    overflow: hidden;

}

.s-section-dark {

    background: var(--bg-surface);

}

.s-section-header {

    max-width: 760px;

    margin: 0 auto 4rem;

    text-align: center;

}

.s-section-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .5rem;

    margin-bottom: 1rem;

    padding: .55rem 1rem;

    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);

    letter-spacing: .08em;

    text-transform: uppercase;

}

.s-section-title {

    margin-bottom: 1.5rem;

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

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

    line-height: 1.1;

}

.s-section-subtitle {

    color: var(--text-secondary);

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

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

}

/* ==========================================================
   HEADER
   ========================================================== */

.s-header {

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    height: var(--header-height);

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

    background: rgba(7,17,29,.82);

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

    border-bottom: 1px solid var(--header-border);

}

.s-header__wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.25rem;

    height: var(--header-height);

}

.s-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}

.s-logo img {

    height: 54px;

    width: auto;

}

.s-nav {

    display: flex;

    align-items: center;

    margin-left: auto;

}

.s-nav ul {

    display: flex;

    align-items: center;

    gap: clamp(.75rem, 1.35vw, 1.5rem);

}

.s-nav a {

    position: relative;

    color: var(--text-secondary);

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

    transition: var(--transition);

}

.s-nav a:hover {

    color: var(--text-primary);

}

.s-nav a.is-active,
.s-nav a.active,
.s-nav a[aria-current="page"] {
    color: var(--text-primary);
}

.s-nav a.is-active::after,
.s-nav a.active::after,
.s-nav a[aria-current="page"]::after {
    position: absolute;
    right: 0;
    bottom: -.65rem;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--color-primary);
    content: "";
}

.s-header__actions {

    display: flex;

    align-items: center;

    gap: 1rem;

}
/* ==========================================================
   HERO
   ========================================================== */

.s-hero {

    display: flex;

    align-items: center;

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

    padding-block: 5rem;

    position: relative;

}

.s-hero .row {

    align-items: center;

}

.s-hero h1 {

    margin-bottom: 2rem;

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

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

    line-height: 1.05;

    letter-spacing: -0.03em;

    max-width: var(--hero-content-width);

}

.s-hero p {

    max-width: 640px;

    margin-bottom: 2.5rem;

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

    color: var(--text-secondary);

}

.s-hero__buttons {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}

.s-hero-preview {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 520px;

    padding: 2rem;

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

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

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

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

    color: var(--text-muted);

    text-align: center;

}

/* ==========================================================
   GRID HELPERS
   ========================================================== */

.row {

    row-gap: 2rem;

}

.g-4 {

    --bs-gutter-x: 1.5rem;

    --bs-gutter-y: 1.5rem;

}

.g-5 {

    --bs-gutter-x: 3rem;

    --bs-gutter-y: 3rem;

}

/* ==========================================================
   CONTENT
   ========================================================== */

.s-content {

    max-width: var(--content-max-width);

    margin-inline: auto;

}

.s-content--narrow {

    max-width: var(--content-narrow-width);

}

/* ==========================================================
   FLEX UTILITIES
   ========================================================== */

.s-flex {

    display: flex;

}

.s-flex-center {

    display: flex;

    align-items: center;

    justify-content: center;

}

.s-flex-between {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.s-flex-column {

    display: flex;

    flex-direction: column;

}

/* ==========================================================
   SPACING UTILITIES
   ========================================================== */

.mt-auto {

    margin-top: auto;

}

.mx-auto {

    margin-inline: auto;

}

.text-center {

    text-align: center;

}

.w-100 {

    width: 100%;

}
/* ==========================================================
   FOOTER
   ========================================================== */

.s-footer {

    margin-top: auto;

    padding-top: var(--footer-padding);

    padding-bottom: 2rem;

    background: var(--bg-surface);

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

}

.s-footer-logo {

    width: 180px;

    height: auto;

    margin-bottom: 1.5rem;

}

.s-footer-description {

    max-width: 340px;

    color: var(--text-secondary);

}

.s-footer h4 {

    margin-bottom: 1.5rem;

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

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

}

.s-footer-links {

    display: flex;

    flex-direction: column;

    gap: .9rem;

}

.s-footer-links a {

    color: var(--text-secondary);

    transition: var(--transition);

}

.s-footer-links a:hover {

    color: var(--color-primary);

}

.s-social {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;

}

.s-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 50%;

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

    transition: var(--transition);

}

.s-social a:hover {

    color: var(--color-primary);

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

    transform: translateY(-2px);

}

.s-footer-divider {

    margin: 3rem 0 2rem;

    border: 0;

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

}

.s-footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    flex-wrap: wrap;

}

.s-footer-bottom p {

    color: var(--text-muted);

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

}

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

@media (max-width: 991.98px) {

    .s-header__wrapper {

        gap: 1rem;

    }

    .s-nav {

        display: none;

    }

    .s-hero {

        text-align: center;

    }

    .s-hero h1 {

        max-width: 100%;

    }

    .s-hero p {

        margin-inline: auto;

    }

    .s-hero__buttons {

        justify-content: center;

    }

    .s-hero-preview {

        margin-top: 3rem;

        min-height: 360px;

    }

    .s-section {

        padding-block: var(--section-padding-y-mobile);

    }

    .s-footer {

        text-align: center;

    }

    .s-footer-description {

        margin-inline: auto;

    }

    .s-social {

        justify-content: center;

    }

    .s-footer-bottom {

        justify-content: center;

    }

}
/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .container {

        padding-inline: 1rem;

    }

    .s-header {

        height: 72px;

    }

    .s-header__wrapper {

        height: 72px;

    }

    .s-logo img {

        height: 44px;

    }

    .s-section-header {

        margin-bottom: 3rem;

    }

    .s-section-title {

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

    }

    .s-section-subtitle {

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

    }

    .s-hero {

        min-height: auto;

        padding-top: 3rem;

        padding-bottom: 4rem;

    }

    .s-hero h1 {

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

    }

    .s-hero p {

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

    }

    .s-hero-preview {

        min-height: 280px;

        padding: 1.5rem;

    }

    .s-hero__buttons {

        flex-direction: column;

        align-items: stretch;

        width: 100%;

    }

    .s-hero__buttons .s-button {

        width: 100%;

        justify-content: center;

    }

    .s-footer {

        padding-top: 4rem;

    }

}

/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1600px) {

    .container {

        max-width: 1500px;

    }

}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {

    .s-header,
    .s-footer,
    .s-scroll-top,
    .s-loader,
    .s-mobile-overlay {

        display: none !important;

    }

    body {

        background: #ffffff;

        color: #000000;

    }

    .s-section {

        padding: 2rem 0;

        break-inside: avoid;

    }

}

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