/* Portfolio Page Specific Styles */

/* Page Hero Section */
.page-hero-section {
    padding-top: var(--spacing-6xl);
    /* pt-32 */
    padding-bottom: var(--spacing-4xl);
    /* pb-16 */
    background-color: var(--color-surface-light);
    border-bottom: 1px solid var(--color-border-light);
}

.page-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-dark-charcoal);
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
}

.page-description {
    font-size: 1.0625rem;
    /* 17px */
    color: var(--color-slate-600);
    max-width: 48rem;
    /* max-w-3xl */
    font-weight: 300;
    line-height: 1.6;
    margin-top: var(--spacing-xl);
}

/* Portfolio Grid Section (uses asset-tile-grid from home.css for consistency) */
.portfolio-grid-section {
    background-color: var(--color-white);
}

/* Re-using .asset-tile-grid, .asset-tile-link, etc. from home.css to keep styles consistent.
   Ensure home.css's asset tile styles are applicable or generalize them into global.css
   if they are truly shared across portfolio views. For now, assuming they are imported
   or copied to global as needed. */
/* Copied here for clarity of what styles are expected */
.asset-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

@media (min-width: 768px) {
    .asset-tile-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
    }
}

.asset-tile-link {
    display: block;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 0.25rem;
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    text-align: left;
    transition: all 0.3s ease;
    cursor: pointer;
}

.asset-tile-link:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* hover:shadow-lg */
}

.asset-tile-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    overflow: hidden;
}

.asset-tile-content {
    padding: var(--spacing-lg);
}

@media (min-width: 768px) {
    .asset-tile-content {
        padding: var(--spacing-2xl);
    }
}

.asset-tile-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-sm);
}

.asset-tile-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-dark-charcoal);
    margin-bottom: var(--spacing-sm);
}

.asset-tile-description {
    font-size: 0.875rem;
    color: var(--color-slate-600);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.asset-tile-footer {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
}

.asset-tile-gla {
    color: var(--color-slate-500);
}

.asset-tile-details-link {
    color: var(--color-accent-orange);
    transition: color 0.3s ease;
}

.asset-tile-link:hover .asset-tile-details-link {
    color: var(--color-dark-charcoal);
}