/* Estilos só da página about (app/Views/about.php). Carregado depois do base.css. */

.info-cards {
    display: grid;
    gap: 22px;

    li { padding: 26px 30px; border-radius: var(--radius-lg); background: #eef4fb; }
    h3 { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.6875rem); font-weight: 600; color: var(--navy); }
    p { margin-top: 10px; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3125rem); font-weight: 300; line-height: 1.55; color: var(--muted); }
}

.based { margin-top: clamp(48px, 6vw, 72px); text-align: center; font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.6875rem); font-weight: 600; color: var(--navy); }

.name-quote { margin-top: 28px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.8125rem); font-style: italic; font-weight: 700; color: var(--blue); }

.photo-cards {
    display: grid;
    gap: 24px;

    @media (min-width: 900px) { grid-template-columns: repeat(3, 1fr); }

    li {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 420px;
        overflow: hidden;
        border-radius: var(--radius);

        @media (min-width: 900px) { min-height: 600px; }

        &::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 32, 50, 0) 30%, rgba(18, 32, 50, 0.92) 85%); }
        &:hover img { scale: 1.035; }
    }

    img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
    .body { position: relative; z-index: 1; padding: 32px; }
    .number { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--gold); }
    h3 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); font-weight: 700; color: #fff; }
    p { margin-top: 12px; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); font-weight: 300; line-height: 1.55; color: #e7ecf3; }
}