/* ==================================================================== */
/* ==  КОМПОНЕНТИ : НАЧАЛО  —  преизползваеми блокове                 == */
/* ==================================================================== */

/* ===== ЗАГЛАВЕН БЛОК НА СЕКЦИЯ : НАЧАЛО ===== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(40 * var(--k));
}

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--accent);
}

/* В макета двата дълги етикета „иновации и озеленяване" са с по-дребен кегел
   и разредка. Височината на реда остава същата, за да не се вдигне заглавието. */
.eyebrow--tracked {
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: calc(1.73 * var(--k));
  line-height: calc(30 * var(--k));
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  color: var(--ink);
}

/* По-едрият кегел пада малко по-ниско при центриране на реда, отколкото го
   показва макетът — вдига се само визуално, за да не мести нищо под себе си. */
.section-title--lg {
  position: relative;
  top: calc(-2.5 * var(--k));
  font-size: var(--fs-h2-lg);
}

/* Заглавието се пренася на точно толкова реда, колкото показва макетът. */
.section-title span { display: block; }
/* ===== ЗАГЛАВЕН БЛОК НА СЕКЦИЯ : КРАЙ ===== */


/* ===== ВРЪЗКА "ВИЖТЕ ВСИЧКИ" : НАЧАЛО ===== */
.link-more {
  flex: 0 0 auto;
  margin-bottom: calc(3 * var(--k));
  margin-right: calc(10 * var(--k));
  font-size: var(--fs-link);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: var(--ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: calc(2 * var(--k));
  text-decoration-color: rgba(255, 255, 255, .82);
  transition: color var(--t-fast), text-decoration-color var(--t-fast), transform var(--t-fast);
}

.link-more:hover,
.link-more:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
  transform: translateX(4px);
}
/* ===== ВРЪЗКА "ВИЖТЕ ВСИЧКИ" : КРАЙ ===== */


/* ===== КАРТА С ПРОЕКТ : НАЧАЛО ===== */
.project {
  --cap-gap: 17.3;
  display: block;
  min-width: 0;
  color: var(--ink);
  transition: transform var(--t), filter var(--t);
}

/* Цветната лента вляво е част от самата изрезка — не се рисува с CSS. */
.project__frame {
  display: block;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), filter var(--t);
}

.project:hover .project__frame,
.project:focus-visible .project__frame {
  box-shadow: var(--shadow-hover);
  filter: brightness(1.04);
}

.project__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--t-slow), opacity var(--t-slow), filter var(--t-slow);
}

.project:hover .project__img,
.project:focus-visible .project__img { transform: scale(1.04); }

.project__caption {
  display: block;
  margin-top: calc(var(--cap-gap) * var(--k));
  padding-left: calc(13 * var(--k));
  font-size: var(--fs-caption);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: var(--ink);
  transition: color var(--t-fast);
}

.project:hover .project__caption,
.project:focus-visible .project__caption { color: var(--accent); }

.project[data-reveal]:hover,
.project[data-reveal]:focus-visible { transform: translateY(-5px); }

.project--wide .project__caption { padding-left: calc(25 * var(--k)); }
.project--gap-lg { --cap-gap: 24.3; }
/* ===== КАРТА С ПРОЕКТ : КРАЙ ===== */


/* ===== РЕД ОТ СПИСЪКА С УСЛУГИ : НАЧАЛО ===== */
.landscape__row {
  border-top: var(--edge) solid rgba(255, 255, 255, .085);
  display: grid;
  grid-template-columns: 45fr 380fr 916fr 180fr;
  align-items: center;
  min-height: calc(127 * var(--k));
  padding-left: calc(39 * var(--k));
  padding-right: calc(40 * var(--k));
  color: var(--ink);
  transition: background-color var(--t), transform var(--t), box-shadow var(--t);
}

.landscape__row:hover,
.landscape__row:focus-visible {
  background-color: rgba(255, 255, 255, .045);
  transform: translateX(calc(7 * var(--k)));
  box-shadow: inset calc(3 * var(--k)) 0 0 rgba(159, 255, 1, .72);
}

.landscape__num {
  font-size: var(--fs-row-num);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* В макета номерът и заглавието стоят на една базова линия. При центриране в
   реда по-едрият кегел пада с 4px по-ниско — връща се нагоре само визуално. */
.landscape__title {
  position: relative;
  top: calc(-4 * var(--k));
  font-size: var(--fs-row-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink);
  min-width: 0;
  transition: color var(--t-fast);
}

.landscape__row:hover .landscape__title,
.landscape__row:focus-visible .landscape__title { color: var(--accent); }

.landscape__desc {
  font-size: var(--fs-row-desc);
  font-weight: 300;
  line-height: calc(25 * var(--k));
  color: var(--ink);
  min-width: 0;
}

.landscape__arrow {
  justify-self: end;
  width: calc(22 * var(--k));
  height: calc(18 * var(--k));
  background-color: var(--accent);
  -webkit-mask: url(/resources/images/icons/icon-arrow-up-right.svg) center / contain no-repeat;
          mask: url(/resources/images/icons/icon-arrow-up-right.svg) center / contain no-repeat;
  transition: transform var(--t), background-color var(--t);
}

.landscape__row:hover .landscape__arrow,
.landscape__row:focus-visible .landscape__arrow {
  transform: translate(4px, -4px);
  background-color: var(--ink);
}
/* ===== РЕД ОТ СПИСЪКА С УСЛУГИ : КРАЙ ===== */


/* ===== МАЛКА СНИМКА : НАЧАЛО ===== */
.thumb {
  display: block;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), transform var(--t);
}

.thumb:hover,
.thumb:focus-visible {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--t-slow), filter var(--t-slow);
}

.thumb:hover img,
.thumb:focus-visible img {
  transform: scale(1.045);
  filter: brightness(1.05);
}
/* ===== МАЛКА СНИМКА : КРАЙ ===== */


/* ===== КОМПОНЕНТИ — ТАБЛЕТ И ТЕЛЕФОН : НАЧАЛО ===== */
@media (max-width: 1024px) {
  .section-head {
    align-items: flex-start;
    gap: 16px;
  }

  .link-more {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 0;
    margin-right: 0;
  }

  .landscape__row {
    grid-template-columns: 46px minmax(0, 1fr) 44px;
    align-items: start;
    row-gap: 10px;
    column-gap: 10px;
    min-height: 0;
    padding: 22px 0;
  }

  .landscape__row:hover,
  .landscape__row:focus-visible { transform: translateX(4px); }

  .project:active .project__img,
  .thumb:active img { transform: scale(1.025); }

  .landscape__num { grid-column: 1; grid-row: 1; }

  /* Оптичната корекция от 1920 не важи, когато редът се подрежда отгоре надолу. */
  .landscape__title { grid-column: 2; grid-row: 1; top: 0; }
  .section-title--lg { top: 0; }
  .landscape__desc { grid-column: 2 / span 2; grid-row: 2; line-height: 1.5; }

  .landscape__arrow {
    grid-column: 3;
    grid-row: 1;
    width: 24px;
    height: 20px;
    align-self: center;
  }

  .project__caption,
  .project--wide .project__caption { padding-left: 0; margin-top: 12px; }
}

@media (max-width: 640px) {
  .section-title span { display: inline; }
}
/* ===== КОМПОНЕНТИ — ТАБЛЕТ И ТЕЛЕФОН : КРАЙ ===== */

/* ==  КОМПОНЕНТИ : КРАЙ                                              == */
/* ==================================================================== */