/* Hero news feed ------------------------------------------------------------
 *
 * The card that floats in the bottom-right of the framed hero, in place of the
 * "Solutions & Services" button. Structure copied from harmattan.ai's hero
 * card; palette, radius and type are this site's (#c4b798 brand, #151515 dark,
 * the "//" accent, Neue Haas), so it reads as part of the page rather than an
 * import.
 *
 * Hidden unless the framed hero is active: the variant is decided client-side,
 * so the markup ships on every render and CSS decides whether it shows.
 *
 * Own file so a re-scrape of dronivo.css cannot overwrite it.
 */

.newsfeed {
  display: none;
}

[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .newsfeed {
  position: relative;
  display: block;
  flex: 0 0 auto;
  /* 20rem/320px. The reference's card is 262px, but its headline is one
     sentence; these are the product blurbs from the section below the hero,
     and at 288px three of the seven were being cut off mid-word. */
  width: 20rem;
  max-width: 100%;
  padding: 0.625rem;
  /* Sits on footage that ranges from near-black to near-white sky, so the panel
     needs its own body rather than relying on the hero scrim. */
  background-color: rgba(21, 21, 21, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* 4px, not the reference's ~12px: the hero frame itself is 2px, and a soft
     pill inside a hard-cornered frame reads as pasted on. */
  border-radius: 4px;
  transition: border-color 0.24s ease, background-color 0.24s ease;
}

@supports (backdrop-filter: blur(1px)) {
  [data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .newsfeed {
    background-color: rgba(21, 21, 21, 0.52);
    backdrop-filter: blur(14px);
  }
}

[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .newsfeed:hover {
  /* Akzent statt festem Sand: auf Lawenforcement ist die Markenfarbe blau. */
  border-color: color-mix(in srgb, var(--site-accent, #c4b798) 45%, transparent);
  background-color: rgba(21, 21, 21, 0.8);
}

/* The card takes the place of the "Solutions & Services" button, so the bottom
   row is heading left, card right. Scoped with :has() rather than hiding the
   button outright, so the hero keeps an action if the card is ever not there —
   i.e. when the injection anchor has changed and lib/news-feed.ts returns the
   fragment untouched. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .hero-content-wrapper:has(.newsfeed) > :is(.div-block-9, .div-block-21) {
  display: none;
}

/* --- Items --------------------------------------------------------------- */

/* One grid cell holding every item, so the card keeps the height of its
   tallest entry and rotation cannot make the hero jump. */
.newsfeed_list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.newsfeed_item {
  grid-area: 1 / 1;
  /* The cell is as tall as the longest blurb; shorter ones would otherwise
     leave all of the slack below the text. Centring spreads it. */
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.newsfeed_item[data-current="true"] {
  opacity: 1;
  visibility: visible;
}

.newsfeed_link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

/* 88x76, the reference's proportions, pinned to the top of the row. Stretching
   it to the text height was tried and dropped: on a five-line blurb it turns
   into a narrow portrait strip and the subject of the photograph is lost. */
.newsfeed_thumb {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 4.75rem;
  object-fit: cover;
  border-radius: 3px;
  background-color: #222;
}

.newsfeed_body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  /* Keeps the headline clear of the arrow in the corner. */
  padding-right: 1.375rem;
}

.newsfeed_kicker {
  display: flex;
  align-items: baseline;
  color: var(--site-accent, #c4b798);
  /* 11px statt 10.
   *
   * 0.625rem ist im System die Groesse fuer Chips und Spaltenschluessel —
   * Beiwerk, das man ueberliest. Der Gold-Tag hier ist kein Beiwerk: er sagt,
   * worum es in der Karte geht, und die Karte steht im Hero der Startseite.
   * Bei 0.16em Sperrung und Versalien sind 10px die Grenze, ab der Mono
   * anfaengt, sich zu verweigern.
   *
   * 11px ist dieselbe Groesse wie .fr-card-label und die Spaltenkoepfe im
   * Fussbereich — also kein neuer Wert, sondern der naechste, den es schon
   * gibt. Aus demselben Grund ging die Rechtszeile im Fuss von 11 auf 12: der
   * Kunde meldet die Schriften durchgehend als zu klein. */
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* The tracking above would otherwise swallow the gap after the slashes. */
.newsfeed_slash {
  margin-right: 0.5rem;
  letter-spacing: 0;
}

.newsfeed_title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  /* Five lines, as the reference runs. Every item shares one grid cell, so the
     card is as tall as the longest product blurb and rotation cannot make the
     hero jump; the clamp is the ceiling on that, not the common case. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  transition: color 0.24s ease;
}

.newsfeed_link:hover .newsfeed_title {
  color: var(--site-accent, #c4b798);
}

/* --- Controls ------------------------------------------------------------ */

/* Sits where the reference has its close button, but leads out to the case
   studies instead. Rotated -45deg to point up-right — the same "leaves this
   page" gesture .btn-bubble-arrow makes on hover, and the same glyph. */
.newsfeed_more {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  transition: color 0.24s ease, transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

.newsfeed_more svg {
  transform: rotate(-45deg);
}

/* Nudge along the diagonal the arrow points down, not straight up. */
.newsfeed_more:hover,
.newsfeed_more:focus-visible,
.newsfeed:hover .newsfeed_more {
  color: var(--site-accent, #c4b798);
  transform: translate(2px, -2px);
}

.newsfeed_dots {
  display: flex;
  gap: 0.3125rem;
  margin: 0.5rem 0 0.125rem 6.25rem; /* thumb 5.5rem + 0.75rem gap */
}

.newsfeed_dot {
  width: 1.125rem;
  height: 2px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.28);
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  transition: background-color 0.24s ease;
}

.newsfeed_dot[data-current="true"] {
  background-color: var(--site-accent, #c4b798);
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 991px) {
  /* The framed hero already stacks heading over action here, so the card goes
     full width instead of sitting in a 20.5rem column. */
  [data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .newsfeed {
    width: 100%;
  }
  /* The slider dots, on a phone.
   *
   * They were 18x2 of ink grown to a 44x44 tap target with padding and
   * `background-clip: content-box`. Seven of those need 338px; the row had 208,
   * because the 6.25rem indent that lines the dots up under the card's text
   * column on desktop eats a third of the width here. Flex did what it is
   * supposed to and shrank them — to seven different widths, which is the
   * "verzogen" look: the ink is the content box, so squeezing the box squeezes
   * the dash.
   *
   * So the ink stops being the box. The dash is drawn by ::after at a fixed
   * 18x2 and the button around it is free to be a tap target, which also means
   * it can never distort what you see. 36x44 at seven dots is what the row
   * actually holds — 44 wide as well is not geometrically possible here, and
   * padding it further would only bring the shrinking back. */
  .newsfeed_dots {
    margin-left: 0;
    gap: 0.3125rem;
  }

  /* Shrinkable on purpose, now that shrinking is harmless: the dash is drawn by
     ::after at a fixed size, so a narrower box moves the targets closer
     together instead of squashing the ink. That matters because the number of
     dots is the number of feed items and is not fixed — seven product blurbs
     when the CMS is empty, fewer once real news is published. At 375px seven
     36px boxes want 282px and the row has 277; before, that 5px deficit was
     paid out of the dashes. */
  .newsfeed_dot,
  button.newsfeed_dot {
    position: relative;
    flex: 0 1 2.25rem;
    min-width: 1.5rem;
    height: 44px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }

  .newsfeed_dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.125rem;
    height: 2px;
    margin: -1px 0 0 -0.5625rem;
    border-radius: 1px;
    background-color: rgba(255, 255, 255, 0.28);
    transition: background-color 0.24s ease;
  }

  /* The box has to be cleared at the same specificity as the rule that fills
     it, or the current dot paints as a 36x44 sand block behind its own dash —
     `.newsfeed_dot[data-current]` (0,2,0) outranks `.newsfeed_dot` (0,1,0). */
  .newsfeed_dot[data-current="true"] {
    background-color: transparent;
  }

  .newsfeed_dot[data-current="true"]::after {
    background-color: var(--site-accent, #c4b798);
  }
}

@media (max-width: 479px) {
  [data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .newsfeed {
    padding: 0.5rem;
  }
  .newsfeed_thumb {
    width: 4.5rem;
    height: 3.875rem;
  }
  .newsfeed_title {
    font-size: 0.875rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  /* No indent here either — the row needs its full width for seven targets.
     This rule kept the dots aligned under the card's text column, which is the
     right reading on desktop and 84px of lost room on a phone. */
  .newsfeed_dots {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newsfeed_item {
    transition-duration: 0.01ms;
  }
}