/* =============================================================================
   PAGES — секции специфични за страница
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HERO — split, color-blocked. Основата на почетната страница.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Долниот простор ја одвојува лавандата лента од коралниот панел —
     без него двете обоени површини се допираат и се читаат како една. */
  padding-block: clamp(var(--space-7), 5vw, var(--space-9)) clamp(var(--space-7), 5vw, var(--space-8));
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-6), 4vw, var(--space-8));
    min-height: 78vh;
  }
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
}
.hero__title em {
  font-style: normal;
  color: var(--text-coral);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Десната половина: блок што излегува од десниот раб на екранот. Без боја во
   позадина — сликата го пополнува целиот блок, а коралната позадина се
   гледаше низ полупроѕирните слики за време на преминот меѓу нив. */
.hero__panel {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--r-xl);
  min-height: 380px;
}
@media (min-width: 900px) {
  .hero__panel {
    /* Излегува сѐ до десниот раб на екранот, како кај инспирацијата.
       Контејнерот е центриран и ограничен на --container, па мораме да го
       поништиме и неговиот padding и половината од преостанатиот простор. */
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)));
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    min-height: 620px;
  }
}

.hero__figure {
  width: min(100%, 440px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-arch);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__figure > * { width: 100%; height: 100%; }
/* [data-hero-slider] е уште едно ниво длабоко (JS ја вметнува .hero-slider
   внатре во него) — истото 100%/100% мора да продолжи и таму, инаку
   слајдерот не го пополнува лакот. */
[data-hero-slider] { display: block; }
[data-hero-slider] > * { width: 100%; height: 100%; }

/* -----------------------------------------------------------------------------
   HERO СЛАЈДЕР
   Слики една врз друга (позиционирани apsolutно), меко се менуваат со
   opacity. Лентата со копчиња седи преку долниот раб, со засенчување за
   читливост врз било која фотографија — истата постапка како
   .photo-grid__caption погоре.
   -------------------------------------------------------------------------- */
.hero-slider { position: relative; overflow: hidden; }

.hero-slider__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.hero-slider__slide.is-active { opacity: 1; z-index: 1; }
.hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-slider__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4) var(--space-4);
  /* Двоенستоп, не проста линеарна опаѓачка засенка: копчињата мора да
     седат на РАМНОМЕРНО темна подлога (0.72), инаку белиот текст паѓа под
     4.5:1 врз светла фотографија (проверено: 4.2:1 со проста 0.55 засенка
     и бела позадина, најлошиот случај). Само над лентата, каде нема текст,
     засенката се стопува во проѕирност за мек премин кон сликата. */
  background: linear-gradient(to top,
    rgba(16, 16, 18, 0.72) 0%,
    rgba(16, 16, 18, 0.72) 65%,
    transparent 100%);
}

.hero-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hero-slider__nav:hover { background: rgba(255, 255, 255, 0.36); }
.hero-slider__nav svg { width: 20px; height: 20px; }

