/* KG Rüthen homepage. Colours come from the Kadence palette set in functions.php:
   1 red · 2 dark red · 3 ink · 8 paper · 9 white · 10 gold · 11 green · 12 navy · 14 pink */

.kg-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.kg-confetti {
  background-image:
    radial-gradient(circle at 12% 18%, var(--global-palette10) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 12%, var(--global-palette12) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 70%, var(--global-palette14) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 64%, var(--global-palette11) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 88%, var(--global-palette1) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 35%, var(--global-palette10) 0 3px, transparent 4px);
  background-size: 260px 260px;
}

.kg-section {
  padding: 72px 0;
}

.kg-section h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1;
  margin: 0 0 8px;
}

.kg-sub {
  margin: 0 0 32px;
  font-size: 1.1rem;
  opacity: 0.8;
}

.kg-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.kg-head .kg-sub {
  margin-bottom: 0;
}

.kg-center {
  text-align: center;
  margin-top: 28px;
}

/* Buttons */
.kg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  transition: transform 0.15s ease;
}

.kg-btn:hover,
.kg-btn:focus-visible {
  transform: translateY(-2px) rotate(-1deg);
}

.kg-btn--red {
  background: var(--global-palette1);
  color: var(--global-palette9);
  box-shadow: 0 4px 0 var(--global-palette2);
}

.kg-btn--red:hover {
  color: var(--global-palette9);
}

.kg-btn--gold {
  background: var(--global-palette10);
  color: var(--global-palette3);
  box-shadow: 0 4px 0 #b88900;
}

.kg-btn--light {
  background: var(--global-palette9);
  color: var(--global-palette3);
  box-shadow: 0 4px 0 #d9cdb8;
}

/* Hero */
.kg-hero {
  padding: 56px 0 80px;
  overflow: hidden;
}

.kg-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.kg-kicker {
  display: inline-block;
  background: var(--global-palette11);
  color: var(--global-palette9);
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  transform: rotate(-2deg);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.kg-hero__title {
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: 0.95;
  margin: 18px 0;
  color: var(--global-palette3);
}

.kg-pop {
  color: var(--global-palette1);
  display: inline-block;
  transform: rotate(-3deg);
}

.kg-lead,
.kg-count__label {
  background: var(--global-palette8);
  box-shadow: 0 0 0 6px var(--global-palette8);
  border-radius: 6px;
}

.kg-lead {
  font-size: 1.25rem;
  max-width: 32ch;
  margin: 0 0 24px;
}

.kg-count__label {
  font-weight: 800;
  margin: 0 0 10px;
}

.kg-count {
  display: flex;
  gap: 10px;
  margin: 0 0 28px;
  flex-wrap: wrap;
}

.kg-count__box {
  background: var(--global-palette9);
  border: 3px solid var(--global-palette3);
  border-radius: 14px;
  padding: 8px 14px;
  text-align: center;
  min-width: 76px;
  box-shadow: 4px 4px 0 var(--global-palette3);
}

.kg-count__box b {
  font-family: var(--global-heading-font-family);
  font-weight: 400;
  font-size: 2.1rem;
  display: block;
  line-height: 1;
  color: var(--global-palette1);
  font-variant-numeric: tabular-nums;
}

.kg-count__box span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kg-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.kg-hero__visual {
  position: relative;
  aspect-ratio: 4 / 3.6;
}

.kg-polaroid {
  margin: 0;
  position: absolute;
  background: var(--global-palette9);
  padding: 10px 10px 40px;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgb(29 26 43 / 25%);
}

.kg-polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%; /* Keep faces in frame; group photos are usually framed high. */
  border-radius: 3px;
}

.kg-polaroid figcaption {
  position: absolute;
  bottom: 8px;
  left: 14px;
  font-family: var(--global-heading-font-family);
  font-size: 1.15rem;
}

.kg-polaroid--1 {
  width: 68%;
  height: 56%;
  left: 0;
  top: 2%;
  transform: rotate(-4deg);
  z-index: 1;
}

.kg-polaroid--2 {
  width: 58%;
  height: 48%;
  left: 38%;
  top: 48%;
  transform: rotate(4deg);
  z-index: 2;
}

/* The donkey stands on the garden photo, peeking past the prince couple. */
.kg-hero__esel {
  position: absolute;
  right: 0;
  top: -6%;
  width: 29%;
  height: auto;
  z-index: 3;
  transform-origin: 50% 90%;
  animation: kg-wiggle 5s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgb(29 26 43 / 30%));
}

@keyframes kg-wiggle {
  0%,
  80%,
  100% {
    transform: rotate(0);
  }
  85% {
    transform: rotate(-4deg);
  }
  90% {
    transform: rotate(3deg);
  }
  95% {
    transform: rotate(-2deg);
  }
}

/* Events */
.kg-events {
  background: var(--global-palette3);
  color: var(--global-palette9);
  position: relative;
  z-index: 1;
}

/* Jester-cap points on both edges of the dark band (shapes from .kg-zz-up / .kg-zz-down in brand.css). */
.kg-events::before,
.kg-events::after {
  background: var(--global-palette3);
}

/* Top edge rises to the right, like the original diagonal, with the points running along it.
   The strip reaches 60px into the band (solid below the points) so the tilt never leaves a gap,
   and sits behind the band's content (z-index -1 inside the band's stacking context). */
