/* ===== SIDEBAR OVERRIDE ===== */
/* Disable sticky sidebar on home page */
.sidebar {
  position: static;
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 2rem 0 0 3rem;
}

.hero-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.hero-line {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 11rem;
  background: linear-gradient(
    to bottom right,
    var(--accent-base) 0%,
    color-mix(in srgb, var(--accent-base) 60%, transparent) 50%,
    color-mix(in srgb, var(--accent-base) 30%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* ===== HERO BADGES ===== */
/* Wrapper handles X movement, inner span handles Y movement */
.hero-badge {
  position: absolute;
  z-index: 1;
}

.hero-badge span {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  background: var(--background);
  color: var(--text);
  padding: 0.2rem 0.5rem;
  border-radius: var(--border-radius);
  border: solid var(--border-size) var(--border);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* Floating animations - separate X and Y for natural Lissajous motion */
@keyframes float-x {
  0%,
  100% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(4px);
  }
}

.hero-badge {
  animation: float-x 8s ease-in-out infinite;
}

.hero-badge span {
  animation: float-y 7s ease-in-out infinite;
}

/* Badge 1: "6/7 Semester" - top, between "d" and "&" */
.hero-badge--1 {
  top: 5rem;
  left: 17rem;
  animation: float-x 8s ease-in-out infinite;
}

.hero-badge--1 span {
  animation: float-y 7s ease-in-out infinite;
}

/* Badge 2: "TH Köln" - right side, next to "&" */
.hero-badge--2 {
  top: 7rem;
  left: 37rem;
  animation: float-x 10s ease-in-out infinite;
}

.hero-badge--2 span {
  animation: float-y 8s ease-in-out infinite;
}

/* Badge 3: "Bachelor of Science" - bottom, over "on" in Context */
.hero-badge--3 {
  top: 16rem;
  left: 12rem;
  animation: float-x 7s ease-in-out infinite;
}

.hero-badge--3 span {
  animation: float-y 12s ease-in-out infinite;
}

/* ===== FULL WIDTH WRAPPER ===== */
/* Extends content to the left, overlapping the sidebar area */
.home-content-full {
  margin-left: calc(-1 * var(--sidebar-width) - var(--padding));
}

/* ===== INTRODUCTION SECTION ===== */
.home-intro {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  margin-top: 4rem;
}

.home-intro-heading {
  align-self: center;
}

.home-intro-text {
  text-align: right;
}

.home-intro,
.home-features {
  margin-left: 3rem;
  margin-right: 3rem;
}

/* ===== ASTERISK ICON ===== */
/* Shared SVG asterisk icon as a CSS custom property for mask-image use */
.home-features {
  --icon-asterisk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 432.22 494.3'%3E%3Cpath d='M63.28,441.43l69.25-124.17c8.36-15.52,1.19-28.66-16.71-28.66H23.88c-15.52,0-23.88-8.35-23.88-23.88v-35.82c0-15.52,8.36-23.88,23.88-23.88h91.94c17.91,0,25.07-13.13,16.71-28.65L64.48,54.59c-7.16-13.13-5.97-23.88,8.36-32.24l31.04-16.71c14.32-8.36,25.07-4.78,32.24,9.55l64.48,117.01c9.55,17.91,23.88,17.91,33.43,0L298.49,13.99c7.16-14.32,19.1-17.91,33.43-9.55l29.85,16.71c14.33,8.36,15.52,17.91,8.36,32.24l-66.86,122.98c-8.35,16.71-1.19,28.65,16.72,28.65h88.35c15.52,0,23.88,8.36,23.88,23.88v35.82c0,15.52-8.36,23.88-23.88,23.88h-89.55c-17.91,0-25.07,11.94-16.71,28.66l68.05,125.37c7.16,13.13,3.58,25.07-9.55,32.24l-29.85,15.52c-13.13,7.16-25.07,4.77-32.24-9.55l-64.48-118.2c-9.55-17.91-23.88-17.91-33.43,0l-64.48,118.2c-7.16,14.33-20.3,16.71-33.43,9.55l-29.85-15.52c-13.13-7.16-16.72-20.3-9.55-33.43Z'/%3E%3C/svg%3E");
}

/* ===== FEATURE CARDS SECTION ===== */
.home-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 4rem;
  padding-bottom: 2rem;
}

.feature-card-title {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.feature-card-title::before {
  content: "";
  display: block;
  height: 0.96em;
  aspect-ratio: 1;
  flex-shrink: 0;
  background-color: var(--accent);
  -webkit-mask-image: var(--icon-asterisk);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--icon-asterisk);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* ===== HANDLUNGSFELDER TEXT ===== */
.home-handlungsfelder {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  grid-column: 1 / -1;
  padding: 0rem 3rem 1.5rem 3rem;

}

.home-handlungsfelder-icons {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2rem;
  justify-content: center;
  align-content: center;
  aspect-ratio: 1;
}

.home-handlungsfelder-icon {
  display: inline-block;
}

.home-handlungsfelder-icon svg {
  width: 3rem;
  display: block;
  fill: var(--accent);
}

/* Lissajous floating: span handles X, svg handles Y */
.home-handlungsfelder-icon:nth-child(1) {
  animation: float-x 8s ease-in-out infinite;
}
.home-handlungsfelder-icon:nth-child(1) svg {
  animation: float-y 7s ease-in-out infinite;
}

.home-handlungsfelder-icon:nth-child(2) {
  animation: float-x 10s ease-in-out infinite;
}
.home-handlungsfelder-icon:nth-child(2) svg {
  animation: float-y 12s ease-in-out infinite;
}

.home-handlungsfelder-icon:nth-child(3) {
  animation: float-x 7s ease-in-out infinite;
}
.home-handlungsfelder-icon:nth-child(3) svg {
  animation: float-y 9s ease-in-out infinite;
}

.home-handlungsfelder-icon:nth-child(4) {
  animation: float-x 9s ease-in-out infinite;
}
.home-handlungsfelder-icon:nth-child(4) svg {
  animation: float-y 8s ease-in-out infinite;
}

.home-handlungsfelder-text {
  padding-left: 1.5rem;
}

/* .feature-card--1 {
}

.feature-card--2 {
  margin-left: 2rem;
}

.feature-card--3 {
  margin-right: 3rem;
}

.feature-card--1 .feature-card-background {
  top: -0.8em;
  left: -0.6em;
  animation: float-y 7s ease-in-out infinite;
}

.feature-card--2 .feature-card-background {
  top: -0.5em;
  left: 0.7em;
  animation: float-y 12s ease-in-out infinite;
}

.feature-card--3 .feature-card-background {
  top: 0.8em;
  left: -0.6em;
  animation: float-x 12s ease-in-out infinite;
}

.feature-card--4 .feature-card-background {
  top: 0.5em;
  left: 0.8em;
  animation: float-x 7s ease-in-out infinite;
} */

/* ===== FEATURE HERO SECTION ===== */
.feature-hero {
  position: relative;
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--background);
}

/* Feature Media (Left Side) */
.feature-hero-media {
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: var(--border-size) solid var(--accent);
  border-radius: var(--border-radius);
}

.feature-hero-media img,
.feature-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-hero-video-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  --media-width: calc(100% * 2.2 / 3.2);
  margin-left: calc(var(--media-width) / 2);
  transform: translate(-50%, 100%);
  z-index: 1;
}

.feature-hero-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--accent-base) 0%,
    color-mix(in srgb, var(--accent-base) 60%, var(--text)) 100%
  );
}