.hero-slider__dots { display: flex; align-items: center; gap: var(--space-2); }
.hero-slider__dot {
  width: 20px; height: 20px;   /* самото копче е 20px, но тап-целта е 44px преку ::after */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-slider__dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero-slider__dot.is-active::before { background: #fff; transform: scale(1.3); }
.hero-slider__dot::after {
  /* Невидлива, но 44×44px тап-цел преку самата точка — точката сама по себе
     е намерно ситна, за да не изгледа како копче со текст. */
  content: '';
  position: absolute;
  inset: -12px;
}

.hero-slider__pause {
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hero-slider__pause:hover { background: rgba(255, 255, 255, 0.36); }

@media (max-width: 480px) {
  /* На тесен екран копчето „Пауза" го зема истиот простор како точките —
     стои под нив, не стиснато во истиот ред. */
  .hero-slider__bar { flex-wrap: wrap; row-gap: var(--space-2); }
  .hero-slider__pause { order: 1; flex-basis: 100%; text-align: center; }
}

/* Стои врз фотографија, не врз позната лента-боја од data-color системот —
   истиот бел прстен-исклучок што веќе постои за data-color="purple"/"blue"
   во base.css, само тука изречно именуван. */
.hero-slider :focus-visible { outline-color: #FFFFFF; }

/* -----------------------------------------------------------------------------
   ЛЕНТА СО ВРЕДНОСТИ
   -------------------------------------------------------------------------- */
.values { padding-block: clamp(var(--space-5), 3vw, var(--space-7)); }
.values__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .values__grid { grid-template-columns: repeat(4, 1fr); } }

.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
@media (min-width: 900px) {
  .value {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-3);
    /* Секоја ставка се центрира во својата колона. Без ова четирите
       се лепат лево и лентата изгледа накривена. */
    justify-content: center;
  }
  .value + .value { border-left: 1px solid rgba(46, 36, 56, 0.16); }
}
.value__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  color: var(--text-purple);
}
.value__label { font-weight: 700; font-size: var(--fs-small); line-height: 1.35; margin: 0; }

/* -----------------------------------------------------------------------------
   МРЕЖА ЗА УСЛУГИ
   -------------------------------------------------------------------------- */
.services__grid {
  display: grid;
  gap: clamp(var(--space-5), 2.5vw, var(--space-7));
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }

/* Целосна страница со услуги — наизменични обоени секции */
.service-block { padding-block: var(--section-y); }
.service-block__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .service-block__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  /* Секоја втора услуга ја менува страната — ритам, не монотонија */
  .service-block:nth-of-type(even) .service-block__media { order: 2; }
}

.service-block__media { width: min(100%, 460px); }

.checklist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.5;
}
.checklist svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }

/* Целиот блок се центрира на екранот, но редовите остануваат порамнети лево
   (икона па текст) — само на местата каде списокот стои сам, без слика до него. */
.checklist--centered {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

/* -----------------------------------------------------------------------------
   ГАЛЕРИЈА
   Masonry преку CSS columns — без JS, без библиотека.
   -------------------------------------------------------------------------- */
.gallery {
  columns: 1;
  column-gap: var(--space-4);
}
@media (min-width: 620px)  { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } }

.gallery__item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Копчето е самата плочка — сликата се зумира, рамката стои мирно */
.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}
/* display: block: .frame тука е <span>. Како inline елемент околу блок-слика,
   водениот жиг (.frame::after) немаше вистинска рамка за позиционирање и
   завршуваше на средина долу. Сликата веќе е блок, па распоредот не се менува. */
.gallery__btn .frame { display: block; border-radius: inherit; }
.gallery__btn:hover img { transform: scale(1.03); }

.gallery__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 36, 56, 0.42), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.gallery__btn:hover .gallery__veil,
.gallery__btn:focus-visible .gallery__veil { opacity: 1; }

/* Празна состојба — кога сѐ уште нема ниту една слика во една категорија */
.empty-note {
  grid-column: 1 / -1;
  padding: var(--space-6);
  border: 2px dashed var(--line-dashed);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-muted);
}

/* -----------------------------------------------------------------------------
   SPLIT СЕКЦИЈА (За мене)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1fr; gap: var(--space-8); }
  .split--flip .split__media { order: 2; }
}
.split__media { position: relative; width: min(100%, 420px); justify-self: center; }

.facts {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fact__label {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
}
.fact__value { margin: 0; font-weight: 400; line-height: 1.35; color: var(--ink-muted); }

/* -----------------------------------------------------------------------------
   ВИДЕА
   -------------------------------------------------------------------------- */
/* Односот на страни се води од една променлива, за да го делат и placeholder
   плочката, и постерот, и вистинскиот плеер. Инаку видеото отскокнува од
   9/16 на 16/9 во моментот кога посетителот ќе кликне „пушти". */
