/* ==========================================================
   FALAE

   Arquivo:
      site-manifesto.css

   Domínio:
      Site Institucional

   Componente:
      Manifesto Institucional

   Responsabilidade:
      Reforçar visualmente o propósito da marca FALAE,
      conectando coragem, escuta, responsabilidade e
      transformação organizacional.

   Dependências:
      site-variables.css
      site-base.css
      site-typography.css
      site-buttons.css

   Sprint:
      20.1 — Produção Landing Page
========================================================== */


/* ==========================================================
   PROTEÇÃO DE SVG
========================================================== */

.site-manifesto svg {
    display: block;

    width: 1em;
    height: 1em;
    max-width: 100%;
    max-height: 100%;

    flex: 0 0 auto;
}


/* ==========================================================
   SEÇÃO
========================================================== */

.site-manifesto {
    position: relative;

    overflow: hidden;

    background-color: var(--site-color-white);
}


/* ==========================================================
   PAINEL
========================================================== */

.site-manifesto__panel {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            var(--site-space-12),
            8vw,
            var(--site-space-20)
        )
        var(--site-space-8);

    border:
        var(--site-border-width)
        solid
        rgba(15, 39, 71, 0.12);

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

    background:
        linear-gradient(
            145deg,
            var(--site-color-primary-active) 0%,
            var(--site-color-primary) 58%,
            var(--site-color-primary-hover) 100%
        );

    box-shadow:
        var(--site-shadow-lg),
        0 0 0 0.5rem rgba(255, 255, 255, 0.72);

    isolation: isolate;
}

.site-manifesto__panel::before {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 4rem 4rem;

    content: "";

    pointer-events: none;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.92),
            transparent 84%
        );
}


/* ==========================================================
   BRILHOS
========================================================== */

.site-manifesto__glow {
    position: absolute;

    width: 28rem;
    height: 28rem;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1rem);
}

.site-manifesto__glow--left {
    bottom: -16rem;
    left: -11rem;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.44),
            transparent 72%
        );
}

.site-manifesto__glow--right {
    top: -16rem;
    right: -10rem;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.16),
            transparent 72%
        );
}


/* ==========================================================
   CONTEÚDO
========================================================== */

.site-manifesto__content {
    position: relative;
    z-index: var(--site-z-content);

    max-width: 62rem;

    margin-inline: auto;

    text-align: center;
}

.site-manifesto__overline {
    margin:
        0
        0
        var(--site-space-4);

    color: rgba(255, 255, 255, 0.68);

    font-size: var(--site-font-size-xs);
    font-weight: var(--site-font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-manifesto__title {
    max-width: 18ch;

    margin:
        0
        auto
        var(--site-space-6);

    color: var(--site-color-white);

    font-size:
        clamp(
            var(--site-font-size-3xl),
            5vw,
            var(--site-font-size-4xl)
        );

    font-weight: var(--site-font-weight-extrabold);
    line-height: var(--site-line-height-tight);
    letter-spacing: var(--site-letter-spacing-tightest);

    text-wrap: balance;
}

.site-manifesto__description {
    max-width: 47rem;

    margin:
        0
        auto
        var(--site-space-10);

    color: rgba(255, 255, 255, 0.72);

    font-size: var(--site-font-size-lg);
    line-height: var(--site-line-height-relaxed);

    text-wrap: pretty;
}


/* ==========================================================
   PRINCÍPIOS
========================================================== */

.site-manifesto__principles {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--site-space-5);

    margin-bottom: var(--site-space-10);
}

.site-manifesto__principle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    align-items: flex-start;

    gap: var(--site-space-4);

    min-width: 0;

    padding:
        var(--site-space-5)
        var(--site-space-5);

    border:
        var(--site-border-width)
        solid
        rgba(255, 255, 255, 0.13);

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

    background-color: rgba(255, 255, 255, 0.075);

    text-align: left;

    box-shadow:
        0 1rem 2.5rem
        rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);

    transition:
        background-color var(--site-transition-base),
        border-color var(--site-transition-base),
        transform var(--site-transition-base);
}

.site-manifesto__principle:hover {
    border-color: rgba(255, 255, 255, 0.2);

    background-color: rgba(255, 255, 255, 0.11);

    transform: translateY(-4px);
}

