/*
 * H-GALLERY.7.0 — CINEMATIC ARCHITECTURAL PORTFOLIO
 *
 * CSS only. Built strictly against the PHP-generated markup contract:
 *   - .sz-gallery-page > header.sz-gallery-hero, main.sz-gallery-main, footer.sz-gallery-footer
 *   - .sz-gallery-hero-media / .sz-gallery-hero-inner
 *   - .sz-gallery-empty (real PHP output — now styled; was previously missing)
 *   - .sz-gallery-featured > .sz-gallery-featured-media / .sz-gallery-featured-content
 *   - .sz-gallery-filters > .sz-gallery-filter (button, .is-active, [aria-pressed])
 *   - .sz-gallery-collection > .sz-gallery-grid > .sz-gallery-card > .sz-gallery-image-link,
 *     .sz-gallery-content > .sz-gallery-category / h3 / .sz-gallery-description / .sz-gallery-meta / .sz-gallery-actions
 *   - .sz-gallery-trust > .sz-gallery-grid[data-gallery-role="trust-values"] > .sz-gallery-trust-card > .sz-gallery-content
 *
 * IMPORTANT: .sz-gallery-grid and .sz-gallery-content are reused verbatim by both
 * the project gallery AND the trust section in the PHP. Every rule below is scoped
 * to .sz-gallery-collection or .sz-gallery-trust explicitly — there is no bare,
 * unscoped .sz-gallery-grid / .sz-gallery-content rule anywhere in this file, so the
 * two components can never accidentally inherit each other's layout, image, or
 * hover behaviour.
 *
 * .sz-gallery-media-required (present in the previous stylesheet) has been removed:
 * the PHP never renders that markup, so the rule was dead code.
 */

/* =========================================================
   1. FOUNDATION — TOKENS, RESET, MOTION SYSTEM
   ========================================================= */

.sz-gallery-page {
  /* -- color / surface tokens (reused from brand tokens) -- */
  --sz-gallery-bg: var(--sz-color-brand-navy);
  --sz-gallery-bg-elevated: var(--sz-color-brand-dark);
  --sz-gallery-surface: var(--sz-color-navy-raised);
  --sz-gallery-surface-soft: var(--sz-color-brand-dark);
  --sz-gallery-gold: var(--sz-color-brand-bronze);
  --sz-gallery-gold-bright: var(--sz-color-brand-bronze);
  --sz-gallery-gold-deep: var(--sz-color-bronze-muted);
  --sz-gallery-text: var(--sz-color-text-on-dark);
  --sz-gallery-text-soft: var(--sz-color-text-muted-on-dark);
  --sz-gallery-text-faint: var(--sz-color-text-muted-on-dark);
  --sz-gallery-border: var(--sz-color-border-architectural);
  --sz-gallery-border-strong: var(--sz-color-border-architectural);
  --sz-gallery-rule: var(--sz-color-border-architectural);
  --sz-gallery-overlay: var(--sz-color-overlay);

  /* -- depth (used sparingly: hover/focus only, never as idle decoration) -- */
  --sz-gallery-depth-soft: 0 0.9rem 2rem rgba(4, 13, 27, 0.24);
  --sz-gallery-depth-strong: 0 1.5rem 3.25rem rgba(4, 13, 27, 0.32);

  /* -- shape -- */
  --sz-gallery-radius-sm: var(--sz-radius-sm);
  --sz-gallery-radius-md: var(--sz-radius-sm);

  /* -- layout -- */
  --sz-gallery-container: var(--sz-container-width);
  --sz-gallery-gutter: var(--sz-spacing-sm);
  --sz-gallery-section-space: clamp(var(--sz-spacing-lg), 8vw, var(--sz-spacing-xl));

  /* -- motion system: one small, named vocabulary, reused everywhere -- */
  --sz-gallery-motion-fast: var(--sz-transition-speed, 200ms);
  --sz-gallery-motion-base: 340ms;
  --sz-gallery-motion-slow: var(--sz-motion-duration-base, 700ms);
  --sz-gallery-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sz-gallery-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  --sz-gallery-font: var(--sz-font-ui2-sans);

  min-width: 0;
  min-height: 100%;
  overflow-x: clip;
  background: var(--sz-gallery-bg);
  color: var(--sz-gallery-text);
  direction: rtl;
  font-family: var(--sz-gallery-font);
  line-height: var(--sz-ui2-line-body);
  text-align: start;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sz-gallery-page *,
.sz-gallery-page *::before,
.sz-gallery-page *::after {
  box-sizing: border-box;
}

.sz-gallery-page :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--sz-gallery-gold-bright);
  outline-offset: 4px;
  box-shadow: var(--sz-focus-ring);
}

