/* ==========================================================
   RTM ART — theme.css
   Dark photography portfolio
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #111214; color: #F2EEE6;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; user-select: none; }
a { text-decoration: none; color: inherit; transition: color .2s; }
button { font-family: inherit; cursor: pointer; }
::selection { background: #AF9258; color: #111214; }
input, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(242,238,230,0.3); }

:root {
  --rtm-bg:       #111214;
  --rtm-bg2:      #16171a;
  --rtm-text:     #F2EEE6;
  --rtm-gold:     #AF9258;
  --rtm-gold-dim: rgba(175,146,88,0.18);
  --rtm-dim:      rgba(242,238,230,0.6);
}

@keyframes rtmFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rtmFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* Decorative vertical line */
.rtm-vline {
  position: fixed; left: 22px; top: 0; bottom: 0;
  width: 1px; background: var(--rtm-gold-dim);
  z-index: 5; pointer-events: none;
}

/* ==========================================================
   HEADER
   ========================================================== */
.rtm-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(17,18,20,0.76);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rtm-gold-dim);
}
.rtm-header-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 18px 44px; gap: 24px;
}
.rtm-logo a { display: flex; align-items: center; }
.rtm-logo img { height: 28px; display: block; }
.rtm-logo .navbar-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 18px;
  color: var(--rtm-text); letter-spacing: 0.04em;
}

/* Nav rendered by staticMenu partial override */
.rtm-nav {
  display: flex; gap: 30px; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.rtm-nav a {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rtm-text); opacity: 0.62; text-decoration: none;
  position: relative; padding-bottom: 4px;
  transition: opacity .25s, color .25s;
}
.rtm-nav a:hover { opacity: 1; color: var(--rtm-gold); }
.rtm-nav li.active > a,
.rtm-nav a.active { opacity: 1; color: var(--rtm-gold); }
.rtm-nav li.active > a::after,
.rtm-nav a.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rtm-gold);
}

/* Nav wrapper — only the menu, collapses on mobile */
.rtm-nav-wrap {
  display: flex;
  align-items: center;
}

/* Right side: lang + burger */
.rtm-header-end {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language switcher */
.rtm-lang {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.16em; margin-left: 6px;
}
.rtm-lang a { color: var(--rtm-dim); text-decoration: none; transition: color .2s; }
.rtm-lang a:hover, .rtm-lang a.active { color: var(--rtm-gold); }
.rtm-lang span { opacity: 0.28; }

/* Mobile burger */
.rtm-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px; cursor: pointer;
}
.rtm-burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--rtm-text); transition: transform .3s, opacity .3s;
}
.rtm-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.rtm-burger.open span:nth-child(2) { opacity: 0; }
.rtm-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================
   HERO
   ========================================================== */
.rtm-hero {
  position: relative; min-height: calc(100vh - 65px);
  overflow: hidden; background: #0d0e10;
}
.rtm-hero-bg { position: absolute; inset: 0; }
.rtm-hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.42) saturate(0.82) contrast(1.06);
  transition: opacity 1.8s ease; opacity: 0;
}
.rtm-hero-bg img.active { opacity: 1; }
.rtm-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(17,18,20,0.08), rgba(17,18,20,0.78) 80%);
}
.rtm-hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.rtm-hero-logo { width: 300px; max-width: 60vw; height: auto; display: block; }
.rtm-hero-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 38px;
  color: var(--rtm-text); letter-spacing: 0.06em; text-transform: uppercase;
}
.rtm-hero-role {
  margin-top: 26px; font-size: 10.5px;
  letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--rtm-gold); padding-left: 0.46em;
  animation: rtmFade .8s .3s both;
}
.rtm-hero-cta {
  margin-top: 42px; display: inline-block;
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--rtm-text); text-decoration: none;
  border-bottom: 1px solid rgba(175,146,88,0.45); padding-bottom: 7px;
  transition: color .25s, border-color .25s;
  animation: rtmFade .8s .5s both;
}
.rtm-hero-cta:hover { color: var(--rtm-gold); border-color: var(--rtm-gold); }
.rtm-hero-caption {
  position: absolute; left: 44px; bottom: 28px; z-index: 2;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(242,238,230,0.42);
}

/* ==========================================================
   SECTION LABELS
   ========================================================== */
.rtm-eyebrow {
  font-size: 10.5px; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--rtm-gold); padding-left: 0.44em;
  animation: rtmFade .5s both;
}
.rtm-section-title {
  margin: 12px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: clamp(38px, 6vw, 80px);
  line-height: 0.97; letter-spacing: -0.02em; color: var(--rtm-text);
  animation: rtmFade .5s .06s both;
}

/* ==========================================================
   PORTFOLIO
   ========================================================== */
.rtm-portfolio { padding: 64px 0 96px; }

