/* article.html "Article / opening" + "Article / lead image": 96px top, 24px rhythm, 48px bottom. */
.tc-w-ahero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding-top: 96px;
  padding-bottom: 48px;
}

.tc-w-ahero__kicker,
.tc-w-ahero__title,
.tc-w-ahero__text {
  margin: 0;
}

.tc-w-ahero__text {
  max-width: 888px;
}

.tc-w-ahero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.tc-w-ahero__detail {
  width: 204px;
  min-width: 0;
}

.tc-w-ahero__label,
.tc-w-ahero__value {
  margin: 0;
}

.tc-w-ahero__label a,
.tc-w-ahero__value a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: inherit;
}

/* The design sits the image 48px under the back link: 24px gap + 24px here. */
.tc-w-ahero__figure {
  margin: 24px 0 0;
}

.tc-w-ahero__media {
  position: relative;
  height: 672px;
  overflow: hidden;
  background-color: #c7c7c7;
}

.tc-w-ahero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tc-w-ahero__caption {
  margin: 8px 0 0;
}


/* Tablet and mobile layouts for this widget. */
@media (max-width: 900px) {
  .tc-w-ahero { padding-top: 112px; padding-bottom: 40px; }
}
@media (max-width: 600px) {
  .tc-w-ahero { padding-top: 96px; gap: 20px; }

  .tc-w-ahero__meta { gap: 16px; }

  .tc-w-ahero__figure { margin-top: 12px; }
}

/* Elementor mobile: one full-width column so a category stays on one line.
   Desktop headline breaks are hidden so the title wraps on its own. */
@media (max-width: 767px) {
  body .elementor-widget-tc-article-hero .tc-w-ahero__detail {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
  }

  .tc-w-ahero__title br {
    display: none;
  }
}