.videos__grid {
  --video-ratio: 16 / 9;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .videos__grid { grid-template-columns: repeat(2, 1fr); }
  /* Првото видео зазема цела ширина — фокус наместо рамномерна каша */
  .videos__grid > :first-child { grid-column: 1 / -1; }
}

/* Вертикални видеа (Reels формат): три рамноправни, без истакнато прво. */
.videos__grid--vertical { --video-ratio: 9 / 16; }
@media (min-width: 620px) {
  .videos__grid--vertical { grid-template-columns: repeat(3, 1fr); }
  .videos__grid--vertical > :first-child { grid-column: auto; }
}
/* Три вертикални видеа една до друга би биле премногу високи на широк екран */
@media (min-width: 620px) {
  .videos__grid--vertical { max-width: 1060px; margin-inline: auto; gap: clamp(var(--space-5), 3vw, var(--space-7)); }
}

.video-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fill-cream-deep);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.video-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  position: relative;
}
.video-card__btn img { width: 100%; aspect-ratio: var(--video-ratio); object-fit: cover; }

.video-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: var(--r-pill);
  background: var(--fill-purple);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out);
}
.video-card__btn:hover .video-card__play { transform: translate(-50%, -50%) scale(1.06); }
.video-card__play svg { width: 24px; height: 24px; margin-left: 3px; }

.video-card__title {
  padding: var(--space-4) var(--space-5);
  margin: 0;
  font-weight: 700;
}

.video-card iframe,
.video-card video { width: 100%; aspect-ratio: var(--video-ratio); height: auto; display: block; }
.video-card video { object-fit: cover; background: #000; }

/* На цел екран видеото се гледа во својот природен формат (цело, со црни
   ленти), не исечено како во мрежата. Важи и за видеата во .frame слотовите.
   Одделни правила по префикс — неподдржан псевдо-класа во иста листа би го
   поништила целото правило. */
.video-card video:fullscreen,
.frame > video:fullscreen {
  object-fit: contain;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.video-card video:-webkit-full-screen,
.frame > video:-webkit-full-screen {
  object-fit: contain;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------------------
   РЕЦЕНЗИИ
   Grid на десктоп. Scroll-snap ред на мобилен. Без автоматска ротација.
   -------------------------------------------------------------------------- */
.reviews__grid {
  display: grid;
  gap: var(--space-4);
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw, 320px), 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  /* Плочките не смеат да се лепат за рабовите при скрол */
  scroll-padding-inline: var(--gutter);
}
.reviews__grid > * { scroll-snap-align: start; }

@media (min-width: 900px) {
  .reviews__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding-bottom: 0;
  }
}

/* -----------------------------------------------------------------------------
   INSTAGRAM ЛЕНТА
   -------------------------------------------------------------------------- */
.ig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.ig__handle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   CTA БЕНД
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.cta__title { max-width: 18ch; margin: 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* -----------------------------------------------------------------------------
   КОНТАКТ
   Без форма — само големи, директни копчиња.
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

.contact-methods {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 520px) { .contact-methods { grid-template-columns: repeat(2, 1fr); } }

.method {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-4) var(--space-5);
  background: var(--tone-bg);
  color: var(--tone-fg);
  border-radius: var(--r-lg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.method:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.method__icon { flex-shrink: 0; width: 28px; height: 28px; }
.method__label { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.method__value { display: block; font-weight: 700; line-height: 1.3; word-break: break-word; }

/* Instagram и Facebook во една картичка (kontakt.html). Картичката не е линк,
   па не се крева на hover; линкови се двата реда, секој висок ≥44px. */
.method--social { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-3); }
.method--social:hover { transform: none; box-shadow: var(--shadow-sm); }
.method__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.method__row .method__icon { width: 22px; height: 22px; }
/* Двете адреси се долги (21–22 знака); на 16px се кршеа во средина на
   зборот во картичка широка ~250px. На 14px собираат во еден ред. */
.method__row .method__value { font-size: 0.875rem; }
.method__row:hover .method__value { text-decoration: underline; text-underline-offset: 3px; }

.hours { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.hours span:last-child { font-weight: 700; white-space: nowrap; }

.map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--fill-cream-deep);
}

/* -----------------------------------------------------------------------------
   ЗАГЛАВИЕ НА ВНАТРЕШНА СТРАНИЦА
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(var(--space-7), 5vw, var(--space-8)) var(--space-7);
  overflow: hidden;
}
.page-head__inner { position: relative; }
.page-head__inner .lead { max-width: 62ch; }
.page-head__title { margin-bottom: var(--space-3); }

/* На многу тесни телефони контакт-картичките добиваат повеќе простор за текст,
   за да не се крши телефонскиот број на средина. */
@media (max-width: 380px) {
  .method { padding-inline: var(--space-4); gap: var(--space-3); }
  .method__value { font-size: var(--fs-small); }
}

/* =============================================================================
   ПОРТФОЛИО ТИЗЕР — editorial распоред
   -----------------------------------------------------------------------------
   Порано ова беше мрежа од шест еднакви плочки и се читаше како каталог.
   Една голема слика плус две помали до неа личи на портфолио: сликите добиваат
   простор, а тоа е поуката од сите три референтни сајта.
   ========================================================================== */
.editorial {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .editorial {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
  /* Првата слика ја зазема целата лева колона преку двата реда. Мора да ја
     поништиме нејзината aspect-ratio за да се растегне до висината на двете
     десни слики наместо да си држи свој сопствен однос. */
  .editorial > :first-child { grid-row: 1 / span 2; }
  .editorial > :first-child > * { height: 100%; aspect-ratio: auto; }
}

/* =============================================================================
   „ЗА МЕНЕ" — по инспирацијата (име, портрет што го преклопува, обоени блокови)
   ========================================================================== */

/* --- Hero: огромно име, портретот пред него ------------------------------ */
.about-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), 6vw, var(--space-9)) 0;
  text-align: center;
}