.rtm-cats {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  margin: 40px 0 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--rtm-gold-dim);
}
.rtm-cats li a, .rtm-cats li span {
  display: block; padding: 0 0 15px;
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--rtm-text); opacity: 0.52; text-decoration: none;
  position: relative; white-space: nowrap;
  transition: opacity .25s, color .25s;
}
.rtm-cats li a:hover { opacity: 1; color: var(--rtm-gold); }
.rtm-cats li.active a, .rtm-cats li a.active { opacity: 1; color: var(--rtm-gold); }
.rtm-cats li.active a::after, .rtm-cats li a.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rtm-gold);
}
.rtm-cat-count { font-size: 9px; vertical-align: super; margin-left: 2px; opacity: 0.46; }

/* Photo grid */
.rtm-photo-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  grid-auto-rows: 1px;
  opacity: 0; /* ховаємо, поки JS не порахує span'и — щоб не блимали "смужки" */
  transition: opacity .3s ease;
}

.rtm-photo-grid.rtm-masonry-ready {
  opacity: 1;
}

.rtm-photo-item {
  animation: rtmFade .5s both;
  overflow: hidden;
  border-radius: 2px;
  background: #1a1b1e;
  /* height: 100% ПРИБРАНО у thumb — тепер item сам себе обрізає */
}

.rtm-photo-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

.rtm-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ! тепер потрібен, бо висота задається через grid-row span, а не природну висоту img */
  display: block;
  filter: saturate(0.88) contrast(1.02) brightness(0.88);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .45s;
}

.rtm-photo-thumb:hover img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04) brightness(1.04);
}

@media (max-width: 991.98px) {
  .rtm-photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575.98px) {
  .rtm-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}


/*
.rtm-photo-grid { margin-top: 28px; }
.rtm-photo-item { animation: rtmFade .5s both; }
.rtm-photo-thumb {
  overflow: hidden; border-radius: 2px;
  cursor: pointer; aspect-ratio: 4/5; background: #1a1b1e;
}
.rtm-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88) contrast(1.02) brightness(0.88);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .45s;
}
.rtm-photo-thumb:hover img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04) brightness(1.04);
}
*/
/* Portfolio parent — category cards */
.rtm-cat-grid { margin-top: 40px; }
.rtm-cat-card {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  background: #1a1b1e; display: block; text-decoration: none; border-radius: 2px;
}
.rtm-cat-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.46) saturate(0.74);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .45s;
}
.rtm-cat-card:hover img { transform: scale(1.06); filter: brightness(0.62) saturate(0.9); }
.rtm-cat-card-label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; padding: 24px;
}
.rtm-cat-card-label h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: 21px; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 3px;
}
.rtm-cat-card-label span {
  font-size: 9.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--rtm-gold);
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.rtm-lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(9,10,11,0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.rtm-lb.open { opacity: 1; pointer-events: all; }
.rtm-lb-img-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px; max-width: 88vw;
}
.rtm-lb-img {
  max-width: 88vw; max-height: 82vh; object-fit: contain;
  display: block; border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.rtm-lb-meta {
  display: flex; gap: 18px; align-items: center;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
}
.rtm-lb-cat { color: var(--rtm-gold); }
.rtm-lb-counter { color: rgba(242,238,230,0.36); }
.rtm-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--rtm-text);
  font-size: 28px; line-height: 1; cursor: pointer; opacity: 0.52;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s, color .2s;
}
.rtm-lb-nav:hover { opacity: 1; color: var(--rtm-gold); }
.rtm-lb-prev { left: 10px; }
.rtm-lb-next { right: 10px; }
.rtm-lb-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; color: var(--rtm-text);
  font-size: 18px; line-height: 1; cursor: pointer;
  opacity: 0.52; transition: opacity .2s, color .2s;
}
.rtm-lb-close:hover { opacity: 1; color: var(--rtm-gold); }

/* ==========================================================
   ABOUT
   ========================================================== */
.rtm-about { padding: 72px 0 96px; }
.rtm-about-img {
  width: 100%; border-radius: 2px;
  filter: saturate(0.88) contrast(1.03) brightness(0.9);
}
.rtm-about-content { padding-left: 12px; }
.rtm-about-content h2 {
  margin: 12px 0 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.04; letter-spacing: -0.02em;
}
.rtm-about-content p {
  margin: 0 0 18px; font-size: 15.5px; line-height: 1.72;
  color: rgba(242,238,230,0.74); max-width: 50ch; font-weight: 300;
}
.rtm-about-sig {
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,238,230,0.38); margin-bottom: 28px;
}
.rtm-link-arrow {
  display: inline-block; font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--rtm-text); text-decoration: none;
  border-bottom: 1px solid rgba(175,146,88,0.45); padding-bottom: 6px;
  transition: color .25s, border-color .25s;
}
.rtm-link-arrow:hover { color: var(--rtm-gold); border-color: var(--rtm-gold); }

