/*
Theme Name: BK Studio 3D
Theme URI: https://belalkalash.studio
Author: Belal Kalash Studio
Author URI: https://belalkalash.studio
Description: Block theme — one-page home with Query Loops (1 project, 3 old projects), About as editable template part, canvas star background, contact form.
Version: 2.0.3
Requires at least: 6.3
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: bk-studio-3d
*/

/* ─────────────────────────────────────────────
   BK Studio 2026 — Global Styles
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@600;700&display=swap');

/* ── 01 · Design Tokens ── */
:root {
  --color-primary:       #3D35A8;
  --color-primary-dark:  #2A2480;
  --color-primary-light: #6B64C8;
  --color-primary-pale:  #9B96DD;
  --color-bg:            #fdfcfe;
  --color-surface:       #EEECFA;
  --color-particle:      #C4C0E0;
  --color-border:        rgba(61, 53, 168, 0.18);
  --color-white:         #FFFFFF;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  --space-2xs:     2px;
  --space-xs:      4px;
  --space-sm:      8px;
  --space-md:      12px;
  --space-base:    16px;
  --space-lg:      24px;
  --space-xl:      32px;
  --space-2xl:     48px;
  --space-3xl:     64px;
  --space-section: 80px;

  --page-gutter: var(--space-base);

  --nav-padding-block:   var(--space-lg);
  --nav-cta-gap:         var(--space-xs);
  --nav-dropdown-offset: var(--space-md);
  --nav-dropdown-gap:    var(--space-sm);

  --section-padding-top:    var(--space-section);
  --section-padding-bottom: var(--space-xl);
  --section-anchor-offset:  var(--space-3xl);
  --section-stack-gap:      var(--space-xl);

  --card-padding-inline: var(--space-lg);
  --card-padding-block:  var(--space-xl);
  --card-inner-gap:      var(--space-base);
  --card-padding-top-media: var(--space-xl);

  --grid-gap: var(--space-md);

  --contact-gap:        var(--space-md);
  --contact-label-width: 72px;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-card: 16px;
  --radius-lg:   24px;
  --radius-pill: 100px;

  /* Card stack: soft drop + offset frame (shared by hero/about, featured, project cards) */
  --shadow-card-soft:   0 2px 8px rgba(61, 53, 168, 0.08);
  --shadow-card-offset: 6px -6px 0 0 rgba(61, 53, 168, 0.12);
  --shadow-card:        var(--shadow-card-soft), var(--shadow-card-offset);

  --shadow-modal:       0 4px 20px rgba(61, 53, 168, 0.12);
  --shadow-card-hover-offset: 7px -7px 0 0 rgba(61, 53, 168, 0.1);
  --shadow-card-hover:  var(--shadow-modal), var(--shadow-card-hover-offset);

  --shadow-elevated: 0 8px 40px rgba(61, 53, 168, 0.18);

  --card-surface: rgba(238, 236, 250, 0.68);
  --card-border:  1px solid rgba(107, 100, 200, 0.45);
  --card-blur:    blur(6px);

  --z-particles: 0;
  --z-content:   1;
  --z-card:      2;
  --z-nav:       100;
}

/* ── 02 · Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-primary-light);
  overflow-x: hidden;
  min-height: 100vh;
  padding: var(--page-gutter);
}

/* Strip WordPress body padding/margin overrides; keep wrapper transparent so the fixed star canvas shows through */
.wp-site-blocks {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── 03 · Typography ── */
.text-display {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  line-height: 1;
}

.text-heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.text-nav {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.text-anchor {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-primary);
  padding-bottom: var(--space-2xs);
}

.text-body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.65;
}

.text-caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primary-pale);
  line-height: 1.5;
}

/* ── 04 · Logo ── */
.logo {
  width: 49px;
  height: 57px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.logo:hover {
  opacity: 0.8;
}

/* ── 05 · Navigation ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--nav-padding-block) var(--page-gutter);
}

.nav-menu {
  position: relative;
}

.nav-cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--nav-cta-gap);
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s ease;
}

.nav-cta:hover {
  color: var(--color-primary-dark);
}

.nav-cta__plus {
  color: var(--color-primary-light);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.25s ease;
  display: inline-block;
}

.nav-cta.is-open .nav-cta__plus {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .nav-menu:hover .nav-cta__plus,
  .nav-menu:focus-within .nav-cta__plus {
    transform: rotate(45deg);
  }
}

/* Padding under START bridges the gap; hover uses CSS :hover on .nav-menu (Firefox-safe). */
.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  padding: var(--nav-dropdown-offset) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--nav-dropdown-gap);
  align-items: flex-end;
  opacity: 0;
  transform: translate3d(0, var(--space-sm), 0);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.nav-dropdown.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

