/* ==========================================================================
   PROJECT.CSS — Kashmir Decor project detail pages
   Self-contained: loads only global.css + project.css.
   Use this SAME file for every /portfolio/{id} page — only the KD_PROJECT
   data block inside each page's <script> changes, this stylesheet doesn't.
   ========================================================================== */

/* --- BASE PAGE WRAPPER --- */
.kd-home { background: var(--color-linen); color: var(--color-black); }
.kd-home img { max-width: 100%; display: block; object-fit: contain; box-sizing: border-box; }
.kd-home a { color: inherit; text-decoration: none; }
.kd-home h1, .kd-home h2, .kd-home h3, .kd-home h4 {
    font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.01em;
}
.kd-container { width: 90%; max-width: var(--global-width); margin: 0 auto; }

/* --- EYEBROW --- */
.kd-eyebrow {
    display: inline-flex; align-items: center; gap: var(--dim-8px);
    font-size: var(--font-small); letter-spacing: var(--letter-spacing);
    text-transform: uppercase; color: var(--color-gold) !important;
    margin-bottom: var(--dim-16px);
}
.kd-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-gold); }

/* --- BUTTONS --- */
.kd-btn {
    display: inline-flex; align-items: center; gap: var(--dim-10px);
    padding: var(--dim-16px) var(--dim-24px); border-radius: var(--roundness-full);
    font-size: var(--font-medium); cursor: pointer; border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.kd-btn-primary { background: var(--color-emerald); color: var(--color-white) !important; box-sizing: border-box; }
.kd-btn-primary:hover { background: var(--color-emerald-dark); transform: translateY(-3px); box-shadow: var(--color-shadow-emerald); }
.kd-btn-ghost { border-color: var(--color-stroke-warm); color: var(--color-black); }
.kd-btn-ghost:hover { border-color: var(--color-emerald); transform: translateY(-3px); }
.kd-btn-ghost span{ color: var(--color-white);}
.kd-btn-gold { background: var(--color-gold); color: var(--color-emerald-dark); }
.kd-btn-gold:hover { background: var(--color-gold-light); transform: translateY(-3px); }

/* --- NAV --- */
.kd-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(246, 241, 231, 0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-stroke-warm);
}
.kd-nav-inner {
    width: 90%; max-width: var(--global-max-width); margin: 0 auto;
    height: var(--dim-nav-size); min-height: 84px;
    display: flex; align-items: center; justify-content: space-between;
}
.kd-nav-brand {
    font-family: var(--font-display); font-size: var(--font-large); letter-spacing: -0.01em;
    display: flex; align-items: center; gap: var(--dim-16px);
}
.kd-nav-brand > img:nth-child(1) { width: 40px; height: 40px; }
.kd-nav-brand > img:nth-child(2) { width: fit-content; height: 24px; }
.kd-nav-links { display: none; align-items: center; gap: var(--dim-40px); font-size: var(--font-medium); }
.kd-nav-links a:hover { color: var(--color-emerald); }
.kd-nav-links a.kd-nav-active { color: var(--color-emerald); }
.kd-nav-actions { display: flex; align-items: center; gap: var(--dim-16px); }
.kd-lang-switch {
    font-size: var(--font-small); border: 1px solid var(--color-stroke-warm);
    border-radius: var(--roundness-full); padding: var(--dim-8px) var(--dim-12px);
    background: none; cursor: pointer;
}
.kd-lang-switch:hover { border-color: var(--color-emerald); }

