/**
 * GreenTogether Widgets — Styles
 *
 * Bruger CSS custom properties fra greentogether-child theme.
 * Signatur-form: afrundet top-left + bottom-right, skarpe top-right + bottom-left.
 *
 * Organiseret: Hero → CTA Banner → Category Cards → News Grid →
 *              Short News → Content Block → Social Feed
 */


/* ==========================================================================
   HERO GREEN TOGETHER
   ========================================================================== */

.gt-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gt-hero-min-h, 85vh);
  overflow: hidden;
  text-align: var(--gt-hero-align, center);
}

.gt-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.gt-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, calc(var(--gt-hero-overlay, 0.4) * 0.6)) 0%,
    rgba(0, 0, 0, var(--gt-hero-overlay, 0.4)) 100%
  );
  z-index: 1;
}

.gt-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--gt-content-narrow);
  padding-block: var(--gt-space-2xl);
}

.gt-hero__subtitle {
  display: inline-block;
  font-family: var(--gt-font-heading);
  font-size: var(--gt-fs-label);
  font-weight: var(--gt-fw-semi);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gt-color-primary-subtle);
  margin-bottom: var(--gt-space-sm);
}

.gt-hero__heading {
  font-size: var(--gt-fs-hero);
  font-weight: var(--gt-fw-bold);
  color: var(--gt-color-text-on-dark);
  margin-bottom: var(--gt-space-md);
  line-height: var(--gt-lh-tight);
}

.gt-hero__description {
  font-size: var(--gt-fs-body-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--gt-lh-loose);
  margin-bottom: var(--gt-space-lg);
  max-width: 40ch;
  margin-inline: auto;
}

.gt-hero__cta {
  font-size: var(--gt-fs-body-lg);
  padding: var(--gt-space-sm) var(--gt-space-lg);
}

.gt-hero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
}

.gt-hero__wave svg {
  width: 100%;
  height: clamp(3rem, 6vw, 7rem);
}


/* ==========================================================================
   CTA BANNER GREEN TOGETHER
   ========================================================================== */

.gt-cta-banner {
  padding-block: var(--gt-space-xl);
  text-align: center;
}

.gt-cta-banner__inner {
  max-width: var(--gt-content-narrow);
}

.gt-cta-banner__heading {
  font-size: var(--gt-fs-h2);
  margin-bottom: var(--gt-space-sm);
}

.gt-cta-banner__text {
  font-size: var(--gt-fs-body-lg);
  line-height: var(--gt-lh-normal);
  margin-bottom: var(--gt-space-md);
}

.gt-cta-banner--green {
  background-color: var(--gt-color-primary);
}

.gt-cta-banner--green .gt-cta-banner__heading,
.gt-cta-banner--green .gt-cta-banner__text {
  color: var(--gt-color-text-on-dark);
}

.gt-cta-banner--blue {
  background-color: var(--gt-color-secondary);
}

.gt-cta-banner--blue .gt-cta-banner__heading,
.gt-cta-banner--blue .gt-cta-banner__text {
  color: var(--gt-color-text-on-dark);
}

.gt-cta-banner--light {
  background-color: var(--gt-color-bg-soft);
}

.gt-cta-banner--light .gt-cta-banner__heading {
  color: var(--gt-color-primary);
}

.gt-cta-banner--light .gt-cta-banner__text {
  color: var(--gt-color-text-light);
}

.gt-btn--on-dark {
  color: var(--gt-color-text-on-dark);
  border-color: var(--gt-color-text-on-dark);
}

.gt-btn--on-dark:hover {
  background-color: var(--gt-color-text-on-dark);
  color: var(--gt-color-primary);
}


/* ==========================================================================
   CATEGORY CARDS GREEN TOGETHER
   ========================================================================== */

.gt-catcards {
  padding-block: var(--gt-space-xl);
}

.gt-catcards__heading {
  font-size: var(--gt-fs-h2);
  color: var(--gt-color-primary);
  margin-bottom: var(--gt-space-lg);
  text-align: center;
}

