/* Dark modern styles for a mobile-first hub (no vertical scroll on typical phones) */

:root{
  --bg: #0b0f12;
  --panel: #0f1518;
  --muted: #a6a89f;            /* slightly warmer neutral */
  --accent: #ff8a3d;           /* warm amber/orange accent (no blue) */
  --tile-border: rgba(255,255,255,0.04);
  --shadow: 0 8px 26px rgba(0,0,0,0.6);
  --gap: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{
  height:100%;
  margin:0;
  background:linear-gradient(180deg, #071011 0%, var(--bg) 100%);
  color:#e6f1f2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Top banner title */
.banner{
  width:100%;
  padding:22px 18px; /* slightly taller banner to center text vertically */
  box-sizing:border-box;
  background:linear-gradient(90deg, rgba(255,138,61,0.06), rgba(255,138,61,0.02));
  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.banner-inner{
  width:100%;
  max-width:1100px;
  font-weight:700;
  font-size:17px;
  color: #cfeff0;
  letter-spacing:0.2px;
  text-align:center; /* center title text horizontally */
}

/* Reserved landscape photo space under the grid */
.photo-space{
  width:100%;
  max-width:980px;
  height:120px; /* reserve a landscape slot; adjust as desired */
  margin:14px auto 0;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  display:block;
}

/* Main wrap keeps content centered */
.wrap{
  height:calc(100vh - 72px); /* account for larger top banner */
  display:flex;
  flex-direction:column; /* stack intro above the grid */
  align-items:center;
  justify-content:flex-start;
  padding:24px 18px 18px; /* a little extra top padding so the intro sits comfortably below the banner */
  box-sizing:border-box;
}

/* Intro / description box under banner */
.intro{
  width:100%;
  max-width:980px;
  margin: 8px 0 14px 0; /* slight top gap to separate from banner when placed above the tiles */
  display:flex;
  justify-content:center;
}
.intro-inner{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  padding:12px 14px;
  color:var(--muted);
  font-size:14px;
  border:1px solid rgba(255,255,255,0.03);
  text-align:center;
}

/* Grid of tiles. 1-2 columns depending on available width */
.grid{
  width:100%;
  max-width:980px;
  display:grid;
  grid-template-columns: 1fr;
  gap:var(--gap);
}

/* On wider screens, use two columns */
@media(min-width:520px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

/* Tile (large tappable area) */
.tile{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  text-decoration:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  border:1px solid var(--tile-border);
  color:inherit;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  touch-action:manipulation;
  min-height:84px; /* comfortable touch size */
  overflow:hidden;
}

/* Hover / focus emphasis */
.tile:hover, .tile:focus{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.65);
  background: linear-gradient(180deg, rgba(255,138,61,0.03), rgba(255,255,255,0.01));
}

/* Icon area */
.tile-icon{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,138,61,0.12), rgba(255,138,61,0.03));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  flex-shrink:0;
  box-shadow: 0 4px 14px rgba(255,138,61,0.06) inset;
}

/* Icon svg sizing */
.tile-icon svg{ display:block; width:28px; height:28px; }

/* Body area holds label and hidden synopsis */
.tile-body{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }

/* Label area */
.tile-label{
  font-size:17px;
  font-weight:700;
  color:#e6f1f2;
  line-height:1;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* Synopsis: hidden by default, revealed on hover */
.tile-desc{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
  font-weight:500;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, max-height .18s ease;
  overflow:hidden;
  will-change:opacity,transform;
}

/* Show synopsis when hovering or focus-visible (keyboard) */
.tile:hover .tile-desc,
.tile:focus .tile-desc,
.tile:focus-within .tile-desc{
  max-height:120px;
  opacity:1;
  transform:translateY(0);
}

/* Accessibility focus ring */
.tile:focus{
  outline:3px solid rgba(255,138,61,0.12);
  outline-offset:4px;
  border-radius:10px;
}

/* Small screens: ensure text wraps nicely */
@media(max-width:420px){
  .tile{ gap:12px; padding:12px; min-height:76px; }
  .tile-icon{ width:48px; height:48px; min-width:48px; }
  .banner-inner{ font-size:13px; }
}