@media only screen and (min-width: 960px) { .kd-nav-links { display: flex; } }
@media only screen and (max-width: 1350px) {
    .kd-nav-links > a:nth-child(3), .kd-nav-links > a:nth-child(4), .kd-nav-links > a:nth-child(5) { display: none; }
}
@media only screen and (max-width: 700px) {
    .kd-nav-inner { height: 64px; min-height: 64px; }
    .kd-nav-brand { font-size: var(--font-medium); gap: var(--dim-8px); }
    .kd-nav-brand > img:nth-child(1) { width: 30px; height: 30px; }
    .kd-nav-brand > img:nth-child(2) { height: 18px; }
    .kd-nav-actions .kd-btn { padding: var(--dim-10px) var(--dim-16px); font-size: var(--font-small); }
}
@media only screen and (max-width: 480px) { .kd-nav-actions > a:nth-child(2) { display: none; } }

/* --- FOOTER --- */
.kd-footer { background: var(--color-black); color: rgba(255, 255, 255, 0.7); padding: var(--dim-64px) 0 var(--dim-16px); }
.kd-footer-grid {
    display: grid; grid-template-columns: 1fr; gap: var(--dim-40px);
    padding-bottom: var(--dim-40px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kd-footer-brand { font-family: var(--font-display); font-size: var(--font-large); color: var(--color-white); margin-bottom: var(--dim-16px); }
.kd-footer-col p { font-size: var(--font-medium); line-height: var(--line-height); max-width: 320px; color: var(--color-white); }
.kd-footer-col h5 {
    font-size: var(--font-small); font-weight: 700; letter-spacing: var(--letter-spacing);
    text-transform: uppercase; color: var(--color-white); margin-bottom: var(--dim-16px);
}
.kd-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--dim-10px); font-size: var(--font-small); color: var(--color-white); }
.kd-footer-col a { color: var(--color-white); }
.kd-footer-col ul a:hover { color: var(--color-gold-light); }
.kd-footer-social { display: flex; gap: var(--dim-10px); margin-top: var(--dim-16px); }
.kd-footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center;
}
.kd-footer-social a:hover { background: var(--color-gold); color: var(--color-black); }
.kd-footer-bottom {
    display: flex; flex-direction: column; gap: var(--dim-16px);
    justify-content: space-between; align-items: center; padding-top: var(--dim-24px); font-size: var(--font-small);
}
.kd-footer-bottom * { color: var(--color-white); }
.kd-footer-lang-btn {
    background: none; border: none; color: var(--color-white); font-family: inherit;
    font-size: var(--font-small); cursor: pointer; padding: 0; text-decoration: underline;
}
.kd-footer-lang-btn:hover { color: var(--color-gold-light); }

@media only screen and (min-width: 800px) {
    .kd-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .kd-footer-bottom { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { .kd-home * { transition: none !important; } }

/* ==========================================================================
   PAGE-SPECIFIC
   ========================================================================== */

/* --- SECTION HEAD (shared) --- */
.kd-section-head {
    display: flex;
    flex-direction: column;
    max-width: 640px;
}

.kd-section-head h2 {
    font-size: clamp(26px, 3.5vw, 36px);
    color: var(--color-emerald);
}

/* --- CATEGORY CHIP --- */
.kd-chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-sand);
    color: var(--color-emerald);
    font-size: var(--font-small);
    font-weight: 700;
    padding: var(--dim-6px) var(--dim-16px);
    border-radius: var(--roundness-full);
}

/* --- BREADCRUMB --- */
.kd-crumb {
    padding: var(--dim-16px) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-stroke-warm);
}
.kd-crumb-inner {
    display: flex;
    align-items: center;
    gap: var(--dim-8px);
    font-size: var(--font-small);
    color: var(--color-gray);
    flex-wrap: wrap;
}
.kd-crumb-inner a:hover { color: var(--color-emerald); }
.kd-crumb-current { color: var(--color-emerald); font-weight: 700; }

/* --- PROJECT HERO --- */
.kd-project-hero {
    padding: var(--dim-48px) 0 var(--dim-64px);
    background: var(--color-white);
}

.kd-project-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dim-32px);
    align-items: center;
}

.kd-project-hero-copy h1 {
    font-size: clamp(26px, 4vw, 40px);
    color: var(--color-emerald);
    margin: var(--dim-12px) 0 var(--dim-10px);
}

