/**
 * @file
 * News view and teaser card styles.
 *
 * Layout: first 2 items in a 2-column row, next 3 in a 3-column row.
 * Uses CSS grid on the view container.
 */


/* ========================================================================
   News grid
   ======================================================================== */

.block-views-blocknews-block-1 {
  max-width: var(--layout-width);
  margin: var(--block-spacing) auto 0 auto;
  padding: 0 var(--block-padding);
}

/* Keep the block itself as the positioning context for the absolutely
   placed .more-link. When logged in, Drupal adds .contextual-region to
   the block, and blocks.css's `.views-element-container.contextual-region
   { position: static }` would otherwise win and strand the .more-link
   relative to the viewport. 3-class selector wins by specificity. */
.block-views-blocknews-block-1.views-element-container.contextual-region {
  position: relative;
}

/* Grid container: scoped to news view block only */
.block-views-blocknews-block-1 [class*="js-view-dom-id-"] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
}

/* First 2 items: span 3 columns each (= 50%) */
.news-row:nth-child(-n+2 of .news-row) {
  grid-column: span 3;
}

/* Items 3–5: span 2 columns each (= 33%) */
.news-row:nth-child(n+3 of .news-row) {
  grid-column: span 2;
}

/* More-link: full width */
.block-views-blocknews-block-1 [class*="js-view-dom-id-"] > .more-link {
  grid-column: 1 / -1;
}

.view--news .more-link {
    left: 9.3rem;
}

.news-full__title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-catch);
    line-height: var(--line-height-catch);
    margin: .3rem;
}

.news-full__teaser {
    max-width: var(--layout-width-xsmall);
    margin: var(--block-padding) auto;
    text-align: center;
    font-size: var(--font-size-standard);
    line-height: var(--line-height-standard);
}

/* ========================================================================
   Responsive: stack on mobile
   ======================================================================== */

@media (max-width: 767px) {
  .block-views-blocknews-block-1 [class*="js-view-dom-id-"] {
    grid-template-columns: 1fr;
  }

  .news-row:nth-child(-n+2 of .news-row),
  .news-row:nth-child(n+3 of .news-row) {
    grid-column: span 1;
  }

  /* Items 2+: stack vertically (image full width, text below) */
  .news-row:nth-child(n+2 of .news-row) .node--type-news.node--view-mode-teaser {
    flex-direction: column;
  }

  .news-row:nth-child(n+2 of .news-row) .news-teaser__image {
    flex: none;
    max-width: 100%;
  }

  .news-row:nth-child(n+2 of .news-row) .news-teaser__content {
    flex: none;
    padding: 1rem 0 0 0;
  }

  .news-row:nth-child(n+2 of .news-row) .news-teaser__title {
    font-size: var(--font-size-section-header);
    line-height: var(--line-height-section-header);
  }

  .news-row:nth-child(n+2 of .news-row) .news-teaser__body {
    font-size: var(--font-size-expand);
    line-height: var(--line-height-expand);
  }
  .view--news .more-link {
    left: 6.7rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .block-views-blocknews-block-1 [class*="js-view-dom-id-"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-row:nth-child(-n+2),
  .news-row:nth-child(n+3) {
    grid-column: span 1;
  }
}

/* ========================================================================
   News View Page — Grid layout
   ======================================================================== */

.view--news.view--display-page-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.view--news.view--display-page-1 > nav,
.view--news.view--display-page-1 > .feed-icon {
  grid-column: 1 / -1;
}

.view--news.view--display-page-1 .views-row {
  min-width: 0;
}

.path-news .container {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 1rem;
} 

@media (max-width: 1023px) {
  .view--news.view--display-page-1 { 
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 599px) {
  .view--news.view--display-page-1 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ========================================================================
   News teaser card
   ======================================================================== */

.node--type-news.node--view-mode-teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image */
.node--type-news.node--view-mode-teaser .news-teaser__image {
  overflow: hidden;
  line-height: 0;
}

.node--type-news.node--view-mode-teaser .news-teaser__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--border-radius);
  border: 1px solid black;
}

/* Content area (title + body) */
.node--type-news.node--view-mode-teaser .news-teaser__content {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title */
.node--type-news.node--view-mode-teaser .news-teaser__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-standard);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--line-height-standard);
  margin: 0 0 0.5rem;
}

.node--type-news.node--view-mode-teaser .news-teaser__title a {
  color: var(--color-text);
  text-decoration: none;
}

.node--type-news.node--view-mode-teaser .news-teaser__title a:hover {
  text-decoration: underline;
}

