/* layout.css — canvas pontilhado, container e grade bento.
   Mobile-first: base é coluna única linear; telas maiores viram bento de 6 colunas.
   Regra de estabilidade: linhas em auto (conteúdo manda), células da mesma
   faixa esticam juntas (align-items: stretch, o default). Nada de min-height
   na grade — era isso que esticava as linhas e abria buracos. */

/* Canvas: papel + pontilhado (decorativo, não interfere no conteúdo) */
body {
    background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    background-position: -11px -11px;
}

.container {
    width: min(100% - 2 * var(--space-3), 72rem);
    margin-inline: auto;
    padding-block: var(--space-4);
}

/* --- Bento --- */
/* Base (mobile): empilhado, linear, funcional. */
.bento {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .bento { grid-template-columns: repeat(6, 1fr); }

    /* Larguras — combináveis; default meia-largura. */
    .card        { grid-column: span 3; }
    .card--small { grid-column: span 2; }
    .card--wide  { grid-column: span 4; }
    .card--full  { grid-column: span 6; }
    .card--tall  { grid-row: span 2; }
}

/* Deslocamento orgânico: cada card sai ligeiramente do eixo (bem menos que o
   gap). Pseudo-aleatório via nth-child — período 7, combinado com o período 4
   das bordas dá 28 combinações antes de repetir. */
.bento > .card:nth-child(7n+1) { translate: 3px -2px; }
.bento > .card:nth-child(7n+2) { translate: -4px 2px; }
.bento > .card:nth-child(7n+3) { translate: 2px 3px; }
.bento > .card:nth-child(7n+4) { translate: -2px -3px; }
.bento > .card:nth-child(7n+5) { translate: 4px 1px; }
.bento > .card:nth-child(7n+6) { translate: -3px 3px; }
.bento > .card:nth-child(7n)   { translate: 1px -4px; }

/* --- Landing --- */
@media (min-width: 48rem) {
    .home-photo { grid-column: span 2; }
    .home-intro { grid-column: span 4; }
    .home-note  { grid-column: span 4; }
    .home-now   { grid-column: span 2; }

    /* Cards de projeto: 3 lado a lado, internos alinhados via subgrid
       (faixa tag / título / texto compartilhada entre os três). */
    .home-project {
        grid-column: span 2;
        grid-row: span 3;
        display: grid;
        grid-template-rows: subgrid;
        row-gap: var(--space-2);
        align-content: start;
    }
    .card.home-project > * { margin-top: 0; }
}

.home-project h2 { font-size: 1.15rem; }

/* Foto: quadrada, imagem cobre o card inteiro (recorte pelo raio do card).
   É o 1º card da grade → fundo/raio no próprio elemento, IGUAIS ao ::before
   variante rough-1 (borda fica acima da imagem, sem papel por cima).
   Seletores .card.home-photo: layout.css carrega ANTES de card.css. */
.card.home-photo {
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--paper-box);
    border-radius: 28px 10px 24px 12px / 12px 24px 10px 28px;
    box-shadow: 3px 4px 0 rgba(58, 56, 47, 0.18);
}
.card.home-photo::before {
    background: transparent;
    box-shadow: none;
    z-index: 2;
}
.home-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.02);
}

/* --- Créditos: caixas separadas e mais quadradas --- */
.bento--credits {
    gap: var(--space-5);
}
@media (min-width: 40rem) {
    .bento--credits {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
    .bento--credits .card {
        grid-column: auto;
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}