.kd-project-loc-line {
    font-size: var(--font-small);
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: var(--dim-8px);
}
.kd-project-loc-line i { color: var(--color-gold); }

.kd-project-hero-desc {
    font-size: var(--font-medium);
    color: var(--color-gray);
    line-height: var(--line-height);
    margin: var(--dim-16px) 0 var(--dim-24px);
    max-width: 560px;
}

.kd-project-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dim-24px);
    margin-bottom: var(--dim-24px);
}

.kd-hero-fact {
    display: flex;
    flex-direction: column;
    gap: var(--dim-4px);
    border-inline-start: 2px solid var(--color-gold);
    padding-inline-start: var(--dim-12px);
}

.kd-hero-fact-label {
    font-size: 12px;
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
}

.kd-hero-fact-value {
    font-size: var(--font-medium);
    font-weight: 700;
    color: var(--color-black);
}

/* capped-height visual — same footprint as the homepage hero image,
   never spans the full page width the way the old 16:9 cover did */
.kd-project-visual {
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--roundness-28px);
    background: var(--color-emerald-dark);
    box-shadow: var(--color-shadow-emerald);
}

.kd-project-visual img { width: 100%; height: 100%; object-fit: cover; }

.kd-project-visual-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-emerald);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-large);
}

@media only screen and (min-width: 900px) {
    .kd-project-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
    .kd-project-visual { height: 400px; }
}

/* --- FULL GALLERY --- */
.kd-project-gallery {
    padding: var(--dim-64px) 0 var(--dim-92px);
    background: var(--color-linen);
}
.kd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dim-16px);
}
.kd-gallery-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--roundness);
    background: var(--color-emerald-dark);
    transition: transform 0.3s ease;
}
.kd-gallery-item:hover { transform: translateY(-4px); }
.kd-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.kd-gallery-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-emerald);
    display: flex; align-items: center; justify-content: center;
}

@media only screen and (min-width: 700px) {
    .kd-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (min-width: 1100px) {
    .kd-gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- LIGHTBOX ---
   .kd-lightbox itself never scrolls — that's what keeps the close/prev/next
   buttons pinned in place. Only .kd-lb-scroll (stage + caption + thumbs)
   scrolls, so a very tall portrait image or video can never push the
   caption/thumbnail strip out of reach. */
.kd-lightbox {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(10, 16, 13, 0.96);
    align-items: center; justify-content: center;
}
.kd-lightbox.open { display: flex; }

.kd-lb-scroll {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--dim-64px) var(--dim-24px) var(--dim-24px);
    box-sizing: border-box;
}

.kd-lb-stage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* No fixed width — each image/video keeps its own aspect ratio and is
   simply capped so portrait, landscape, and square all fit the same way. */
.kd-lb-stage img, .kd-lb-stage video {
    width: auto;
    height: auto;
    max-width: min(800px, 90vw);
    max-height: 65vh;
    object-fit: contain;
    border-radius: var(--roundness);
    box-shadow: var(--color-shadow-emerald);
}

.kd-lb-close {
    position: fixed; top: var(--dim-24px); inset-inline-end: var(--dim-24px);
    z-index: 2;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08); color: var(--color-white); font-size: var(--font-medium); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.kd-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08); color: var(--color-white); font-size: var(--font-large-extra);
    line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kd-lb-prev { inset-inline-start: var(--dim-24px); }
