/* ==========================================================================
   Home page, "tiles" design (site_design: tiles in _config.yml)
   Markup: _includes/home/tiles-{de,en}.html. Loaded after theme-tiles.css on
   the home page only; the carousel styles come from home.css.
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.tiles-hero {
  padding: 4.5rem 0 0;
  background: var(--color-white);
}

.tiles-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 4rem;
  align-items: center;
}

.tiles-hero-copy h1 {
  margin-bottom: 1.25rem;
  line-height: 1.05;
}

.tiles-hero-lead {
  max-width: 56ch;
  margin-bottom: 2rem;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-text);
}

.tiles-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* The mosaic on a 4 × 4 grid: a square photo in the top-right quadrant, a
   wide (3 × 2 cells, i.e. 3 : 2) photo along the bottom, and small squares
   in flat colour (the AIST blue and its tints) around them, with one corner
   left open at the top left and at the bottom right, so the cluster steps
   from the top right to the bottom left like the header image on
   fh-ooe.at. The photos are static (_data/home_mosaic.yml). */
.tile-mosaic {
  --tile-gap: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--tile-gap);
  aspect-ratio: 1;
  width: 100%;
  max-width: 33rem;
  margin-left: auto;
}

.tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
}

/* explicit placement (row-start / col-start / row-end / col-end) */
.tile:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }   /* light blue  (top-left quadrant, top right)    */
.tile:nth-child(2) { grid-area: 1 / 3 / 3 / 5; }   /* photo 1     (top-right quadrant, square)      */
.tile:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }   /* AIST blue   (top-left quadrant, bottom right) */
.tile:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }   /* sky         (top-left quadrant, bottom left)  */
.tile:nth-child(5) { grid-area: 3 / 1 / 5 / 4; }   /* photo 2     (bottom, 3 × 2 cells)             */
.tile:nth-child(6) { grid-area: 3 / 4 / 4 / 5; }   /* mid blue    (right column; the corner below stays open) */

.tile-blue { background: var(--color-primary); }
.tile-mid { background: var(--color-primary-500); }
.tile-light { background: var(--color-primary-light); }
.tile-sky { background: var(--sky-200); }

/* photo tiles: the picture fills the cell */
.tile-photo {
  background: var(--sky-100);
}

.tile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .tile {
    opacity: 0;
    transform: scale(0.85);
    animation: tile-in 0.55s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}

@keyframes tile-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* numbers strip: four cells separated by hairlines */
.tiles-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.tiles-stats li + li {
  border-left: 1px solid var(--color-line);
}

.tiles-stats a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.5rem 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.tiles-stats a:hover,
.tiles-stats a:focus-visible {
  background: var(--color-bg-light);
  text-decoration: none;
}

.tiles-stats .stat-value {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.tiles-stats .stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* ------------------------------------------------------- research areas */
.area-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.area-tile {
  /* one palette for all three areas: the AIST blue and its tints */
  --area-color: var(--color-primary);
  --area-soft: var(--sky-100);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 5px solid var(--area-color);
  transition: border-color 0.2s var(--ease);
}

.area-tile:hover {
  border-color: var(--area-color);
}

.area-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  background: var(--area-soft);
}

.area-tile-icon img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

.area-tile h2 {
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.area-tile > p {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.7;
}

.area-tile em {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-light);
}

.area-tile .carousel {
  margin-top: 0.25rem;
}

.area-tile .carousel-viewport {
  border-radius: 0;
  border: 1px solid var(--color-line);
  background: var(--color-bg-light);
}

.area-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--area-color);
}

.area-tile-link i {
  font-size: 0.8em;
  transition: transform 0.2s var(--ease);
}

.area-tile-link:hover {
  color: var(--area-color);
  text-decoration: none;
}

.area-tile-link:hover i {
  transform: translateX(3px);
}

/* -------------------------------------------------------------- news */
.tiles-news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* -------------------------------------------------------- quick tiles */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.quick-tiles a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  aspect-ratio: 1;
  padding: 1.1rem;
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.quick-tiles a:hover,
.quick-tiles a:focus-visible {
  background: var(--color-primary-500);
  color: var(--color-white);
  text-decoration: none;
}

.quick-tiles a > i {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  font-size: 1.5rem;
  color: var(--color-primary-light);
  transition: color 0.2s var(--ease);
}

.quick-tiles a:hover > i,
.quick-tiles a:focus-visible > i {
  color: var(--color-white);
}

.quick-tiles a::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: 0.8rem;
  opacity: 0.6;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.quick-tiles a:hover::after,
.quick-tiles a:focus-visible::after {
  opacity: 1;
  transform: translateX(3px);
}

.quick-tiles span {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.quick-tiles small {
  font-size: 0.75rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------ cta band */
.tiles-cta {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  background: var(--sky-100);
  color: var(--color-text);
}

.tiles-cta .container {
  position: relative;
  z-index: 1;
}

.tiles-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 2rem;
  align-items: center;
}

.tiles-cta h2 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.tiles-cta p:last-child {
  margin: 0;
  max-width: 60ch;
}

.tiles-cta .tiles-hero-actions {
  justify-content: flex-end;
}

/* a small cluster of squares echoing the hero mosaic */
.tiles-cta-deco {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  display: grid;
  grid-template-columns: repeat(3, 4.5rem);
  grid-template-rows: repeat(3, 4.5rem);
  gap: 8px;
  pointer-events: none;
}

.tiles-cta-deco i {
  display: block;
}

.tiles-cta-deco i:nth-child(1) { grid-area: 1 / 3; background: var(--sky-200); }
.tiles-cta-deco i:nth-child(2) { grid-area: 2 / 2; background: var(--color-primary); }
.tiles-cta-deco i:nth-child(3) { grid-area: 2 / 3; background: var(--color-primary-light); }
.tiles-cta-deco i:nth-child(4) { grid-area: 3 / 1; background: var(--color-white); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .tiles-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .tile-mosaic {
    margin-left: 0;
    max-width: 30rem;
  }

  .area-tiles {
    grid-template-columns: 1fr;
  }

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

  .quick-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tiles-cta-grid {
    grid-template-columns: 1fr;
  }

  .tiles-cta .tiles-hero-actions {
    justify-content: flex-start;
  }

  .tiles-cta-deco {
    opacity: 0.5;
  }
}

@media (max-width: 640px) {
  .tiles-hero {
    padding-top: 2.5rem;
  }

  .tile-mosaic {
    --tile-gap: 6px;
    max-width: none;
  }

  .tiles-stats {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.5rem;
  }

  .tiles-stats li:nth-child(3) {
    border-left: none;
  }

  .tiles-stats li:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .tiles-stats a {
    padding: 1.1rem 1rem;
  }

  .tiles-stats .stat-value {
    font-size: 1.9rem;
  }

  .tiles-news-grid {
    grid-template-columns: 1fr;
  }

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

  .tiles-cta {
    padding: 3rem 0;
  }
}