/* ==========================================================================
   PORTFOLIO.CSS — Kashmir Decor Portfolio page
   Self-contained: loads only global.css + portfolio.css.
   Chrome block matches contact.css/faq.css/about.css.
   ========================================================================== */

/* --- 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-gold { background: var(--color-gold); color: var(--color-emerald-dark); }
.kd-btn-gold:hover { background: var(--color-gold-light); transform: translateY(-3px); }

/* --- SWATCH STRIP --- */
.kd-swatch-strip { display: flex; height: var(--dim-12px); }
.kd-swatch-strip span { flex: 1; }
.kd-swatch-strip span:nth-child(1) { background: var(--color-emerald); }
.kd-swatch-strip span:nth-child(2) { background: var(--color-gold); }
.kd-swatch-strip span:nth-child(3) { background: var(--color-brick); }
.kd-swatch-strip span:nth-child(4) { background: var(--color-sand); }
.kd-swatch-strip span:nth-child(5) { background: var(--color-emerald-dark); }
.kd-swatch-strip span:nth-child(6) { background: var(--color-gold-light); }
.kd-swatch-strip span:nth-child(7) { background: var(--color-black); }
.kd-swatch-strip span:nth-child(8) { background: var(--color-emerald); }

/* --- 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
   ========================================================================== */

/* --- PAGE HEADER --- */
.kd-page-header { padding: var(--dim-92px) 0 var(--dim-64px); background: var(--color-emerald-dark); color: var(--color-white); }
.kd-page-header h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); color: var(--color-white); margin-bottom: var(--dim-16px); }
.kd-page-header p { font-size: var(--font-medium); color: rgba(255, 255, 255, 0.72); max-width: 560px; line-height: var(--line-height); }

/* --- PORTFOLIO SECTION --- */
.kd-portfolio-page { padding: var(--dim-92px) 0; background: var(--color-linen); }

/* --- CATEGORY TABS (shared pattern with faq.css) --- */
.kd-faq-tabs { display: flex; flex-wrap: wrap; gap: var(--dim-8px); margin-bottom: var(--dim-40px); }
.kd-faq-tab {
    background: var(--color-white); border: 1px solid var(--color-stroke-warm); color: var(--color-gray);
    font-family: inherit; font-size: var(--font-small); font-weight: 600;
    padding: var(--dim-10px) var(--dim-20px); border-radius: var(--roundness-full);
    cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kd-faq-tab:hover { border-color: var(--color-emerald); }
.kd-faq-tab[aria-pressed="true"] { background: var(--color-emerald); border-color: var(--color-emerald); color: var(--color-white); }

/* --- FEATURED CARD --- */
.kd-featured-card {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--color-white);
    border: 1px solid var(--color-stroke-warm);
    border-radius: var(--roundness-28px);
    overflow: hidden;
    margin-bottom: var(--dim-24px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kd-featured-card[hidden] { display: none; }

.kd-featured-card:hover { transform: translateY(-4px); box-shadow: var(--color-shadow-emerald); }

.kd-featured-card .kd-project-media {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    border: none; padding: 0; cursor: pointer; overflow: hidden; background: var(--color-emerald-dark);
}

.kd-featured-card .kd-project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.kd-featured-card .kd-project-media:hover img { transform: scale(1.05); }

.kd-featured-tag {
    position: absolute; top: var(--dim-16px); inset-inline-start: var(--dim-16px);
    background: var(--color-white); color: var(--color-emerald-dark);
    font-size: var(--font-small); font-weight: 700;
     border-radius: var(--roundness-full);  
     padding: var(--dim-8px);

}

.kd-featured-card .kd-project-info { padding: var(--dim-32px); }
.kd-featured-card .kd-project-info h3 { font-size: var(--font-large-extra); margin-bottom: var(--dim-10px); }
.kd-featured-card .kd-project-detail { font-size: var(--font-medium); }

@media only screen and (min-width: 900px) {
    .kd-featured-card { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
    .kd-featured-card .kd-project-media { aspect-ratio: auto; height: 100%; }
}

/* --- PROJECT GRID --- */
.kd-project-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-24px); }

.kd-project-card {
    background: var(--color-white); border-radius: var(--roundness-28px); overflow: hidden;
    border: 1px solid var(--color-stroke-warm); transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column;
}
.kd-project-card:hover { transform: translateY(-6px); box-shadow: var(--color-shadow-emerald); }

.kd-project-media {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
    border: none; padding: 0; cursor: pointer; overflow: hidden; background: var(--color-emerald-dark);
}
.kd-project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.kd-project-media:hover img { transform: scale(1.06); }

.kd-project-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; 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-medium); pointer-events: none;
}