.about-hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
}

.about-hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1rem + 13vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  /* Тврдо бело, по барање на клиентот (примерот испратен со белo „Александра").
     Безбедно тука бидејќи .about-hero е секогаш data-color="yellow" — не се
     користи ниту еден друг бенд зад ова име, па нема потреба од inherit. */
  color: #FFFFFF;
  text-wrap: balance;
}

/* Портретот се качува врз името — потегот од инспирацијата. Големината и
   негативната горна маргина (види подолу во файлот) го прават преклопувањето,
   поразлично за исечена наспроти рамкирана слика — види ги двата коментари
   подолу за зошто. */
.about-hero__portrait { position: relative; }

/* Исечена слика со проѕирна позадина: стои слободно, без рамка, без маска и
   без сенка. Проѕирноста дозволува посилно преклопување — само силуетата на
   човекот го покрива текстот, не и целата правоаголна слика. */
.about-hero__portrait--cutout {
  width: min(94%, 560px);
}
.about-hero__portrait--cutout img {
  width: 100%;
  height: auto;
  display: block;
}

/* Обична правоаголна слика (или placeholder): добива лак-маска за да седи
   намерно наместо да изгледа како залепена сликичка. Бидејќи целата картичка
   е непроѕирна (бела позадина од студиото), преклопувањето со името мора да
   биде многу поблаго отколку кај исечената слика — инаку картичката целосно
   го брише текстот зад себе наместо само силуетата да го засенчи. */
