/* MOSLUBE homepage news presentation. Keep every rule scoped to the homepage module. */
.mos-home-news[data-site="01-lubricant"] {
  --mos-home-news-accent: #f0a500;
  --mos-home-news-accent-dark: #8a5b00;
  --mos-home-news-ink: #201f1c;
  --mos-home-news-line: #e5e1da;
  --mos-home-news-shadow: 0 10px 30px rgb(31 26 18 / 7%);
  background: #fff;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-title {
  margin-top: 0;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-top: 2rem;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card:first-child,
.mos-home-news[data-site="01-lubricant"] .mos-cms-card:nth-child(2),
.mos-home-news[data-site="01-lubricant"] .mos-cms-card:nth-child(3) {
  grid-column: auto;
  grid-row: auto;
  display: flex;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card {
  border: 1px solid var(--mos-home-news-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mos-home-news-shadow);
  transition:
    transform 260ms cubic-bezier(.2, .7, .2, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card > a:first-child {
  overflow: hidden;
  background: #f4f2ee;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card:first-child > a:first-child,
.mos-home-news[data-site="01-lubricant"] .mos-cms-card:nth-child(2) > a:first-child,
.mos-home-news[data-site="01-lubricant"] .mos-cms-card:nth-child(3) > a:first-child {
  height: auto;
  aspect-ratio: 16 / 9;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card img {
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card-content,
.mos-home-news[data-site="01-lubricant"] .mos-cms-card:first-child .mos-cms-card-content {
  padding: 1.25rem;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card h2,
.mos-home-news[data-site="01-lubricant"] .mos-cms-card:first-child h2 {
  max-width: none;
  font-size: 1.2rem;
  line-height: 1.25;
  transition: color 200ms ease;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-card:first-child p {
  max-width: none;
  font-size: .9rem;
  -webkit-line-clamp: 2;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-button,
.mos-home-news[data-site="01-lubricant"] .mos-cms-card .mos-cms-button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .5rem;
  min-height: 2.5rem;
  margin-top: 1.25rem;
  padding: .68rem 1rem;
  border: 1px solid var(--mos-home-news-accent);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: var(--mos-home-news-accent-dark) !important;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 200ms ease,
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.mos-home-news[data-site="01-lubricant"] .mos-cms-button::after {
  content: "\2192";
  transition: transform 200ms ease;
}

.mos-home-news[data-site="01-lubricant"] > .mos-cms-container > p .mos-cms-button {
  margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .mos-home-news[data-site="01-lubricant"] .mos-cms-card:hover {
    z-index: 1;
    border-color: rgb(240 165 0 / 65%);
    box-shadow: 0 18px 42px rgb(31 26 18 / 14%);
    transform: translateY(-6px);
  }

  .mos-home-news[data-site="01-lubricant"] .mos-cms-card:hover img {
    transform: scale(1.035);
  }

  .mos-home-news[data-site="01-lubricant"] .mos-cms-card:hover h2 {
    color: var(--mos-home-news-accent-dark);
  }

  .mos-home-news[data-site="01-lubricant"] .mos-cms-button:hover {
    border-color: var(--mos-home-news-accent);
    background: var(--mos-home-news-accent);
    box-shadow: 0 8px 18px rgb(240 165 0 / 24%);
    color: var(--mos-home-news-ink) !important;
    transform: translateY(-2px);
  }

  .mos-home-news[data-site="01-lubricant"] .mos-cms-button:hover::after {
    transform: translateX(3px);
  }
}

@media (max-width: 63.999rem) {
  .mos-home-news[data-site="01-lubricant"] .mos-cms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 43.75rem) {
  .mos-home-news[data-site="01-lubricant"] .mos-cms-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mos-home-news[data-site="01-lubricant"] .mos-cms-card,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-card img,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-card h2,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-button,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-button::after {
    transition: none;
  }

  .mos-home-news[data-site="01-lubricant"] .mos-cms-card:hover,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-card:hover img,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-button:hover,
  .mos-home-news[data-site="01-lubricant"] .mos-cms-button:hover::after {
    transform: none;
  }
}