/* ===== Bento grid ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto); /* rows grow when a box needs more room */
  grid-auto-flow: dense; /* lets small tiles fill gaps */
  gap: var(--gap);
}
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.tile:hover { transform: translateY(-3px) rotate(-0.3deg); box-shadow: var(--shadow-hover); }
.tile--w { grid-column: span 2; }
.tile--t { grid-row: span 2; }
.tile--l { grid-column: span 2; grid-row: span 2; }

.tile-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.35rem; color: #fff; background: var(--accent); flex: none;
}
.tile-title { font-weight: 600; font-size: 1rem; color: var(--text); }
.tile-sub { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.tile-foot { margin-top: auto; }
.tile-arrow { position: absolute; top: 16px; right: 16px; color: var(--muted); font-size: 0.85rem; transition: transform 0.2s; }
a.tile:hover .tile-arrow { transform: translate(2px, -2px); color: var(--text); }
.big-number { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--text); }

/* profile: photo left, text right */
.tile--profile {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 3vw, 36px); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 65%);
}
.profile-photo { position: relative; }
.profile-photo::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent-2), #e0795b, var(--accent), var(--accent-2)); opacity: 0.7; }
.tile--profile .avatar {
  position: relative; display: block; width: clamp(150px, 15vw, 230px); aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover;
  border: 5px solid var(--surface); box-shadow: var(--shadow-hover);
}
.profile-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tile--profile .hello { font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.tile--profile h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
.tile--profile .role { color: var(--text); font-weight: 600; font-size: 1.02rem; }
.tile--profile .tagline { font-size: 0.98rem; }
.facts { list-style: none; display: grid; gap: 4px; font-size: 0.88rem; color: var(--text); }
.facts i { width: 18px; color: var(--accent); }
.tile--profile .status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--ok); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.profile-actions .btn { padding: 8px 14px; font-size: 0.86rem; }
@media (max-width: 640px) {
  .tile--profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile-text { align-items: center; }
  .facts { justify-items: center; }
  .profile-actions { justify-content: center; }
  .tile--profile .avatar { width: 150px; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }

/* photo */
.tile--photo { padding: 0; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
a.tile--photo:hover img { transform: scale(1.05); }
.tile--photo .caption {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8rem; font-weight: 500; backdrop-filter: blur(6px);
}

/* github */
.repo-list { list-style: none; display: grid; gap: 6px; margin-top: 4px; }
.repo-list a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 0.88rem; padding: 4px 0; }
.repo-list a:hover .repo-name { text-decoration: underline; }
.repo-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-lang { margin-left: auto; color: var(--muted); font-size: 0.78rem; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lang-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.gh-stats { display: flex; gap: 14px; font-size: 0.82rem; color: var(--muted); }
.gh-head { display: flex; align-items: center; gap: 10px; }

/* note */
.tile--note .tile-title { font-family: var(--font-display); font-size: 1.4rem; }
.tile--note p { font-size: 0.95rem; }
.tile--note .more { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--accent); }

/* blog: latest story, cover photo behind a gradient */
.tile--blog .blog-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.6s; }
.tile--blog > :not(.blog-bg) { position: relative; z-index: 1; }
.tile--blog.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.7)); z-index: 0; }
.tile--blog.has-cover .tile-title, .tile--blog.has-cover .tile-sub, .tile--blog.has-cover .tile-arrow { color: #fff; }
.tile--blog .tile-title { font-family: var(--font-display); font-size: 1.4rem; margin-top: auto; }
a.tile--blog:hover .blog-bg { transform: scale(1.05); }

/* clock */
.tile--clock .big-number { font-size: 2.6rem; }

@media (min-width: 1280px) {
  .bento { grid-auto-rows: minmax(220px, auto); gap: 20px; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); }
}
@media (max-width: 420px) {
  .bento { grid-auto-rows: minmax(150px, auto); gap: 12px; }
  .tile { padding: 16px; }
  .big-number { font-size: 2.4rem; }
}

/* coding profiles: icon grid */
.tile--profiles { gap: 6px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; flex: 1; align-content: center; }
.profile-link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.profile-link:hover { background: var(--surface-2); transform: translateY(-2px); }
.profile-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--border); color: #6b4f2c; font-size: 1.1rem; }
.profile-ico img { width: 22px; height: 22px; }
.profile-name { font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.2; }
.tile-icon--brand { background: #fff; box-shadow: 0 0 0 1px var(--border); }
.tile-icon--brand img { width: 26px; height: 26px; }