/* Reports Carousel (Right Side) */
.feature-hero-reports {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background: var(--accent);
  color: var(--background);
  height: 400px;
  overflow: hidden;
  border: var(--border-size) solid var(--accent);
  border-radius: var(--border-radius);
}

.feature-hero-reports-slider {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.feature-hero-report {
  display: none;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.feature-hero-report:hover {
  color: inherit;
}

.feature-hero-report.is-active {
  display: flex;
}

.feature-hero-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.feature-hero-report-header .chip {
  font-family: var(--font-heading);
  border-color: var(--background);
  color: var(--background);
}

.feature-hero-report-date {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  opacity: 0.8;
}

.feature-hero-report-title {
  margin-bottom: 1rem;
}

.feature-hero-report-excerpt {
  line-height: 1.6;
  opacity: 0.9;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Navigation */
.feature-hero-reports-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.feature-hero-nav-button {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--background);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.feature-hero-nav-button:hover {
  opacity: 1;
}

.feature-hero-nav-dots {
  display: flex;
  gap: 0.5rem;
}

.feature-hero-nav-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: var(--border-size) solid var(--background);
  background: transparent;
  transition: background 0.2s;
}

.feature-hero-nav-dot.is-active {
  background: var(--background);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* ===== HERO SECTION ===== */
  .hero {
    padding: 0 0 0 1rem;
  }

  .hero-line {
    font-size: 21vw;
  }

  /* ===== HERO BADGES ===== */
  .hero-badge--1 {
    top: 35vw;
    left: 20vw;
  }

  .hero-badge--2 {
    top: 38vw;
    left: 52vw;
  }

  .hero-badge--3 {
    top: 49vw;
    left: 21vw;
  }

  /* ===== FULL WIDTH WRAPPER ===== */
  .home-content-full {
    margin-left: 0;
  }

  /* ===== INTRODUCTION SECTION ===== */
  .home-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .home-intro-text {
    text-align: left;
  }

  .home-intro,
  .home-features {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .home-handlungsfelder {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  /* ===== FEATURE CARDS SECTION ===== */
  .home-features {
    grid-template-columns: 1fr;
  }

  /* ===== FEATURE HERO SECTION ===== */
  .feature-hero {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  .feature-hero-media {
    min-height: 250px;
  }

  .feature-hero-reports {
    height: 300px;
  }

  .feature-hero-video-nav {
    position: static;
    transform: none;
    margin-left: 0;
    --media-width: 100%;
    order: 2;
    display: none;
  }

  .feature-hero-reports {
    order: 3;
  }
}