/* ******************************** */
/*       WELCOME BANNER STYLE       */
/* ******************************** */
/* Homepage welcome banner (GENDEV-2341).
   Uses the DER theme tokens - same surface/border/radius/shadow as .metadata-block.
   Vertical spacing comes from `main .container { margin-block: var(--space-8) }`. */

.welcome-banner {
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
   transition: grid-template-rows 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

/* author display:grid would otherwise override the [hidden] attribute */
.welcome-banner[hidden] {
   display: none;
}

.welcome-banner__clip {
   min-height: 0;
}

/* collapse smoothly on dismiss */
.welcome-banner.is-hiding {
   grid-template-rows: 0fr;
   margin-block: 0;
   opacity: 0;
}

.welcome-banner.is-hiding .welcome-banner__clip {
   overflow: hidden;
}

/* Match the gap below the banner to the gap above it (header -> banner).
   The hero's own top padding would otherwise add extra space. */
.welcome-banner:not([hidden]):not(.is-hiding) ~ .hero--carousel {
   padding-top: 0;
}

.welcome-banner__inner {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: start;
   gap: var(--space-3);
   padding: var(--space-4);
   background: var(--surface-1);
   border: var(--border-1);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
}

/* Mobile first: < 768px */
.welcome-banner__title {
   margin: 0 0 var(--space-2);
   font-family: var(--font-heading);
   font-size: var(--text-md);
   line-height: 1.3;
   color: var(--text);
}

.welcome-banner__text {
   margin: 0;
   font-size: var(--text-xs);
   line-height: 1.55;
   color: var(--text-muted);
}

.welcome-banner__link {
   color: var(--link);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 0.15em;
}

.welcome-banner__link:hover,
.welcome-banner__link:focus-visible {
   color: var(--link-hover);
}

.welcome-banner__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 2.25rem;
   height: 2.25rem;
   padding: 0;
   font-size: var(--text-sm);
   color: var(--text-muted);
   background: var(--surface);
   border: var(--border-1);
   border-radius: var(--radius-button);
   cursor: pointer;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.welcome-banner__close:hover {
   color: var(--text);
   background: var(--surface-2);
}

/* Read more / Read less - only used at 479px and below */
.welcome-banner__toggle {
   display: none;
   margin-top: var(--space-1);
   padding: var(--space-1) 0;
   font: inherit;
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--link);
   background: none;
   border: 0;
   text-decoration: underline;
   text-underline-offset: 0.15em;
   cursor: pointer;
}

.welcome-banner__toggle:hover {
   color: var(--link-hover);
}

.welcome-banner__close:focus-visible,
.welcome-banner__link:focus-visible,
.welcome-banner__toggle:focus-visible {
   outline: var(--btn-focus-width, 3px) solid var(--focus);
   outline-offset: 2px;
}

@media only screen and (max-width: 479px) {
   .welcome-banner__text.is-clamped {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
   }

   .welcome-banner__toggle.is-active {
      display: inline-flex;
   }
}

/* 768px and up - unchanged from the approved desktop design */
@media only screen and (min-width: 768px) {
   .welcome-banner__inner {
      gap: var(--space-6);
      padding: var(--space-5) var(--space-6);
   }

   .welcome-banner__title {
      font-size: var(--text-xl);
   }

   .welcome-banner__text {
      font-size: var(--text-sm);
      line-height: 1.6;
   }

   .welcome-banner__close {
      width: 2.5rem;
      height: 2.5rem;
      font-size: var(--text-md);
   }
}

@media only screen and (min-width: 1024px) {
   .welcome-banner__inner {
      padding: var(--space-6) var(--space-8);
   }
}

@media (prefers-reduced-motion: reduce) {
   .welcome-banner,
   .welcome-banner__close {
      transition: none;
   }
}