/* =============== */
/* BASIC STRUCTURE */
/* =============== */

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: 0.9rem;
  padding-bottom: 40px;
}

.legal {
  width: min(800px, 90vw);
  margin: 20px;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  gap: 20px;
  width: min(1200px, 92vw);
  padding: 10px;
  grid-template-areas:
    "hero hero hero hero partner partner focus focus"
    "plastic plastic plastic plastic partner partner highlight highlight"
    "approach approach approach action action action highlight highlight"
    "strategy strategy strategy capacity capacity capacity media media"
    "academic academic academic demo demo demo contact contact";
}

.tagline {
  width: min(1200px, 92vw);
  margin: 0 auto 30px;
  padding: 40px 10px 40px;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #1f2430;
}

.tagline h2,
.tagline h3 {
  margin: 0 0 0.4em;
  font-size: inherit;
  font-weight: 600;
}

.tagline p {
  margin: 0;
  font-size: 1rem;
}

.item {
  position: relative; /* makes it a positioning context */
  background: #0099ff;
  border: 2px solid #000000;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* keeps overlay inside rounded corners */
}

.item button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  margin: 0 5px;
}

/* ============================= */
/* TEXT ITEM STYLES (Markdown)   */
/* ============================= */

.item[data-md],
.item:not(:has(img)):not(.logo) {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 20px;
}

/* Make Markdown text display vertically inside text items */
.item[data-md] {
  display: block;
}

.item[data-md] img {
  display: block;
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.item img {
  object-position: center;
  transition: all 0.3s ease;
}

/* When an image is inside, remove blue background */
.item:not(.news-rotator):has(img) {
  background: none;
}

.item img.horizontal {
  width: 100%;
  height: auto;
}

.item img.vertical {
  width: auto;
  height: 100%;
}

/* Multiple articles carousel styling */
.item.news-rotator {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 15px;
  padding: 20px;
  background-color: #00B0FF;
}

.item.news-rotator .news-title {
  font-size: 1.8rem;
  font-weight: 700;
  padding-top: 20px;
  margin: 0;
}

.item.news-rotator .news-content {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.6;
}

.item.news-rotator .news-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.item.news-rotator .news-control {
  position: static;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: #D9F74A;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  transform: none;
}

.item.news-rotator .news-control img {
  width: 30px;
  height: 30px;
  display: block;
}

.item.news-rotator .news-control:hover,
.item.news-rotator .news-control:focus-visible {
  background-color: #00C853;
}

/* ============================= */
/* LOGO POSITIONING AND BEHAVIOR */
/* ============================= */

.item.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base logo image behavior */
.item.logo img {
  object-fit: contain;
  height: auto;
  margin: auto;
  display: block;
  width: 55%;
  max-height: 80%;
}

/* ============================= */
/* SPECIFIC LOGO ALIGNMENT FIXES */
/* ============================= */

.item.logo.right-logo {
  justify-content: flex-end !important;
}

.item.logo.left-logo {
  justify-content: flex-start !important;
}

.item.logo.right-logo img {
  margin-right: 20px;
}

.item.logo.left-logo img {
  margin-left: 20px;
}

.funding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;               
  padding: 40px 10px 40px;
}

.funding img {
  object-fit: contain;
}

/* ============================ */
/* LINK STYLES INSIDE ITEMS     */
/* ============================ */

.item a {
  color: #000000;
  text-decoration: underline;
  z-index: 2; /* in case overlay covers text */
  position: relative; /* keeps it above ::after tint */
}

.item a:hover {
  text-decoration: underline;
}

/* ===================== */
/* DESKTOP LAYOUT (≥1025)*/
/* ===================== */

.item-0  { grid-area: hero; }
.item-1  { grid-area: partner; }
.item-2  { grid-area: approach; }
.item-3  { grid-area: action; }
.item-4  { grid-area: strategy; }
.item-5  { grid-area: capacity; }
.item-6  { grid-area: academic; }
.item-7  { grid-area: demo; }
.item-8  { grid-area: focus; }
.item-9  { grid-area: highlight; }
.item-10 { grid-area: media; }
.item-11 { grid-area: contact; }
.item-14 { grid-area: plastic; }

/* ==================== */
/* TABLET LAYOUT ≤1024  */
/* ==================== */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(140px, auto);
    grid-template-areas:
      "hero hero focus focus"
      "partner partner partner partner"
      "approach approach action action"
      "strategy strategy capacity capacity"
      "academic academic demo demo"
      "plastic plastic plastic plastic"
      "plastic plastic plastic plastic"
      "highlight highlight highlight highlight"
      "media media contact contact";
  }
}

/* ================== */
/* MOBILE LAYOUT ≤767 */
/* ================== */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: none;
  }

  .item {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* ===== RESET LOGO ALIGNMENT ON MOBILE ===== */
  .item.logo.right-logo,
  .item.logo.left-logo {
    justify-content: center !important;
  }

  .item.logo.right-logo img,
  .item.logo.left-logo img {
    margin: 0 !important;
  }
}