.sz-gallery-page :where(a, button) {
  -webkit-tap-highlight-color: transparent;
}

.sz-gallery-page img {
  display: block;
  max-inline-size: 100%;
}

.sz-gallery-page a {
  color: inherit;
  text-decoration: none;
}

.sz-gallery-page button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
}

.sz-gallery-page h1,
.sz-gallery-page h2,
.sz-gallery-page h3,
.sz-gallery-page p {
  margin-block: 0;
}

/* Shared editorial label style — used by the hero eyebrow AND both section
   headings (collection + trust). This is plain typography, not layout or
   image behaviour, so sharing it across sections is intentional. */
.sz-gallery-page .sz-gallery-eyebrow {
  position: relative;
  display: block;
  width: fit-content;
  color: var(--sz-gallery-gold-bright);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-small-size);
  font-weight: 500;
  line-height: var(--sz-ui2-line-small);
}

/* Shared quiet body copy — description text reads the same wherever it
   appears (featured, project card, trust card); only its container differs. */
.sz-gallery-page .sz-gallery-description {
  color: var(--sz-gallery-text-soft);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-body-size);
  line-height: var(--sz-ui2-line-body);
}

/* Shared secondary metadata (attachment IDs) — intentionally quiet everywhere. */
.sz-gallery-page .sz-gallery-meta {
  display: block;
  margin-block-start: 0.6rem;
  color: var(--sz-gallery-text-faint);
  font-family: var(--sz-font-ui2-sans);
  font-size: 0.68rem;
  line-height: 1.6;
  opacity: 0.82;
}

/* Section heading block (used identically by .sz-gallery-collection and
   .sz-gallery-trust — same PHP markup, same typographic treatment). */
.sz-gallery-page .sz-gallery-section-heading {
  max-inline-size: 38rem;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

.sz-gallery-page .sz-gallery-section-heading .sz-gallery-eyebrow {
  margin-block-end: 0.5rem;
}

.sz-gallery-page .sz-gallery-section-heading h2 {
  color: var(--sz-gallery-text);
  font-family: var(--sz-font-ui2-display);
  font-size: var(--sz-ui2-h2-size);
  font-weight: 700;
  line-height: var(--sz-ui2-line-heading);
}

.sz-gallery-page .sz-gallery-section-introduction {
  margin-block-start: 0.6rem;
  color: var(--sz-gallery-text-faint);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-body-size);
  line-height: var(--sz-ui2-line-body);
}

/* -- motion keyframes (referenced by hero + scroll-reveal below) -- */
@keyframes sz-gallery-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sz-gallery-hero-scale-in {
  from {
    opacity: 0;
    transform: scale(1.07);
  }
  to {
    opacity: 0.74;
    transform: scale(1.015);
  }
}

/* =========================================================
   2. PAGE SHELL
   ========================================================= */

.sz-gallery-page .sz-gallery-main {
  width: min(100%, var(--sz-gallery-container));
  margin-inline: auto;
  padding-inline: var(--sz-gallery-gutter);
  background: var(--sz-gallery-bg);
}

.sz-gallery-page .sz-gallery-featured,
.sz-gallery-page .sz-gallery-collection,
.sz-gallery-page .sz-gallery-footer {
  position: relative;
}

.sz-gallery-page .sz-gallery-featured {
  margin-block-start: clamp(1rem, 2vw, 1.75rem);
}

.sz-gallery-page .sz-gallery-collection {
  padding-block: var(--sz-gallery-section-space);
}

/* Empty state — real PHP output, previously unstyled. Quiet, centered,
   architectural rather than a bare error message. */
.sz-gallery-page .sz-gallery-empty {
  display: grid;
  place-items: center;
  min-height: 16rem;
  margin-block: var(--sz-gallery-section-space);
  border-block: 1px solid var(--sz-gallery-border);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.sz-gallery-page .sz-gallery-empty p {
  max-inline-size: 32rem;
  color: var(--sz-gallery-text-soft);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-body-size);
  line-height: var(--sz-ui2-line-body);
}

