/* Services page only: photography gallery, lightbox and the embedded 360° tour.
   Uses the tokens defined in main.css. */

.svc__extra { grid-column: 2 / -1; display: grid; gap: 20px; justify-items: start; }
@media (max-width: 47.99em) { .svc__extra { grid-column: 1 / -1; } }
.svc__note { max-inline-size: 62ch; font-size: 1.125rem; line-height: 1.6; color: #2b2b29; }

/* gallery */
.gallery { inline-size: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery__item { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--concrete); }
.gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .3s; }
.gallery__item:hover img { opacity: .82; }
.gallery__item:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.js .gallery:not(.is-open) .is-more { display: none; }
.gallery__more .arrow { transform: rotate(90deg); }
.gallery__more[aria-expanded='true'] .arrow { transform: rotate(-90deg); }
@media (max-width: 63.99em) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 47.99em) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* lightbox */
.lightbox { padding: 0; border: 0; background: transparent; color: var(--paper); inline-size: min(94vw, calc(82vh * 3 / 2)); max-inline-size: none; max-block-size: none; overflow: visible; }
.lightbox::backdrop { background: rgba(17, 17, 17, .95); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block-end: 12px; }
.lightbox__caption { font-size: .9375rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lightbox__count { font-size: .75rem; color: var(--paper-60); }
.lightbox__img { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #000; }
.lightbox__nav { display: flex; justify-content: space-between; padding-block-start: 12px; }
.lightbox button { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 4px; font-weight: 500; color: var(--paper); }
.lightbox button svg { inline-size: 18px; block-size: 18px; }
.lightbox__prev .arrow { transform: scaleX(-1); }
[dir='rtl'] .lightbox__prev .arrow { transform: none; }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] { animation: fade .3s ease; } }

/* 360° tour */
.tour { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: 80vh; background: var(--black); overflow: hidden; color: var(--paper); }
.tour > img, .tour iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border: 0; }
.tour::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(17,17,17,.5), rgba(17,17,17,.08) 55%); }
.tour .marks { z-index: 2; }
.tour__label { position: absolute; z-index: 3; inset-block-start: 26px; inset-inline-start: 34px; display: flex; align-items: center; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(17,17,17,.45); }
html[lang='ar'] .tour__label { letter-spacing: 0; font-size: .8125rem; }
.tour__label .dot { margin-inline-end: .6em; }
.tour__start { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-weight: 500; }
.tour__icon { display: grid; place-items: center; inline-size: clamp(72px, 8vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--black); font-size: 1rem; font-weight: 700; transition: transform .35s var(--ease); }
.tour__start:hover .tour__icon { transform: scale(1.06); }
.tour__start:focus-visible { outline: 2px solid var(--paper); outline-offset: -8px; }
.tour.is-live::after, .tour.is-live .marks, .tour.is-live .tour__label { display: none; }
@media (max-width: 47.99em) { .tour { aspect-ratio: 4 / 5; } }

/* websites built by the team: screen recordings in a browser frame */
.sites { inline-size: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3vw, 44px) var(--gap); }
.site { display: grid; gap: 8px; align-content: start; }
.site__frame { margin: 0 0 10px; background: var(--black); border-radius: 12px; padding: 0 6px 6px; box-shadow: 0 1px 0 rgba(17,17,17,.06); }
.site__bar { display: flex; gap: 6px; padding: 11px 8px; direction: ltr; }
.site__bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #3a3a37; }
.site__bar i:first-child { background: var(--red); }
.site__screen { display: block; overflow: hidden; border-radius: 0 0 7px 7px; aspect-ratio: 1600 / 920; background: #000; }
.site__screen video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.site__name { font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.site__desc { color: #2b2b29; max-inline-size: 52ch; }
@media (max-width: 47.99em) { .sites { grid-template-columns: 1fr; } }