/* Widget Server CSS */

* {
  box-sizing: border-box;
}

/* Container */
.kg-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px;
}

/* Logo */
.kg-logo {
  width: 100%;
  padding: 8px 0;
  text-align: center;
}

.kg-logo a {
  display: inline-block;
}

.kg-logo img {
  width: 50%;
  max-width: 260px;
  height: auto;
  opacity: 1;
}

/* Card base */
.kg-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #222;
}

.kg-card--9-16 {
  aspect-ratio: 9 / 16;
}

.kg-card--1-1 {
  aspect-ratio: 1 / 1;
}

.kg-card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.kg-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card footer with blur background */
.kg-card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0 0 8px 8px;
  z-index: 10;
}

.kg-card-user {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  min-width: 0;
}

.kg-card-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.kg-card-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slider layout (keen-slider handled by its own CSS) */
.kg-card.keen-slider__slide {
  border-radius: 8px;
}

#my-slider {
  width: 100%;
  padding: 4px;
}

/* Tiles grid */
.kg-tiles-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  width: 100%;
  padding: 4px;
}

.kg-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #222;
}

.kg-tile--large {
  grid-column: span 6;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}

.kg-tile--small {
  grid-column: span 3;
  aspect-ratio: 1 / 1;
}

.kg-tile .kg-card-link {
  display: block;
  width: 100%;
  height: 100%;
}

.kg-tile .kg-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kg-tile .kg-card-footer {
  border-radius: 0;
}

/* Horizontal scroll */
.kg-horizontal-scroll {
  display: flex;
  gap: 8px;
  padding: 4px;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#my-slider.kg-horizontal-scroll {
  padding: 4px;
}

.kg-horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.kg-horizontal-scroll .kg-card {
  flex-shrink: 0;
}

/* Vertical grid */
.kg-vertical-grid {
  display: grid;
  gap: 4px;
  padding: 4px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Empty state */
.kg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 16px 0;
}

.kg-empty b,
.kg-empty strong {
  font-weight: 600;
  font-size: 14px;
  color: inherit;
}