/* ------------------------------------------------------------
   HOME (scoped to Home content, but aligned with Reliquary shell)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   REAL ESTATE + TYPOGRAPHY (match Reliquary's .tool-shell defaults)
   ------------------------------------------------------------ */

.tool-shell {
  width: 100%;
  max-width: clamp(980px, 92vw, 2200px);
  margin-inline: auto;
}

/* Typography density BELOW hero only */
.tool-shell,
.tool-shell :where(p, li, a, small, button, label) {
  font-size: 0.94rem;
}

.tool-shell :where(h3) {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

/* Reduce vertical air under the hero */
.tool-shell section,
.tool-shell article {
  margin-top: 0.9rem;
}

/* ------------------------------------------------------------
   TWO-COLUMN INTRO + APPS
   ------------------------------------------------------------ */

.home-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 980px) {
  .home-intro-grid {
    grid-template-columns: 1fr;
  }
}

/* Left panel */
.home-intro {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  border-radius: 0.75rem;
  padding: 1rem;
}

.home-intro p {
  opacity: 0.9;
  margin-bottom: 0.75rem;
}

/* Compact typography for the left intro/updates column (about 30% smaller) */
.home-intro {
  font-size: 0.7rem;
}

.home-intro :where(p, li, a, small, code, span, strong) {
  font-size: 0.7rem;
}

.home-intro :where(h3) { font-size: 0.85rem; margin-bottom: 0.35rem; }
.home-intro :where(h4) { font-size: 0.80rem; margin: 0 0 0.08rem; }

.home-intro .update-card__version { font-size: 0.74rem; padding: 0.07rem 0.42rem; }
.home-intro .update-card__sep { font-size: 0.72rem; }
.home-intro .update-card__name { font-size: 0.86rem; }
.home-intro .update-card__lede { font-size: 0.68rem; }
.home-intro .update-card__group-title { font-size: 0.62rem; }
.home-intro .update-card__list li { font-size: 0.68rem; }

.home-updates {
  display: grid;
  gap: 0.35rem;
  margin: -0.55rem 0 0;
}

.home-intro h4 + .home-updates {
  margin-top: -0.68rem;
}

.update-card {
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.18));
  border-radius: 0.65rem;
  padding: 0.4rem 1.05rem 0.95rem;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  overflow: hidden;
  margin: 0;
}

.update-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: calc(100% + 2.1rem);
  margin: -0.55rem -1.05rem 0.35rem;
  padding: 0.45rem 1.05rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.update-card__sep {
  opacity: 0.65;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  align-self: center;
}

.update-card__version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.44rem;
  border-radius: 999px;
  background: var(--color-accent-primary);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.84rem;
  line-height: 1;
}

.update-card__name {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0.9;
  line-height: 1;
}

.update-card__lede {
  margin: 0.35rem 0 0.6rem;
  line-height: 1.5;
}

.update-card__group + .update-card__group {
  margin-top: 0.65rem;
}

.update-card__group-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.82;
  margin-bottom: 0.45rem;
  display: block;
  position: relative;
  padding-bottom: 0.35rem;
  width: 100%;
}

.update-card__group-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 75%;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent-primary);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  opacity: 0.9;
}

.update-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.update-card__list li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.4;
  list-style: none;
}

.update-card__list li::marker {
  content: none;
}

.update-card__list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
}

/* ------------------------------------------------------------
   APP TILES (2x2 GRID)
   ------------------------------------------------------------ */

.home-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 0.85rem;
  align-content: start;
}

@media (max-width: 720px) {
  .home-apps { grid-template-columns: 1fr; }
}

/* The tile is the link */
.app-tile {
  position: relative;
  display: block;

  border-radius: 0.9rem;
  overflow: hidden;

  min-height: 170px;
  padding: 0.85rem 0.95rem;

  color: white;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.12);
  background-size: cover;
  background-position: center;

  transform: translateY(0);
  transition: transform 120ms ease;
}

/* Dark overlay so text reads on top of the image */
.app-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.42) 55%,
    rgba(0,0,0,0.18) 100%
  );
  z-index: 0;
}

.app-tile:hover {
  transform: translateY(-2px);
}

.app-tile__text {
  position: relative;
  z-index: 1;
}

.app-tile__title {
  font-weight: 800;
  line-height: 1.1;
  font-size: 1.05rem;
}

.app-tile__meta {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   Tile art (paths are case-sensitive on GitHub Pages)
   home.css lives in /styles, so assets are ../Assets/...
   ------------------------------------------------------------ */

.app-tile--reliquary { background-image: url("../Assets/home/Reliquary.png"); }
.app-tile--lexicon   { background-image: url("../Assets/home/Lexicon.png"); }
.app-tile--menagerie { background-image: url("../Assets/home/Menagerie.png"); }
.app-tile--armory    { background-image: url("../Assets/home/Armory.png"); }
.app-tile--grimoire  { background-image: url("../Assets/home/Grimoire.png"); }

/* Disabled styling */
.app-tile.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}