.about-hero__portrait--framed {
  width: min(80%, 460px);
}
.about-hero__portrait--framed > * {
  border-radius: var(--r-arch);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-hero__intro {
  max-width: 34ch;
  margin: clamp(var(--space-5), 4vw, var(--space-7)) auto 0;
  padding-bottom: var(--section-y);
  font-size: clamp(1.15rem, 0.95rem + 1.1vw, 1.75rem);
  line-height: 1.45;
  color: inherit;
}

/* --- Двобојни блокови со нумерирани делови ------------------------------- */
.about-blocks {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .about-blocks { grid-template-columns: 1fr 1fr; }
}

.about-block {
  position: relative;
  background: var(--tone-bg);
  color: var(--tone-fg);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
}

.about-block__num {
  display: block;
  margin: 0 0 var(--space-4);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.about-block__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.about-block__text { margin: 0; }

/* Ротираниот вертикален збор од страна — „Resume" во инспирацијата. */
/* --- Мрежа 2×2 со натписи врз сликите ------------------------------------ */
.photo-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }

.photo-grid__item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.photo-grid__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6) var(--space-5) var(--space-4);
  /* Градиентот гарантира читлив текст без разлика колку е светла сликата */
  background: linear-gradient(to top, rgba(30, 22, 38, 0.78), transparent);
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.3;
}
.photo-grid__caption span {
  display: block;
  font-weight: 400;
  font-size: var(--fs-small);
  opacity: 0.85;
}

/* Натписот го покрива долниот раб на сликата, па жигот од рамката
   (components.css) би останал под градиентот. Тука жигот го носи натписот,
   во истиот агол (12px) и со истата големина, а текстот се крева нагоре
   точно колку висината на жигот + 6px. Процентите во padding и во width
   двата се мерат по ширината на картичката, па се совпаѓаат. Жигот тука е
   секогаш бел: седи врз темниот градиент, не врз фотографијата. */
.photo-grid__item .frame::after { content: none; }
.photo-grid__caption {
  padding-bottom: calc(18px + clamp(24px, 7%, 44px) * 264 / 416);
}
.photo-grid__caption::before {
  content: '';
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: clamp(24px, 7%, 44px);
  aspect-ratio: 416 / 264;
  background: url('../images/watermark.png') no-repeat left bottom / contain;
  opacity: 0.3;
  pointer-events: none;
}

/* Носач за нумерираните блокови — му треба позиција за ротираниот збор. */
.about-blocks-wrap { position: relative; }

/* Placeholder-от за портретот седи врз обоен бенд чија боја е променлива.
   Кремово врз жолто се стопува, па тука е бело — бело се чита јасно врз
   секоја од брендираните бои. */
.about-hero__portrait .ph { --ph-bg: #FFFFFF; }

/* =============================================================================
   СОВЕТИ
   -----------------------------------------------------------------------------
   Намерно мирна страница: тесна колона за читање, тенки линии наместо
   картички, и една брендирана боја по совет како единствен акцент.
   ========================================================================== */
.tips { display: flex; flex-direction: column; }

.tip { border-top: 1px solid var(--line); }
.tip:last-child { border-bottom: 1px solid var(--line); }

.tip__details { position: relative; }

.tip__summary {
  display: block;
  padding: clamp(var(--space-5), 3vw, var(--space-7)) 0
           clamp(var(--space-5), 3vw, var(--space-7))
           clamp(var(--space-4), 2.5vw, var(--space-6));
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
/* Нативната стрелка на <summary> се тргнува — имаме своја */
.tip__summary::-webkit-details-marker { display: none; }
.tip__summary::marker { content: ''; }

.tip__summary:hover { background: rgba(46, 36, 56, 0.025); }
.tip__summary:focus-visible {
  outline: 3px solid var(--text-purple);
  outline-offset: -3px;
  border-radius: var(--r-sm);
}

/* Вертикална линија во бојата на советот — единствениот обоен елемент */
.tip__summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: clamp(var(--space-5), 3vw, var(--space-7));
  width: 4px;
  height: 2.25rem;
  border-radius: 2px;
  background: var(--tone-bg, var(--fill-purple));
}

.tip__meta {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tip__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.tip__intro {
  display: block;
  max-width: 62ch;
  color: var(--ink-muted);
}

.tip__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--text-purple);
}
.tip__chev {
  width: 18px; height: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}
