/*
 * EduGames - Interactive Learning Games
 * (c) 2025-2026 Prof. N. All rights reserved.
 *
 * File:    styles/home.css
 * Updated: 2026-10-07 12:00
 * Purpose: The home page (views/homeView.js): the intro line, the subject box and the category tabs with the game
 *          cards. On narrow screens the cards shrink in steps: descriptions go, icons get smaller, then two per row.
 */

.home-container {
  padding: 0.5rem 0 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* The greeting, with the Join button at its left end and the Feedback button at its right end */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: var(--page-column);
  margin: 0 auto 0.6rem;
  text-align: center;
}

.hero-section p {
  flex: 1 1 auto;
  text-wrap: balance; /* two lines of about equal length */
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--text-secondary);
  margin: 0;
}

.hero-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: var(--text-primary);
  background-color: var(--bg-panel);
  border: var(--border-width-thin, 1px) solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;
}

.hero-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hero-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The subject box and the tabs box share one column, so they are always equally wide.
   The column is as wide as the wider of the two (normally the tabs box with four cards per row). */
.home-column {
  width: 100%;
  max-width: var(--page-column, 570px);
  margin: 0 auto;
}

/* Tabs: Mini-Games, Virtual Reality, ... */
.home-tabs {
  background-color: var(--bg-panel);
  border: var(--border-width-thin, 1px) solid var(--border-color);
  border-radius: var(--border-radius-md, 6px);
  overflow: hidden;
  display: grid; /* the tab strip above the panel; the box is as tall as the open tab needs */
  position: relative;
}

/* Browser-style tabs: rounded tops, the selected tab joins the panel with curved feet */
.home-tablist {
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  padding: 0.45rem 0.6rem 0;
  background-color: var(--bg-app);
  border-bottom: 1px solid var(--border-color);
}

.home-tablist [role="tab"] {
  --tab-radius: 10px;
  position: relative;
  flex: 0 1 auto;
  margin: 0;
  padding: 0.5rem 1.35rem 0.45rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.home-tablist [role="tab"]:hover {
  background-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}

.home-tablist [role="tab"][aria-selected="true"] {
  z-index: 2;
  margin-bottom: -1px; /* covers the line under the tab strip */
  padding-bottom: calc(0.45rem + 1px);
  background-color: var(--bg-panel);
  border-color: var(--border-color);
  color: var(--color-primary);
}

/* the curved feet where the selected tab meets the line */
.home-tablist [role="tab"][aria-selected="true"]::before,
.home-tablist [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--tab-radius);
  height: var(--tab-radius);
  pointer-events: none;
}

.home-tablist [role="tab"][aria-selected="true"]::before {
  right: 100%;
  margin-right: 0;
  background: radial-gradient(circle at 0 0, transparent calc(var(--tab-radius) - 1px),
    var(--border-color) calc(var(--tab-radius) - 1px), var(--border-color) var(--tab-radius),
    var(--bg-panel) var(--tab-radius));
}

.home-tablist [role="tab"][aria-selected="true"]::after {
  left: 100%;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--tab-radius) - 1px),
    var(--border-color) calc(var(--tab-radius) - 1px), var(--border-color) var(--tab-radius),
    var(--bg-panel) var(--tab-radius));
}

.home-tablist [role="tab"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.home-tabpanel {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  padding: 0.6rem;
}

/* A closed tab keeps its layout (the 3D scene needs its size when it is built) but takes no room: it lies on top of the
   open one, invisible, and does not make the box taller */
.home-tabpanel[hidden] {
  display: grid !important; /* a global [hidden] rule would collapse it */
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  visibility: hidden;
}

/* Tool categories that are not ready yet: a picture, "Under Construction", and "Coming Soon" at the bottom */
.home-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 0 0.2rem;
  text-align: center;
}

.home-soon-scene {
  width: 100%;
  margin-top: auto;
  box-sizing: content-box;
  aspect-ratio: 400 / 250; /* the size of the office window plus the gap under it, reserved before it is loaded so the page does not jump */
  padding-bottom: 0.5rem;
}

/* Games Grid: three cards per row (eight games make 3 + 3 + 2). The grid has six columns and every card takes
   two, so that a short last row can be centered. */
.games-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start; /* rows keep their own height when the tab box is made taller by another tab */
  gap: 0.5rem;
}

/* Game Card */
.game-card {
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  /* For the whole card link */
  color: inherit;
  border: 1px solid var(--border-color);
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  border-color: var(--color-primary);
}

.game-icon-container {
  padding: 0.5rem;
  background: var(--bg-app);
  /* Use app bg for contrast against card */
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.game-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px var(--shadow-color));
  transition: transform 0.2s;
}

.game-card:hover .game-icon {
  transform: scale(1.06);
}

.game-card-body {
  padding: 0.5rem 0.35rem;
  /* Smaller padding */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.game-card-title {
  font-size: 0.76rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
  text-align: center;
  color: var(--text-primary);
}

.game-card-description {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 0;
  flex-grow: 1;
}

.game-card.disabled {
  opacity: 0.7;
  cursor: default;
}

.game-card.disabled:hover {
  transform: none;
  box-shadow: 0 4px 6px var(--shadow-color);
}

@media (max-width: 600px) {
  .home-container {
    padding: 0.25rem 0 0.5rem;
  }

  .hero-section p {
    font-size: 0.85rem;
  }

  .games-grid {
    gap: 1rem;
  }

  .game-icon-container {
    padding: 0.5rem;
  }
}

/* Subject choice above the game cards (takes the width of the column) */
.home-subject {
  margin: 0 0 var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  background-color: var(--bg-panel);
  border: var(--border-width-thin, 1px) solid var(--border-color);
  border-radius: var(--border-radius-md, 6px);
  box-sizing: border-box;
}

.game-card {
  grid-column: span 2;
}

/* a last row of two cards or of one card sits in the middle (not in the 2-column grid of very narrow screens) */
@media (min-width: 341px) {
  .game-card:nth-child(3n + 1):nth-last-child(2) {
    grid-column: 2 / span 2;
  }

  .game-card:nth-child(3n + 2):last-child {
    grid-column: 4 / span 2;
  }

  .game-card:nth-child(3n + 1):last-child {
    grid-column: 3 / span 2;
  }
}

/*
 * Narrow screens. The subject lines wrap. Below the width of the column the cards are brief: icon and name only
 * (the icons keep their size); on very narrow screens two cards per row.
 */
@media (max-width: 550px) {
  .home-column {
    width: 100%;
  }

  .game-card-description {
    display: none;
  }

  .game-card-body {
    padding: 0.4rem 0.45rem;
  }
}

/* phones: smaller still */
@media (max-width: 420px) {
  .game-icon-container {
    padding: 0.4rem 0.2rem;
  }

  .game-card-body {
    padding: 0.35rem 0.2rem;
  }

  .game-card-title {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}

/* very narrow: two cards per row, still brief */
@media (max-width: 340px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-card {
    grid-column: auto;
  }

  .game-icon-container {
    padding: 0.5rem;
  }

  .game-card-body {
    padding: 0.4rem 0.35rem;
  }

  .game-card-title {
    margin: 0;
    font-size: 0.76rem;
  }
}

/* very narrow screens: tighter tabs so that both stay on one line */
@media (max-width: 360px) {
  .home-tablist [role="tab"] {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.78rem;
  }
}

/* The About and Help pages inside their tab: the tab is the box, so the page needs no card of its own */
.home-page .about-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}