/* ==========================================================================
   VIEWPORT STYLES
   ========================================================================== */

/* Import design system variables */
@import url('style_guide.css');

/* ====== BASE STYLES ====== */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
}

/* ====== HEADER ====== */
header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: var(--primary-contrast);
  padding: var(--spacing-2xl) var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.1;
  z-index: 0;
}

header h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.header-subtitle {
  font-size: var(--font-size-lg);
  margin-top: var(--spacing-sm);
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* ====== BADGES CONTAINER ====== */
.badges-container {
  background: var(--surface-color);
  padding: var(--spacing-lg);
  margin-top: calc(-1 * var(--spacing-lg));
  position: relative;
  z-index: var(--z-index-dropdown);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.badges-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.badge-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed) var(--ease-bounce);
  text-decoration: none;
  position: relative;
  background: var(--surface-color);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
}

.badge-link::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width var(--transition-speed) var(--ease-out), 
              left var(--transition-speed) var(--ease-out);
  transform: translateX(-50%);
}

.badge-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.badge-link:hover::after {
  width: 80%;
}

.badge-link img {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius);
  transition: transform var(--transition-speed) var(--ease-bounce);
}

.badge-link:hover img {
  transform: scale(1.1);
}

/* ====== CONTROLS AREA ====== */
.controls-area {
  background-color: var(--surface-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--spacing-xl);
  position: sticky;
  top: var(--spacing-md);
  z-index: var(--z-index-sticky);
  overflow: hidden;
}

.controls-area header {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  padding: var(--spacing-md);
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.controls-area header h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-contrast);
  margin: 0;
  text-align: left;
}

.controls-area form {
  padding: var(--spacing-lg);
}

.controls-area label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
}

.controls-area input,
.controls-area select {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--surface-color);
  color: var(--text-color);
  transition: border-color var(--transition-speed) var(--ease-in-out),
              box-shadow var(--transition-speed) var(--ease-in-out);
}

.controls-area input:focus,
.controls-area select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.controls-area input[type="radio"] {
  width: auto;
  margin-right: var(--spacing-xs);
}

.controls-area button {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-speed) var(--ease-in-out);
}

.controls-area button[type="submit"],
.controls-area button#sort-asc,
.controls-area button#sort-desc {
  background-color: var(--primary-color);
  color: var(--primary-contrast);
  border: none;
}

.controls-area button[type="submit"]:hover,
.controls-area button#sort-asc:hover,
.controls-area button#sort-desc:hover {
  background-color: var(--primary-dark);
}

.controls-area button#reset-filters {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.controls-area button#reset-filters:hover {
  background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* ====== MUURI GRID ====== */
.muuri-grid {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

.muuri-item {
  position: absolute;
  width: calc(33.333% - var(--spacing-xl));
  margin: calc(var(--spacing-lg) / 2);
  z-index: 1;
}

.muuri-item.muuri-item-dragging {
  z-index: 3;
}

.muuri-item.muuri-item-releasing {
  z-index: 2;
}

.muuri-item.muuri-item-hidden {
  z-index: 0;
}

.muuri-item-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--surface-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-speed) var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}

.muuri-item-content:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.muuri-item-content figure {
  margin: 0;
  overflow: hidden;
}

.muuri-item-content img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform var(--transition-speed-medium) var(--ease-out), 
              filter var(--transition-speed) var(--ease-out);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}

.muuri-item-content:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.image-title {
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  transition: background-color var(--transition-speed) var(--ease-in-out);
}

.muuri-item-content:hover .image-title {
  background-color: rgba(var(--primary-color-rgb), 0.05);
}

/* ====== LOADING STATE ====== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  transition: opacity var(--transition-speed-medium) var(--ease-out);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(var(--primary-color-rgb), 0.2);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s var(--ease-elastic) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ====== NO RESULTS ====== */
.no-results-container {
  display: none;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  background: var(--surface-color);
  border-radius: var(--border-radius-lg);
  margin: var(--spacing-xl) auto;
  max-width: 600px;
  box-shadow: var(--shadow);
}

.no-results-container .emoji {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--spacing-md);
}

.no-results-container h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--text-color);
}

/* ====== FOOTER ====== */
footer {
  background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary-color) 100%);
  color: var(--primary-contrast);
  text-align: center;
  padding: var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}

footer p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* ====== RESPONSIVE STYLES ====== */
@media (max-width: 1200px) {
  .muuri-item {
    width: calc(50% - var(--spacing-xl));
  }
  
  header h1 {
    font-size: var(--font-size-3xl);
  }
}

@media (max-width: 768px) {
  header {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  header h1 {
    font-size: var(--font-size-2xl);
  }
  
  .header-subtitle {
    font-size: var(--font-size-base);
  }
  
  .badges-container {
    padding: var(--spacing-md);
    margin-top: calc(-1 * var(--spacing-md));
  }
  
  .badges-row {
    gap: var(--spacing-md);
  }
  
  .badge-link img {
    width: 40px;
    height: 40px;
  }
  
  .controls-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    z-index: var(--z-index-fixed);
  }
  
  .controls-area header {
    padding: var(--spacing-sm);
  }
  
  .controls-area header h3 {
    font-size: var(--font-size-lg);
  }
  
  .controls-area form {
    padding: var(--spacing-md);
  }
  
  main {
    padding-top: 200px; /* Adjust based on controls height */
  }
}

@media (max-width: 600px) {
  .muuri-item {
    width: calc(100% - var(--spacing-xl));
  }
  
  .badges-row {
    gap: var(--spacing-sm);
  }
  
  .badge-link img {
    width: 36px;
    height: 36px;
  }
  
  header h1 {
    font-size: var(--font-size-xl);
  }
  
  .header-subtitle {
    font-size: var(--font-size-sm);
  }
}

/* ====== DARK THEME ADJUSTMENTS ====== */
body.dark-theme .muuri-item-content {
  background: var(--dark-surface);
}

body.dark-theme .image-title {
  color: var(--dark-text);
}

body.dark-theme .loading-overlay {
  background-color: rgba(32, 33, 36, 0.9);
}

body.dark-theme .no-results-container {
  background: var(--dark-surface);
}

body.dark-theme .no-results-container h3 {
  color: var(--dark-text);
}

/* ====== FOCUS ADJUSTMENTS FOR ACCESSIBILITY ====== */
*:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}