.kd-lb-next { inset-inline-end: var(--dim-24px); }
.kd-lb-footer { width: 100%; max-width: 1000px; margin-top: var(--dim-24px); flex-shrink: 0; }
.kd-lb-caption { text-align: center; margin-bottom: var(--dim-16px); }
.kd-lb-caption h4 { color: var(--color-white); font-family: var(--font-display); font-size: var(--font-large); margin-bottom: var(--dim-4px); }
.kd-lb-caption p { color: rgba(255, 255, 255, 0.65); font-size: var(--font-small); }
.kd-lb-thumbs { display: flex; gap: var(--dim-8px); justify-content: center; flex-wrap: wrap; }
.kd-lb-thumb {
    position: relative; width: 64px; height: 64px; border-radius: var(--roundness-8px);
    overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; flex-shrink: 0;
}
.kd-lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kd-lb-thumb span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.35); color: var(--color-white); font-size: var(--font-small);
}
.kd-lb-thumb.active { border-color: var(--color-gold); }

@media only screen and (max-width: 700px) {
    .kd-lb-scroll { padding: var(--dim-64px) var(--dim-12px) var(--dim-16px); }
    .kd-lb-stage img, .kd-lb-stage video { max-height: 55vh; }
    .kd-lb-nav { width: 38px; height: 38px; font-size: var(--font-large); }
    .kd-lb-prev { inset-inline-start: var(--dim-8px); }
    .kd-lb-next { inset-inline-end: var(--dim-8px); }
    .kd-lb-close { top: var(--dim-12px); inset-inline-end: var(--dim-12px); }
    .kd-lb-thumb { width: 48px; height: 48px; }
}

/* --- VIDEOS GALLERY — same grid pattern as Photos, own section/background
   so it reads as a distinct group rather than mixed in with stills --- */
.kd-project-videos {
    padding: var(--dim-64px) 0 var(--dim-92px);
    background: var(--color-white);
}

.kd-project-videos[hidden] { display: none; }

/* --- BEHIND THE SCENES — visually distinct (dark) so it reads as "process"
   rather than "finished result", matching the tone of the homepage's own
   Behind The Scenes video section --- */
.kd-project-bts {
    padding: var(--dim-64px) 0 var(--dim-92px);
    background: var(--color-emerald-dark);
}

.kd-project-bts[hidden] { display: none; }

.kd-project-bts .kd-eyebrow { color: var(--color-gold-light) !important; }
.kd-project-bts .kd-eyebrow::before { background: var(--color-gold-light); }
.kd-project-bts .kd-section-head h2 { color: var(--color-white); }

.kd-project-bts .kd-gallery-item { background: rgba(255, 255, 255, 0.06); }

/* --- BACK + CTA BAND --- */
.kd-project-cta {
    padding: var(--dim-48px) 0;
    background: var(--color-emerald);
    color: var(--color-white);
}
.kd-project-cta-inner {
    display: flex;
    flex-direction: column;
    gap: var(--dim-24px);
    align-items: flex-start;
    justify-content: space-between;
}
.kd-project-cta .kd-btn-ghost {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}
.kd-project-cta .kd-btn-ghost:hover {
    border-color: var(--color-white);
}
.kd-project-cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dim-12px);
}
.kd-project-cta-right h3 {
    font-size: var(--font-large);
    color: var(--color-white);
}

@media only screen and (min-width: 800px) {
    .kd-project-cta-inner { flex-direction: row; align-items: center; }
    .kd-project-cta-right { flex-direction: row; align-items: center; gap: var(--dim-20px); }
}

/* --- RESPONSIVE --- */
@media only screen and (max-width: 700px) {
    .kd-project-header { padding: var(--dim-32px) 0 var(--dim-24px); }
    .kd-project-body,
    .kd-project-gallery { padding: var(--dim-48px) 0; }
    .kd-gallery-grid { gap: var(--dim-10px); }
}

/* --- RTL --- */
[dir="rtl"] .kd-home { font-family: var(--font-body-ar); }
[dir="rtl"] .kd-home h1, [dir="rtl"] .kd-home h2, [dir="rtl"] .kd-home h3, [dir="rtl"] .kd-home h4,
[dir="rtl"] .kd-nav-brand, [dir="rtl"] .kd-footer-brand, [dir="rtl"] .kd-project-header h1 {
    font-family: var(--font-display-ar);
}