@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Scoped detail-page atmosphere: gradients and an engineering grid. */
body.anchor-item-page {
    --anchor-gold: #ffb31a;
    --anchor-gold-light: #ffca58;
    --anchor-text: #fff;
    --anchor-border: rgba(255,179,26,.24);
    background: radial-gradient(ellipse at 85% 5%, rgba(255,179,26,.07), transparent 40%), radial-gradient(ellipse at 5% 50%, rgba(74,104,154,.09), transparent 50%), #0b0e13;
    color: #fff;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    isolation: isolate;
}
body.anchor-item-page::before { display: none; }
body.anchor-item-page::after {
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(#000, transparent 85%);
    -webkit-mask-image: linear-gradient(#000, transparent 85%);
}
.anchor-item-page h1, .anchor-item-page h2, .anchor-item-page h3 { font-family: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.anchor-item-page .custom-navbar .nav-link { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 15.5px; }
.anchor-item-details { padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 110px); }
.anchor-item-wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.anchor-item-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #9aa3b1; font-size: 14px; line-height: 1.8; margin-bottom: clamp(28px, 4vw, 48px); overflow-wrap: anywhere; }
.anchor-item-breadcrumb a:hover { color: #ffb31a; }
.anchor-item-breadcrumb [aria-current] { color: #fff; }
.anchor-item-heading { max-width: 900px; margin-bottom: clamp(28px, 4vw, 48px); }
.anchor-item-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: #ffb31a; font-weight: 500; letter-spacing: .05em; }
.anchor-item-eyebrow::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #ffb31a; box-shadow: 0 0 0 4px rgba(255,179,26,.12); }
.anchor-item-heading h1 { margin: 18px 0; font-size: clamp(1.8rem, 4vw, 3.8rem); font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.anchor-item-heading p, .anchor-item-card p { color: #aeb6c2; line-height: 1.95; font-size: clamp(16px, 1.4vw, 18px); white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.anchor-item-gallery { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-bottom: clamp(32px, 5vw, 64px); }
.anchor-item-photo { position: relative; margin: 0; min-width: 0; padding: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(145deg, #151b25, #10151d); }
.anchor-item-photo:first-child { grid-row: span 2; }
.anchor-item-photo img { display: block; width: 100%; height: 100%; max-height: 620px; object-fit: contain; transition: transform .5s; }
.anchor-item-photo:hover img { transform: scale(1.015); }
.anchor-item-photo figcaption { position: absolute; bottom: 14px; inset-inline-end: 14px; color: #ffb31a; background: rgba(11,14,19,.85); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 4px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.anchor-item-gallery[data-image-count='1'] { grid-template-columns: minmax(0, 1fr); }
.anchor-item-gallery[data-image-count='2'] .anchor-item-photo { grid-row: auto; }
.anchor-item-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.anchor-item-card { padding: clamp(24px, 3vw, 40px); border: 1px solid rgba(255,255,255,.1); border-top: 2px solid rgba(255,179,26,.6); border-radius: 16px; background: rgba(19,24,33,.88); }
.anchor-item-card h2, .anchor-item-related h2 { margin: 16px 0 22px; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.55; overflow-wrap: anywhere; }
.anchor-item-link, .anchor-item-back { display: inline-flex; gap: 16px; align-items: center; color: #ffb31a; padding-block: 12px; margin-top: 20px; text-decoration: none; }
.anchor-item-link:hover, .anchor-item-back:hover { color: #fff; }
.anchor-item-page a:focus-visible { outline: 2px solid #ffb31a; outline-offset: 4px; border-radius: 4px; }
.anchor-item-back { margin-top: 36px; }
.anchor-item-related { margin-top: 48px; }
.anchor-item-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.anchor-item-related-link { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: #131821; color: #fff; overflow-wrap: anywhere; transition: border-color .25s; }
.anchor-item-related-link img { grid-column: 1 / -1; width: 100%; height: 220px; object-fit: contain; }
.anchor-item-related-link:hover { border-color: #ffb31a; color: #ffb31a; }
@media (max-width: 767.98px) {
    .anchor-item-gallery, .anchor-item-info { grid-template-columns: minmax(0, 1fr); }
    .anchor-item-photo:first-child { grid-row: auto; }
    .anchor-item-photo { padding: 14px; }
    .anchor-item-photo img { height: auto; max-height: 560px; }
    .anchor-item-breadcrumb { font-size: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .anchor-item-photo img, .anchor-item-related-link { transition: none; } .anchor-item-photo:hover img { transform: none; } }

/* Keep three-photo galleries balanced without cropping panel photographs. */
.anchor-item-gallery[data-image-count='3'] { grid-template-rows: repeat(2, clamp(180px, 22vw, 280px)); }
@media (max-width: 767.98px) { .anchor-item-gallery[data-image-count='3'] { grid-template-rows: none; } }
/* Electrical-panel details use the warm paper palette from Design 1. */
body.anchor-panel-page { background: #f3f1eb; }
body.anchor-panel-page::after { display: none; }
.anchor-panel-page .anchor-item-details,
.anchor-panel-page .anchor-item-heading h1,
.anchor-panel-page .anchor-item-card h2 { color: #11151b; }
.anchor-panel-page .anchor-item-breadcrumb,
.anchor-panel-page .anchor-item-heading p,
.anchor-panel-page .anchor-item-card p { color: #5c6472; }
.anchor-panel-page .anchor-item-breadcrumb [aria-current] { color: #11151b; }
.anchor-panel-page .anchor-item-eyebrow,
.anchor-panel-page .anchor-item-link,
.anchor-panel-page .anchor-item-back,
.anchor-panel-page .anchor-item-breadcrumb a:hover { color: #f29100; }
.anchor-panel-page .anchor-item-link:hover,
.anchor-panel-page .anchor-item-back:hover { color: #11151b; }
.anchor-panel-page .anchor-item-photo { background: #e9e6dd; border-color: rgba(17,21,27,.12); }
.anchor-panel-page .anchor-item-card {
    background: #fff;
    border-color: rgba(17,21,27,.12);
    border-top-color: #ffb31a;
    box-shadow: 0 12px 32px -24px rgba(17,21,27,.2);
}
.anchor-panel-page .anchor-item-details a:focus-visible { outline-color: #f29100; }
.anchor-panel-page .anchor-item-empty {
    margin: 0 0 clamp(32px, 5vw, 64px);
    padding: clamp(24px, 4vw, 48px);
    border: 1px dashed rgba(17,21,27,.18);
    border-radius: 16px;
    background: #e9e6dd;
    color: #5c6472;
    text-align: center;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.8;
}

/* Panel titles and project actions */
.anchor-panel-page .anchor-item-heading { text-align: right; }
.anchor-panel-page .anchor-item-heading h1 { text-align: right; font-size: clamp(2rem,4.2vw,4rem); }
.anchor-panel-page .anchor-item-link { display: inline-flex; align-items: center; justify-content: center; gap: 18px; max-width: 100%; min-height: 52px; padding: 12px 24px; margin-top: 24px; background: #ffb31a; color: #0b0e13; border: 1px solid #ffb31a; border-radius: 12px; font-size: 18px; font-weight: 700; line-height: 1.7; transition: background .25s,border-color .25s; }
.anchor-panel-page .anchor-item-link span { display: inline-block; font-family: system-ui,sans-serif; font-size: 20px; transition: transform .25s; }
.anchor-panel-page .anchor-item-link:hover { background: #ffca58; border-color: #ffca58; color: #0b0e13; }
.anchor-panel-page .anchor-item-link:hover span { transform: translateX(-4px); }
/* The same two destinations and navigation design as project details. */
.anchor-panel-page .anchor-project-detail-back { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: clamp(48px,7vw,90px); border-top: 1px solid rgba(17,21,27,.12); }
.anchor-panel-page .anchor-project-detail-back a { display: grid; align-content: start; gap: 6px; padding: 36px 0; color: #11151b; text-decoration: none; min-width: 0; }
.anchor-panel-page .anchor-project-detail-back a:first-child { padding-inline-end: 24px; }
.anchor-panel-page .anchor-project-detail-back a:last-child { text-align: end; border-inline-start: 1px solid rgba(17,21,27,.12); padding-inline-start: 24px; }
.anchor-panel-page .anchor-project-detail-back small { color: #5c6472; font-size: 14px; }
.anchor-panel-page .anchor-project-detail-back strong { font-family: 'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; font-size: clamp(1.2rem,2.4vw,1.8rem); font-weight: 700; line-height: 1.65; overflow-wrap: anywhere; transition: color .25s; }
.anchor-panel-page .anchor-project-detail-back strong span { display: inline-block; font-family: system-ui,sans-serif; margin-inline-start: 8px; color: #f29100; transition: transform .25s; }
.anchor-panel-page .anchor-project-detail-back a:hover strong { color: #f29100; }
.anchor-panel-page .anchor-project-detail-back a:hover strong span { transform: translateY(-3px); }
@media (max-width: 575.98px) {
    .anchor-panel-page .anchor-item-link { min-height: 48px; padding-inline: 20px; font-size: 17px; }
    .anchor-panel-page .anchor-project-detail-back a { padding-block: 26px; }
    .anchor-panel-page .anchor-project-detail-back a:first-child { padding-inline-end: 14px; }
    .anchor-panel-page .anchor-project-detail-back a:last-child { padding-inline-start: 14px; }
    .anchor-panel-page .anchor-project-detail-back strong span { margin-inline-start: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .anchor-panel-page .anchor-item-link, .anchor-panel-page .anchor-item-link span, .anchor-panel-page .anchor-project-detail-back strong, .anchor-panel-page .anchor-project-detail-back strong span { transition: none; }
    .anchor-panel-page .anchor-item-link:hover span, .anchor-panel-page .anchor-project-detail-back a:hover strong span { transform: none; }
}