/**
 * @file
 * Company node full view mode styles.
 *
 * Uses utility classes from utilities.css for common patterns:
 * - .has-watermark, .has-watermark--small - Drupal logo watermark
 * - .tag--outline - Outline tag styles
 * - .hide-if-empty - Hide empty containers
 */

/* ==========================================================================
   Company Information Bar (Icons + Fields)
   ========================================================================== */

.company-information {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);

  @media (width < 768px) {
    flex-direction: column;
  }
}

.company-field-with-icon {
  display: flex;
  align-items: center;
  gap: var(--sp1);
  padding: var(--sp1) var(--sp2) var(--sp1) 0;

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

  .field--name-field-company-size,
  .field--name-field-address {
    font-size: var(--body-m-size);
  }

  .company-field-content {
    color: var(--primary);

    a {
      color: inherit;
      text-decoration: none;
      font-size: var(--body-m-size);

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* ==========================================================================
   Sidebar Sections
   ========================================================================== */

.company-sidebar-body {
  padding-bottom: var(--sp6);

  @media (width < 768px) {
    padding-top: var(--sp4);
  }

  > h2 {
    margin-top: 0;
  }
}

/* Contract Values - uses .tag-group + .tag--outline via preprocess */
.company-sidebar-contract-values {
  @media (width < 768px) {
    padding-bottom: var(--sp4);
  }

  h2 {
    margin-top: 0;
  }
}

/* ==========================================================================
   Sidebar Cards (Services, Sectors, Expertise)
   Shared base styles with color variations.
   ========================================================================== */

.company-sidebar-services,
.company-sidebar-sectors,
.company-sidebar-special-expertise {
  border: 1px solid var(--neutral-900);
  border-radius: var(--radius-md);
  padding: var(--sp2-5);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp3);

  > h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 var(--sp1-5);
  }

  .field__items {
    display: flex;
    flex-direction: column;
    gap: var(--sp1-5);
  }

  .field__item {
    display: flex;
    align-items: center;
    gap: var(--sp1-5);
    font-size: 0.9375rem;
    color: var(--company-text-muted);

    &::before {
      content: '';
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230678BE' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* Card color variations */
.company-sidebar-services {
  background: rgba(255, 255, 255, 0.1);
}

.company-sidebar-sectors {
  background: rgba(30, 77, 92, 0.05);
}

.company-sidebar-special-expertise {
  background: rgba(6, 120, 190, 0.1);
}

/* ==========================================================================
   Company Logo
   ========================================================================== */

.company-sidebar-logo {
  margin: auto auto var(--sp3);
  opacity: 0.5;

  img {
    max-width: 280px;
    height: auto;
  }
}

/* ==========================================================================
   Location / Map
   ========================================================================== */

.geofield-map,
.leaflet-container {
  border-radius: var(--radius-md);
  min-height: 244px;
}

/* ==========================================================================
   Testimonials
   Uses .has-watermark--small pattern for card watermarks.
   ========================================================================== */

.testimonial-rating {
  display: flex;
  gap: 4px;

  svg {
    width: 20px;
    height: 20px;
    color: #f5a623;
    fill: currentColor;
    stroke: none;
  }
}

.company-sidebar-testimonials .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp3);

  @media (width >= 992px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Testimonial cards - watermark applied via CSS (unique styling per item) */
.company-sidebar-testimonials .field__item {
  background: rgba(30, 77, 92, 0.05);
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--sp3);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

  /* Watermark - inherits pattern from .has-watermark--small */
  &::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 120px;
    height: 145px;
    background-image: url('/themes/custom/aotearoa/images/drupal-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
  }

  > * {
    position: relative;
    z-index: 1;
  }

  &::before {
    content: '"';
    display: block;
    font-size: 3.75rem;
    font-weight: 600;
    color: #594743;
    line-height: 0.7;
    margin-bottom: var(--sp1);
  }
}

/* ==========================================================================
   Dividers
   ========================================================================== */

.company-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin-block: var(--sp4);
}

/* ==========================================================================
   Company Page Layout Adjustments
   ========================================================================== */

.node--type-company {
  .layout,
  .ds-1col {
    padding-bottom: var(--sp6);
  }

  /* Hide empty layout regions - handled via view.css */
}

.layout--twocol-section.layout--twocol-section--67-33 .layout__region--first {
  padding-right: var(--sp2);

  @media (width < 768px) {
    padding-right: 0;
  }
}

@media (width < 992px) {
  .node--type-company .layout--twocol-section--50-50:first-of-type,
  .node--type-company .layout--twocol-section--67-33 {
    flex-direction: column-reverse;
    .layout__region--first,
    .layout__region--second {
      width: 100%;
    }
  }
}