/* ============================================
   THE STUDIO — Pamusha Interiors projects page
   Built using only existing site design tokens:
   colours, typography, spacing, widths.
   No drop shadows. No rounded corners. Minimal hover.
   ============================================ */

.interiors-page {
    background-color: var(--ivory);
    color: var(--chestnut);
}

/* ── HEADER ─────────────────────────────────────
   The editorial header reuses the Pamusha Story page's `matisse-block`
   classes (see services.css) so the two pages read as one family. Only a
   small nudge is needed here: tighten the space before the project filter. */
.studio-header {
    padding-bottom: var(--space-lg);
}

/* The subline + intro paragraph were removed, leaving the header floating high.
   Nudge the overline + heading down so their top sits where the old subline
   ("Beauty, deeply considered.") used to begin. */
.studio-header .matisse-block-header-hero {
    margin-top: 135px;
}
@media (min-width: 768px) and (max-width: 1024px) {
    .studio-header .matisse-block-header-hero { margin-top: 110px; }
}
@media (max-width: 767px) {
    .studio-header .matisse-block-header-hero { margin-top: 89px; }
}

/* Match the Pamusha Story page's heading size (its inline-header page-heading)
   rather than the larger display size the centred hero would inherit. */
.studio-header .page-heading {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}

/* ── FILTER BAR ────────────────────────────────── */
.studio-filter {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: var(--space-md) var(--edge) var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    justify-content: center;
    align-items: baseline;
}

.studio-filter-link {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-xwide);
    text-transform: uppercase;
    color: var(--chestnut);
    text-decoration: none;
    opacity: 0.55;
    transition: opacity var(--transition-fast);
    padding-bottom: 4px;
    position: relative;
}

.studio-filter-link:hover {
    opacity: 1;
}

.studio-filter-link.is-active {
    opacity: 1;
}

.studio-filter-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--chestnut);
}

/* ── PROJECT GRID ──────────────────────────────── */
.studio-grid {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 0 var(--edge) var(--space-xxxxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}

.studio-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

/* Large 2-up variant — images at roughly double size, centered on the page.
   Partial rows (e.g. a 3rd project) sit centered on their own row. */
.studio-grid--quad {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

.studio-card--quad {
    flex: 0 0 calc((100% - var(--space-xl)) / 2);
    max-width: calc((100% - var(--space-xl)) / 2);
}

.studio-card--quad .studio-card-image-wrap {
    aspect-ratio: 3 / 4;
}

/* Double-width card: spans the full row (the width of two normal tiles) while
   keeping the SAME height as a normal half-width tile. A normal tile's width is
   (row − gap) / 2 and its height is width × 4/3, so the full-width card's height
   works out to (100% − gap) × 2/3. We use the padding-top technique (percentages
   resolve against width) so the height tracks the row width exactly. */
.studio-card--wide {
    flex: 0 0 100%;
    max-width: 100%;
}

.studio-card--wide .studio-card-image-wrap {
    aspect-ratio: auto;
    height: 0;
    padding-top: calc((100% - var(--space-xl)) * 2 / 3);
}

.studio-card--wide .studio-card-image:not(.studio-card-image-hover) {
    position: absolute;
    inset: 0;
}

/* Auto-play slideshow tile: all photos stacked, slowly cross-fading. The long,
   eased opacity transition gives the calm, "luxury" feel rather than a hard cut. */
.studio-card--slideshow .studio-card-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

.studio-card--slideshow .studio-card-slide.is-active {
    opacity: 1;
}

.studio-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Non-clickable project (no detail page yet) — shows in the grid but isn't a link. */
.studio-card--static {
    cursor: default;
}

.studio-card-image-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--seasonal-one);
    aspect-ratio: 16 / 10;
}

.studio-card--half .studio-card-image-wrap {
    aspect-ratio: 4 / 5;
}

.studio-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--transition-medium);
}

/* Hover image swap on the listing tile (when a Hover-role photo is set). */
.studio-card-image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity var(--transition-medium);
}

.studio-card:hover .studio-card-image-hover {
    opacity: 1;
}

.studio-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-medium);
    padding: var(--space-lg);
    text-align: center;
}

.studio-card:hover .studio-card-overlay {
    opacity: 1;
}

.studio-card-overlay-name {
    color: var(--ivory);
    font-family: var(--font-header);
    font-weight: 300;
    font-size: var(--text-xxl);
    letter-spacing: var(--letters-normal);
    line-height: 1.15;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.studio-card-meta {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
}

.studio-card-name {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-sm);
    letter-spacing: var(--letters-xwide);
    text-transform: uppercase;
    color: var(--chestnut);
}

