/* ==========================================================================
   Mobile Adaptive Canvas Layout Engine
   ========================================================================== */

.site-header {
    margin: 2rem 1rem 1rem 1rem;
}

.logo-area h1 {
    font-size: 2rem;
    letter-spacing: -1px;
}

.header-controls-group {
    margin-top: 1.5rem;
    gap: 1rem;
}

/* Category Menu Navigation List Alignment */
.category-nav ul {
    gap: 0.25rem;
}

.category-nav button {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.main-content {
    padding: 0 1rem;
}

.intro-section {
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

/* ==========================================================================
   Mobile Core Gallery Engines (Single Column Stack)
   ========================================================================== */
.gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 3.5rem; /* Generous breathing room between vertical content pieces */
    transition: gap 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   Layout State A: Strict Grid (Uniform Mobile Framework)
   -------------------------------------------------------------------------- */
.gallery-grid.mode-strict .gallery-card {
    width: 100%;
    transform: none;
}

.gallery-grid.mode-strict .card-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Clean, stable square framing for quick scanning */
}

/* --------------------------------------------------------------------------
   Layout State B: Fluid Frame (Asymmetric Mobile Magazine)
   -------------------------------------------------------------------------- */
.gallery-grid.mode-fluid {
    gap: 5rem; /* Expands spacing to make asymmetric alignment deliberate */
}

/* Alternate widths to break the rigid full-bleed appearance */
.gallery-grid.mode-fluid .gallery-card:nth-child(2n+1) {
    width: 90%;
    align-self: flex-start; /* Clings to left boundary */
}

.gallery-grid.mode-fluid .gallery-card:nth-child(2n) {
    width: 85%;
    align-self: flex-end; /* Clings to right boundary */
}

/* Alternate the metadata alignment to match the card rhythm */
.gallery-grid.mode-fluid .gallery-card:nth-child(2n) .card-info {
    text-align: right;
}

/* Bring back the elegant vertical aspect ratios for the fluid presentation */
.gallery-grid.mode-fluid .card-image-wrapper {
    aspect-ratio: 4 / 5;
}

/* Profile / Contact Section Block Settings */
.profile-section {
    margin-top: 5rem;
    padding-top: 3rem;
}

.about-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.social-item-link {
    max-width: 100%;
}

.contact-block {
    margin-bottom: 2rem;
}