/* === Featured-in masthead strip ===
 *
 * Lifted out of homepage.css so the Insights page can use the same component.
 * homepage.css only loads on the front page, so the strip rendered unstyled
 * anywhere else. Each masthead carries its own height: they are wildly
 * different proportions and one shared height makes the long ones tower.
 */

/* --- Featured in (press mastheads) ---
   A fixed row, not a carousel: the client settled on a small set that is always
   visible, so nothing that matters is hidden behind a scroll or a timer. */
/* Spacing follows the same rhythm as every other section on this page:
   26px from the top rule down to the content, 180px of air before the next
   section's rule. */
.cc-featured {
  width: 100%;
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-featured__divider {
  height: 1px;
  background: var(--cc-newsprint);
  margin-bottom: 26px;
}

.cc-featured__row {
  display: flex;
  align-items: center;
  gap: 56px;
}

.cc-featured__label {
  flex: 0 0 auto;
  font-family: var(--cc-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  white-space: nowrap;
}

.cc-featured__viewport {
  flex: 1 1 auto;
  min-width: 0;
}

.cc-featured__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 32px;
  margin: 0;
  padding: 0;
}

/* --- Marquee variant ---
   The track holds two identical sets. Shifting it by one set's width lands the
   duplicate exactly where the original began, so the loop has no visible seam.
   That distance is half the track plus half a gap, not a flat 50% — the track
   carries one more gap than a single set does. */
.cc-featured--marquee .cc-featured__viewport {
  overflow: hidden;
  /* Long fades so a logo leaving the track dissolves rather than being sliced
     mid-letterform at the edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 96px, #000 calc(100% - 96px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}

.cc-featured--marquee .cc-featured__list {
  --cc-featured-gap: 64px;
  width: max-content;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--cc-featured-gap);
  animation: cc-featured-scroll 38s linear infinite;
}

.cc-featured--marquee .cc-featured__viewport:hover .cc-featured__list,
.cc-featured--marquee .cc-featured__viewport:focus-within .cc-featured__list {
  animation-play-state: paused;
}

/* Must not shrink: these are flex items sized by their own content, and the
   default flex-shrink squashed every logo to a third of its width. */
.cc-featured__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Logos are supplied in colour and stay in colour — the client was explicit
   that they preferred it over a washed-out monochrome treatment. */
.cc-featured__logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* Per-logo heights, normalised so each mark carries a similar visual weight
   despite aspect ratios running from 4:1 to 12:1. A single shared height makes
   the long wordmarks tower over the compact ones. */
.cc-featured__logo--afr            { height: 19px; }

.cc-featured__logo--the-australian { height: 16px; }

.cc-featured__logo--realcommercial { height: 23px; }

.cc-featured__logo--commo          { height: 21px; }

.cc-featured__logo--elite-agent    { height: 25px; }

.cc-featured__logo--green-street   { height: 23px; }

@keyframes cc-featured-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--cc-featured-gap) / 2))); }
}

/* On narrow screens an inline label leaves the track about 200px to scroll
   through, which reads as a slot machine. Stack it so the logos get the width. */
@media (max-width: 768px) {
  .cc-featured {
    padding-bottom: 90px;
  }

  .cc-featured__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .cc-featured__viewport {
    width: 100%;
  }

  .cc-featured--marquee .cc-featured__list {
    --cc-featured-gap: 44px;
    animation-duration: 26s;
  }

  /* The 96px fade is sized for a 1456px track. Inside a 335px viewport it ate
     192px of the 335, so whatever logo was passing sat permanently half
     dissolved and the strip read as one ghosted mark with empty space either
     side. Scale the fade to the width actually available. */
  .cc-featured--marquee .cc-featured__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}

/* Anyone who has asked the OS to reduce motion gets the fixed row instead. */
@media (prefers-reduced-motion: reduce) {
  .cc-featured--marquee .cc-featured__list {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 32px;
  }
  .cc-featured--marquee .cc-featured__item[aria-hidden="true"] {
    display: none;
  }
  .cc-featured--marquee .cc-featured__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 768px) {
  .cc-featured {
    padding-bottom: 70px;
  }
}

/* On the homepage this strip closes the page, so it only ever needed padding
   below. On Insights it sits between the article list and Media, where a top
   padding of zero put its divider hard against the last article card while
   180px below left a hole before the Media heading. Even it out there. */
.cc-insights-page .cc-featured {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (max-width: 768px) {
  .cc-insights-page .cc-featured {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}