/* Custom dark blue theme and card/grid styles */
:root{
  --bg-1: #061229; /* darkest */
  --bg-2: #0b2b4a; /* mid */
  --card: rgba(12,78,140,0.10); /* card background */
  --accent: #2fa1ff; /* bright blue accent */
  --fg: #d9eefc; /* light foreground */
}

html,body{
  min-height:100vh;
  height:100%;
  margin:0;
  display:flex;
  align-items:center;    /* vertical centering */
  justify-content:center; /* horizontal centering */
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.container{
  max-width:1200px;
  margin:1.6rem auto;
  padding:1rem;
}

/* Use flex (with gap) so Bulma's column sizing (is-one-fifth-desktop) remains effective
   This gives us 5 columns on desktop while allowing controlled gaps and responsive sizing */
:root{ --gap: 0.9rem; }
.grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
  align-items:center;
  justify-content:flex-start;
}

/* Force five equal columns on larger screens while still allowing Bulma classes to take effect.
   Subtract gap to avoid overflow. */
.grid > .column{
  flex: 0 0 calc((100% / 5) - (var(--gap) * 0.8));
  max-width: calc((100% / 5) - (var(--gap) * 0.8));
}

/* Card look for each tile */
.item{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  padding:0.8rem 0.6rem;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.03);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Make tile height respond to viewport width or height so they shrink when either is small */
  min-height: min(22vh, 20vw, 200px);
}

/* Images inside tiles */
.item img{
  max-width:100%;
  /* scale image based on viewport; if either dimension is small this will reduce size */
  max-height: 90%;
  object-fit:contain;
  filter: saturate(1.05) contrast(1.02);
  display:block;
  margin:0 auto; /* ensure centered inside the tile */
}

/* Hover/focus animations and highlight */
.item:hover,
.item:focus-within{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(47,161,255,0.12), 0 2px 6px rgba(0,0,0,0.35);
  border-color: rgba(47,161,255,0.45);
  background: linear-gradient(180deg, rgba(47,161,255,0.06), rgba(10,40,90,0.04));
}

.item a{ display:block; width:100%; height:100%; padding:0.25rem; color:inherit; text-decoration:none; }

/* Slight pulse animation on hover for attention */
@keyframes pulseBlue{
  0%{ box-shadow: 0 6px 18px rgba(47,161,255,0.06); }
  50%{ box-shadow: 0 14px 32px rgba(47,161,255,0.12); }
  100%{ box-shadow: 0 6px 18px rgba(47,161,255,0.06); }
}

.item:hover{
  animation: pulseBlue 900ms ease-in-out 1;
}

/* Responsive tweaks */
/* Responsive sizing: make tiles and images scale with viewport */
@media (max-width: 1200px){
  .grid > .column{ flex: 0 0 calc((100% / 4) - (var(--gap) * 0.8)); max-width: calc((100% / 4) - (var(--gap) * 0.8)); }
  .item{ min-height:110px; }
  .item img{ max-height:90%; }
}

@media (max-width: 900px){
  .grid > .column{ flex: 0 0 calc((100% / 3) - (var(--gap) * 0.8)); max-width: calc((100% / 3) - (var(--gap) * 0.8)); }
  .item{ min-height:96px; }
  .item img{ max-height:90%; }
}

@media (max-width: 600px){
  .grid > .column{ flex: 0 0 calc((100% / 2) - (var(--gap) * 0.8)); max-width: calc((100% / 2) - (var(--gap) * 0.8)); }
  .container{ padding:0.6rem; }
  .item{ min-height:84px; padding:0.6rem 0.5rem; }
  .item img{ max-height:90%; }
}

/* Large desktop: make tiles much larger and keep the grid centered */
@media (min-width: 1400px){
  .grid > .column{ flex: 0 0 calc((100% / 5) - (var(--gap) * 0.8)); max-width: calc((100% / 5) - (var(--gap) * 0.8)); }
  .item{ min-height:200px; padding:1.1rem 0.9rem; }
  .item img{ max-height:90%; }
}

/* On small/tall mobile screens, don't center vertically (prevents clipped content) */
@media (max-height: 720px) and (max-width: 900px){
  html,body{ align-items:flex-start; }
}

/* Small phones: use two columns (more square tiles) and keep the container scrollable */
@media (max-width: 480px){
  /* Prevent vertical centering on small narrow screens */
  html,body{ align-items:flex-start; justify-content:center; }

  /* Make the container take full viewport height and scroll internally so the layout appears as two columns */
  .container{
    max-width:480px;
    width:100%;
    height:100vh;
    box-sizing:border-box;
    overflow-y:auto;
    padding:1rem;
    margin:0 auto;
  }

  .grid{ gap:0.6rem; }
  .grid > .column{ flex: 0 0 calc(50% - (var(--gap) * 0.5)); max-width: calc(50% - (var(--gap) * 0.5)); }

  /* Make tiles more square on phones and touch-friendly */
  .item{ aspect-ratio: 1 / 1; padding:0.6rem 0.5rem; min-height: auto; }
  .item a{ display:flex; align-items:center; justify-content:center; }
  .item img{ max-height:90%; width:auto; }
}

/* Make links show a subtle underline on keyboard focus */
a:focus{ outline:none; }
a:focus-visible{ box-shadow: 0 0 0 4px rgba(47,161,255,0.12); border-radius:6px; }