/* =========================================
   SPECTRE Website – Responsive & Animations
   =========================================
   This file adds:
   1. Tablet breakpoint (1024px)
   2. Enhanced 768px breakpoint additions
   3. Small phone breakpoint (480px)
   4. CSS animations & transitions
   5. Reduced-motion preferences
   ========================================= */

/* =========================================
   1. CSS ANIMATIONS & TRANSITIONS
   ========================================= */

/* --- Hero Gradient Glow --- */
.hero__gradient {
  animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* --- Scroll Reveal (fade-in-up) ---
   Sections themselves stay opaque (so their background fills the gap
   between hero and content). Only the inner container fades + slides in. */
.reveal {
  opacity: 1;
}

.reveal > .container {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.reveal.is-visible > .container {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal > .container {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Staggered Card Entrance --- */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.6s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.7s; }

/* --- Card Hover Lift Effect (enhanced) --- */
.research-card,
.team-card,
.course-card,
.lab-card,
.guide-card,
.impact-card,
.position-card,
.publication-slide,
.semester-box,
.labs-intro__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.research-card:hover,
.team-card:hover,
.course-card:hover,
.lab-card:hover,
.guide-card:hover,
.impact-card:hover,
.publication-slide:hover,
.labs-intro__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.research-card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* --- Timeline Scroll Animation --- */
.timeline__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Method Modal Entrance --- */
dialog.method-modal[open] {
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

dialog.method-modal::backdrop {
  animation: backdropIn 0.3s ease;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Button Hover Animations --- */
.btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* --- Nav Link Underline Animation --- */
.site-nav__link {
  position: relative;
  border-bottom: none;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  width: 100%;
}

/* --- News Item Toggle Smooth Expand --- */
.news-item__body {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

/* --- Social Link Hover --- */
.social-link,
.social-icon__circle {
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.2s ease;
}

.social-link:hover,
.social-icon:hover .social-icon__circle {
  transform: scale(1.1);
}

/* --- Tag Hover --- */
.tag {
  transition: background 0.2s ease, color 0.2s ease;
}

.tag:hover {
  background: var(--color-primary);
  color: #fff;
}

/* --- FAQ Accordion Smooth --- */
.faq-item__answer {
  overflow: hidden;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;
}


/* =========================================
   2. TABLET BREAKPOINT (1024px)
   ========================================= */
@media (max-width: 1024px) {

  /* Navigation (tablets, 769-1024 px): the desktop menu stays as it is above 1024 px - same font size, the gaps keep
     shrinking with the window (1.7 % of its width) and the logo may come closer (1.5rem instead of 2.5rem) - so that
     all nine entries up to "How To" fit in one line down to 769 px; below that the burger menu takes over
     (feedback 02.10.: before, the menu became larger here and the last entry was cut off on an iPad). With more
     entries the burger menu comes earlier, see "Main menu longer than one line" below. */
  .site-header__inner {
    gap: 1.5rem;
  }

  .site-nav__list {
    gap: clamp(0.7rem, 1.7vw, 1.6rem);
  }

  /* Hero: reduce padding */
  .hero {
    padding: clamp(3rem, 8vw, 6rem) 0;
  }

  .hero--home {
    padding: clamp(4rem, 10vw, 8rem) 0;
  }

  /* Grids: 2-column layouts (research topic cards: below 1000 px, block "Research topic cards" after this one) */

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

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

  /* Carousel: show 2 per view */
  .labs-carousel__track > *,
  .publications-carousel__track > * {
    flex: 0 0 calc(50% - 0.75rem);
  }

  /* Lab Detail: stack columns */
  .lab-detail__layout {
    grid-template-columns: 1fr;
  }

  .lab-detail__sidebar {
    order: -1;
  }

  /* Area Detail: stack columns */
  .area-detail__columns {
    grid-template-columns: 1fr;
  }

  /* Publications table: horizontal scroll, smaller font */
  .pub-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pub-table {
    font-size: var(--fs-small);
    min-width: 600px;
  }

  .pub-table th,
  .pub-table td {
    padding: 0.6rem 0.75rem;
  }

  /* Footer: 2-column */
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Semester guide boxes */
  .semester-guide__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Impact stories */
  .impact-stories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Labs intro */
  .labs-intro__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Research topic cards (home, labs page): four in a row from 1000 px; below, two by two - and on tablets compact:
   smaller icon, less room above and below, title and text run wider (feedback 02.10., iPad: between 769 and 1024 px
   the cards were 470 px wide and half empty). Phones keep their own compact cards (480 / 600 px blocks). */
@media (max-width: 999px) {
  .research-topics-grid,
  .labs-research__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 601px) and (max-width: 999px) {
  .research-card {
    padding: 1.1rem 1.25rem 1.3rem;
  }
  .research-card .research-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.6rem;
  }
  .research-card .research-card__title {
    min-height: 0;
    max-width: 18em;
    margin-bottom: 0.45rem;
  }
  .research-card .research-card__tagline {
    max-width: 24rem;
  }
}

/* Main menu longer than one line: the burger menu at any width (feedback 28.10.). The menu lists every page set to
   "Public" (Site Settings > Pages), and the team may add a tenth one (e.g. "Services"). Where the entries do not fit
   in one line next to the logo, the header gets the class site-header--burger (measured in header.php / main.js:
   window.spectreNavFit) and shows the phone menu - the same rules as up to 768 px (styles.css and block 3 below).
   Where they fit, the class is never set and nothing changes. */
.site-header--burger .site-header__toggle {
  display: flex;
}

.site-header--burger .site-nav {
  display: none;
  position: absolute;
  top: 100%;                       /* (right below the header bar, whatever its height in rem) */
  left: 0;
  right: 0;
  background: var(--color-dark-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem 0;
}

.site-header--burger .site-nav.is-open {
  display: block;
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-header--burger .site-nav__list {
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.site-header--burger .site-nav__item {
  display: block;
}

.site-header--burger .site-nav__link {
  display: block;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: var(--fs-body);
}

.site-header--burger .site-nav__link::after {
  display: none;
}

.site-header--burger .site-nav__link:hover,
.site-header--burger .site-nav__link.is-active {
  border-bottom-color: transparent;
}


/* =========================================
   3. ENHANCED 768px BREAKPOINT
   ========================================= */
@media (max-width: 768px) {

  /* Wave divider smaller on mobile */
  .wave-divider {
    height: 40px;
  }

  /* News grid single column on mobile */
  .news-grid {
    grid-template-columns: 1fr;
  }

  /* Labs carousel single slide */
  .labs-carousel__slide {
    flex: 0 0 calc(100% - 1rem);
  }

  /* Research cards: 2 columns on tablets and phones (2 x 2) */
  .research-topics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  /* Course cards: single column */
  .course-grid {
    grid-template-columns: 1fr;
  }

  /* Team grid: 2 columns on tablets and phones (2 x 2) */
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .team-grid--small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Area detail columns: stack vertically */
  .area-detail__columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .area-detail__methods {
    flex-wrap: wrap;
  }

  /* Semester guide boxes: stack */
  .semester-guide__grid {
    grid-template-columns: 1fr;
  }

  /* Impact stories grid: stack */
  .impact-stories__grid {
    grid-template-columns: 1fr;
  }

  /* Labs intro grid: stack */
  .labs-intro__grid {
    grid-template-columns: 1fr;
  }

  /* Labs grid: single column */
  .labs-grid {
    grid-template-columns: 1fr;
  }

  /* Position cards: stack */
  .positions-grid {
    grid-template-columns: 1fr;
  }

  /* Lab detail: stack everything */
  .lab-detail__layout {
    grid-template-columns: 1fr;
  }

  /* Method modal: full-width */
  .method-modal {
    width: calc(100% - 2rem);
    max-width: none;
    margin: 1rem;
  }

  .method-modal__inner {
    max-height: calc(100vh - 4rem);
  }

  /* Carousel: single item */
  .labs-carousel__track > *,
  .publications-carousel__track > * {
    flex: 0 0 calc(100% - 1rem);
  }

  /* Carousel buttons: tighter */
  .carousel-btn--prev {
    left: -10px;
  }

  .carousel-btn--next {
    right: -10px;
  }

  /* Publications table */
  .pub-table {
    font-size: var(--fs-small);
    min-width: 500px;
  }

  /* Footer: single column */
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .site-footer__meta,
  .site-footer__legal { justify-content: center; }

  /* Profile hero: stack */
  .hero--profile .hero__content--profile {
    flex-direction: column-reverse;
    text-align: center;
  }

  .profile-hero__portrait img {
    width: 150px;
    height: 150px;
  }

  /* (the teaching band of the home page has no padding of its own any more - the old rule here set it back in on
     small screens; its text stands in the container like every other section) */

  /* Container */
  .container {
    padding: 0 1rem;
  }

  /* Nav underline animation: disable on mobile nav */
  .site-nav__link::after {
    display: none;
  }

  /* Reset nav link border for mobile menu */
  .site-nav__link:hover,
  .site-nav__link.is-active {
    border-bottom-color: transparent;
  }

  /* Phone menu (opened with the burger button): compact rows, so that all entries fit a small screen
     (feedback 30.09.: on a phone the last entry was only half visible - the entries stood 70px apart: the gap of the
     1024px rule above came on top of the rows' own height here).
     No gap; every entry is a row across the full width, 2.8rem high - still easy to hit with a finger; the text in
     the normal body size (the desktop menu above uses the smaller one).
     Should the screen be lower than the menu all the same (phone held sideways), the menu scrolls instead of being
     cut off: it is never higher than the screen below the header bar (4.5rem). */
  .site-nav {
    padding: 0.5rem 0;
  }

  .site-nav.is-open {
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav__list {
    gap: 0;
    align-items: stretch;
  }

  .site-nav__item {
    display: block;
  }

  .site-nav__link {
    display: block;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: var(--fs-body);
  }

  /* Course meta: stack */
  .course-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}


/* =========================================
   4. SMALL PHONE BREAKPOINT (480px)
   ========================================= */
@media (max-width: 480px) {

  /* Reduce section padding */
  .section {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }

  /* Smaller hero titles */
  .hero__title {
    font-size: var(--fs-h2);
  }

  .hero__subtitle {
    font-size: var(--fs-body);
  }

  .hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
  }

  .hero--home {
    padding: clamp(3rem, 8vw, 5rem) 0;
  }

  /* Section title smaller */
  .section__title {
    font-size: var(--fs-h2);
  }

  /* Home, research topics and team: they stay in two columns - a 2 x 2 block like the topics on the research page
     (feedback 30.09.: one long column before). Rows a little further apart than the columns, as there. */
  .research-topics-grid {
    gap: 1.6rem 1rem;
  }

  .team-grid,
  .team-grid--small {
    gap: 1.75rem 0.5rem;
  }

  /* Single column everything else */
  .course-grid {
    grid-template-columns: 1fr;
  }

  .labs-grid {
    grid-template-columns: 1fr;
  }

  .positions-grid {
    grid-template-columns: 1fr;
  }

  .semester-guide__grid {
    grid-template-columns: 1fr;
  }

  .impact-stories__grid {
    grid-template-columns: 1fr;
  }

  .labs-intro__grid {
    grid-template-columns: 1fr;
  }

  /* Reduce card padding (research cards: two next to each other - narrow sides, as on the research page) */
  .research-card {
    padding: 1.2rem 0.6rem 1.5rem;
  }

  .course-card {
    padding: 1.25rem;
  }

  .position-card {
    padding: 1.5rem;
  }

  .semester-box {
    padding: 1.25rem;
  }

  .impact-card {
    padding: 1.25rem;
  }

  /* Stack all cards vertically */
  .course-card__header {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Smaller team portraits */
  .team-card__portrait img,
  .team-card__placeholder {
    width: 100px;
    height: 100px;
  }

  /* Profile hero portrait */
  .profile-hero__portrait img {
    width: 120px;
    height: 120px;
  }

  /* News items */
  .news-item {
    padding: 1.25rem 0;
  }

  .news-item__title {
    font-size: var(--fs-body);
  }

  .news-item__excerpt {
    font-size: var(--fs-body);
  }

  .news-item__links {
    flex-direction: column;
  }

  /* Buttons: full-width on small screens */
  .hero .btn {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Method modal */
  .method-modal {
    width: calc(100% - 1rem);
    margin: 0.5rem;
  }

  /* Container padding */
  .container {
    padding: 0 0.75rem;
  }

  /* Timeline */
  .timeline__item {
    flex: none;
    padding-left: 1.5rem;
  }

  /* FAQ */
  .faq-item__question {
    font-size: var(--fs-body);
    padding: 1rem 0;
  }

  /* Pagination */
  .pagination__link {
    width: 36px;
    height: 36px;
    font-size: var(--fs-body);
  }

  /* Publication slide cover */
  .publication-slide__cover {
    height: 140px;
  }

  /* Intro text */
  .intro-text {
    font-size: var(--fs-body);
    line-height: 1.7;
  }

  /* Footer */
  .site-footer {
    padding: 2rem 0 1rem;
  }

  .site-footer__col {
    font-size: var(--fs-small);
  }

  .site-footer__copy {
    font-size: var(--fs-small);
  }
}


/* =========================================
   5. REDUCED MOTION PREFERENCE
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }

  .timeline__item {
    opacity: 1;
    transform: none;
  }
}