.kd-project-badge {
    position: absolute; bottom: var(--dim-12px); inset-inline-start: var(--dim-12px);
    background: rgba(10, 42, 32, 0.82); color: var(--color-white); font-size: var(--font-small);
    font-weight: 600; padding: var(--dim-6px) var(--dim-12px); border-radius: var(--roundness-full);
    pointer-events: none;
}

.kd-project-info { padding: var(--dim-24px); display: flex; flex-direction: column; flex: 1; }
.kd-project-info h3 { font-size: var(--font-large); color: var(--color-black); margin-bottom: var(--dim-6px); font-family: var(--font-display); }
.kd-project-loc { display: flex; align-items: center; font-size: var(--font-small); font-weight: 700; color: var(--color-emerald); margin-bottom: var(--dim-10px); }
.kd-project-detail { font-size: var(--font-small); color: var(--color-gray); line-height: var(--line-height); margin-bottom: var(--dim-16px); flex: 1; }
.kd-project-link { font-size: var(--font-small); font-weight: 700; color: var(--color-emerald); display: inline-flex; align-items: center; gap: var(--dim-6px); }
.kd-project-info:hover .kd-project-link { color: var(--color-gold); }

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

.kd-faq-empty {
    max-width: 820px; text-align: center; padding: var(--dim-40px); color: var(--color-gray);
    font-size: var(--font-medium); background: var(--color-white);
    border: 1px dashed var(--color-stroke-warm); border-radius: var(--roundness-28px);
}

/* --- LIGHTBOX --- */
.kd-lightbox {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(10, 16, 13, 0.96); padding: var(--dim-24px);
    flex-direction: column; align-items: center; justify-content: center;
}
.kd-lightbox.open { display: flex; }
.kd-lb-stage { width: 100%; display: flex; align-items: center; justify-content: center; }
.kd-lb-stage img, .kd-lb-stage video {
    width: 800px; height: fit-content; max-height: 600px;
    border-radius: var(--roundness); box-shadow: var(--color-shadow-emerald);
}
.kd-lb-close {
    position: absolute; top: var(--dim-24px); inset-inline-end: var(--dim-24px);
    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: absolute; top: 50%; transform: translateY(-50%);
    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); }
.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-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; }
}

/* --- CTA (shared pattern with about.css) --- */
.kd-about-cta { padding: var(--dim-64px) 0; background: var(--color-sand); }
.kd-about-cta-inner { display: flex; flex-direction: column; gap: var(--dim-24px); align-items: flex-start; justify-content: space-between; }
.kd-about-cta-inner h2 { font-size: clamp(26px, 4vw, 36px); color: var(--color-emerald); margin-bottom: var(--dim-8px); }
.kd-about-cta-inner p { font-size: var(--font-medium); color: var(--color-gray); max-width: 480px; }

@media only screen and (min-width: 800px) {
    .kd-about-cta-inner { flex-direction: row; align-items: center; }
}

/* --- RESPONSIVE --- */
@media only screen and (max-width: 700px) {
    .kd-page-header { padding: var(--dim-64px) 0 var(--dim-48px); }
    .kd-portfolio-page { padding: var(--dim-64px) 0; }
    .kd-featured-card .kd-project-info { padding: var(--dim-24px); }
    .kd-featured-card .kd-project-info h3 { font-size: var(--font-large); }
}

/* ==========================================================================
   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-page-header h1,
[dir="rtl"] .kd-about-cta-inner h2 {
    font-family: var(--font-display-ar);
}