@media (hover: hover) {
  .nav-menu:hover .nav-dropdown,
  .nav-menu:focus-within .nav-dropdown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
}

.nav-dropdown a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary-light);
  transition: opacity 0.2s ease;
}

.nav-dropdown a:hover {
  opacity: 0.6;
}

/* ── 06 · Star canvas (2D) ── */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-particles);
  pointer-events: none;
  display: block;
  background: var(--color-bg);
}

/* ── 07 · Page Wrapper ── */
#app {
  position: relative;
  z-index: var(--z-content);
}

/* ── 08 · Sections ── */
section {
  position: relative;
  padding: var(--section-padding-top) 0 var(--section-padding-bottom);
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  scroll-margin-top: var(--section-anchor-offset);
}

.section-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--section-stack-gap);
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.section-container--wide {
  max-width: 1100px;
}

/* ── 09 · Scroll Reveal ── */
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--space-lg), 0);
}

html.js .reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-heading.reveal {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .section-heading.reveal {
  font-size: 16px;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translate3d(0, var(--space-lg), 0);
}

html.js .section-heading.reveal.visible {
  font-size: 36px;
  letter-spacing: 0.04em;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.32s; }

html.js section#hero .reveal {
  transition-delay: 0.3s;
}

html.js section#hero .reveal.reveal-delay-1 {
  transition-delay: calc(0.3s + 0.12s);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .section-heading.reveal,
  html.js .section-heading.reveal.visible {
    font-size: 36px !important;
    letter-spacing: 0.04em !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 10 · Hero ── */
section#hero {
  align-items: stretch !important;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-light);
  line-height: 1.05;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
  text-align: center;
}

.hero__title--studio {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: clamp(18px, 6.64vw, 87px);
  white-space: nowrap;
  max-width: 100%;
  color: #e9ebf8;
  background-image: linear-gradient(90deg, #e9ebf8 0%, #bb73c5 50%, #e9ebf8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bk-studio-title-gradient 4s linear infinite;
}

@keyframes bk-studio-title-gradient {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title--studio {
    animation: none;
    background-position: 0% center;
  }
}

.hero__title--tagline {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(14px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #3d35a8;
  background-image: linear-gradient(90deg, #3d35a8 0%, #6b64c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  max-width: 100%;
}

/* Mobile / narrow: larger type, wrap within the padded content width (not microscopic single line). */
@media (max-width: 768px) {
  section#hero {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
  }

  /* Drop 100vw breakout on small screens — prevents sideways shift / clipping in block theme wrapper */
  section#hero .hero__title {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
  }

  .hero__title--studio {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: clamp(26px, 10.5vw, 56px);
    line-height: 1.06;
    letter-spacing: 0.03em;
  }

  .hero__title--tagline {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: clamp(17px, 6.2vw, 36px);
    line-height: 1.12;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 380px) {
  .hero__title--studio {
    font-size: clamp(24px, 11vw, 52px);
  }

  .hero__title--tagline {
    font-size: clamp(16px, 6.8vw, 32px);
  }
}

/* ── 11 · Content Card (hero + about — same tokens as featured / project cards) ── */
.content-card {
  position: relative;
  background: #faf9fd;
  border: var(--card-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--card-padding-block) var(--card-padding-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-inner-gap);
  text-align: center;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--shadow-card);
}

/*
 * About uses core/group + class "content-card". Global / layout styles often strip border,
 * background, radius, and shadow — re-apply the same chrome as .content-card (match hero).
 */
.wp-site-blocks .wp-block-group.content-card,
section#about .wp-block-group.content-card {
  position: relative !important;
  color: rgba(61, 53, 168, 1) !important;
  background: #faf9fd !important;
  border: var(--card-border) !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  box-shadow: var(--shadow-card) !important;
  padding: var(--card-padding-block) var(--card-padding-inline) !important;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--card-inner-gap) !important;
  text-align: center !important;
  max-width: 760px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#app h1, #app h2, #app h3 {
  text-transform: uppercase;
}

