@import url("/static/sites/petroantillana/css/noticias.css");

.petro-page-body:has(.petro-news-detail) {
  margin: 0;
  padding: 0;
}

.petro-news-detail {
  --detail-green: #327a09;
  --detail-green-dark: #215706;
  --detail-text: #434244;
  --detail-muted: #777777;
  --detail-line: #dedede;
  --detail-white: #ffffff;
  --detail-shell: min(1140px, calc(100vw - 32px));
  color: var(--detail-text);
  background: var(--detail-white);
  font-family: Lato, Arial, sans-serif;
}

.petro-news-detail *,
.petro-news-detail *::before,
.petro-news-detail *::after {
  box-sizing: border-box;
}

.petro-news-detail a {
  color: inherit;
  text-decoration: none;
}

.petro-news-detail img {
  display: block;
  max-width: 100%;
  height: auto;
}

.petro-news-detail-shell {
  width: var(--detail-shell);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) 0 clamp(72px, 9vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, .92fr);
  gap: clamp(42px, 5vw, 72px);
  align-items: start;
}

.petro-news-detail-header h1 {
  margin: 0;
  color: var(--detail-text);
  font-family: Lato, Arial, sans-serif;
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 1.22;
}

.petro-news-detail-date {
  display: inline-block;
  margin-top: 14px;
  color: var(--detail-muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.petro-news-detail-divider,
.petro-news-detail-sidebar-divider {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 22px;
  margin-bottom: 30px;
  background: var(--detail-green);
}

.petro-news-detail-featured {
  width: 100%;
  border: 0;
  margin: 0 0 clamp(24px, 4vw, 34px);
}

.petro-news-detail-copy {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--detail-text);
}

.petro-news-detail-copy p {
  margin: 0 0 20px;
}

.petro-news-detail-copy ul {
  margin: 0 0 24px 1.25rem;
  padding: 0;
  display: grid;
  gap: 9px;
}

.petro-news-detail-inline-image {
  margin: 32px 0;
}

.petro-news-detail-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(30px, 4.5vw, 42px);
  padding: 22px 0;
  border-top: 1px solid var(--detail-line);
  border-bottom: 1px solid var(--detail-line);
}

.petro-news-detail-post-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  color: var(--detail-text);
  transition: color 160ms ease, transform 160ms ease;
}

.petro-news-detail-post-link:hover,
.petro-news-detail-post-link:focus-visible {
  color: var(--detail-green-dark);
  transform: translateX(-2px);
}

.petro-news-detail-post-link.is-next {
  margin-left: auto;
  text-align: right;
}

.petro-news-detail-post-arrow {
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
  color: var(--detail-green);
}

.petro-news-detail-post-copy {
  display: grid;
  gap: 4px;
}

.petro-news-detail-post-label {
  display: block;
  color: var(--detail-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.petro-news-detail-post-title {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.petro-news-detail-trending {
  padding-top: clamp(76px, 9vw, 118px);
}

.petro-news-detail-trending h2 {
  margin: 0;
  color: var(--detail-text);
  font-size: clamp(25px, 3.1vw, 34px);
  line-height: 1.2;
  font-weight: 700;
}

.petro-news-detail-trending-list {
  display: grid;
  gap: 30px;
}

.petro-news-detail.is-ready .petro-news-detail-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.petro-news-detail.is-ready .petro-news-detail-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 920px) {
  .petro-news-detail-shell {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .petro-news-detail-trending {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .petro-news-detail-shell {
    width: min(100% - 24px, 1140px);
    padding-top: 46px;
  }

  .petro-news-detail-copy {
    font-size: 15px;
    line-height: 1.7;
  }

  .petro-news-detail-post-nav {
    display: grid;
  }
}