.site-manifesto__principle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border:
        var(--site-border-width)
        solid
        rgba(255, 255, 255, 0.14);

    border-radius: var(--site-radius-md);

    background-color: rgba(255, 255, 255, 0.1);
    color: var(--site-color-white);

    flex: 0 0 auto;
}

.site-manifesto__principle-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.site-manifesto__principle-overline {
    display: block;

    margin-bottom: var(--site-space-1);

    color: rgba(255, 255, 255, 0.62);

    font-size: var(--site-font-size-xs);
    font-weight: var(--site-font-weight-bold);
    letter-spacing: var(--site-letter-spacing-wide);
    text-transform: uppercase;
}

.site-manifesto__principle-title {
    display: block;

    color: var(--site-color-white);

    font-size: var(--site-font-size-sm);
    font-weight: var(--site-font-weight-semibold);
    line-height: var(--site-line-height-relaxed);

    text-wrap: pretty;
}


/* ==========================================================
   DECLARAÇÃO
========================================================== */

.site-manifesto__statement {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--site-space-4);

    max-width: 50rem;

    margin:
        0
        auto
        var(--site-space-8);

    padding:
        var(--site-space-5)
        var(--site-space-6);

    border:
        var(--site-border-width)
        solid
        rgba(255, 255, 255, 0.13);

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

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.055)
        );

    box-shadow:
        0 1rem 2.5rem
        rgba(0, 0, 0, 0.14);

    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
}

.site-manifesto__statement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border-radius: var(--site-radius-md);

    background-color: rgba(255, 255, 255, 0.1);
    color: var(--site-color-white);

    flex: 0 0 auto;
}

.site-manifesto__statement-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.site-manifesto__statement-text {
    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    font-size: var(--site-font-size-md);
    font-weight: var(--site-font-weight-semibold);
    line-height: var(--site-line-height-relaxed);

    text-align: left;
    text-wrap: balance;
}


/* ==========================================================
   AÇÕES
========================================================== */

.site-manifesto__actions {
    display: flex;
    justify-content: center;

    gap: var(--site-space-3);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 61.9375rem) {

    .site-manifesto__panel {
        padding:
            var(--site-space-16)
            var(--site-space-8);
    }

    .site-manifesto__principles {
        grid-template-columns: 1fr;

        max-width: 42rem;

        margin-inline: auto;
        margin-bottom: var(--site-space-10);
    }

    .site-manifesto__description {
        font-size: var(--site-font-size-md);
    }

}


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

@media (max-width: 47.9375rem) {

    .site-manifesto__panel {
        padding:
            var(--site-space-12)
            var(--site-space-5);

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

    .site-manifesto__content {
        text-align: left;
    }

    .site-manifesto__title {
        max-width: none;

        margin-inline: 0;

        font-size:
            clamp(
                2.25rem,
                10vw,
                3rem
            );
    }

    .site-manifesto__description {
        margin-inline: 0;

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

    .site-manifesto__principles {
        margin-inline: 0;
    }

    .site-manifesto__principle {
        padding: var(--site-space-5);
    }

    .site-manifesto__statement {
        align-items: flex-start;

        margin-inline: 0;

        padding:
            var(--site-space-4)
            var(--site-space-5);
    }

    .site-manifesto__statement-text {
        font-size: var(--site-font-size-base);
    }

    .site-manifesto__actions {
        justify-content: stretch;
    }

    .site-manifesto__actions .site-button {
        width: 100%;
    }

}


/* ==========================================================
   MOBILE REDUZIDO
========================================================== */

@media (max-width: 27.5rem) {

    .site-manifesto__principle,
    .site-manifesto__statement {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

}


/* ==========================================================
   ACESSIBILIDADE
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-manifesto__principle {
        transition: none;
    }

    .site-manifesto__principle:hover {
        transform: none;
    }

}


/* ==========================================================
   IMPRESSÃO
========================================================== */

@media print {

    .site-manifesto__panel {
        border-color: var(--site-color-neutral-400);

        background: var(--site-color-white);

        box-shadow: none;
    }

    .site-manifesto__overline,
    .site-manifesto__title,
    .site-manifesto__description,
    .site-manifesto__principle-overline,
    .site-manifesto__principle-title,
    .site-manifesto__statement-text {
        color: var(--site-color-black);
    }

    .site-manifesto__principle,
    .site-manifesto__statement {
        border-color: var(--site-color-neutral-400);

        background: var(--site-color-white);

        box-shadow: none;
    }

}