/* Hero and plain HTML cards sit under #app; About card is a template-part Group and may not be. */
#app .content-card__title,
.wp-site-blocks .wp-block-group.content-card .content-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary) !important;
  margin: 0;
  line-height: 1.1;
}

#about .content-card__title,
#about .wp-block-group.content-card .content-card__title {
  font-size: 24px !important;
}

.content-card__body,
.wp-site-blocks .wp-block-group.content-card .content-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-primary) !important;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ── 12 · Section Heading ── */
.section-heading {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-light);
  text-align: center;
  width: 100%;
  margin: 0;
  line-height: 1.1;
}

/* ── 13 · Featured Project ── */
.featured-project {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-inner-gap);
  width: 100%;
  max-width: 900px;
  text-align: center;
  background: #faf9fd;
  border: var(--card-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--card-padding-top-media) var(--card-padding-inline) 0;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--shadow-card);
  overflow: visible;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-project:hover {
  transform: translateY(calc(-1 * var(--space-xs)));
  box-shadow: var(--shadow-card-hover);
}

#app .featured-project__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  line-height: 1.1;
  margin: 20px 0;
}

.featured-project__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
  line-height: 1.65;
  max-width: 560px;
}

.featured-project__image {
  width: 100%;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  border: 0.5px solid var(--color-border);
  border-bottom: none;
  background: var(--color-surface);
}

.featured-project__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.old-projects-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary-light);
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: inline-block;
  max-width: min(100%, 42rem);
  text-align: center;
  line-height: 1.35;
  margin-top: var(--space-sm);
}

.old-projects-link:hover {
  opacity: 0.6;
}

/* Shortcode block may wrap the link in <p>; keep layout full-width and centered */
#projects .section-container--wide p:has(> .old-projects-link) {
  margin: 0;
  width: 100%;
  text-align: center;
}

/* ── 14 · Old Projects Grid ── */

section#old-projects {
  min-height: 60vh;
}

.works-grid {
  width: 100%;
}
#old-projects .works-grid {
  display: block;
  width: 100%;
}

/* ── Query loop: 3-column grid, FIXED row height so every card is identical ── */
#old-projects .wp-block-query {
  width: 100% !important;
}

#old-projects .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: clamp(220px, 22vw, 270px) !important;
  align-items: start !important;   /* anchor every cell to the same top edge */
  /* Extra room so unified offset shadow is not clipped between cells */
  gap: calc(var(--grid-gap) + 8px) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Fix height directly on the li — prevents any one cell from being taller */
#old-projects li.wp-block-post {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: clamp(220px, 22vw, 270px) !important;
  min-height: clamp(220px, 22vw, 270px) !important;
  max-height: clamp(220px, 22vw, 270px) !important;
  overflow: visible !important;
  /* WordPress's is-layout-flow adds margin-block-start to li+li — zero it out */
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* ── Card shell ── */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  text-align: center;
  background: #faf9fd;
  border: var(--card-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: visible;
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  padding: var(--card-padding-top-media) var(--card-padding-inline) 0;
}

.project-card:hover {
  transform: translateY(calc(-1 * var(--space-xs)));
  box-shadow: var(--shadow-card-hover);
}

/* ── Title: sits above the thumbnail, never squishes ── */
.project-card__title,
#old-projects .project-card .wp-block-post-title {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  line-height: 1.1;
  margin: 0 !important;
  padding: 0 0 var(--card-inner-gap);   /* gap between title and image */
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

/* ── Thumbnail: fills remaining card height, flush to card bottom ── */
.project-card__screen,
#old-projects .project-card .wp-block-post-featured-image {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* Remove card's horizontal padding from the image — extend to card edges */
  margin: 0 calc(-1 * var(--card-padding-inline)) 0 !important;
  padding: 0 !important;
  width: calc(100% + 2 * var(--card-padding-inline)) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 0.5px solid var(--color-border);
  border-bottom: none;
  background: var(--color-surface);
  overflow: hidden;
  align-self: stretch;
}

.project-card__screen img,
#old-projects .project-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* ── Projects (featured, single column) ── */
#projects .wp-block-query {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