/* =========================================================
   3. HERO — CINEMATIC OPENING
   ========================================================= */

.sz-gallery-page .sz-gallery-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 72vh, 47rem);
  overflow: hidden;
  padding-block: clamp(5.5rem, 11vw, 8rem) clamp(4.5rem, 9vw, 6.5rem);
  padding-inline: var(--sz-gallery-gutter);
  background-color: var(--sz-gallery-bg);
  background-image:
    linear-gradient(90deg, rgba(7, 24, 47, 0.9) 0%, rgba(7, 24, 47, 0.56) 40%, rgba(7, 24, 47, 0.2) 75%, rgba(7, 24, 47, 0.46) 100%),
    linear-gradient(180deg, rgba(7, 24, 47, 0.18) 0%, rgba(7, 24, 47, 0.08) 54%, var(--sz-gallery-bg) 100%);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

.sz-gallery-page .sz-gallery-hero::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  block-size: clamp(3rem, 8vw, 7rem);
  content: '';
  background: linear-gradient(180deg, transparent, var(--sz-gallery-bg));
  pointer-events: none;
}

/* Direct child of <header>, precedes .sz-gallery-hero-inner in the PHP;
   only rendered when a featured item with media exists. */
.sz-gallery-page .sz-gallery-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.74;
  transform: scale(1.015);
  animation: sz-gallery-hero-scale-in 1.15s var(--sz-gallery-ease-emphasis) both;
  transition: transform var(--sz-gallery-motion-slow) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-hero:hover .sz-gallery-hero-media,
.sz-gallery-page .sz-gallery-hero:focus-within .sz-gallery-hero-media {
  transform: scale(1.035);
}

.sz-gallery-page .sz-gallery-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  margin-inline-start: auto;
  margin-inline-end: 0;
  text-align: start;
}

.sz-gallery-page .sz-gallery-hero .sz-gallery-eyebrow {
  margin-block-end: 1rem;
  padding-inline-start: 1.2rem;
  animation: sz-gallery-fade-up var(--sz-gallery-motion-slow) var(--sz-gallery-ease-emphasis) 100ms both;
}

.sz-gallery-page .sz-gallery-hero .sz-gallery-eyebrow::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 0.55rem;
  height: 1px;
  content: '';
  background: var(--sz-gallery-gold);
  transform: translateY(-50%);
}

.sz-gallery-page .sz-gallery-hero h1 {
  max-inline-size: 11ch;
  color: var(--sz-gallery-text);
  font-family: var(--sz-font-ui2-display);
  font-size: var(--sz-ui2-display-size);
  font-weight: 900;
  letter-spacing: 0;
  line-height: var(--sz-ui2-line-display);
  text-wrap: balance;
  animation: sz-gallery-fade-up var(--sz-gallery-motion-slow) var(--sz-gallery-ease-emphasis) 220ms both;
}

.sz-gallery-page .sz-gallery-hero h1 [data-title-tone='accent'] {
  color: var(--sz-gallery-gold-bright);
}

.sz-gallery-page .sz-gallery-hero .sz-gallery-introduction {
  max-inline-size: 32rem;
  margin-block-start: clamp(1.2rem, 2.5vw, 1.75rem);
  color: var(--sz-gallery-text-soft);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-body-size);
  line-height: var(--sz-ui2-line-body);
  animation: sz-gallery-fade-up var(--sz-gallery-motion-slow) var(--sz-gallery-ease-emphasis) 360ms both;
}

.sz-gallery-page .sz-gallery-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: clamp(1.6rem, 3vw, 2.35rem);
  animation: sz-gallery-fade-up var(--sz-gallery-motion-slow) var(--sz-gallery-ease-emphasis) 480ms both;
}

.sz-gallery-page .sz-gallery-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.8rem;
  overflow: hidden;
  border: 1px solid var(--sz-gallery-border-strong);
  border-radius: var(--sz-gallery-radius-sm);
  padding-block: 0.66rem;
  padding-inline: 1.2rem;
  color: var(--sz-gallery-text);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-small-size);
  font-weight: 500;
  line-height: var(--sz-ui2-line-small);
  text-align: center;
  transition:
    border-color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard),
    color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard),
    transform var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-cta-primary {
  border-color: var(--sz-gallery-gold);
  background: var(--sz-gallery-gold);
  color: var(--sz-color-brand-dark);
}

