/* =============================================
   SMARTBUILD — Layout & Common Styles
   ============================================= */

/* Container */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  width: 100%;
}

/* Sections — each section is self-contained and reorderable */
.section {
  width: 100%;
  padding: var(--section-padding-y) 0;
}

/* Section header pattern (used across multiple sections) */
.section__header {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
  padding: 0 var(--content-padding);
}

.section__title {
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -2.7px;
  color: var(--color-dark);
  flex: 0 0 auto;
  width: 50%;
}

.section__description {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--color-graphite);
  flex: 1;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 70px;
  padding: 25px 20px;
  border-radius: var(--radius-xl);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}

/* Button 1 — Primary Yellow, no icon (УЗНАТЬ СТОИМОСТЬ, Получить консультацию)
   Default: bg-yellow, text-dark
   Hover:   bg-white,  text-dark
   Click:   bg-#ccc,   text-dark */
.btn--primary {
  background-color: var(--color-yellow);
  color: var(--color-dark);
}

.btn--primary:hover {
  background-color: var(--color-white);
}

.btn--primary:active {
  background-color: #CCCCCC;
}

/* Button 3 — Primary Yellow WITH icon (Смотреть проекты in sections)
   Default: bg-yellow,   text-dark,      arrow-dark
   Hover:   bg-graphite,  text-alabaster, arrow-light
   Click:   bg-#2c2c2c,  text-white,     arrow-light */
.btn--primary.btn--has-icon:hover {
  background-color: var(--color-graphite);
  color: var(--color-alabaster);
}

.btn--primary.btn--has-icon:active {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn--primary.btn--has-icon:hover .btn__icon {
  filter: brightness(0) invert(1);
}

/* Button 2 — Secondary Glass on dark bg (СМОТРЕТЬ ПРОЕКТЫ on hero)
   Default: bg-glass,  text-alabaster, arrow-light
   Hover:   bg-white,  text-dark,      arrow-dark
   Click:   bg-#ccc,   text-dark,      arrow-dark */
.btn--secondary {
  background-color: var(--color-glass);
  color: var(--color-alabaster);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background-color: var(--color-white);
  color: var(--color-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.btn--secondary:active {
  background-color: #CCCCCC;
  color: var(--color-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Button 4 — Outline border on light bg (Показать ещё, Смотреть проекты)
   Default: border-graphite, text-graphite,   arrow-dark
   Hover:   bg-graphite,     text-alabaster,   arrow-light
   Click:   bg-#2c2c2c,     text-white,       arrow-light */
.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-graphite);
  color: var(--color-graphite);
}

.btn--outline:hover {
  background-color: var(--color-graphite);
  color: var(--color-alabaster);
}

.btn--outline:active {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

/* Button 6 — Form submit button
   Default (disabled): bg-#ccc,    text-dark
   Enabled:            bg-yellow,  text-dark
   Hover:              bg-graphite, text-alabaster
   Click:              bg-green,   shows loader */
.btn--form {
  background-color: #CCCCCC;
  color: var(--color-dark);
}

.btn--form.btn--form-active {
  background-color: var(--color-yellow);
}

.btn--form.btn--form-active:hover {
  background-color: var(--color-graphite);
  color: var(--color-alabaster);
}

.btn--form.btn--form-active:active {
  background-color: #02AD0B;
}

/* Sending state (processing) */
.btn--form.btn--form-sending {
  background-color: var(--color-graphite);
  color: var(--color-alabaster);
  pointer-events: none;
}

/* Success state (after submit) */
.btn--form.btn--form-success {
  background-color: #02AD0B;
  pointer-events: none;
}

.btn--form.btn--form-success .btn__text {
  display: none;
}

.btn--form .btn__success-icon {
  display: none;
  width: 32px;
  height: 32px;
}

.btn--form.btn--form-success .btn__success-icon {
  display: block;
}

.btn--full-width {
  width: 100%;
}

/* Button icon (arrow) */
.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

/* Arrow rotates -45deg on hover (→ becomes ↗) */
.btn:hover .btn__icon {
  transform: rotate(-45deg);
}

/* Arrow color inversion for hover states */

/* Secondary: light arrow → hover bg white → arrow must turn dark */
.btn--secondary:hover .btn__icon {
  filter: brightness(0);
}

/* Secondary click: same as hover (dark arrow on gray) */
.btn--secondary:active .btn__icon {
  filter: brightness(0);
}

/* Outline: dark arrow → hover bg dark → arrow must turn light */
.btn--outline:hover .btn__icon {
  filter: brightness(0) invert(1);
}

/* Outline click: same direction (light arrow on darker bg) */
.btn--outline:active .btn__icon {
  filter: brightness(0) invert(1);
}

/* Tags / Chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-xl);
  background-color: var(--color-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--btn-size);
  font-weight: var(--body-weight);
  line-height: 1;
  letter-spacing: -0.32px;
  color: var(--color-alabaster);
  white-space: nowrap;
}

.tag__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}