/* ============================================================
   Architect Interior Studio — Services & Team (Designers) pages
   Complements site.css. Reuses the brand tokens defined there
   (--brass, --ink, --rule, --bg, --surface, --serif, --bengali …).
   Owns only the new building blocks these two sections need.
   ============================================================ */

/* ===== Page hero (editorial, no Bootstrap bg-light) ===== */
.studio-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 72px 0 56px;
}
.studio-hero-slim { padding: 32px 0 24px; }

.studio-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .82rem; letter-spacing: .4px; color: var(--muted);
    margin-bottom: 1.4rem;
}
.studio-crumb a { color: var(--muted); }
.studio-crumb a:hover { color: var(--brass); }
.studio-crumb span[aria-current] { color: var(--ink); }

.studio-hero-title {
    font-family: var(--serif); color: var(--ink); font-weight: 600;
    font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1;
    margin: .35rem 0 0;
}
:lang(bn) .studio-hero-title { font-family: var(--bengali); }
.studio-hero-sub {
    color: var(--muted); font-size: 1.05rem; max-width: 640px;
    margin: 1rem 0 0;
}

.studio-hero-head { display: flex; align-items: flex-start; gap: 1.4rem; }
.studio-hero-icon {
    flex: 0 0 auto; width: 68px; height: 68px;
    border: 1px solid var(--brass); color: var(--brass);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
}

/* ===== Service detail — figure + prose ===== */
.service-figure { margin: 0 0 2rem; overflow: hidden; background: #e8e3dc; }
.service-figure img { width: 100%; height: auto; display: block; }

/* Rich-text body shared by Service & Designer detail (@Html.Raw output) */
.prose { color: var(--ink); font-size: 1.05rem; line-height: 1.8; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2rem; }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); margin: 2rem 0 .8rem; }
:lang(bn) .prose h2, :lang(bn) .prose h3, :lang(bn) .prose h4 { font-family: var(--bengali); }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose img { height: auto; margin: 1.2rem 0; }
.prose a { color: var(--brass); border-bottom: 1px solid transparent; }
.prose a:hover { border-color: var(--brass); }
.prose blockquote {
    font-family: var(--serif); font-size: 1.3rem; font-style: italic;
    border-left: 2px solid var(--brass); margin: 1.5rem 0; padding: .2rem 0 .2rem 1.3rem;
    color: var(--ink);
}
:lang(bn) .prose blockquote { font-family: var(--bengali); font-style: normal; }

/* ===== Service detail — CTA aside ===== */
.studio-aside {
    background: var(--surface); border: 1px solid var(--rule);
    padding: 2rem 1.8rem; position: sticky; top: 96px;
}
.studio-aside-title { font-family: var(--serif); font-size: 1.5rem; margin: .35rem 0 .6rem; }
:lang(bn) .studio-aside-title { font-family: var(--bengali); }
.studio-aside-actions { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.3rem; }
.studio-aside-divider { height: 1px; background: var(--rule); margin: 1.6rem 0 1.2rem; }

/* ===== Team grid (Designers index) ===== */
.team-card { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease; }
/* §9.21 — equal-height only inside a grid column, never on a lone base card */
.row > [class*="col"] > .team-card { height: 100%; }
.team-card:hover { box-shadow: 0 14px 34px rgba(31,41,55,.08); transform: translateY(-3px); }
.team-figure { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; background: #e8e3dc; }
.team-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.team-card:hover .team-figure img { transform: scale(1.05); }
.team-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #b9b0a3; }
.team-badge {
    position: absolute; top: 1rem; left: 1rem; background: var(--brass); color: #fff;
    font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
    padding: .3rem .6rem;
}
.team-body { padding: 1.2rem 1.2rem 1.4rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.team-name { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .15rem; }
.team-name a { color: var(--ink); transition: color .2s ease; }
.team-name a:hover { color: var(--brass); }
.team-desig { color: var(--brass); font-size: .8rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
:lang(bn) .team-desig { letter-spacing: .4px; text-transform: none; font-size: .9rem; }
.team-spec { color: var(--muted); font-size: .92rem; margin-top: .55rem; }
.team-social { display: flex; gap: .8rem; margin-top: auto; padding-top: 1rem; font-size: 1.05rem; }
.team-social a { color: var(--muted); }
.team-social a:hover { color: var(--brass); }

/* ===== Designer detail — profile panel ===== */
.designer-panel { background: var(--surface); border: 1px solid var(--rule); overflow: hidden; position: sticky; top: 96px; }
.designer-figure { aspect-ratio: 1; overflow: hidden; background: #e8e3dc; }
.designer-figure img { width: 100%; height: 100%; object-fit: cover; }
.designer-figure .team-placeholder { font-size: 3.4rem; }
.designer-panel-body { padding: 1.6rem 1.5rem 1.8rem; }
.designer-name { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 .2rem; }
:lang(bn) .designer-name { font-family: var(--bengali); }
.designer-desig { color: var(--brass); font-size: .82rem; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 600; }
:lang(bn) .designer-desig { letter-spacing: .5px; text-transform: none; font-size: .95rem; }
.designer-facts { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.designer-facts li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .75rem; font-size: .94rem; color: var(--ink); }
.designer-facts li i { color: var(--brass); margin-top: .2rem; flex: 0 0 auto; }
.designer-facts a { color: var(--ink); }
.designer-facts a:hover { color: var(--brass); }
.designer-actions { display: flex; gap: .7rem; margin-top: 1.3rem; }
.designer-social { padding-top: 1.3rem; margin-top: 1.3rem; border-top: 1px solid var(--rule); font-size: 1.15rem; }

/* ===== Designer detail — bio side ===== */
.designer-spec-block { margin-bottom: 2rem; }
.designer-spec-block .lead-text { margin-top: .4rem; }
.designer-projects { margin-top: 4rem; padding-top: 3.5rem; border-top: 1px solid var(--rule); }

/* ===== Scope blocks on services index ===== */
.studio-scope-block + .studio-scope-block { margin-top: 4.5rem; }
.studio-scope-block .services-list { margin-top: 0; }

/* ===== Empty state ===== */
.studio-empty { text-align: center; color: var(--muted); padding: 4rem 1rem; }
.studio-empty i { font-size: 2.6rem; color: var(--brass); display: block; margin-bottom: 1rem; }
.studio-empty p { margin: 0; font-size: 1.05rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .studio-hero { padding: 56px 0 44px; }
    .studio-aside, .designer-panel { position: static; }
    .designer-projects { margin-top: 3rem; padding-top: 2.5rem; }
    .studio-scope-block + .studio-scope-block { margin-top: 3.5rem; }
}

@media (max-width: 575.98px) {
    .studio-hero-head { flex-direction: column; gap: 1rem; }
    .studio-hero-icon { width: 56px; height: 56px; font-size: 1.5rem; }
    .designer-actions { flex-direction: column; }
}