.sz-gallery-page .sz-gallery-cta-primary:hover,
.sz-gallery-page .sz-gallery-cta-primary:focus-visible {
  border-color: var(--sz-gallery-gold-bright);
  background: var(--sz-gallery-gold-bright);
  transform: translateY(-2px);
}

.sz-gallery-page .sz-gallery-cta-secondary {
  border-color: rgba(200, 155, 60, 0.5);
  background: rgba(7, 24, 47, 0.2);
  color: var(--sz-gallery-text);
}

.sz-gallery-page .sz-gallery-cta-secondary:hover,
.sz-gallery-page .sz-gallery-cta-secondary:focus-visible {
  border-color: var(--sz-gallery-gold-bright);
  color: var(--sz-gallery-gold-bright);
  transform: translateY(-2px);
}

/* =========================================================
   4. FEATURED PROJECT — EDITORIAL SPREAD
   ========================================================= */

.sz-gallery-page .sz-gallery-featured {
  display: flex;
  direction: ltr;
  overflow: hidden;
  border: 1px solid var(--sz-gallery-border);
  border-radius: var(--sz-gallery-radius-md);
  background: var(--sz-gallery-surface);
}

.sz-gallery-page .sz-gallery-featured-media {
  position: relative;
  flex: 1 1 67%;
  min-width: 0;
  overflow: hidden;
  min-block-size: 22rem;
  background: var(--sz-gallery-surface-soft);
}

.sz-gallery-page .sz-gallery-featured-media::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, rgba(7, 24, 47, 0.02), rgba(7, 24, 47, 0.24));
  pointer-events: none;
}

.sz-gallery-page .sz-gallery-featured-media .sz-gallery-image {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  object-position: center;
  background: var(--sz-gallery-surface-soft);
  transform: scale(1.01);
  transition: transform var(--sz-gallery-motion-slow) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-featured:hover .sz-gallery-featured-media .sz-gallery-image,
.sz-gallery-page .sz-gallery-featured:focus-within .sz-gallery-featured-media .sz-gallery-image {
  transform: scale(1.028);
}

.sz-gallery-page .sz-gallery-featured-content {
  display: flex;
  flex: 1 1 33%;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  direction: rtl;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--sz-gallery-surface);
  text-align: start;
  transition: transform var(--sz-gallery-motion-base) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-featured:hover .sz-gallery-featured-content,
.sz-gallery-page .sz-gallery-featured:focus-within .sz-gallery-featured-content {
  transform: translateX(-2px);
}

.sz-gallery-page .sz-gallery-featured-content::before {
  display: block;
  width: 2.4rem;
  height: 2px;
  margin-block-end: 1.1rem;
  content: '';
  background: var(--sz-gallery-gold);
  transition: width var(--sz-gallery-motion-base) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-featured:hover .sz-gallery-featured-content::before,
.sz-gallery-page .sz-gallery-featured:focus-within .sz-gallery-featured-content::before {
  width: 3.6rem;
}

.sz-gallery-page .sz-gallery-featured-content .sz-gallery-category {
  display: block;
  margin-block-end: 0.7rem;
  color: var(--sz-gallery-gold-bright);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-small-size);
  font-weight: 500;
  line-height: var(--sz-ui2-line-small);
}

.sz-gallery-page .sz-gallery-featured-content h2 {
  max-inline-size: 13ch;
  color: var(--sz-gallery-text);
  font-family: var(--sz-font-ui2-display);
  font-size: var(--sz-ui2-h2-size);
  font-weight: 700;
  line-height: var(--sz-ui2-line-heading);
  text-wrap: balance;
}

.sz-gallery-page .sz-gallery-featured-content .sz-gallery-description {
  max-inline-size: 31rem;
  margin-block-start: 0.95rem;
}

.sz-gallery-page .sz-gallery-featured-content .sz-gallery-description [data-meta-field='category'] {
  display: inline-block;
  margin-block-start: 0.4rem;
  color: var(--sz-gallery-text-faint);
  font-size: var(--sz-ui2-small-size);
}

.sz-gallery-page .sz-gallery-featured-content .sz-gallery-meta {
  margin-block-start: 0.5rem;
}

.sz-gallery-page .sz-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-block-start: clamp(1.4rem, 3vw, 2rem);
}

/* =========================================================
   5. FILTERS — EDITORIAL NAVIGATION, NOT BUTTONS
   ========================================================= */

