/* Page-specific layout that doesn't belong in generic components. */

/* === Hero (Home) === */
.hero {
    padding-block: var(--space-9) var(--space-8);
}

.hero__grid {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 900px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--space-7);
    }
}

/* Long Arabic words and translated headings must not force a grid track wider
   than the viewport on desktop RTL layouts. */
.hero__grid > *,
.hero-slider,
.hero-slider__slide { min-width: 0; }

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--link);
    margin-bottom: var(--space-3);
}

.hero__name {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.hero__line {
    font-size: var(--text-lg);
    color: var(--muted);
    max-width: 56ch;
    margin-bottom: var(--space-6);
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* === Hero showcase slider (Home) === */
.hero-slider {
    position: relative;
}

.hero-slider__track {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hero-slider__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
}

.hero-slider__slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.hero-slider__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper);
    border-bottom: var(--border-width) solid var(--rule);
}

.hero-slider__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-slider__caption {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero-slider__meta {
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-slider__title { margin: 0; }

.hero-slider__title a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--ink);
    text-decoration: none;
}

.hero-slider__title a:hover,
.hero-slider__title a:focus-visible { color: var(--link); }

.hero-slider__pitch {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-slider__controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.hero-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    background: none;
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.hero-slider__arrow svg { width: 18px; height: 18px; }

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible { border-color: var(--signal); color: var(--link); }

.hero-slider__progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.hero-slider__count { font-size: var(--text-xs); color: var(--muted); }
.hero-slider__count [data-hero-current] { color: var(--link); }

.hero-slider__bar {
    height: 2px;
    background: var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.hero-slider__bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--signal);
}

/* === What I do / How I work columns === */
.list-columns {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .list-columns { grid-template-columns: repeat(3, 1fr); }
}

.list-columns__item h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-2);
}

.list-columns__item p { color: var(--muted); font-size: var(--text-sm); }

.steps {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    counter-reset: step;
}

@media (min-width: 640px) {
    .steps { grid-template-columns: repeat(4, 1fr); }
}

.steps--5 { }

@media (min-width: 900px) {
    .steps--5 { grid-template-columns: repeat(5, 1fr); }
}

.step {
    counter-increment: step;
    border-top: 2px solid var(--rule);
    padding-top: var(--space-3);
}

.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-mono);
    color: var(--link);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

/* === Background strip === */
.background-strip {
    background: var(--surface);
    border-top: var(--border-width) solid var(--rule);
    border-bottom: var(--border-width) solid var(--rule);
}

.background-strip .cluster { justify-content: space-between; }

.background-strip__item {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* === Projects page grouping === */
.project-group + .project-group { margin-top: var(--space-8); }

/* === Project detail / case study === */
.case-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.at-a-glance {
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-block: var(--space-6);
}

@media (min-width: 640px) {
    .at-a-glance { grid-template-columns: repeat(4, 1fr); }
}

.at-a-glance dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.at-a-glance dd { margin: var(--space-1) 0 0; }

.key-decision {
    border-left: 3px solid var(--signal);
    padding-left: var(--space-4);
}

.key-decision + .key-decision { margin-top: var(--space-5); }

.key-decision h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }

.screenshot-gallery {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    margin-block: var(--space-6);
}

@media (min-width: 640px) {
    .screenshot-gallery { grid-template-columns: repeat(2, 1fr); }
}

.screenshot-gallery figure { margin: 0; }

.screenshot-gallery img {
    display: block;
    border-radius: var(--radius-md);
    width: 100%;
    height: auto;
    background: var(--surface);
}

.screenshot-gallery figcaption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: var(--space-2);
}

.screenshot-gallery__trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    cursor: zoom-in;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.screenshot-gallery__trigger:hover,
.screenshot-gallery__trigger:focus-visible {
    border-color: var(--signal);
}

/* === Lightbox (screenshot preview) === */
.lightbox {
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    max-width: min(92vw, 1100px);
    max-height: 92vh;
}

.lightbox::backdrop {
    background: color-mix(in srgb, var(--ink) 70%, transparent);
}

/* Explicit fixed+inset+auto-margin centering rather than trusting the UA
   stylesheet's dialog:modal defaults — headless/older Chromium builds have
   been inconsistent about applying those without an explicit nudge here. */
.lightbox[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-8);
}

.lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 100%;
}

.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    width: auto;
    height: auto;
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-inline: auto;
}

.lightbox__caption {
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: center;
}

.lightbox__close {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
}

.lightbox__close:hover,
.lightbox__close:focus-visible { border-color: var(--signal); }
.lightbox__close svg { width: 18px; height: 18px; }

.lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    z-index: 1;
}

.lightbox__arrow:hover,
.lightbox__arrow:focus-visible { border-color: var(--signal); }
.lightbox__arrow svg { width: 20px; height: 20px; }
.lightbox__arrow--prev { inset-inline-start: var(--space-4); }
.lightbox__arrow--next { inset-inline-end: var(--space-4); }

.private-note {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--muted);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}

/* === Services page === */
.pricing-tiers { }

.pricing-tier__price {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    color: var(--signal);
    margin-block: var(--space-3);
}

.pricing-tier ul { margin-top: var(--space-3); }
.pricing-tier li {
    padding-block: var(--space-2);
    border-top: var(--border-width) solid var(--rule);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* === Contact === */
.contact-channels {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .contact-channels { grid-template-columns: repeat(2, 1fr); }
}

.contact-channel {
    border: var(--border-width) solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.contact-channel dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
}

.contact-channel dd { margin-top: var(--space-2); }

/* === 404 === */
.error-page {
    text-align: center;
    padding-block: var(--space-9);
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    color: var(--signal);
}

/* === Blog article === */
.blog-post { max-width: 980px; }
.blog-post > h1,
.blog-post > .hero__line,
.blog-post > .mono { max-width: 820px; }
.blog-post__cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--border-width) solid var(--rule); }
.blog-post .prose { max-width: 760px; }
.blog-post .prose > * + * { margin-top: var(--space-5); }
.blog-post .prose h2 { margin-top: var(--space-9); }
.blog-post .prose h3 { margin-top: var(--space-7); }
.blog-post .prose p,
.blog-post .prose li { line-height: 1.8; }
.blog-post .prose ul,
.blog-post .prose ol { padding-inline-start: 1.4rem; }
.blog-post .prose li + li { margin-top: var(--space-2); }
.blog-post .prose img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-block: var(--space-8); border: var(--border-width) solid var(--rule); background: var(--surface); }
.blog-post .prose blockquote { padding-inline-start: var(--space-5); border-inline-start: 4px solid var(--signal); color: var(--muted); }

@media (max-width: 640px) {
    .blog-post .prose > * + * { margin-top: var(--space-4); }
    .blog-post .prose h2 { margin-top: var(--space-8); }
    .blog-post .prose img { margin-block: var(--space-6); }
}