#projects .wp-block-post-template {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  gap: calc(var(--space-3xl) + var(--space-lg));
}

#projects .wp-block-post-template > li:nth-child(2) .featured-project.reveal {
  transition-delay: 0.22s;
}

#projects li.wp-block-post {
  width: 100% !important;
  max-width: 900px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Keep excerpt text in normal flow (no inset offset from block editor / preview) */
p.wp-block-post-excerpt__excerpt {
  position: static;
}

#projects p.wp-block-post-excerpt__excerpt {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ── 15 · Contact Section ── */
#contact {
  min-height: auto;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* Form + links: same card chrome / shadow stack as other panels */
.content-card.contact-panel {
  gap: var(--space-xl);
  width: 100%;
  max-width: 760px;
  margin-block: var(--space-sm);
  margin-inline: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card.contact-panel:hover {
  transform: translateY(calc(-1 * var(--space-xs)));
  box-shadow: var(--shadow-card-hover);
}

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--contact-gap);
  width: 100%;
}

.contact-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--contact-gap);
  white-space: nowrap;
}

.contact-link:hover {
  opacity: 0.6;
}

.contact-link br,
.contact-links > br {
  display: none;
}

.contact-link__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary-pale);
  font-weight: 600;
  min-width: var(--contact-label-width);
  text-align: right;
  flex-shrink: 0;
}

/* ── 16 · Contact Form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 520px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-form__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary-pale);
}

.contact-form__input,
.contact-form__textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
  background: rgba(238, 236, 250, 0.7);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-base);
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-primary-light);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__submit {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-2xl);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.contact-form__submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.contact-notice {
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-sm);
  text-align: center;
}

.contact-notice--success {
  background: rgba(61, 53, 168, 0.08);
  color: var(--color-primary);
  border: 0.5px solid var(--color-border);
}

.contact-notice--error {
  background: rgba(200, 50, 50, 0.08);
  color: #c83232;
  border: 0.5px solid rgba(200, 50, 50, 0.2);
}

/* ── 17 · Single Post / Pages ── */
.back-home {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  transition: opacity 0.2s ease;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.back-home:hover {
  opacity: 0.6;
}

/* ── 18 · Responsive ── */
@media (max-width: 768px) {
  :root {
    --nav-padding-block: var(--space-base);
    --page-gutter:       var(--space-lg);
  }

  .works-grid {
    grid-template-columns: 1fr;
  }

  #old-projects .wp-block-post-template {
    grid-template-columns: 1fr !important;
    grid-auto-rows: clamp(220px, 55vw, 300px) !important;
  }

  #old-projects li.wp-block-post {
    height: clamp(220px, 55vw, 300px) !important;
    min-height: clamp(220px, 55vw, 300px) !important;
    max-height: clamp(220px, 55vw, 300px) !important;
  }
}


/* ── Lightbox ── */
.bk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  box-sizing: border-box;
  background: rgba(250, 249, 253, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bk-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bk-lightbox__panel {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateY(28px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.bk-lightbox.is-open .bk-lightbox__panel {
  transform: translateY(0);
}

.bk-lightbox__close {
  position: sticky;
  top: var(--space-base);
  align-self: flex-end;
  margin: var(--space-base) var(--space-base) calc(-1 * var(--space-3xl));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.bk-lightbox__close:hover {
  background: var(--color-primary-dark);
}

.bk-lightbox__image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface);
  flex-shrink: 0;
}

.bk-lightbox__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bk-lightbox__body {
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bk-lightbox__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.1;
}

.bk-lightbox__link-wrap {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bk-lightbox__link {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bk-lightbox__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.bk-lightbox__content {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-primary);
}

.bk-lightbox__content p {
  margin: 0 0 var(--space-base);
}

.bk-lightbox__content p:last-child {
  margin-bottom: 0;
}

.bk-lightbox__loading {
  color: var(--color-primary-light);
  font-style: italic;
}

@media (max-width: 600px) {
  .bk-lightbox {
    padding: var(--space-sm);
    align-items: flex-end;
  }

  .bk-lightbox__panel {
    max-height: 95vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .bk-lightbox__body {
    padding: var(--space-lg) var(--space-base) var(--space-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-lightbox,
  .bk-lightbox__panel {
    transition: none;
  }
}