/**
 * @file
 * Node display styles for Aotearoa theme.
 *
 * Utility classes (.card-base, .has-watermark, .tag-group, .tag--primary)
 * are added via aotearoa_preprocess functions in aotearoa.theme.
 */

/* ==========================================================================
   Showcase & Teaser Nodes
   ========================================================================== */

.node--view-mode-teaser {
  text-align: start;
  .field--name-field-slideshow img {
    margin: 0 auto;
  }

  .field--name-node-title {
    padding: var(--sp2) var(--sp2) 0;

    a {
      color: var(--primary);
      font-weight: var(--h1-weight);
      font-size: var(--h3-size);
      text-decoration: none;
    }
  }

  .field--name-body {
    padding: var(--sp2);
  }

  .field--name-field-sectors {
    padding: var(--sp2) var(--sp2) 0;
  }

  /* Tag fields use .tag-group + .tag--primary via preprocess */
  .field--name-field-drupal-version {
    padding: var(--sp2) var(--sp2) var(--sp3);
  }
}

.node--type-showcase--card .field--name-node-title a {
  font-size: var(--body-m-size);
}

/* ==========================================================================
   Showcase Scroll Block
   ========================================================================== */

.showcase-scroll-block .view-content {
  display: flex;
  gap: var(--sp3);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: 4%;

  &::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   Company Node Teasers
   ========================================================================== */

.node--type-company--teaser {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  padding: var(--sp2);

  .field--name-node-title {
    font-size: var(--h3-size);

    h3 {
      margin: 0;
    }

    a {
      color: var(--primary);
      font-weight: var(--h1-weight);
      text-decoration: none;
    }
  }
}

.node--view-mode-card {
  text-align: start;
  height: 100%;
  .field--name-field-logo {
    padding: var(--sp2) var(--sp2) 0;
  }
  .field--name-field-slideshow img {
    margin: 0 auto;
  }
  .field--name-node-title {
    padding: var(--sp2) var(--sp2) 0;
    a {
      color: var(--primary);
      font-weight: var(--h1-weight);
      text-decoration: none;
    }
  }

  .field--name-field-address {
    padding: var(--sp2) var(--sp2) 0;
    color: var(--neutral-500);
  }
  .field--name-body {
    padding: var(--sp2);
  }
  .field--name-node-link {
    padding: 0 var(--sp2) var(--sp3);
    color: var(--primary);
  }
  /* Tag fields use .tag-group + .tag--primary via preprocess */
  .field--name-field-drupal-version {
    padding: var(--sp2) var(--sp2) var(--sp3);
  }

  .field--name-node-changed-date {
    display: flex;
    gap: var(--sp1);
    padding-inline: var(--sp2);
  }
}

/* ==========================================================================
   Muted Links (via .has-muted-links from preprocess)
   ========================================================================== */

.has-muted-links {
  a {
    text-decoration: none;
    color: var(--neutral-500);

    &:hover {
      color: var(--neutral-700);
    }
  }
}

.node--view-mode-card .has-muted-links,
.node--view-mode-teaser .has-muted-links {
  padding-left: var(--sp2);
}

.node--type-showcase .layout--twocol-section--67-33 {
  @media (width < 992px) {
    flex-direction: column-reverse;
  }
  .layout__region--second {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
    @media (width < 992px) {
      padding-top: var(--sp3);
      padding-bottom: var(--sp4);
    }
  }
}