.kg-events::before {
  --kg-slant-fill: 60px;
  /* Same point as --kg-zz-up but with a 1px transparent margin top and bottom: under a transform the
     browser samples across tile edges, which otherwise draws hairlines above and below the points. */
  --kg-zz-up-padded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 28 18' preserveAspectRatio='none'%3E%3Cpath d='M0 16L14 0L28 16Z'/%3E%3C/svg%3E");
  height: calc(var(--kg-zz-h) + 1px + var(--kg-slant-fill));
  bottom: calc(100% - var(--kg-slant-fill));
  z-index: -1;
  transform: skewY(-1.5deg);
  transform-origin: 0 100%;
  mask-image: var(--kg-zz-up-padded), linear-gradient(#000, #000);
  mask-size:
    var(--kg-zz-w) calc(var(--kg-zz-h) + 2px),
    100% calc(var(--kg-slant-fill) + 2px);
  /* The solid fill starts 2px above the points' base so the two layers overlap without a seam. */
  mask-position:
    0 0,
    0 calc(var(--kg-zz-h) - 1px);
  mask-repeat: repeat-x, no-repeat;
}

.kg-events h2,
.kg-events .kg-sub {
  color: var(--global-palette9);
}

.kg-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.kg-event a {
  display: flex;
  height: 100%;
  background: var(--global-palette9);
  color: var(--global-palette3);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.kg-event a:hover,
.kg-event a:focus-visible {
  transform: rotate(-1deg) translateY(-4px);
}

.kg-event__date {
  background: var(--global-palette1);
  color: var(--global-palette9);
  min-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.kg-event__date b {
  font-family: var(--global-heading-font-family);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
}

.kg-event:nth-child(3n + 2) .kg-event__date {
  background: var(--global-palette11);
}

.kg-event:nth-child(3n + 3) .kg-event__date {
  background: var(--global-palette12);
}

.kg-event__info {
  padding: 14px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.kg-event__title {
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: break-word;
}

.kg-event__meta {
  font-size: 0.875rem;
  opacity: 0.75;
}

.kg-event--next {
  grid-column: span 2;
}

.kg-event--next a {
  background: var(--global-palette10);
}

.kg-event--next .kg-event__title {
  font-family: var(--global-heading-font-family);
  font-weight: 400;
  font-size: 1.75rem;
}

/* Groups */
.kg-groups__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.kg-group a {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  color: var(--global-palette9);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.kg-group a:hover,
.kg-group a:focus-visible {
  transform: rotate(-2deg) scale(1.03);
}

.kg-group img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.kg-group a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--kg-tint) 30%, transparent 85%);
}

.kg-group--1 {
  --kg-tint: var(--global-palette1);
}

.kg-group--2 {
  --kg-tint: var(--global-palette11);
}

.kg-group--3 {
  --kg-tint: var(--global-palette12);
}

.kg-group--4 {
  --kg-tint: var(--global-palette14);
}

.kg-group--5 {
  --kg-tint: var(--global-palette3);
}

.kg-group__text {
  position: relative;
  z-index: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kg-group__label {
  font-family: var(--global-heading-font-family);
  font-size: 1.5rem;
  line-height: 1.05;
  hyphens: auto;
}

.kg-group__tagline {
  font-size: 0.875rem;
}

/* News */
.kg-news {
  padding-top: 40px;
}

.kg-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kg-card {
  background: var(--global-palette9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 0 #eadfcb;
  display: flex;
  flex-direction: column;
}

.kg-card__link {
  color: inherit;
  text-decoration: none;
}

.kg-card__media {
  display: block;
  height: 220px;
  background: var(--global-palette7);
}

.kg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.kg-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 0;
}

.kg-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--global-palette8);
  padding: 4px 10px;
  border-radius: 999px;
}

.kg-card__title {
  font-family: var(--global-heading-font-family);
  font-size: 1.4rem;
  line-height: 1.15;
  hyphens: auto;
}

.kg-card__link:hover .kg-card__title {
  color: var(--global-palette1);
}

.kg-card__teaser {
  margin: 10px 20px 0;
  font-size: 0.95rem;
  opacity: 0.85;
  flex: 1;
}

.kg-card__date {
  margin: 12px 20px 20px;
  font-size: 0.8rem;
  font-weight: 800;
  opacity: 0.6;
}

/* Sponsors */
.kg-sponsors {
  text-align: center;
  padding-top: 24px;
}

.kg-marquee {
  overflow: hidden;
  padding: 8px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.kg-marquee__track {
  display: flex;
  width: max-content;
  animation: kg-drift 160s linear infinite;
}

.kg-marquee--right .kg-marquee__track {
  animation-direction: reverse;
}

.kg-marquee:hover .kg-marquee__track,
.kg-marquee:focus-within .kg-marquee__track {
  animation-play-state: paused;
}

.kg-marquee__list {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0;
}

.kg-marquee__list li {
  width: 150px;
  height: 100px;
  flex: none;
  background: var(--global-palette9);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 0 #eadfcb;
}

.kg-marquee__list img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@keyframes kg-drift {
  to {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .kg-groups__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .kg-hero {
    padding: 32px 0 56px;
  }

  .kg-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .kg-news__grid {
    grid-template-columns: 1fr;
  }

  .kg-event--next {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .kg-section {
    padding: 56px 0;
  }

  .kg-groups__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kg-group:last-child {
    grid-column: span 2;
  }

  .kg-group a {
    min-height: 170px;
  }

  .kg-polaroid--2 {
    left: 42%;
    top: 54%;
    height: 44%;
  }

  .kg-group__label {
    font-size: 1.15rem;
    hyphens: manual;
  }

  .kg-count__box {
    min-width: 64px;
    padding: 6px 10px;
  }

  .kg-count__box b {
    font-size: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kg-hero__esel,
  .kg-marquee__track {
    animation: none;
  }

  .kg-marquee {
    overflow-x: auto;
    mask-image: none;
  }

  .kg-marquee__list[aria-hidden="true"] {
    display: none;
  }

  .kg-btn,
  .kg-event a,
  .kg-group a {
    transition: none;
  }
}