/* FROZEN ARCHIVE stylesheet for the 2025 Terminations Tracker
   (/terminations-tracker/2025, templates/data_losses_2025/index.html.jinja).

   Point-in-time copy of data-losses.css taken at the 2025 -> 2026 cutover.
   Do NOT refactor this to @import or share rules with data-losses.css --
   it exists so redesigns of the live tracker cannot restyle the archive.

   Data Losses page (ported from essential-data-us-v2 terms.css).
   Self-contained: colors inlined, scoped under .data-losses, and the
   essentialdata-specific header overrides intentionally dropped so this
   file does not affect dataindex's own header. */

:root {
  --dl-tech-blue: #1a3952;
  --dl-accent: #6c5ce7;
  --dl-title-blue: #2d618b;
}

.data-losses.content__container {
  background-color: #f4f8f9;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start; /* left-align intro, headings, and cards to one edge */
  padding: 5%;
  padding-top: 10px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  /* Multi-weight family (see _base.css) so font-weight:bold selects the
     real StabilGrotesk-Bold cut rather than a synthesised faux bold. */
  font-family: "Stabil Grotesk", "StabilGrotesk-Regular", sans-serif;
}

.data-losses b {
  font-weight: bold;
}

.data-losses .termination__type {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color--fas-blue);
  padding: 10px;
  color: white;
  font-size: 14px;
}
.data-losses .termination__type p {
  margin: 0px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.data-losses .termination__type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 4px solid var(--dl-accent);
}

.data-losses .termination__container {
  display: grid;
  /* minmax(0, 1fr) lets tracks shrink below their content's intrinsic width;
     plain 1fr keeps an implicit min-width:auto that overflows in WebKit. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.data-losses .termination__item {
  border: 2px solid var(--dl-tech-blue);
  min-width: 0; /* allow the grid item to shrink */
  overflow: hidden; /* clip anything that still tries to spill */
}

.data-losses .termination__text-container {
  display: flex; /* stack the summary and the sources vertically */
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  padding: 10px;
}
.data-losses .termination__text-container > div {
  margin: 0;
  font-size: 18px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* summary (title / agency / status) is always visible */
.data-losses .termination__content--show {
  order: 0;
}
/* sources are collapsed by default and expand fully on hover/focus -- no clipping */
.data-losses .termination__content--hide {
  order: 1;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.35s ease,
    margin-top 0.2s ease,
    padding-top 0.2s ease;
}
.data-losses .termination__item:hover .termination__content--hide,
.data-losses .termination__item:focus-within .termination__content--hide {
  max-height: 100em; /* generous cap so the full source list shows */
  opacity: 1;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #d7dee3;
}

.data-losses .termination__content--hide a {
  color: var(--dl-title-blue);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.data-losses .partner__container {
  display: flex;
  flex-flow: row wrap; /* wrap instead of overflowing */
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 16px 32px;
  margin-top: 10px;
}

.data-losses .partner__item {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: rgb(91, 91, 91);
  min-width: 0;
  max-width: 100%;
}

.data-losses .partner__item:hover {
  color: rgb(32, 32, 32);
}
.data-losses .partner__item p {
  margin: 0;
  overflow-wrap: anywhere;
}
.data-losses .partner__item img {
  height: 48px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.data-losses .ad__container {
  display: flex;
  flex-direction: row;
  gap: 25px;
  justify-content: space-around;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 130px;
  margin: 40px 0px;
}
.data-losses .ad__temp {
  display: flex;
  flex-direction: row;
  padding: 10px;
  width: 45%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  height: 71%;
  justify-content: flex-start;
  align-content: center;
}
.data-losses .ad__temp hr {
  width: 2px;
  height: 70%;
  border: 0;
  background-color: black;
  color: black;
}

.data-losses .ad__title {
  font-size: 19px;
  margin: 0px;
  line-height: 20px;
}
.data-losses .ad__text {
  width: 95%;
  color: #4d4d4d;
  margin: 5px;
  line-height: 20px;
  font-size: 16px;
}
.data-losses .ad__logo {
  height: 60%;
}
.data-losses .ad__temp--yel {
  background-color: #fdeb0d;
}
.data-losses .ad__temp--blue {
  background-color: #9dcdfb;
}
.data-losses .ad__temp--yel h2 {
  color: #e94f36;
}
.data-losses .ad__temp--blue h2 {
  color: var(--dl-title-blue);
}

.data-losses .usecase__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: #6b6b6d;
  margin: 10px 0;
}
.data-losses .usecase__text p {
  text-align: left;
  display: block;
}
.data-losses .usecase__title {
  color: var(--dl-title-blue);
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.termination__content-title {
  font-size: 22px;
}
.loss-span {
  display: block;
  margin: 10px 0;
}

@media (max-width: 1150px) {
  .data-losses .termination__container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .data-losses .ad__container {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .data-losses .ad__temp {
    width: 85%;
    height: 130px;
  }
  .data-losses .ad__logo {
    height: 45%;
  }
}
@media (max-width: 1000px) {
  .data-losses .termination__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .data-losses .termination__container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .data-losses .ad__temp {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    border-radius: 5px;
  }
  .data-losses .partner__container {
    flex-direction: column;
  }
}


/* --- Archive-only additions (not present in data-losses.css) --- */

.data-losses .archive__banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid #d6c48a;
  border-left: 5px solid #c9a227;
  border-radius: 6px;
  background-color: #fdf8e6;
}

.data-losses .archive__banner i {
  margin-top: 3px;
  color: #8a6d1a;
  font-size: 1rem;
}

.data-losses .archive__banner p {
  margin: 0;
  color: var(--dl-tech-blue);
  font-size: 0.95rem;
  line-height: 1.5;
}

.data-losses .archive__banner a {
  color: var(--dl-title-blue);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .data-losses .archive__banner {
    padding: 12px 14px;
  }

  .data-losses .archive__banner a {
    white-space: normal;
  }
}