[open] .tip__chev { transform: rotate(180deg); }

/* Текстот на копчето се менува според состојбата — без JavaScript.
   Двата натписа се вистински текст, а не CSS `content`: display:none го вади
   скриениот чисто од дрвото за пристапност, додека `content` од псевдо-елемент
   читачите на екран го објавуваат нееднакво. */
.tip__label--open { display: none; }
[open] .tip__label--closed { display: none; }
[open] .tip__label--open { display: inline; }

.tip__body {
  max-width: 62ch;
  padding: 0 0 clamp(var(--space-5), 3vw, var(--space-7))
           clamp(var(--space-4), 2.5vw, var(--space-6));
}
.tip__body p + p { margin-top: var(--space-4); }

/* =============================================================================
   ЗАГЛАВИЕ НА СЕКЦИЈА
   -----------------------------------------------------------------------------
   Без ограничување на ширина, за да паднат насловите во еден ред на десктоп.
   На потесен екран сами се прелеваат — не се форсира nowrap, бидејќи тоа би
   предизвикало прелевање настрана.
   ========================================================================== */
.section-head { margin-bottom: var(--space-8); }
.section-head .lead { max-width: 62ch; }

/* Пониска секција — за лентата со Instagram, каде што има само три реда текст */
.section--tight { padding-block: clamp(var(--space-6), 3.5vw, var(--space-8)); }

/* CTA насловот и текстот во по еден ред на широк екран */
.cta__title { max-width: none; }
.cta .lead { max-width: none; }


/* =============================================================================
   ПОРАНО ВО css/theme-v2.css — сега трајно, откако прекинувачот за верзии и
   верзија 1 се тргнати. Овие правила го носат сегашниот изглед на сајтот.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HERO СЛАЈДЕР — гола слика преку целиот корален панел
   Сликите што се вртат го зафаќаат цел коралниот блок, без внатрешен раб и
   без лак-форма. Лентата со стрелки, точки, копче „Пауза" и црниот градиент
   ги нема — js/sections.js не ги ни исцртува (гранката `bare`).
   -------------------------------------------------------------------------- */
.hero__panel {
  padding: 0;
  overflow: hidden;
  min-height: clamp(460px, 70vh, 560px);
}
@media (min-width: 900px) {
  .hero__panel { min-height: 620px; }
}
.hero__figure {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: inherit;   /* ги следи заоблените рабови на панелот */
  box-shadow: none;
}
/* Цела слика е кликлива → покажувач и видлив фокус-прстен внатре во рабовите */
.hero-slider--bare { cursor: pointer; }
.hero-slider--bare:focus-visible { outline-offset: -4px; }

/* -----------------------------------------------------------------------------
   НЕУТРАЛНИ ЗАТЕМНУВАЊА ВРЗ СЛИКИ
   Двете преливања на сајтот не се украс — тука се за да остане читлив белиот
   текст врз непозната фотографија. Неутрална темна боја, не виолетова.
   -------------------------------------------------------------------------- */
.gallery__veil {
  background: linear-gradient(to top, rgba(20, 20, 22, 0.45), transparent 55%);
}
.photo-grid__caption {
  background: linear-gradient(to top, rgba(16, 16, 18, 0.80), transparent);
}

/* -----------------------------------------------------------------------------
   ПОВИСОКИ СЛИКИ ВО КАРТИЧКИТЕ ЗА УСЛУГИ (почетна)
   Односот е напишан како inline style од js/ui.js за да нема поместување кога
   вистинската слика ќе слета — затоа тука треба !important.
   -------------------------------------------------------------------------- */
.card__media .ph,
.card__media .frame {
  aspect-ratio: 3 / 4 !important;
}

