/**
 * @file
 * Frontpage-spezifisches Styling
 */

/* ==========================================================================
   Frontpage View Container
   ========================================================================== */

.view-frontpage {
  margin-top: var(--nn-space-xl);
}

.view-frontpage .views-row {
  margin-bottom: var(--nn-space-xl);
  padding-bottom: var(--nn-space-xl);
  border-bottom: 1px solid var(--nn-secondary-dark);
}

.view-frontpage .views-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   Node Titel auf der Frontpage (h2) - wie h3
   ========================================================================== */

.view-frontpage .node__title {
  font-size: var(--nn-font-size-xl);
  font-weight: var(--nn-font-weight-semibold);
  color: var(--nn-primary);
  margin: 0 0 var(--nn-space-md) 0;
  padding-bottom: var(--nn-space-sm);
  border-bottom: 2px solid var(--nn-secondary-dark);
  line-height: 1.25;
}

.view-frontpage .node__title a {
  color: var(--nn-primary);
  text-decoration: none;
}

.view-frontpage .node__title a:hover {
  color: var(--nn-primary-light);
  text-decoration: none;
}

/* ==========================================================================
   Sidebar Elemente (Wetter, Anschrift, Buttons)
   ========================================================================== */

/* Sidebar Container - beiger Hintergrund wie unit-Seiten */
.view-frontpage .col-lg-3 {
  background-color: var(--nn-secondary-light);
  border-radius: var(--nn-radius);
  padding: var(--nn-space-md);
  border: 1px solid var(--nn-secondary-dark);
  box-shadow: var(--nn-shadow-sm);
  height: fit-content;
}

/* Alle Sidebar-Blöcke: kein eigener Hintergrund */
.view-frontpage .col-lg-3 .block {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Sidebar Überschriften - wie field__label mit Trennlinie */
.view-frontpage .col-lg-3 .block h2 {
  font-size: var(--nn-font-size-sm);
  font-weight: var(--nn-font-weight-semibold);
  color: var(--nn-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--nn-space-sm) 0;
  padding-bottom: var(--nn-space-sm);
  border-bottom: 2px solid var(--nn-secondary-dark);
}

/* Anschrift Felder */
.view-frontpage .block-field-blocknodepropertyfield-street,
.view-frontpage .block-field-blocknodepropertyfield-city {
  margin-bottom: 0 !important;
}

.view-frontpage .block-field-blocknodepropertyfield-street .field__item,
.view-frontpage .block-field-blocknodepropertyfield-city .field__item {
  font-size: var(--nn-font-size-base);
  color: var(--nn-text);
  line-height: 1.2;
  margin-bottom: 0;
}

/* Abstand zwischen Anschrift und Buttons */
.view-frontpage .col-lg-3 .block-field-blocknodepropertyfield-city {
  margin-bottom: var(--nn-space-md) !important;
}

/* Button Blöcke in der Sidebar */
.view-frontpage .col-lg-3 .block-content-basic {
  margin-bottom: var(--nn-space-sm) !important;
}

.view-frontpage .col-lg-3 .block-content-basic:last-child {
  margin-bottom: 0 !important;
}

.view-frontpage .col-lg-3 .block-content-basic .btn {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

.view-frontpage .col-lg-3 .block-content-basic p {
  margin-bottom: 0;
}

/* Wetter-Widget Container */
.view-frontpage .col-lg-3 iframe {
  border-radius: var(--nn-radius-sm);
  max-width: 100%;
}

/* ==========================================================================
   Content Bereich - einheitliches Schriftbild
   ========================================================================== */

.view-frontpage .node__content {
  margin-top: var(--nn-space-md);
}

.view-frontpage .node__content .text-formatted,
.view-frontpage .node__content p,
.view-frontpage .node__content .field__item {
  font-size: var(--nn-font-size-base);
  line-height: var(--nn-line-height-relaxed);
  color: var(--nn-text);
}

.view-frontpage .node__content ul {
  margin: var(--nn-space-md) 0;
  padding-left: var(--nn-space-lg);
}

.view-frontpage .node__content li {
  margin-bottom: var(--nn-space-sm);
  font-size: var(--nn-font-size-base);
  line-height: var(--nn-line-height-relaxed);
  color: var(--nn-text);
}

/* Beide Node-Typen: gleiche Typografie */
.view-frontpage .node--type-page .text-formatted,
.view-frontpage .node--type-property .text-formatted,
.view-frontpage .node--type-page .field__item,
.view-frontpage .node--type-property .field__item,
.view-frontpage .node--type-page p,
.view-frontpage .node--type-property p {
  font-family: var(--nn-font-family) !important;
  font-size: var(--nn-font-size-base) !important;
  font-style: normal !important;
  font-weight: var(--nn-font-weight-normal) !important;
  line-height: var(--nn-line-height-relaxed) !important;
  color: var(--nn-text) !important;
}

/* ==========================================================================
   Page Title Block - Abstand zum Header
   ========================================================================== */

.path-frontpage .block-page-title-block {
  margin-top: var(--nn-space-lg);
}

/* ==========================================================================
   Slideshow Block auf Frontpage
   ========================================================================== */

.path-frontpage .block-views-blockfrontpage-gallerie-frontpage-slideshow {
  margin-bottom: var(--nn-space-xl);
}

/* ==========================================================================
   Responsive Anpassungen
   ========================================================================== */

@media (max-width: 991px) {
  .view-frontpage .col-lg-3 {
    margin-top: var(--nn-space-lg);
  }
  
  .view-frontpage .col-lg-3 .block-content-basic .btn {
    width: auto;
    display: inline-block;
    margin-right: var(--nn-space-sm);
  }
}

@media (max-width: 767px) {
  .path-frontpage .block-page-title-block .title {
    font-size: var(--nn-font-size-xxl);
    text-align: left;
  }
  
  .view-frontpage .node__title {
    font-size: var(--nn-font-size-xl);
  }
}