/* Файл: static/css/company.css */

/* ==========================================================================
   COMPANY PAGE
   ========================================================================== */

.company-page {
  --company-border: rgba(15, 23, 42, 0.13);
  --company-dark: var(--color-dark, #0f172a);
  --company-muted: var(--color-text-muted, #64748b);
  --company-accent: var(--color-primary);
  --company-surface: #fffef9;

  padding-top: 61px;

  background: var(--grid-light-bg);
}

.company-main {
  min-height: 70vh;
}

/* ==========================================================================
   COMPANY SECTION
   ========================================================================== */

.company-section {
  padding: 2rem 0 4rem;
}

/* ==========================================================================
   COMMON TYPOGRAPHY
   ========================================================================== */

.company-eyebrow {
  margin: 0 0 0.55rem;

  color: var(--company-accent);

  font-size: 0.7rem;
  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.company-section-title {
  margin: 0;

  color: var(--company-dark);

  font-size: clamp(1.65rem, 5vw, 2.4rem);
  font-weight: 900;

  letter-spacing: -0.035em;

  line-height: 1;

  text-transform: uppercase;
}

/* ==========================================================================
   COMPANY LAYOUT
   ========================================================================== */

.company-layout {
  display: grid;

  grid-template-columns: minmax(0, 1fr);

  align-items: stretch;

  gap: 1.5rem;
}

/* ==========================================================================
   COMPANY ABOUT
   ========================================================================== */

.company-about {
  display: flex;

  min-width: 0;

  flex-direction: column;

  padding: 1.5rem;

  background: var(--company-surface);

  border: 1px solid var(--company-border);

  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   COMPANY ABOUT HEADER
   ========================================================================== */

.company-about__header {
  display: flex;

  align-items: flex-start;

  gap: 1rem;

  padding-bottom: 1.5rem;

  border-bottom: 1px solid var(--company-border);
}

.company-section-number {
  display: inline-flex;

  width: 2.5rem;
  height: 2.5rem;

  flex: 0 0 2.5rem;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: var(--company-dark);

  font-size: 0.7rem;
  font-weight: 900;
}

/* ==========================================================================
   COMPANY DESCRIPTION
   ========================================================================== */

.company-about__text {
  display: flex;

  flex-direction: column;

  gap: 1.25rem;

  padding-top: 1.75rem;

  color: var(--company-muted);

  font-size: 1rem;

  line-height: 1.75;
}

.company-about__text p {
  margin: 0;
}

.company-about__text strong {
  color: var(--company-dark);

  font-weight: 900;
}

/* ==========================================================================
   COMPANY CONTENT LINKS
   ========================================================================== */

.company-about__text a {
  color: var(--company-accent);

  font-weight: 800;

  text-decoration-line: underline;
  text-decoration-color: rgba(255, 75, 75, 0.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;

  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .company-about__text a:hover {
    color: var(--color-primary-hover);

    text-decoration-color: currentColor;
  }
}

.company-about__text a:focus-visible {
  outline: 3px solid rgba(255, 75, 75, 0.3);
  outline-offset: 3px;

  border-radius: 0.15rem;
}

/* ==========================================================================
   COMPANY VALUES
   ========================================================================== */

.company-values {
  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: 1rem;

  margin-top: auto;

  padding-top: 2.5rem;
}

.company-value {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: start;

  gap: 1rem;

  padding-top: 1.25rem;

  border-top: 1px solid var(--company-border);
}

.company-value__icon {
  display: inline-flex;

  width: 3rem;
  height: 3rem;

  flex: 0 0 3rem;

  align-items: center;
  justify-content: center;

  color: var(--company-accent);

  background: rgba(255, 75, 75, 0.09);
}

.company-value__icon svg {
  display: block;
}

.company-value__content h2 {
  margin: 0 0 0.35rem;

  color: var(--company-dark);

  font-size: 0.95rem;
  font-weight: 900;

  line-height: 1.3;

  text-transform: uppercase;
}

.company-value__content p {
  margin: 0;

  color: var(--company-muted);

  font-size: 0.82rem;

  line-height: 1.55;
}

/* ==========================================================================
   COMPANY REQUISITES
   ========================================================================== */

.company-requisites {
  position: relative;

  min-width: 0;

  overflow: hidden;

  color: #ffffff;

  background: var(--company-dark);

  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.22);
}

.company-requisites__decoration {
  position: absolute;

  top: -1.75rem;
  right: -2rem;

  color: #ffffff;

  opacity: 0.045;

  pointer-events: none;
}

.company-requisites__content {
  position: relative;

  z-index: 2;

  height: 100%;

  padding: 1.5rem;
}

/* ==========================================================================
   REQUISITES HEADER
   ========================================================================== */

.company-requisites__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 1rem;

  padding-bottom: 1.5rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.company-requisites__title {
  margin: 0;

  color: #ffffff;

  font-size: 1.8rem;
  font-weight: 900;

  letter-spacing: -0.03em;

  line-height: 1;

  text-transform: uppercase;
}

/* ==========================================================================
   PRINT BUTTON
   ========================================================================== */

.company-print-button {
  display: inline-flex;

  width: 2.75rem;
  height: 2.75rem;

  flex: 0 0 2.75rem;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: #ffffff;

  background: rgba(255, 255, 255, 0.09);

  border: 1px solid rgba(255, 255, 255, 0.14);

  font: inherit;

  cursor: pointer;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.company-print-button:hover {
  color: var(--company-dark);

  background: #ffffff;

  border-color: #ffffff;
}

.company-print-button:focus-visible {
  outline: 3px solid var(--company-accent);

  outline-offset: 3px;
}

/* ==========================================================================
   REQUISITES LIST
   ========================================================================== */

.company-requisites__list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0;

  margin: 0;
}

.company-requisite {
  min-width: 0;

  padding: 1.25rem 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.company-requisite:nth-child(3) {
  padding-right: 0.75rem;
}

.company-requisite:nth-child(4) {
  padding-left: 0.75rem;

  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.company-requisite--wide {
  grid-column: 1 / -1;
}

.company-requisite dt {
  margin-bottom: 0.4rem;

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.company-requisite dd {
  margin: 0;

  overflow-wrap: anywhere;

  color: #ffffff;

  font-size: 0.9rem;
  font-weight: 800;

  line-height: 1.5;
}

.company-requisite .company-requisite__accent {
  color: var(--company-accent);

  font-size: 1.25rem;
  font-weight: 900;
}

/* ==========================================================================
   COMPANY CTA
   ========================================================================== */

.company-cta {
  padding: 3.5rem 0 5rem;
}

.company-cta__card {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: space-between;

  gap: 2rem;

  padding: 1.5rem;

  color: #ffffff;

  background: var(--company-dark);

  border-top: 4px solid var(--company-accent);
}

.company-cta__title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(1.8rem, 7vw, 3.5rem);
  font-weight: 900;

  letter-spacing: -0.045em;

  line-height: 1;

  text-transform: uppercase;
}

.company-cta__text {
  max-width: 650px;

  margin: 1rem 0 0;

  color: var(--color-text-light);

  line-height: 1.65;
}

.company-cta__actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 1.25rem;
}

.company-cta__phone {
  color: #ffffff;

  font-size: 1rem;
  font-weight: 900;

  border-bottom: 2px solid rgba(255, 255, 255, 0.35);

  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.company-cta__phone:hover {
  color: var(--company-accent);

  border-color: var(--company-accent);
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (min-width: 640px) {
  .company-about,
  .company-requisites__content,
  .company-cta__card {
    padding: 2rem;
  }

  .company-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5rem;
  }
}

@media (min-width: 769px) {
  .company-page {
    padding-top: 108px;
  }

  .company-section {
    padding: 2.5rem 0 5rem;
  }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {
  .company-section {
    padding: 3rem 0 6rem;
  }

  .company-layout {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(360px, 0.9fr);

    gap: 2.5rem;
  }

  .company-about {
    padding: 2.5rem;
  }

  .company-requisites__content {
    padding: 2.5rem;
  }

  .company-cta__card {
    flex-direction: row;

    align-items: center;

    padding: 2.5rem 3rem;
  }

  .company-cta__actions {
    flex: 0 0 auto;

    justify-content: flex-end;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .header,
  .footer,
  .company-about,
  .company-cta,
  .breadcrumbs,
  .company-print-button,
  .company-requisites__decoration {
    display: none !important;
  }

  .company-page {
    padding: 0;

    background: #ffffff;
  }

  .company-main {
    min-height: 0;
  }

  .company-section {
    padding: 0;

    background: #ffffff !important;
  }

  .company-layout {
    display: block;
  }

  .company-requisites {
    color: #000000;

    background: #ffffff;

    border: 1px solid #000000;

    box-shadow: none;
  }

  .company-requisites__content {
    padding: 24px;
  }

  .company-requisites__title,
  .company-requisite dd {
    color: #000000;
  }

  .company-requisites__header,
  .company-requisite,
  .company-requisite:nth-child(4) {
    border-color: #cccccc;
  }

  .company-requisite dt {
    color: #555555;
  }

  .company-requisite .company-requisite__accent,
  .company-eyebrow {
    color: #000000;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .company-print-button,
  .company-cta__phone {
    transition: none;
  }
}