.gt-catcards__grid {
  display: grid;
  grid-template-columns: repeat(var(--gt-catcards-cols, 3), 1fr);
  gap: var(--gt-space-md);
}

.gt-catcards__card {
  display: flex;
  flex-direction: column;
  background: var(--gt-color-bg);
  border-radius: var(--gt-radius-signature-lg);
  overflow: hidden;
  box-shadow: var(--gt-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--gt-transition-normal),
    transform var(--gt-transition-normal);
}

.gt-catcards__card:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-3px);
  color: inherit;
}

.gt-catcards__img-wrap {
  overflow: hidden;
}

.gt-catcards__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--gt-transition-slow);
}

.gt-catcards__card:hover .gt-catcards__img {
  transform: scale(1.04);
}

.gt-catcards__body {
  padding: var(--gt-space-md);
  flex: 1;
}

.gt-catcards__title {
  font-size: var(--gt-fs-h4);
  font-weight: var(--gt-fw-semi);
  color: var(--gt-color-primary);
  margin-bottom: var(--gt-space-xs);
}

.gt-catcards__text {
  font-size: var(--gt-fs-body);
  color: var(--gt-color-text-light);
  line-height: var(--gt-lh-normal);
}

/* Overlay-variant */
.gt-catcards__card--image-overlay {
  position: relative;
}

.gt-catcards__card--image-overlay .gt-catcards__img-wrap {
  position: absolute;
  inset: 0;
}

.gt-catcards__card--image-overlay .gt-catcards__img {
  height: 100%;
  aspect-ratio: auto;
}

.gt-catcards__card--image-overlay .gt-catcards__body {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  margin-top: auto;
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gt-catcards__card--image-overlay .gt-catcards__title,
.gt-catcards__card--image-overlay .gt-catcards__text {
  color: var(--gt-color-text-on-dark);
}

@media (max-width: 767px) {
  .gt-catcards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gt-catcards__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   NEWS GRID GREEN TOGETHER
   ========================================================================== */

.gt-newsgrid {
  padding-block: var(--gt-space-xl);
}

.gt-newsgrid__heading {
  font-size: var(--gt-fs-h2);
  color: var(--gt-color-primary);
  margin-bottom: var(--gt-space-lg);
}

.gt-newsgrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--gt-newsgrid-cols, 3), 1fr);
  gap: var(--gt-space-md);
}

.gt-newsgrid__card {
  display: flex;
  flex-direction: column;
  background: var(--gt-color-bg);
  border-radius: var(--gt-radius-signature-lg);
  overflow: hidden;
  box-shadow: var(--gt-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--gt-transition-normal),
    transform var(--gt-transition-normal);
}