/* Body / teaser text */
.node--type-news.node--view-mode-teaser .news-teaser__body {
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
  color: var(--color-text);
}

.node--type-news.node--view-mode-teaser .news-teaser__body p {
  margin: 0;
  line-height: var(--line-height-standard);
}

/* ========================================================================
   News detail (full node view)
   ======================================================================== */

.page-node-type-news #main-content .container {
    max-width: var(--layout-width-small);
    margin: 0 auto;
    padding: 0 var(--block-padding);
}

/* Page title — scoped via body class that Drupal adds automatically */
.page-node-type-news .block-page-title-block {
  margin-bottom: 1.5rem;
}

.page-node-type-news .block-page-title-block h1 {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-catch);
  line-height: var(--line-height-catch);
  color: var(--color-text);
  margin: 0;
}

/* Article wrapper */
.node--type-news.node--view-mode-full {
  margin-bottom: 3rem;
}

/* Hero / header image */
.node--type-news.node--view-mode-full .field--name-field-image-video {
  max-width: var(--layout-width-xsmall);
  margin: 3rem auto;
}

.node--type-news.node--view-mode-full .field--name-field-image-video img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  border: 1px solid black;
}

/* ========================================================================
   News detail — body content typography
   ======================================================================== */

.node--type-news.node--view-mode-full .field--name-body {
  font-family: var(--font-body);
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
  color: var(--color-text);
  max-width: calc(var(--layout-width-xsmall) - 6rem);
  margin: 0 auto;
}

/* -> On mobile allow wider */
@media (max-width: 767px) {
  .node--type-news.node--view-mode-full .field--name-body {
    max-width: calc(var(--layout-width-xsmall));
  }
}

.node--type-news div.button {
  margin: 2rem 0;
}

.node--type-news.node--view-mode-full .field--name-body p {
  margin: 0 0 1.25rem;
}

.node--type-news.node--view-mode-full .field--name-body ul,
.node--type-news.node--view-mode-full .field--name-body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}

.node--type-news.node--view-mode-full .field--name-body li {
  margin-bottom: 0.5rem;
}




.node--type-news.node--view-mode-full .field--name-body strong {
  font-weight: 700;
}

.node--type-news.node--view-mode-full .field--name-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-grey-dark);
  font-style: italic;
  color: var(--color-grey-dark);
}



/* Tables */
.node--type-news.node--view-mode-full .field--name-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
}

.node--type-news.node--view-mode-full .field--name-body th,
.node--type-news.node--view-mode-full .field--name-body td {
  padding: 0.5rem 0.75rem;
  /* WHAT FOR?! */
  /* border-bottom: 1px solid var(--color-grey-light); */
  text-align: left;
}

.node--type-news.node--view-mode-full .field--name-body th {
  font-weight: 700;
}

/* ========================================================================
   News detail — Responsive
   ======================================================================== */

@media (max-width: 767px) {
  .page-node-type-news .block-page-title-block h1 {
    font-size: var(--font-size-standard);
    line-height: var(--line-height-standard);
  }

  /* .node--type-news.node--view-mode-full .field--name-body {
    font-size: var(--font-size-expand);
    line-height: var(--line-height-expand);
  } */

  .node--type-news.node--view-mode-full .field--name-body h2 {
    font-size: var(--font-size-menu-item);
    line-height: var(--line-height-menu-item);
  }

  .node--type-news.node--view-mode-full .field--name-body h3 {
    font-size: var(--font-size-menu-item);
    line-height: var(--line-height-menu-item);
  }

  .node--type-news.node--view-mode-full .field--name-body .button a {
    display: block;
    text-align: center;
  }
}

/* ========================================================================
  Connected Session & User
   ======================================================================== */

/* Reponsive */

.node--type-news.node--view-mode-full .field--name-field-session {
  max-width: calc(var(--layout-width-xsmall) - 6rem);
  margin: 0 auto;
}

@media (max-width: 767px) {
  .node--type-news.node--view-mode-full .field--name-field-session {
    max-width: calc(var(--layout-width-xsmall));
  }
}

.node--type-news.node--view-mode-full .field--name-field-user {
  max-width: calc(var(--layout-width-xsmall) - 6rem);
  margin: 0 auto;
}

@media (max-width: 767px) {
  .node--type-news.node--view-mode-full .field--name-field-user {
    max-width: calc(var(--layout-width-xsmall));
  }
}

/* User img smaller */
.node--type-news.node--view-mode-full .field--name-field-user img {
  max-width: 300px;
}

@media (max-width: 767px) {
  .node--type-news.node--view-mode-full .field--name-field-user img {
    max-width: 150px;
  }
}