/* -----------------------------------------------------------------------------
   ВИДЕА
   Почетна: тизерот прикажува четири видеа (првите четири).
   Страницата „Видеа": петте вертикални — три горе едно до друго, две под нив.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .videos__grid--vertical { grid-template-columns: repeat(4, 1fr); }
}

.videos__grid--pairs {
  --video-ratio: 9 / 16;
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 620px) {
  .videos__grid--pairs { grid-template-columns: repeat(2, 1fr); }
  .videos__grid--pairs > :first-child { grid-column: auto; }
}
@media (min-width: 900px) {
  /* Три горе едно до друго, две под нив (5 видеа) — по барање на клиентот. */
  .videos__grid--pairs { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------------
   ПОРТРЕТОТ НА СТРАНИЦАТА „ЗА МЕНЕ"
   Негативната горна маргина го качува портретот врз огромното име.
   Кај исечена слика (проѕирна позадина) преклопот смее да биде голем — само
   силуетата паѓа врз буквите, останатото си е проѕирно. Кај рамкирана слика
   (непроѕирна картичка) преклопот мора да е мал, инаку картичката целосно го
   брише текстот зад себе наместо само да го засенчи — затоа е многу поблаго.
   -------------------------------------------------------------------------- */
.about-hero__portrait--cutout { margin-top: clamp(-14rem, -13vw, -3rem); }
.about-hero__portrait--framed { margin-top: clamp(-2.5rem, -2vw, -1rem); }

/* На тесни екрани -Xvw дава премалку преклоп (порт ретот излегува „далеку" од
   името) — посебна, порезна формула само за телефон. */
@media (max-width: 640px) {
  .about-hero__portrait--cutout { margin-top: clamp(-11rem, -24vw, -5rem); }
}

/* Eyebrow-от над огромното име — исто тврдо бело како и самото име. */
.about-hero .eyebrow { color: var(--ink); opacity: 1; }

/* -----------------------------------------------------------------------------
   ЧЕСНА ПРАЗНА СОСТОЈБА ЗА РЕЦЕНЗИИТЕ
   Кога нема ниту една рецензија, делот се прикажува како порака, не како
   картичка што личи на рецензија (js/reviews.js).
   -------------------------------------------------------------------------- */
.reviews-empty {
  grid-column: 1 / -1;
  max-width: 52ch;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
}
.reviews-empty p { margin: 0 0 var(--space-5); }
.reviews-empty p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   СКРАТЕНИ РЕЦЕНЗИИ
   Долгите рецензии стојат собрани на околу осумнаесет зборови и се отвораат
   на клик (quoteCard() во js/reviews.js). Собраната состојба се заклучува на
   точно шест реда за да излезат сите картички во редот со иста висина.
   -------------------------------------------------------------------------- */
.quote--clamped .quote__short {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.quote__more {
  align-self: flex-start;
  min-height: 44px;              /* тап-цел, како секое друго копче на сајтот */
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-purple);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quote__more:hover { text-decoration-thickness: 2px; }

/* Картичките со рецензии добиваат рамка од 2px во светло небесно сино (надвор
   од логото), за да се разликуваат од позадината на страницата. */
:root {
  --v2-review-accent: #AFDCEE;
}
.quote {
  border: 2px solid var(--v2-review-accent);
  align-self: start;   /* отворената картичка не ги растегнува соседните */
  margin: 0;           /* <figure> носи стандардна маргина што би ги преклопила соседните колони во мрежата од четири */
}

/* -----------------------------------------------------------------------------
   МРЕЖА ОД ЧЕТИРИ: три рецензии + „Види повеќе"
   Четвртото поле изгледа исто како рецензиите и стои најдесно, па мрежата е
   4 колони наместо 3 (moreCard() во js/reviews.js).
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.reviews-more {
  align-self: stretch;
  justify-content: center;
  text-align: left;
}
.reviews-more__text { margin: 0; }

/* Лентата под ротирачките рецензии: копче за пауза и бројач. */
.reviews-rotate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.reviews-rotate__count { font-size: var(--fs-small); opacity: .8; }