/**
 * @file
 * Components: hero-card, cards, badges, meta, shared UI.
 *
 * Shared component rules from design/nellu.css.
 * Class names and selectors preserved from the approved prototypes.
 */

.hero-card {
  position: relative;
  min-width: 0;
}

/*
 * Hero — fixed editorial frame.
 * Prototype assets 800×500 and ~420px tall at half-width ≈ 8:5.
 * Crop comes from nellu_hero_* image styles; object-fit covers edge cases.
 */
.hero-card img,
.ad img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Responsive <picture> from Drupal — keep CSS targeting img inside. */
.hero-card picture {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
}

.hero-card picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.card1 picture,
.card2 picture {
  display: contents;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.overlay h2 {
  margin: 8px 0;
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  line-height: 1.35;
}

.cat {
  background: var(--red);
  color: #fff;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
}

.card1 {
  display: grid;
  grid-template-columns: 30% 70%;
  background: #fff;
  box-shadow: var(--shadow);
  min-width: 0;
}

/*
 * Card1 / news — horizontal thumb in a fixed frame.
 * Desktop: ~30% column × 120px (≈ 3:2). Mobile: 90×120 (3:4).
 * Crop from nellu_card1_* (3:2); CSS cover adapts the mobile 3:4 cell.
 */
.card1 img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.card1 div {
  padding: 12px;
  min-width: 0;
}

.card1 h4 {
  margin: 6px 0;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card2 {
  background: #fff;
  box-shadow: var(--shadow);
  min-width: 0;
}

/*
 * Card2 — vertical card image frame.
 * Design CSS used 400×220 → 20:11. Crop from nellu_card2_*.
 */
.card2 img {
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 11;
  object-fit: cover;
  display: block;
}

.card2 h4 {
  margin: 6px 0;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Views embed wrappers must not break CSS grids / flex stacks. */
.section .views-element-container,
.related-articles .views-element-container,
.stack .views-element-container,
.top50 .views-element-container,
.top70 .views-element-container,
.grid3 .views-element-container,
.grid4 .views-element-container,
.grid6 .views-element-container,
.videos .views-element-container {
  display: contents;
}

.card1__link,
.card2__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.card1__link:hover h4,
.card2__link:hover h4,
.hero-card:hover .overlay h2 {
  text-decoration: underline;
}

/* Empty image state — preserve card geometry when field_image is missing. */
.card-image-placeholder {
  display: block;
  background: #e8e8e8;
  flex-shrink: 0;
}

.card-image-placeholder--hero {
  width: 100%;
  aspect-ratio: 8 / 5;
  height: auto;
  border-radius: 12px;
}

.card-image-placeholder--card1 {
  width: 100%;
  height: 120px;
}

.card-image-placeholder--card2 {
  width: 100%;
  aspect-ratio: 20 / 11;
  height: auto;
}

.card-image-placeholder--related {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

@media (max-width: 768px) {
  .card-image-placeholder--card1 {
    width: 90px;
    height: 120px;
  }

  .card-image-placeholder--related {
    width: 90px;
    height: 90px;
    aspect-ratio: auto;
  }
}

.body {
  padding: 15px;
}

.label {
  background: #c1121f;
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
}

.section-title {
  border-left: 5px solid var(--red);
  padding-left: 10px;
  font-size: 42px;
  font-weight: 800;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  margin: 0;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 90px;
  height: 5px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 10px 0 25px;
  border-bottom: 3px solid #ddd;
  padding-bottom: 10px;
}

/* Ad banner in section header — centered on all breakpoints */
.section-header:has(.advertisement),
.section-header:has(.advt-brd) {
  justify-content: center;
  align-items: center;
  border-bottom: none;
  padding-bottom: 0;
}

/* Full-width centered advertisement blocks (between / inside sections) */
.advertisement {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  text-align: center;
  box-sizing: border-box;
}

.advertisement--between {
  margin: 8px auto 32px;
  padding: 0 12px;
  max-width: 1400px;
}

.section-header .advertisement {
  margin: 0;
}

.advertisement a {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.advertisement img,
.advt-brd {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Media field wrappers from nellu_ads should not add spacing. */
.advertisement .field,
.advertisement .field__item,
.advertisement__inner,
.advertisement__link {
  display: block;
  margin: 0;
  max-width: 100%;
  line-height: 0;
}

.advertisement picture,
.advertisement__link picture {
  display: block;
  max-width: 100%;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .advertisement {
    margin: 16px 0;
  }

  .advertisement--between {
    margin: 8px auto 24px;
    padding: 0 12px;
  }
}

.view-all {
  text-decoration: none;
  color: #c1121f;
  font-weight: 700;
}

.video {
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 12px;
}

/*
 * Homepage Interviews — Article cards in the existing .videos 3-col grid.
 * Image framed 16:9; text overlaid via shared .overlay (same gradient as hero-card).
 * Media uses nellu_card2 responsive styles — pipeline unchanged.
 */
.interview-card {
  position: relative;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
}

.interview-card__link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.interview-card__link:hover .interview-card__title {
  text-decoration: underline;
}

.interview-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.interview-card picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.interview-card picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.card-image-placeholder--interview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.interview-card .overlay {
  padding: 16px;
}

.interview-card__title {
  margin: 0 0 6px;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.35;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.interview-card__lead {
  margin: 0 0 6px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.interview-card__date {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 992px) {
  .section-title {
    font-size: 32px;
    letter-spacing: 1px;
  }

  .overlay {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 26px;
    letter-spacing: 1px;
  }

  .section-title::after {
    bottom: -11px;
    width: 70px;
    height: 4px;
  }

  .card1 {
    grid-template-columns: 90px 1fr;
  }

  .card1 img {
    width: 90px;
    height: 120px;
    max-width: none;
  }

  .overlay {
    padding: 14px;
  }
}

/* —— Column homepage cards —— */
.column-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  background: #fff;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow: hidden;
}

.column-card__image {
  display: block;
  width: 100%;
}

.column-card__image img,
.column-card__image picture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 11;
  object-fit: cover;
}

.column-card__image picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.card-image-placeholder--column {
  width: 100%;
  aspect-ratio: 20 / 11;
  height: auto;
  background: #e8e8e8;
}

.column-card__overlay {
  padding: 12px 14px 14px;
}

.column-card__overlay h2 {
  margin: 8px 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.35;
}


.column-card__meta {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.4;
}

.column-card:hover .column-card__overlay h2 {
  text-decoration: underline;
}
.column-card__overlay h4 {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
  height: auto;
}

/* Hero slot in Columns top50 — same overlay treatment as .hero-card.
 * Views wrap the card in .views-element-container (display:contents for layout
 * only; DOM child selectors still need that wrapper). */
.top50 > .views-element-container .column-card {
  border-radius: 12px;
  overflow: hidden;
}

.top50 > .views-element-container .column-card .column-card__image {
  display: block;
  width: 100%;
}

.top50 > .views-element-container .column-card .column-card__image img,
.top50 > .views-element-container .column-card .column-card__image picture {
  aspect-ratio: 8 / 5;
  border-radius: 12px;
}

.top50 > .views-element-container .column-card .card-image-placeholder--column {
  aspect-ratio: 8 / 5;
  border-radius: 12px;
}

.top50 > .views-element-container .column-card .column-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.top50 > .views-element-container .column-card .column-card__overlay h2 {
  color: #fff;
  margin: 8px 0;
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
}

.top50 > .views-element-container .column-card .column-card__meta {
  color: #fff;
}

@media (max-width: 992px) {
  .top50 > .views-element-container .column-card .column-card__overlay {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .top50 > .views-element-container .column-card .column-card__overlay {
    padding: 14px;
  }
}

/* Stack: horizontal thumb + text (card1-like) */
.stack .column-card {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: stretch;
}

.stack .column-card__image img,
.stack .column-card__image picture,
.stack .column-card .card-image-placeholder--column {
  aspect-ratio: auto;
  height: 120px;
  object-fit: cover;
}

.stack .column-card__image picture img {
  height: 120px;
}

.stack .column-card__overlay {
  padding: 12px;
}

.stack .column-card__overlay h2 {
  font-size: 1rem;
  margin: 6px 0;
}

/*
 * Columns only: with 2 stack cards, stretch the stack to the hero height and
 * give both cards equal share. Most Recent still uses 3 fixed-height stack cards.
 */
.section--columns .top50 {
  align-items: stretch;
}

.section--columns .stack {
  height: 100%;
  align-self: stretch;
}

.section--columns .stack .column-card {
  flex: 1 1 0;
  min-height: 0;
}

.section--columns .stack .column-card__image {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.section--columns .stack .column-card__image img,
.section--columns .stack .column-card__image picture,
.section--columns .stack .column-card__image picture img,
.section--columns .stack .column-card .card-image-placeholder--column {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (max-width: 992px) {
  .section--columns .stack {
    height: auto;
  }

  .section--columns .stack .column-card {
    flex: 0 0 auto;
  }

  .section--columns .stack .column-card__image img,
  .section--columns .stack .column-card__image picture,
  .section--columns .stack .column-card__image picture img,
  .section--columns .stack .column-card .card-image-placeholder--column {
    height: 120px;
  }
}

@media (max-width: 768px) {
  .stack .column-card {
    grid-template-columns: 90px 1fr;
  }

  .stack .column-card__image img,
  .stack .column-card__image picture,
  .stack .column-card__image picture img,
  .stack .column-card .card-image-placeholder--column {
    width: 90px;
    height: 120px;
    max-width: none;
  }
}