/* =========================================================
PROJECT DETAIL PAGE
STUDIO-ECOARC
========================================================= */

/* =========================================================
BASE
========================================================= */
.project-hero, .project-cover, .project-info, .project-intro, .project-image, .project-approach, .project-feature, .project-gallery, .project-credits, .project-next, .project-contact { width: 100%; }
.project-hero .container, .project-cover .container, .project-info .container, .project-intro .container, .project-image .container, .project-approach .container, .project-feature .container, .project-gallery .container, .project-credits .container, .project-next .container, .project-contact .container { width: min(1280px, calc(100% - 80px)); margin: 0 auto; }
.project-hero figure, .project-cover figure, .project-image figure, .project-feature figure, .project-gallery figure { margin: 0; }

/* =========================================================
HERO & COVER
========================================================= */
.project-hero { padding: 155px 0 85px; background: #f4f3f0; }
.project-hero__top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid #d4d2cd; }
.project-hero__top .eyebrow { margin: 0; }
.project-hero__number { font-size: 11px; color: #888; }
.project-hero__title { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: end; gap: 70px; padding-top: 55px; }
.project-hero__title h1 { margin: 0; font-size: clamp(75px, 10vw, 150px); line-height: .86; letter-spacing: -.065em; font-weight: 500; color: #111; }
.project-hero__title p { max-width: 340px; margin: 0 0 5px; font-size: 15px; line-height: 1.8; color: #62615d; }
.project-cover { padding: 0 0 120px; background: #f4f3f0; }
.project-cover__image { overflow: hidden; aspect-ratio: 2 / 1; background: #e7e6e2; }
.project-cover__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
PROJECT INFO & INTRO
========================================================= */
.project-info { padding: 95px 0; background: #fff; }
.project-info__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.project-info__label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #888; }
.project-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px 35px; margin: 0; }
.project-details div { padding-top: 14px; border-top: 1px solid #d7d5d0; }
.project-details dt { margin-bottom: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #999; }
.project-details dd { margin: 0; font-size: 14px; line-height: 1.5; color: #222; }

.project-intro { padding: 145px 0; background: #f4f3f0; }
.project-intro__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.project-intro__grid h2 { max-width: 850px; margin: 0; font-size: clamp(48px, 6vw, 88px); line-height: .95; letter-spacing: -.055em; font-weight: 500; color: #111; }
.project-intro__grid h2 + p { margin-top: 45px; }
.project-intro__grid p:not(.eyebrow) { max-width: 650px; font-size: 16px; line-height: 1.9; color: #5f5e5a; }
.project-intro__grid p + p { margin-top: 22px; }

/* =========================================================
IMAGES, APPROACH & FEATURE
========================================================= */
.project-image { padding: 0; background: #fff; }
.project-image--large figure { overflow: hidden; aspect-ratio: 1.85 / 1; background: #e7e6e2; }
.project-image--large img { display: block; width: 100%; height: 100%; object-fit: cover; }

.project-approach { padding: 145px 0; background: #fff; }
.project-approach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.project-approach h2 { max-width: 600px; margin: 0; font-size: clamp(48px, 5.5vw, 78px); line-height: .96; letter-spacing: -.05em; font-weight: 500; }
.project-approach__text { padding-top: 45px; }
.project-approach__text p { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.9; color: #62615d; }
.project-approach__text p + p { margin-top: 25px; }

.project-feature { padding: 0 0 145px; background: #fff; }
.project-feature__grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.project-feature__image { overflow: hidden; min-height: 650px; background: #e7e6e2; }
.project-feature__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-feature__content { display: flex; flex-direction: column; justify-content: center; padding: 75px; background: #f4f3f0; }
.project-feature__content h2 { max-width: 520px; margin: 0; font-size: clamp(42px, 4.5vw, 67px); line-height: .98; letter-spacing: -.05em; font-weight: 500; }
.project-feature__content p:not(.eyebrow) { max-width: 450px; margin: 35px 0 0; font-size: 15px; line-height: 1.85; color: #62615d; }

/* =========================================================
GALLERY, CREDITS & NEXT
========================================================= */
.project-gallery { padding: 140px 0; background: #f4f3f0; }
.project-gallery__heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 55px; }
.project-gallery__heading h2 { margin: 0; font-size: clamp(45px, 5vw, 72px); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.project-gallery__heading .eyebrow { margin: 0; }
.project-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.project-gallery__item { overflow: hidden; aspect-ratio: 1.2 / 1; background: #e7e6e2; }
.project-gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.project-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.65,.2,1); }
.project-gallery__item:hover img { transform: scale(1.025); }

.project-credits { padding: 100px 0; background: #fff; }
.project-credits__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.project-credits__grid .eyebrow { margin: 0; }
.project-credits dl { margin: 0; }
.project-credits dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 30px; padding: 20px 0; border-top: 1px solid #d7d5d0; }
.project-credits dl > div:last-child { border-bottom: 1px solid #d7d5d0; }
.project-credits dt { font-size: 11px; color: #888; }
.project-credits dd { margin: 0; font-size: 13px; color: #222; }

.project-next { padding: 130px 0; background: #171717; color: #fff; }
.project-next__link { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; color: inherit; text-decoration: none; }
.project-next .eyebrow { color: #999; }
.project-next h2 { margin: 0; font-size: clamp(55px, 7vw, 105px); line-height: .9; letter-spacing: -.06em; font-weight: 400; }
.project-next__link > span { font-size: 32px; transition: transform .25s ease; }
.project-next__link:hover > span { transform: translate(5px, -5px); }

/* =========================================================
CONTACT & BUTTONS
========================================================= */
.project-contact { padding: 130px 0; background: #f4f3f0; }
.project-contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 80px 0; border-top: 1px solid #ceccc7; border-bottom: 1px solid #ceccc7; }
.project-contact h2 { margin: 0; font-size: clamp(50px, 6vw, 90px); line-height: .92; letter-spacing: -.055em; font-weight: 500; }
.project-contact__action { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.project-contact__action p { max-width: 390px; margin: 0 0 30px; font-size: 15px; line-height: 1.8; color: #666; }
.button { display: inline-flex; align-items: center; gap: 16px; padding: 15px 22px; text-decoration: none; font-size: 12px; font-weight: 600; transition: opacity .25s ease, transform .25s ease; }
.button--dark { background: #151515; color: #fff; }
.button:hover { opacity: .8; transform: translateY(-2px); }

/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
    .project-hero .container, .project-cover .container, .project-info .container, .project-intro .container, .project-image .container, .project-approach .container, .project-feature .container, .project-gallery .container, .project-credits .container, .project-next .container, .project-contact .container { width: min(100% - 48px, 760px); }
    .project-hero { padding-top: 130px; }
    .project-hero__title { grid-template-columns: 1fr; gap: 35px; }
    .project-hero__title h1 { font-size: clamp(65px, 12vw, 100px); }
    .project-hero__title p { max-width: 480px; }
    .project-info__grid, .project-intro__grid, .project-credits__grid { grid-template-columns: 1fr; gap: 45px; }
    .project-approach__grid { grid-template-columns: 1fr; gap: 35px; }
    .project-approach__text { padding-top: 0; }
    .project-feature__grid { grid-template-columns: 1fr; }
    .project-feature__image { min-height: 550px; }
    .project-feature__content { padding: 60px; }
    .project-contact__inner { grid-template-columns: 1fr; gap: 55px; }
}

/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
    .project-hero .container, .project-cover .container, .project-info .container, .project-intro .container, .project-image .container, .project-approach .container, .project-feature .container, .project-gallery .container, .project-credits .container, .project-next .container, .project-contact .container { width: calc(100% - 36px); }
    .project-hero { padding: 105px 0 45px; }
    .project-hero__top { padding-bottom: 20px; }
    .project-hero__title { gap: 28px; padding-top: 40px; }
    .project-hero__title h1 { font-size: clamp(48px, 15vw, 70px); letter-spacing: -.065em; }
    .project-hero__title p { font-size: 14px; line-height: 1.75; }
    .project-cover { padding-bottom: 65px; }
    .project-cover__image { aspect-ratio: 1 / 1.05; }
    .project-info { padding: 70px 0; }
    .project-info__grid { gap: 35px; }
    .project-details { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
    .project-intro { padding: 90px 0; }
    .project-intro__grid { gap: 35px; }
    .project-intro__grid h2 { font-size: 43px; }
    .project-intro__grid h2 + p { margin-top: 30px; }
    .project-intro__grid p:not(.eyebrow) { font-size: 14px; line-height: 1.85; }
    .project-image--large figure { aspect-ratio: 1.05 / 1; }
    .project-approach { padding: 90px 0; }
    .project-approach__grid { gap: 35px; }
    .project-approach h2 { font-size: 43px; }
    .project-approach__text p { font-size: 14px; }
    .project-feature { padding-bottom: 90px; }
    .project-feature__image { min-height: 420px; }
    .project-feature__content { padding: 45px 28px; }
    .project-feature__content h2 { font-size: 42px; }
    .project-feature__content p:not(.eyebrow) { font-size: 14px; line-height: 1.8; }
    .project-gallery { padding: 90px 0; }
    .project-gallery__heading { display: block; margin-bottom: 35px; }
    .project-gallery__heading h2 { margin-top: 12px; font-size: 43px; }
    .project-gallery__grid { grid-template-columns: 1fr; gap: 14px; }
    .project-gallery__item, .project-gallery__item--wide { grid-column: auto; aspect-ratio: 1.05 / 1; }
    .project-credits { padding: 75px 0; }
    .project-credits__grid { gap: 35px; }
    .project-credits dl > div { grid-template-columns: 1fr; gap: 7px; }
    .project-next { padding: 90px 0; }
    .project-next__link { align-items: flex-start; }
    .project-next h2 { font-size: 52px; }
    .project-next__link > span { font-size: 24px; }
    .project-contact { padding: 85px 0; }
    .project-contact__inner { padding: 55px 0; gap: 42px; }
    .project-contact h2 { font-size: 53px; }
    .project-contact__action p { font-size: 14px; }
}

/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
    .project-hero .container, .project-cover .container, .project-info .container, .project-intro .container, .project-image .container, .project-approach .container, .project-feature .container, .project-gallery .container, .project-credits .container, .project-next .container, .project-contact .container { width: calc(100% - 28px); }
    .project-hero__title h1 { font-size: 45px; }
    .project-intro__grid h2, .project-approach h2, .project-gallery__heading h2 { font-size: 39px; }
    .project-feature__content h2 { font-size: 38px; }
    .project-next h2 { font-size: 47px; }
    .project-contact h2 { font-size: 48px; }
}

/* =========================================================
RTL SUPPORT (Project Detail Page)
========================================================= */
html[dir="rtl"] { text-align: right; }
html[dir="rtl"] .project-next__link > span { transform: translate(-5px, -5px); }
html[dir="rtl"] .project-next__link:hover > span { transform: translate(-5px, -5px); }
html[dir="rtl"] .project-contact__action { align-items: flex-start; text-align: right; }
@media (max-width: 600px) {
    html[dir="rtl"] .project-hero__top, html[dir="rtl"] .project-gallery__heading { text-align: right; }
}