/*
  visual-journal.css
  Styles for the long-scrolling visual journal page.
*/

/* Main container for the visual journal grid */
.visual-journal-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid for flexibility */
    grid-auto-rows: 25vw; /* Rows are proportional to viewport width */
    gap: 2rem;
    padding: 5vh 2rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevents horizontal scrollbars */
}

/* Individual item styling */
.visual-item {
    overflow: hidden;
    opacity: 0; /* Start hidden for fade-in effect */
    transform: translateY(20px); /* Start slightly lower for slide-in effect */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.visual-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.visual-item img,
.visual-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures media fills the container without distortion */
}

/* --- Random Grid Placement --- */
/* Default span */
.visual-item {
    grid-column: span 4;
    grid-row: span 2;
}

/* Create variety in the grid layout */
.visual-item:nth-child(11n + 1) { grid-column: 1 / span 5; grid-row: span 2; }
.visual-item:nth-child(11n + 2) { grid-column: 7 / span 6; grid-row: span 3; }
.visual-item:nth-child(11n + 3) { grid-column: 2 / span 4; grid-row: span 2; }
.visual-item:nth-child(11n + 4) { grid-column: 8 / span 4; grid-row: span 2; }
.visual-item:nth-child(11n + 5) { grid-column: 1 / span 7; grid-row: span 3; }
.visual-item:nth-child(11n + 6) { grid-column: 9 / span 4; grid-row: span 2; }
.visual-item:nth-child(11n + 7) { grid-column: 3 / span 5; grid-row: span 2; }
.visual-item:nth-child(11n + 8) { grid-column: 1 / span 4; grid-row: span 3; }
.visual-item:nth-child(11n + 9) { grid-column: 6 / span 7; grid-row: span-3; }
.visual-item:nth-child(11n + 10) { grid-column: 2 / span 6; grid-row: span 2; }
.visual-item:nth-child(11n + 11) { grid-column: 8 / span 5; grid-row: span 2; }

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .visual-journal-container {
        grid-template-columns: repeat(6, 1fr); /* Fewer columns on smaller screens */
        grid-auto-rows: 40vw;
        gap: 1rem;
        padding: 5vh 1rem;
    }

    /* Simplify grid placement for mobile */
    .visual-item:nth-child(odd) { grid-column: 1 / span 5; }
    .visual-item:nth-child(even) { grid-column: 2 / span 5; }
}