/* A gallery shows a number of photos, whether it are albums thumbnails or a collection of
 * photos (album, by tag, search result) in a number of rows with a specific layout as
 * defined in config.php (GALLERY_ROW_HEIGHT).
 * 
 * ACTUALLY: this file not only specifies gallery view, but also others like list and single view.
 Maybe rename to view.css?
 */

.gallery {
    display: flex;
    flex-direction: column;
    gap: var(--gallery-gap);
    width: 100%;
    box-sizing: border-box;
}

.gallery-row {
    display: flex;
    gap: var(--gallery-gap);
    width: 100%;
}

.gallery-item {
    height: var(--gallery-row-height);
    overflow: hidden;
    position: relative;        /* important for overlay */
    border-radius: 4px;
    height: var(--gallery-row-height);
    display: block;  
flex-basis: 60%;
    flex-shrink: 0;
}

.selection-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px;

  /*background: rgba(0, 0, 0, 0.25);*/
  transition: opacity 0.15s ease;
}

.selection-overlay input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-color);
  background: white;
  border-radius: 4px;
}

.selection-mode .selection-overlay {
  opacity: 1;
  pointer-events: auto;
}
  

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-placeholder {
   background: transparent;
}


/*--------------------------------------------------------------------------
 * Album gallery
 */

.gallery-item .album-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 40px;
   background-color: rgba(0,0,0,0.6);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--title-font);
   font-size: var(--body-size);
   box-sizing: border-box;
   font-variant: small-caps;
}


/*--------------------------------------------------------------------------
 * Category cards (sport subtypes landing page)
 */

.category-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
   padding: 40px 20px;
}

.category-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 180px;
   background: var(--card-bg, #f5f5f5);
   border-radius: 12px;
   text-decoration: none;
   color: var(--text-color, #333);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.category-card i {
   font-size: 48px;
   margin-bottom: 12px;
   color: var(--accent-color, #4f46e5);
}

.category-label {
   font-family: var(--title-font);
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 4px;
}

.category-count {
   font-size: 0.85rem;
   color: var(--text-muted, #666);
}


/*--------------------------------------------------------------------------
 * Subtype page header and season sections
 */

.subtype-header {
   padding: 20px 0;
   margin-bottom: 10px;
}

.subtype-header h2 {
   margin: 10px 0 0 0;
   font-family: var(--title-font);
   font-size: 1.5rem;
   font-weight: 500;
}

.subtype-header h2 i {
   margin-right: 10px;
   color: var(--accent-color, #4f46e5);
}

.back-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--text-muted, #666);
   text-decoration: none;
   font-size: 0.9rem;
   transition: color 0.2s ease;
}

.back-link:hover {
   color: var(--accent-color, #4f46e5);
}

.season-section {
   margin-bottom: 30px;
}

.season-header {
   font-family: var(--title-font);
   font-size: 1.1rem;
   font-weight: 500;
   margin: 0 0 15px 0;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--accent-color, #4f46e5);
   color: var(--text-color, #333);
}