/************************************************************************************************
 *
 * Project:     Harmonia
 * File:        /public_html/assets/css/profiles.css
 * Version:     v1.0.2
 * Purpose:     Styling for Roadmap Phase 2/3's profile views — the public profile page
 *              (profiles/show.blade.php), account/profiles/* (hub list, create, edit, photos),
 *              and users/show.blade.php. Loaded via @stylesheets(['profiles']) — see
 *              App\Support\AssetManifest.
 *
 * Notes:
 * - .hx-profile-type-fields[hidden] re-asserts display:none — an unconditional `display: flex` on
 *   the base class silently defeated the native `hidden` attribute's own UA-stylesheet rule (an
 *   author rule always wins over the UA stylesheet, regardless of specificity), so setting
 *   `hidden` — server-side or via profile-type-fields.js — had no visible effect at all. This is
 *   why every profile-type fieldset was showing simultaneously (found 2026-09-17).
 * - .hx-photo-grid/.hx-photo-card (Phase 3, Item 8) style the portfolio photo grid, used both on
 *   the owner-only management page (account/profiles/photos.blade.php) and the public profile page.
 *
 ************************************************************************************************/

.hx-profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.hx-profile-header h1 {
    margin: 0;
}

.hx-profile-meta {
    color: var(--hx-color-muted);
    margin-block-end: 1.25rem;
}

.hx-profile-section {
    margin-block-start: 1.5rem;
}

.hx-profile-section h2 {
    font-size: 1rem;
    color: var(--hx-color-fg-secondary);
    margin-block-end: 0.5rem;
}

.hx-profile-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem 1.5rem;
}

.hx-profile-details dt {
    font-size: 0.8rem;
    color: var(--hx-color-muted);
}

.hx-profile-details dd {
    margin: 0;
}

.hx-profile-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-block-end: 1.5rem;
}

.hx-profile-card {
    background: var(--hx-color-surface-secondary);
    border: 1px solid var(--hx-color-border);
    border-radius: var(--hx-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hx-profile-card h3 {
    margin: 0;
    font-size: 1rem;
}

.hx-profile-type-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--hx-color-border-subtle);
}

.hx-profile-type-fields[hidden] {
    display: none;
}

.hx-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-block: 1rem 1.5rem;
}

.hx-photo-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hx-photo-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--hx-radius);
    border: 1px solid var(--hx-color-border);
    background: var(--hx-color-surface-secondary);
}

.hx-photo-card__caption {
    font-size: 0.85rem;
    color: var(--hx-color-muted);
    margin: 0;
}