.sz-gallery-page .sz-gallery-filters {
  display: flex;
  align-items: center;
  gap: 0;
  max-inline-size: 100%;
  margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
  border-block-end: 1px solid var(--sz-gallery-border);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block: 0.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 155, 60, 0.5) transparent;
}

.sz-gallery-page .sz-gallery-filters::-webkit-scrollbar {
  height: 0.2rem;
}

.sz-gallery-page .sz-gallery-filters::-webkit-scrollbar-track {
  background: transparent;
}

.sz-gallery-page .sz-gallery-filters::-webkit-scrollbar-thumb {
  border-radius: var(--sz-gallery-radius-sm);
  background: rgba(200, 155, 60, 0.5);
}

.sz-gallery-page .sz-gallery-filter {
  position: relative;
  flex: 0 0 auto;
  min-block-size: 2.6rem;
  margin-block-end: -1px;
  padding-block: 0.7rem 0.6rem;
  padding-inline: 0.95rem;
  color: var(--sz-gallery-text-faint);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-filter:not(:last-child) {
  border-inline-end: 1px solid var(--sz-gallery-border);
}

.sz-gallery-page .sz-gallery-filter::after {
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0.95rem;
  height: 2px;
  content: '';
  background: var(--sz-gallery-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--sz-gallery-motion-base) var(--sz-gallery-ease-emphasis);
}

.sz-gallery-page .sz-gallery-filter:hover,
.sz-gallery-page .sz-gallery-filter:focus-visible {
  color: var(--sz-gallery-text);
}

.sz-gallery-page .sz-gallery-filter:hover::after,
.sz-gallery-page .sz-gallery-filter:focus-visible::after {
  transform: scaleX(0.4);
}

.sz-gallery-page .sz-gallery-filter.is-active {
  color: var(--sz-gallery-gold-bright);
  font-weight: 700;
}

.sz-gallery-page .sz-gallery-filter.is-active::after {
  transform: scaleX(1);
}

/* =========================================================
   6. GALLERY COLLECTION — PROJECT GRID AND CARDS
   (Everything in this section is scoped under .sz-gallery-collection so it
   can never bleed into the trust grid, which reuses the same class names.)
   ========================================================= */

.sz-gallery-page .sz-gallery-collection .sz-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.35vw, 1.15rem);
  align-items: stretch;
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sz-gallery-border);
  border-radius: var(--sz-gallery-radius-md);
  background: var(--sz-gallery-surface);
  box-shadow: none;
  transition:
    border-color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard),
    box-shadow var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard),
    transform var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

/* Single, deliberate microinteraction: a structural accent edge that grows
   in on hover/focus. Idle state carries no border tint, no shadow. */
.sz-gallery-page .sz-gallery-collection .sz-gallery-card::before {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2px;
  height: 0;
  content: '';
  background: var(--sz-gallery-gold);
  transition: height var(--sz-gallery-motion-slow) var(--sz-gallery-ease-emphasis);
  pointer-events: none;
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover,
.sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within {
  border-color: rgba(200, 155, 60, 0.55);
  box-shadow: var(--sz-gallery-depth-soft);
  transform: translateY(-0.3rem);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover::before,
.sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within::before {
  height: 100%;
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-image-link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sz-gallery-surface-soft);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-image-link::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, transparent 55%, rgba(7, 24, 47, 0.48) 100%);
  pointer-events: none;
}

/* Standard proportion. Object-fit + aspect-ratio only ever supplement the
   PHP-provided width/height/srcset/sizes — they never replace them. */
.sz-gallery-page .sz-gallery-collection .sz-gallery-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--sz-gallery-surface-soft);
  transform: scale(1.004);
  transition: transform var(--sz-gallery-motion-slow) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover .sz-gallery-image,
.sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within .sz-gallery-image {
  transform: scale(1.032);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 11.5rem;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(0.95rem, 1.8vw, 1.4rem);
  transition: transform var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover .sz-gallery-content,
.sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within .sz-gallery-content {
  transform: translateY(-2px);
}

/* Editorial metadata label — small text + thin accent rule, never a badge. */
.sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-category {
  position: relative;
  display: block;
  width: fit-content;
  max-inline-size: 100%;
  margin-block-end: 0.55rem;
  color: var(--sz-gallery-gold-bright);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-small-size);
  font-weight: 500;
  line-height: var(--sz-ui2-line-small);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-category::after {
  display: block;
  width: 1.4rem;
  height: 1px;
  margin-block-start: 0.4rem;
  content: '';
  background: var(--sz-gallery-gold);
  opacity: 0.55;
  transform: scaleX(0.55);
  transform-origin: right;
  transition: opacity var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard), transform var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover .sz-gallery-category::after,
.sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within .sz-gallery-category::after {
  opacity: 1;
  transform: scaleX(1);
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-content h3 {
  min-width: 0;
  color: var(--sz-gallery-text);
  font-family: var(--sz-font-ui2-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: var(--sz-ui2-line-heading);
  text-wrap: balance;
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-description {
  display: -webkit-box;
  overflow: hidden;
  margin-block-start: 0.55rem;
  font-size: var(--sz-ui2-small-size);
  line-height: var(--sz-ui2-line-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-meta {
  margin-block-start: 0.5rem;
}

.sz-gallery-page .sz-gallery-collection .sz-gallery-actions {
  gap: 1rem;
  margin-block-start: auto;
  padding-block-start: 0.85rem;
}

/* Editorial CTA links: "تفاصيل المشروع ←" — underline + arrow, never a
   pill or a bordered button. Applies to .sz-gallery-action wherever it is
   used (featured, cards, footer) since the link treatment is intentionally
   consistent site-wide; the hero's .sz-gallery-cta remains a distinct,
   heavier primary/secondary button pair by design. */
.sz-gallery-page .sz-gallery-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block-end: 0.15rem;
  border-block-end: 1px solid rgba(200, 155, 60, 0.35);
  color: var(--sz-gallery-gold);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-small-size);
  font-weight: 500;
  line-height: var(--sz-ui2-line-small);
  white-space: nowrap;
  transition:
    border-color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard),
    color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-action::after {
  content: '←';
  display: inline-block;
  transition: transform var(--sz-gallery-motion-fast) var(--sz-gallery-ease-emphasis);
}

.sz-gallery-page .sz-gallery-action:hover,
.sz-gallery-page .sz-gallery-action:focus-visible {
  border-color: var(--sz-gallery-gold-bright);
  color: var(--sz-gallery-gold-bright);
}

.sz-gallery-page .sz-gallery-action:hover::after,
.sz-gallery-page .sz-gallery-action:focus-visible::after {
  transform: translateX(-3px);
}

/* Controlled asymmetry: standard / standard / wide, repeating. Column span
   only at desktop widths where a half-width tile still reads as balanced;
   at tablet the rhythm is expressed through image proportion alone (see §9). */
@media (min-width: 1200px) {
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(3n) {
    grid-column: span 2;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(3n) .sz-gallery-image {
    aspect-ratio: 16 / 9;
  }
}

/* =========================================================
   7. TRUST SECTION — SEPARATE, STRUCTURED, NO IMAGE BEHAVIOUR
   (Deliberately does not reuse any project-gallery selector's rules.
   No border box, no shadow, no lift, no zoom — a calmer, informational
   component distinct from the photographic portfolio above it.)
   ========================================================= */

.sz-gallery-page .sz-gallery-trust {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  border-block-start: 1px solid var(--sz-gallery-border);
}

.sz-gallery-page .sz-gallery-trust .sz-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
}

.sz-gallery-page .sz-gallery-trust-card {
  position: relative;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--sz-gallery-border);
  transition: border-color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-trust-card:hover,
.sz-gallery-page .sz-gallery-trust-card:focus-within {
  border-color: rgba(200, 155, 60, 0.5);
}

.sz-gallery-page .sz-gallery-trust-card .sz-gallery-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Icon slot: span is empty in the markup (no icon font is loaded), so it is
   rendered as a quiet architectural mark rather than left visually blank. */
.sz-gallery-page .sz-gallery-trust-card [data-icon] {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sz-gallery-gold);
  color: var(--sz-gallery-gold-bright);
  font-size: 0;
  transition: border-color var(--sz-gallery-motion-fast) var(--sz-gallery-ease-standard);
}

.sz-gallery-page .sz-gallery-trust-card [data-icon]::before {
  content: '+';
  font-family: var(--sz-font-ui2-sans);
  font-size: 1rem;
  line-height: 1;
}

.sz-gallery-page .sz-gallery-trust-card:hover [data-icon],
.sz-gallery-page .sz-gallery-trust-card:focus-within [data-icon] {
  border-color: var(--sz-gallery-gold-bright);
}

.sz-gallery-page .sz-gallery-trust-card .sz-gallery-content h3 {
  color: var(--sz-gallery-text);
  font-family: var(--sz-font-ui2-display);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 700;
  line-height: var(--sz-ui2-line-heading);
}

.sz-gallery-page .sz-gallery-trust-card .sz-gallery-content .sz-gallery-description {
  font-size: var(--sz-ui2-small-size);
  line-height: var(--sz-ui2-line-body);
}

/* =========================================================
   8. FOOTER
   ========================================================= */

.sz-gallery-page .sz-gallery-footer {
  width: min(100%, var(--sz-gallery-container));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
  padding-inline: var(--sz-gallery-gutter);
  background: var(--sz-gallery-bg);
}

.sz-gallery-page .sz-gallery-footer > .sz-gallery-actions {
  justify-content: center;
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}

.sz-gallery-page .sz-gallery-footer-note {
  max-inline-size: 42rem;
  margin-inline: auto;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block: 1.15rem;
  padding-inline: 1.25rem;
  border-block: 1px solid var(--sz-gallery-rule);
  color: var(--sz-gallery-text-faint);
  font-family: var(--sz-font-ui2-sans);
  font-size: var(--sz-ui2-small-size);
  line-height: var(--sz-ui2-line-small);
  text-align: center;
}

/* =========================================================
   9. RESPONSIVE ART DIRECTION
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {
  .sz-gallery-page .sz-gallery-collection .sz-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Reduced asymmetry at tablet: rhythm via proportion only, no column span. */
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(3n) .sz-gallery-image {
    aspect-ratio: 16 / 9;
  }

  .sz-gallery-page .sz-gallery-hero-inner {
    width: min(100%, 31rem);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sz-gallery-page .sz-gallery-collection .sz-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-image {
    aspect-ratio: 3 / 2;
  }

  .sz-gallery-page .sz-gallery-hero {
    min-height: clamp(31rem, 68vh, 40rem);
  }

  .sz-gallery-page .sz-gallery-featured-content {
    padding: clamp(1.45rem, 3.4vw, 2.4rem);
  }

  .sz-gallery-page .sz-gallery-featured-content h2 {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
  }

  .sz-gallery-page .sz-gallery-trust .sz-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sz-gallery-page .sz-gallery-hero {
    min-height: 39rem;
    align-items: flex-end;
    padding-block: 5.5rem 4.25rem;
    background-image:
      linear-gradient(180deg, rgba(7, 24, 47, 0.24) 0%, rgba(7, 24, 47, 0.64) 46%, rgba(7, 24, 47, 0.88) 100%);
  }

  .sz-gallery-page .sz-gallery-hero-media {
    opacity: 0.6;
  }

  .sz-gallery-page .sz-gallery-hero-inner {
    width: min(100%, 31rem);
    margin-inline: auto;
    text-align: center;
  }

  .sz-gallery-page .sz-gallery-hero .sz-gallery-eyebrow {
    margin-inline: auto;
    padding-inline: 0;
  }

  .sz-gallery-page .sz-gallery-hero .sz-gallery-eyebrow::before {
    display: none;
  }

  .sz-gallery-page .sz-gallery-hero h1 {
    max-inline-size: 12ch;
    margin-inline: auto;
    font-size: clamp(2.15rem, 9vw, 3rem);
  }

  .sz-gallery-page .sz-gallery-hero .sz-gallery-introduction {
    margin-inline: auto;
    font-size: 0.9rem;
  }

  .sz-gallery-page .sz-gallery-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 22rem);
    margin-inline: auto;
  }

  .sz-gallery-page .sz-gallery-cta {
    width: 100%;
  }

  .sz-gallery-page .sz-gallery-featured {
    flex-direction: column;
  }

  .sz-gallery-page .sz-gallery-featured-content {
    order: 1;
    padding: clamp(1.35rem, 5vw, 1.75rem);
  }

  .sz-gallery-page .sz-gallery-featured-media {
    order: 2;
    min-block-size: auto;
  }

  .sz-gallery-page .sz-gallery-featured-media .sz-gallery-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .sz-gallery-page .sz-gallery-featured-content h2 {
    max-inline-size: 15ch;
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .sz-gallery-page .sz-gallery-section-heading {
    margin-block-end: 1.25rem;
  }

  .sz-gallery-page .sz-gallery-section-introduction {
    font-size: 0.8rem;
  }

  .sz-gallery-page .sz-gallery-filter {
    min-block-size: 2.4rem;
    padding-inline: 0.7rem;
    font-size: 0.7rem;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .sz-gallery-page .sz-gallery-trust .sz-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .sz-gallery-page {
    --sz-gallery-gutter: 1.05rem;
  }

  .sz-gallery-page .sz-gallery-hero {
    min-height: 37rem;
    padding-block: 5.25rem 3.8rem;
  }

  .sz-gallery-page .sz-gallery-hero h1 {
    font-size: clamp(2rem, 9.5vw, 2.65rem);
  }

  .sz-gallery-page .sz-gallery-hero .sz-gallery-introduction {
    font-size: 0.82rem;
  }

  .sz-gallery-page .sz-gallery-featured-content {
    padding: 1.25rem;
  }

  .sz-gallery-page .sz-gallery-featured-content h2 {
    font-size: clamp(1.35rem, 7.3vw, 1.8rem);
  }

  .sz-gallery-page .sz-gallery-featured-content .sz-gallery-description {
    font-size: 0.82rem;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  /* Mobile keeps architectural height — never forced to 1/1. */
  .sz-gallery-page .sz-gallery-collection .sz-gallery-image {
    aspect-ratio: 4 / 3;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-content {
    min-height: 10rem;
    padding: 0.75rem;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-category {
    margin-block-end: 0.4rem;
    font-size: 0.62rem;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-content h3 {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-description {
    font-size: 0.7rem;
    line-height: 1.6;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-content .sz-gallery-meta,
  .sz-gallery-page .sz-gallery-collection .sz-gallery-actions {
    display: none;
  }
}

@media (max-width: 379px) {
  .sz-gallery-page .sz-gallery-collection .sz-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(3n) {
    grid-column: auto;
  }
}

/* =========================================================
   10. SCROLL REVEAL — PROGRESSIVE ENHANCEMENT ONLY
   Everything above already renders fully visible with no animation
   dependency. This block only ever ADDS a reveal in browsers that support
   scroll-driven animations, and only when the user has not requested
   reduced motion. There is no code path where content is hidden by default.
   ========================================================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes sz-gallery-reveal {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .sz-gallery-page .sz-gallery-collection .sz-gallery-card,
    .sz-gallery-page .sz-gallery-trust-card {
      animation: sz-gallery-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(2),
    .sz-gallery-page .sz-gallery-trust-card:nth-child(2) {
      animation-delay: 60ms;
    }

    .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(3),
    .sz-gallery-page .sz-gallery-trust-card:nth-child(3) {
      animation-delay: 120ms;
    }

    .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(4),
    .sz-gallery-page .sz-gallery-trust-card:nth-child(4) {
      animation-delay: 180ms;
    }

    .sz-gallery-page .sz-gallery-collection .sz-gallery-card:nth-child(n + 5) {
      animation-delay: 240ms;
    }
  }
}

/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .sz-gallery-page *,
  .sz-gallery-page *::before,
  .sz-gallery-page *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover,
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within,
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover .sz-gallery-content,
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within .sz-gallery-content,
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:hover .sz-gallery-image,
  .sz-gallery-page .sz-gallery-collection .sz-gallery-card:focus-within .sz-gallery-image,
  .sz-gallery-page .sz-gallery-action:hover::after,
  .sz-gallery-page .sz-gallery-action:focus-visible::after,
  .sz-gallery-page .sz-gallery-hero:hover .sz-gallery-hero-media,
  .sz-gallery-page .sz-gallery-hero:focus-within .sz-gallery-hero-media,
  .sz-gallery-page .sz-gallery-featured:hover .sz-gallery-featured-media .sz-gallery-image,
  .sz-gallery-page .sz-gallery-featured:focus-within .sz-gallery-featured-media .sz-gallery-image,
  .sz-gallery-page .sz-gallery-featured:hover .sz-gallery-featured-content,
  .sz-gallery-page .sz-gallery-featured:focus-within .sz-gallery-featured-content,
  .sz-gallery-page .sz-gallery-cta:hover,
  .sz-gallery-page .sz-gallery-cta:focus-visible {
    transform: none;
  }
}