/* ==========================================================
   CONTACTS
   ========================================================== */
.rtm-contacts { padding: 80px 0 100px; }
.rtm-contacts h2 {
  margin: 14px 0 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.0; letter-spacing: -0.02em;
}
.rtm-contacts-invite {
  margin: 0 0 36px; font-size: 15.5px; line-height: 1.66;
  color: rgba(242,238,230,0.7); max-width: 38ch; font-weight: 300;
}
.rtm-email-link {
  display: inline-block; font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -0.01em;
  color: var(--rtm-text); text-decoration: none;
  border-bottom: 1px solid rgba(175,146,88,0.45); padding-bottom: 6px;
  transition: color .25s, border-color .25s;
}
.rtm-email-link:hover { color: var(--rtm-gold); border-color: var(--rtm-gold); }
.rtm-contact-details {
  display: flex; flex-direction: column; gap: 10px; margin-top: 38px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,238,230,0.52);
}
.rtm-contact-details a { color: var(--rtm-gold); }
.rtm-contact-details a:hover { color: var(--rtm-text); }

/* Form box */
.rtm-form-box {
  background: var(--rtm-bg2); border: 1px solid rgba(175,146,88,0.2);
  border-radius: 3px; padding: 36px 36px 40px;
}
.rtm-form-box .mb-3, .rtm-form-box .form-group { margin-bottom: 20px; }
.rtm-form-box label, .rtm-form-box .cf-label {
  display: block; font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(242,238,230,0.52); margin-bottom: 8px;
}
.rtm-form-box input,
.rtm-form-box textarea,
.rtm-form-box .form-control {
  width: 100%; background: var(--rtm-bg);
  border: 1px solid rgba(175,146,88,0.24);
  border-radius: 2px; color: var(--rtm-text);
  padding: 13px 15px; font-size: 14px; outline: none; transition: border-color .2s;
}
.rtm-form-box input:focus,
.rtm-form-box textarea:focus,
.rtm-form-box .form-control:focus { border-color: var(--rtm-gold); box-shadow: none; }
.rtm-form-box textarea { resize: vertical; min-height: 120px; }
.rtm-form-box .text-error { font-size: 11px; color: #e0735a; margin-top: 4px; }
.rtm-form-box .cf-policy { font-size: 12px; color: rgba(242,238,230,0.52); }
.rtm-form-box .cf-policy a { color: var(--rtm-gold); }
.rtm-form-box .cf-policy input[type="checkbox"] { accent-color: var(--rtm-gold); margin-right: 6px; }

.btn-rtm, .rtm-form-box .cf-submit {
  background: var(--rtm-gold); color: #111214; border: none;
  border-radius: 2px; padding: 14px 36px; font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: background .2s; font-family: inherit;
}
.btn-rtm:hover, .rtm-form-box .cf-submit:hover { background: #c4a368; }

/* Flash */
.flash-message { padding: 12px 16px; margin-top: 16px; border-radius: 2px; font-size: 13px; }
.flash-success { background: rgba(175,146,88,0.12); color: var(--rtm-gold); border: 1px solid var(--rtm-gold-dim); }
.flash-error { background: rgba(224,115,90,0.1); color: #e0735a; border: 1px solid rgba(224,115,90,0.28); }

/* ==========================================================
   FOOTER
   ========================================================== */
.rtm-footer { border-top: 1px solid var(--rtm-gold-dim); }
.rtm-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; padding: 26px 44px;
}
.rtm-footer-logo img { height: 22px; opacity: 0.72; display: block; }
.rtm-footer-logo .navbar-brand {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; opacity: 0.72;
}
.rtm-footer-copy {
  font-size: 10px; letter-spacing: 0.1em;
  color: rgba(242,238,230,0.35); text-transform: uppercase;
}
.rtm-footer-ig {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,238,230,0.55); text-decoration: none; transition: color .2s;
}
.rtm-footer-ig:hover { color: var(--rtm-gold); }

/* ==========================================================
   GENERAL STATIC PAGE
   ========================================================== */
.rtm-page { padding: 64px 0 96px; }
.rtm-page-title {
  margin: 12px 0 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: clamp(36px, 5vw, 68px);
  line-height: 0.97; letter-spacing: -0.02em;
  animation: rtmFade .5s .05s both;
}
.rtm-page-content {
  max-width: 66ch; font-size: 16px; line-height: 1.72;
  color: rgba(242,238,230,0.8); font-weight: 300;
}
.rtm-page-content h2, .rtm-page-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; letter-spacing: -0.02em; color: var(--rtm-text); margin: 2em 0 .6em;
}