.studio-card-detail {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-wide);
    text-transform: uppercase;
    color: var(--seasonal-four);
}

.studio-empty {
    font-family: var(--font-header);
    font-style: italic;
    color: var(--seasonal-four);
    text-align: center;
    padding: var(--space-xxl) 0;
}

/* ── PROJECT DETAIL ────────────────────────────── */
.studio-project-hero {
    width: 100%;
    background-color: var(--seasonal-one);
}

.studio-project-hero-image {
    width: 100%;
    max-height: 88vh;
    object-fit: cover;
    display: block;
}

.studio-project-intro {
    padding: var(--space-xxxl) var(--edge) var(--space-xxl);
}

.studio-project-intro-inner {
    max-width: var(--width-page);
    margin: 0 auto;
    text-align: left;
}

.studio-project-overline {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--seasonal-four);
}

.studio-project-title {
    font-family: var(--font-header);
    font-weight: 300;
    font-size: var(--text-display);
    letter-spacing: var(--letters-normal);
    line-height: 1.05;
    margin: 0 0 var(--space-lg);
    color: var(--chestnut);
}

.studio-project-description {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--chestnut);
    max-width: var(--width-narrow);
}

.studio-project-gallery {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 0 var(--edge) var(--space-xxxxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.studio-project-gallery-item {
    margin: 0;
}

.studio-project-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

.studio-project-gallery-caption {
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-wide);
    color: var(--seasonal-four);
}

.studio-project-back {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 0 var(--edge) var(--space-xxl);
}

.studio-project-back-link {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-xwide);
    text-transform: uppercase;
    color: var(--chestnut);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.studio-project-back-link:hover {
    opacity: 1;
}

/* ── BOTTOM CTA ────────────────────────────────── */
.studio-cta {
    background-color: transparent;
    color: var(--chestnut);
    padding: var(--space-lg) var(--edge);
}

.studio-cta-inner {
    max-width: var(--width-site);
    margin: 0 auto;
    text-align: center;
}

.studio-cta-heading {
    font-family: var(--font-header);
    font-weight: 300;
    font-size: var(--text-md);
    letter-spacing: var(--letters-normal);
    line-height: 1.2;
    margin: 0 0 var(--space-xs);
    color: var(--chestnut);
    /* keep on one line on desktop; wrap naturally only on small screens */
    white-space: nowrap;
}

@media (max-width: 768px) {
    .studio-cta-heading { white-space: normal; }
}

.studio-cta-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-xxwide);
    text-transform: uppercase;
    color: var(--chestnut);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--chestnut);
    transition: opacity var(--transition-fast);
}

.studio-cta-link:hover {
    opacity: 0.55;
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 768px) {
    .studio-filter {
        gap: var(--space-md);
        padding-top: var(--space-lg);
        padding-bottom: var(--space-md);
    }

    .studio-grid {
        gap: var(--space-xl);
        padding-bottom: var(--space-xxl);
    }

    .studio-row-pair {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .studio-grid--quad {
        gap: var(--space-lg);
    }

    .studio-card--quad {
        flex: 0 0 calc((100% - var(--space-lg)) / 2);
        max-width: calc((100% - var(--space-lg)) / 2);
    }

    .studio-card-image-wrap,
    .studio-card--half .studio-card-image-wrap,
    .studio-card--quad .studio-card-image-wrap {
        aspect-ratio: 4 / 5;
    }

    /* Tiles are 4/5 and the gap is --space-lg here, so a normal tile's height
       is (row − gap) / 2 × 5/4 = (100% − gap) × 5/8 for the full-width card. */
    .studio-card--wide .studio-card-image-wrap {
        padding-top: calc((100% - var(--space-lg)) * 5 / 8);
    }

    .studio-project-intro {
        padding: var(--space-xxl) var(--edge) var(--space-xl);
    }

    .studio-cta {
        padding: var(--space-md) var(--edge);
    }
}

@media (max-width: 480px) {
    .studio-card-overlay-name {
        font-size: var(--text-xl);
    }

    .studio-card--quad {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Every tile is already full-width and stacked here, so the wide card just
       behaves like a normal tile (no separate height calculation needed). */
    .studio-card--wide .studio-card-image-wrap {
        aspect-ratio: 4 / 5;
        height: auto;
        padding-top: 0;
    }

    .studio-card--wide:not(.studio-card--slideshow) .studio-card-image:not(.studio-card-image-hover) {
        position: static;
    }
}