/* the tile must be a positioning context */
.grid-link{
  position: relative;
}

/* toolbar floats above everything */
.grid-item-toolbar{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;          /* must be higher than the <a> */
  pointer-events: auto;
}

/* the link card sits below the toolbar */
.grid-link-card{
  position: relative;
  z-index: 1;
}

.grid-link-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: .5em;
  padding: 0em;
  border-radius: 12px;
  font-family: "askwhy";
  color: white;
  text-decoration: none;
  background: rgba(255,255,255,0.05);   /* faint ghost fill */
  backdrop-filter: blur(4px);           /* glassy effect */
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);  /* soft overlay shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
    
  border: 5px solid white;
}

.grid-link-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  border-radius: 12px; /* keep nice corners */
  overflow: hidden;    /* make sure child animations don't leak */
}

.grid-link-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  filter: brightness(1.08) saturate(1.1);
}

.grid-link-card .gl-thumb {
  transition: transform 0.6s ease;
}

.grid-link-card:hover .gl-thumb {
  transform: scale(1.05); /* thumb does the cute pop */
}

.gl-title {
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #f9d6ff 25%,
    #9fd5ff 50%,
    #fff 75%,
    #f9d6ff 100%
  );
  background-size: 200% auto;  /* wider than text so it can move */
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: background-position 0.9s ease;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.9rem, 2.5vw, 1.5rem); 
}


.grid-link-card:hover .gl-title {
  background-position: -200% center; /* makes it shimmer across */
}

.gl-left {
  flex: 0 0 200px;           /* match circle size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gl-thumb {
height: 200px;
width: 200px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0em;
  margin: 0em;
  margin-left: 1em;
}

.gl-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* center text next to thumb */
}

/* --- Host / URL --- */
.gl-host {
  font-size: 0.75rem;
  opacity: 0.65;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Description & Notes --- */
.gl-desc,
.gl-note {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-light);
  font-family: "loubag";
  overflow: hidden;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
}

/* --- Grid Item Content Wrapper --- */
.grid-stack-item-content:has(.grid-link-stack) {
background: transparent !important;
border: none;
overflow: scroll !important;
padding: 0em !important;
margin: 0em !important;
}