.gt-newsgrid__card:hover {
  box-shadow: var(--gt-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.gt-newsgrid__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.gt-newsgrid__body {
  padding: var(--gt-space-md);
  flex: 1;
}

.gt-newsgrid__date {
  display: block;
  font-size: var(--gt-fs-small);
  color: var(--gt-color-text-muted);
  margin-bottom: var(--gt-space-2xs);
}

.gt-newsgrid__title {
  font-size: var(--gt-fs-h4);
  font-weight: var(--gt-fw-semi);
  margin-bottom: var(--gt-space-xs);
  color: var(--gt-color-text);
}

.gt-newsgrid__excerpt {
  font-size: var(--gt-fs-body);
  color: var(--gt-color-text-light);
  line-height: var(--gt-lh-normal);
}

@media (max-width: 767px) {
  .gt-newsgrid__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   SHORT NEWS GREEN TOGETHER
   ========================================================================== */

.gt-shortnews {
  padding-block: var(--gt-space-xl);
}

.gt-shortnews__heading {
  font-size: var(--gt-fs-h2);
  color: var(--gt-color-primary);
  margin-bottom: var(--gt-space-md);
}

.gt-shortnews__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gt-shortnews__item {
  border-bottom: 1px solid var(--gt-color-border-light);
}

.gt-shortnews__item:last-child {
  border-bottom: none;
}

.gt-shortnews__link {
  display: block;
  padding: var(--gt-space-md) var(--gt-space-sm);
  text-decoration: none;
  color: inherit;
  border-radius: var(--gt-radius-signature-sm);
  transition: background-color var(--gt-transition-fast);
}

a.gt-shortnews__link:hover {
  background-color: var(--gt-color-bg-soft);
  color: inherit;
}

.gt-shortnews__date {
  display: block;
  font-size: var(--gt-fs-small);
  color: var(--gt-color-text-muted);
  margin-bottom: var(--gt-space-2xs);
}

.gt-shortnews__title {
  font-size: var(--gt-fs-h4);
  font-weight: var(--gt-fw-semi);
  margin-bottom: var(--gt-space-2xs);
}

.gt-shortnews__text {
  font-size: var(--gt-fs-body);
  color: var(--gt-color-text-light);
  line-height: var(--gt-lh-normal);
}


/* ==========================================================================
   CONTENT BLOCK GREEN TOGETHER
   ========================================================================== */

.gt-contentblock {
  padding-block: var(--gt-space-lg);
}

.gt-contentblock--top .gt-contentblock__media {
  margin-bottom: var(--gt-space-md);
}

.gt-contentblock--left,
.gt-contentblock--right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gt-space-lg);
  align-items: start;
}

.gt-contentblock--right .gt-contentblock__media {
  order: 2;
}

/* Billede — signatur-form */
.gt-contentblock__img {
  width: 100%;
  border-radius: var(--gt-radius-signature-lg);
  object-fit: cover;
}

.gt-contentblock__heading {
  font-size: var(--gt-fs-h2);
  color: var(--gt-color-primary);
  margin-bottom: var(--gt-space-xs);
}

.gt-contentblock__subtitle {
  font-size: var(--gt-fs-body-lg);
  color: var(--gt-color-text-light);
  font-weight: var(--gt-fw-medium);
  margin-bottom: var(--gt-space-md);
}

.gt-contentblock__body {
  font-size: var(--gt-fs-body);
  line-height: var(--gt-lh-normal);
  margin-bottom: var(--gt-space-md);
}

.gt-contentblock__ref {
  display: inline-block;
  font-size: var(--gt-fs-body);
  color: var(--gt-color-primary);
  font-weight: var(--gt-fw-medium);
  margin-bottom: var(--gt-space-md);
  transition: color var(--gt-transition-fast);
}

.gt-contentblock__ref:hover {
  color: var(--gt-color-primary-dark);
}

.gt-contentblock__cta {
  display: inline-flex;
}

@media (max-width: 767px) {
  .gt-contentblock--left,
  .gt-contentblock--right {
    grid-template-columns: 1fr;
  }

  .gt-contentblock--right .gt-contentblock__media {
    order: 0;
  }
}


/* ==========================================================================
   SOCIAL FEED GREEN TOGETHER
   ========================================================================== */

.gt-socialfeed {
  padding-block: var(--gt-space-xl);
}

.gt-socialfeed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gt-space-lg);
  align-items: start;
}

.gt-socialfeed__block {
  background: var(--gt-color-bg-soft);
  border-radius: var(--gt-radius-signature-lg);
  padding: var(--gt-space-lg);
}

.gt-socialfeed__heading {
  font-size: var(--gt-fs-h3);
  color: var(--gt-color-primary);
  margin-bottom: var(--gt-space-md);
}

.gt-socialfeed__text {
  font-size: var(--gt-fs-body);
  color: var(--gt-color-text-light);
  line-height: var(--gt-lh-normal);
  margin-bottom: var(--gt-space-md);
}

.gt-socialfeed__btn {
  gap: var(--gt-space-xs);
}

.gt-socialfeed__icon {
  flex-shrink: 0;
}

.gt-socialfeed__placeholder {
  padding: var(--gt-space-lg);
  text-align: center;
  color: var(--gt-color-text-muted);
  background: var(--gt-color-bg);
  border-radius: var(--gt-radius-signature);
}

@media (max-width: 767px) {
  .gt-socialfeed__grid {
    grid-template-columns: 1fr;
  }
}