/* «أعمالنا ومشاريعنا» (inc/works.php): /works/, /works/<slug>/, project cards on the homepage and service pages.
   Palette (assets/brand-colors.css): maroon = headings and buttons, green = tags and filters, gold = on dark only. */

.sanam-works-page { background: var(--sanam-sand-50, #fcf8f3); color: var(--sanam-ink, #291f1e); font-family: var(--sanam-font-text); display: flow-root; }
.sanam-works-page a,
.sanam-work-page a,
.sanam-work-related a { text-decoration: none; }

/* ---------- Intro and filter ---------- */
.sanam-works-intro { padding: clamp(48px, 7vw, 96px) 0 clamp(22px, 3vw, 34px); text-align: center; }
.sanam-works-intro__eyebrow { display: inline-block; color: var(--sanam-maroon, #662627); font: 600 15px/1.6 var(--sanam-font-accent); }
.sanam-works-intro h1 { margin: 6px 0 12px; color: var(--sanam-maroon, #662627); font: 600 clamp(34px, 5vw, 60px)/1.3 var(--sanam-font-heading); }
.sanam-works-intro p { max-width: 680px; margin: 0 auto; color: var(--sanam-ink-soft, #61524a); font-size: 17px; line-height: 1.9; }

.sanam-works-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-bottom: clamp(26px, 3.6vw, 40px); }
.sanam-works-filter a {
    display: inline-flex; align-items: center; min-height: 42px; padding: 8px 20px;
    border: 1px solid var(--sanam-sand, #e3caab); border-radius: 30px; background: #fff;
    color: var(--sanam-maroon, #662627); font: 600 15px/1.4 var(--sanam-font-ui);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sanam-works-filter a:hover { border-color: var(--sanam-green, #275e4c); }
.sanam-works-filter a.is-active { border-color: var(--sanam-green, #275e4c); background: var(--sanam-green, #275e4c); color: #fff; }
.sanam-works-filter a:focus-visible { outline: 3px solid var(--sanam-gold, #e4aa58); outline-offset: 3px; }

/* ---------- Cards ---------- */
.sanam-works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    padding-bottom: clamp(40px, 6vw, 72px);
}
.sanam-work-card { min-width: 0; }
.sanam-work-card__link {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    border: 1px solid var(--sanam-sand, #e3caab); border-radius: 22px; background: #fff; color: inherit;
    box-shadow: 0 10px 28px rgb(41 31 30 / .06);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sanam-work-card__link:hover,
.sanam-work-card__link:focus-visible { border-color: var(--sanam-maroon, #662627); box-shadow: 0 18px 40px rgb(41 31 30 / .12); transform: translateY(-3px); }
.sanam-work-card__link:focus-visible { outline: 3px solid var(--sanam-gold, #e4aa58); outline-offset: 3px; }
.sanam-work-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sanam-maroon, #662627); }
.sanam-work-card__img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
.sanam-work-card__link:hover .sanam-work-card__img,
.sanam-work-card__link:focus-visible .sanam-work-card__img { transform: scale(1.05); }
.sanam-work-card__media > :not(img):not(time) { width: 100%; height: 100%; }
.sanam-work-card__date {
    position: absolute; inset-block-end: 12px; inset-inline-start: 12px;
    padding: 5px 12px; border-radius: 20px; background: rgb(41 31 30 / .78); color: #fff;
    font: 600 13px/1.5 var(--sanam-font-ui); backdrop-filter: blur(4px);
}
.sanam-work-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.sanam-work-card__title { margin: 0; color: var(--sanam-maroon, #662627); font: 600 clamp(19px, 1.7vw, 22px)/1.5 var(--sanam-font-heading); }
.sanam-work-card__who { display: flex; flex-direction: column; gap: 2px; color: var(--sanam-ink-soft, #61524a); font-size: 15px; line-height: 1.7; }
.sanam-work-card__who b { color: var(--sanam-ink, #291f1e); font-weight: 600; }
.sanam-work-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.sanam-work-card__tags span {
    padding: 3px 11px; border-radius: 20px; background: var(--sanam-green-50, #e6efeb);
    color: var(--sanam-green, #275e4c); font: 600 12.5px/1.6 var(--sanam-font-ui);
}

.sanam-works-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-bottom: clamp(40px, 6vw, 72px); }
.sanam-works-pages .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 14px;
    border: 1px solid var(--sanam-sand, #e3caab); border-radius: 30px; background: #fff; color: var(--sanam-maroon, #662627); font: 600 15px/1 var(--sanam-font-ui);
}
.sanam-works-pages .page-numbers.current { border-color: var(--sanam-maroon, #662627); background: var(--sanam-maroon, #662627); color: #fff; }

.sanam-works-empty { padding: clamp(30px, 5vw, 60px) 0 clamp(50px, 7vw, 90px); text-align: center; }
.sanam-works-empty__icon { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--sanam-sand-200, #f2e7d9); color: var(--sanam-maroon, #662627); }
.sanam-works-empty__icon svg { width: 34px; height: 34px; }
.sanam-works-empty h2 { margin: 16px 0 18px; color: var(--sanam-maroon, #662627); font: 600 24px/1.5 var(--sanam-font-heading); }

.sanam-works-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 28px;
    border-radius: 36px; background: var(--sanam-maroon, #662627); color: #fff !important; font: 600 16px/1.4 var(--sanam-font-ui);
    transition: background .2s ease;
}
.sanam-works-button:hover { background: var(--sanam-maroon-700, #521e1f); }

.sanam-works-cta { padding: clamp(44px, 6vw, 72px) 0; background: var(--sanam-maroon, #662627); color: #fff; text-align: center; }
.sanam-works-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sanam-works-cta h2 { margin: 0; font: 600 clamp(26px, 3.4vw, 40px)/1.4 var(--sanam-font-heading); }
.sanam-works-cta .sanam-works-button { background: var(--sanam-gold, #e4aa58); color: var(--sanam-ink, #291f1e) !important; }
.sanam-works-cta .sanam-works-button:hover { background: var(--sanam-gold-600, #d09442); }

/* ---------- One project ---------- */
.sanam-work-page { background: var(--sanam-sand-50, #fcf8f3); color: var(--sanam-ink, #291f1e); font-family: var(--sanam-font-text); display: flow-root; }
.sanam-work-hero {
    position: relative; isolation: isolate; display: flex; align-items: flex-end;
    min-height: clamp(340px, 58vh, 580px); overflow: hidden; background: var(--sanam-maroon, #662627); color: #fff;
}
.sanam-work-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; object-fit: cover; }
.sanam-work-hero.has-image::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgb(41 31 30 / .92), rgb(41 31 30 / .4) 60%, rgb(41 31 30 / .15));
}
.sanam-work-hero__inner { padding-block: clamp(36px, 6vw, 72px) clamp(70px, 9vw, 110px); }
.sanam-work-hero .sanam-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: rgb(255 248 239 / .75); font: 600 14px/1.6 var(--sanam-font-ui); }
.sanam-work-hero .sanam-breadcrumb a { color: var(--sanam-gold, #e4aa58); }
.sanam-work-hero h1 { margin: 0 0 12px; font: 600 clamp(30px, 4.6vw, 56px)/1.3 var(--sanam-font-heading); text-wrap: balance; }
.sanam-work-hero__lead { max-width: 720px; margin: 0; color: rgb(255 248 239 / .92); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.9; }

/* Details card overlapping the cover */
.sanam-work-facts { position: relative; z-index: 2; margin-top: clamp(-70px, -6vw, -46px); }
.sanam-work-facts dl {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0;
    margin: 0; overflow: hidden; border: 1px solid var(--sanam-sand, #e3caab); border-radius: 22px; background: #fff;
    box-shadow: 0 18px 44px rgb(41 31 30 / .1);
}
.sanam-work-fact { min-width: 0; padding: 18px 22px; border-inline-start: 1px solid var(--sanam-sand-200, #f2e7d9); }
.sanam-work-fact:first-child { border-inline-start: 0; }
.sanam-work-fact dt { margin-bottom: 6px; color: var(--sanam-ink-muted, #86756a); font: 600 13px/1.5 var(--sanam-font-ui); }
.sanam-work-fact dd { margin: 0; color: var(--sanam-ink, #291f1e); font: 600 16.5px/1.6 var(--sanam-font-text); overflow-wrap: anywhere; }
.sanam-work-fact--client dd { display: flex; align-items: center; gap: 10px; }
.sanam-work-fact__logo { flex: none; width: auto !important; max-width: 90px; height: 40px !important; object-fit: contain; }
.sanam-work-fact--services { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--sanam-sand-200, #f2e7d9); }
.sanam-work-fact--services dd { display: flex; flex-wrap: wrap; gap: 8px; }
.sanam-work-fact--services a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 5px 14px; border-radius: 22px;
    background: var(--sanam-green-50, #e6efeb); color: var(--sanam-green, #275e4c); font: 600 14px/1.4 var(--sanam-font-ui);
    transition: background .2s ease, color .2s ease;
}
.sanam-work-fact--services a:hover { background: var(--sanam-green, #275e4c); color: #fff; }
.sanam-work-fact--services a:focus-visible { outline: 3px solid var(--sanam-gold, #e4aa58); outline-offset: 2px; }

.sanam-work-content { padding-top: clamp(34px, 5vw, 60px); }
.sanam-work-page .sanam-media { padding-top: 0; }

/* ---------- Related projects (project page, service page) ---------- */
.sanam-work-related { padding: clamp(40px, 6vw, 72px) 0 0; background: var(--sanam-sand-50, #fcf8f3); }
.sanam-work-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.sanam-work-related__head h2 { margin: 0; color: var(--sanam-maroon, #662627); font: 600 clamp(24px, 2.8vw, 34px)/1.4 var(--sanam-font-heading); }
.sanam-work-related__head a { color: var(--sanam-green, #275e4c); font: 600 15px/1.5 var(--sanam-font-ui); }
.sanam-work-related__head a:hover { text-decoration: underline; }

/* Homepage «آخر الأعمال» with project cards */
.sanam-works__projects { padding-bottom: 0; }

@media (max-width: 1024px) {
    .sanam-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sanam-works-grid { grid-template-columns: 1fr; }
    .sanam-work-fact { border-inline-start: 0; border-top: 1px solid var(--sanam-sand-200, #f2e7d9); padding: 14px 18px; }
    .sanam-work-fact:first-child { border-top: 0; }
    .sanam-work-facts dl { grid-template-columns: 1fr 1fr; }
    .sanam-work-fact--client, .sanam-work-fact--place, .sanam-work-fact--services { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .sanam-work-card__link, .sanam-work-card__img { transition: none; }
    .sanam-work-card__link:hover { transform: none; }
}

/* ---------- Logos as pictures (inc/works.php sanam_img_look) ---------- */
/* Card: the whole logo on white (or on maroon for a white logo), not cropped. */
.sanam-work-card__media.is-logo { background: #fff; border-bottom: 1px solid var(--sanam-sand-200, #f2e7d9); }
.sanam-work-card__media.is-logo.is-bg-dark { background: var(--sanam-maroon, #662627); }
.sanam-work-card__media.is-logo .sanam-work-card__img { object-fit: contain; padding: 12% 16%; box-sizing: border-box; }

/* Cover that is a logo or a small picture: brand colour behind, the logo whole beside the title. */
.sanam-work-hero.has-logo {
    background: var(--sanam-maroon, #662627) radial-gradient(120% 90% at 15% 20%, rgb(255 255 255 / .07), transparent 60%);
}
.sanam-work-hero__logo {
    position: absolute;
    top: 50%;
    inset-inline-end: max(20px, calc((100% - 1120px) / 2));
    display: grid;
    place-items: center;
    width: min(320px, 27vw);
    aspect-ratio: 16 / 10;
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 50px rgb(0 0 0 / .25);
    transform: translateY(-62%);
    box-sizing: border-box;
}
.sanam-work-hero.is-bg-dark .sanam-work-hero__logo { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .18); box-shadow: none; }
.sanam-work-hero__logo img { display: block; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; object-fit: contain; }
.sanam-work-hero.has-logo .sanam-work-hero__inner > * { max-width: calc(100% - min(320px, 27vw) - 48px); }
@media (max-width: 760px) {
    .sanam-work-hero.has-logo { flex-direction: column; align-items: stretch; justify-content: flex-end; }
    .sanam-work-hero__logo { position: relative; top: auto; inset-inline-end: auto; width: min(230px, 64vw); margin: 34px auto 0; transform: none; }
    .sanam-work-hero.has-logo .sanam-work-hero__inner { padding-top: 22px; }
    .sanam-work-hero.has-logo .sanam-work-hero__inner > * { max-width: none; }
}