@import url('style.css');

/* Gallery-specific CSS custom properties */
:root {
 /* Spacing system following Ken's modular scale */
 --space-unit: 1rem;
 --gallery-grid-gap: calc(var(--space-unit) * 1.5); /* 24px base */
 --gallery-card-padding: var(--space-unit); /* 16px */
 --gallery-section-margin: calc(var(--space-unit) * 3); /* 48px */
 
 /* Gallery-specific colors using existing variables */
 --gallery-card-hover-shadow: 0 8px 25px rgba(114, 161, 222, 0.3);
 --modal-bg: rgba(0, 0, 0, 0.9);
 --modal-content-bg: var(--card-bg-color);
 --tech-tag-bg: var(--hero-element-bg-color);
 --tech-tag-border: var(--element-accent-color);
 
 /* Typography following Ken's fluid scale */
 --gallery-title-size: 3em;
 --card-title-size: 1.5em;
 --tech-tag-size: 0.875em;
}

/* Header Navigation Active State */
.nav-link.active {
 color: var(--color-secondary);
 font-weight: 600;
}

/* Removed underline accent from active nav link as requested */

/* Gallery Section Styling */
.gallery-section {
 padding: 2rem 1rem;
 max-width: 1400px;
 margin: 0 auto;
 position: relative;
 z-index: 2;
}

.gallery-section h1 {
 font-family: var(--font-family-heading);
 font-size: clamp(2rem, 4vw, 3rem);
 font-weight: 700;
 color: var(--text-color-main);
 text-align: center;
 margin-bottom: 1rem;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gallery-section .section-subtitle {
 font-family: var(--font-family-body);
 font-size: 1.125rem;
 color: var(--text-color-secondary);
 text-align: center;
 margin-bottom: 3rem;
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
 line-height: 1.6;
}

.gallery-section .section-title {
 text-align: center;
 margin-bottom: var(--gallery-section-margin);
 font-size: var(--gallery-title-size);
 color: var(--color-secondary);
}

/* Hidden Websites Section */
.hidden-websites-section {
 padding: 2rem 1rem;
 max-width: 1400px;
 margin: 0 auto;
 position: relative;
 z-index: 2;
 margin-top: 3rem;
 margin-bottom: 70px; /* Match footer height to prevent overlap */
}

.hidden-websites__title {
 font-family: var(--font-family-heading);
 font-size: clamp(1.5rem, 3vw, 2rem);
 font-weight: 600;
 color: var(--text-color-main);
 text-align: center;
 margin-bottom: 1rem;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 position: relative;
}

/* Removed underline accent from hidden websites title as requested */

/* Hidden Websites Grid */
.hidden-websites__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 1rem;
 margin-top: 2rem;
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
}

.hidden-websites__item {
 background: var(--card-bg-color);
 border: 1px solid var(--element-accent-color);
 border-radius: 8px;
 padding: 1rem 1.25rem;
 font-family: var(--font-family-body);
 font-size: 0.95rem;
 font-weight: 500;
 color: var(--text-color-main);
 text-align: center;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative;
 overflow: hidden;
 backdrop-filter: blur(5px);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hidden-websites__item::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
 transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hidden-websites__item:hover {
 transform: translateY(-2px);
 border-color: var(--color-secondary);
 box-shadow: 0 4px 16px rgba(114, 161, 222, 0.2);
 color: var(--main-font-color);
}

.hidden-websites__item:hover::before {
 left: 100%;
}

.hidden-websites__item:focus {
 outline: 2px solid var(--color-secondary);
 outline-offset: 2px;
 transform: translateY(-2px);
}

/* Responsive breakpoints */
@media screen and (max-width: 1200px) {
 .hidden-websites__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
 }
}

@media screen and (max-width: 768px) {
 .hidden-websites__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
 }
 
 .hidden-websites__item {
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
 }
}

@media screen and (max-width: 480px) {
 .hidden-websites__grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
 }
 
 .hidden-websites__item {
  padding: 1rem;
  font-size: 0.95rem;
 }
}

/* Back to Top Link */
.back-to-top-container {
 display: flex;
 justify-content: center;
 margin-top: 3rem;
 margin-bottom: 2rem;
}

.back-to-top-link {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.875rem 1.5rem;
 background: var(--card-bg-color);
 border: 2px solid var(--element-accent-color);
 border-radius: 50px;
 color: var(--text-color-main);
 text-decoration: none;
 font-family: var(--font-family-body);
 font-size: 0.95rem;
 font-weight: 600;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative;
 overflow: hidden;
 backdrop-filter: blur(10px);
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.back-to-top-link::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 184, 107, 0.1), transparent);
 transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top-icon {
 font-size: 1.2rem;
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top-text {
 transition: color 0.3s ease;
}

.back-to-top-link:hover {
 transform: translateY(-3px);
 border-color: var(--color-secondary);
 color: var(--main-font-color);
 box-shadow: 0 8px 25px rgba(114, 161, 222, 0.3);
}

.back-to-top-link:hover::before {
 left: 100%;
}

.back-to-top-link:hover .back-to-top-icon {
 transform: translateY(-2px);
 color: var(--color-secondary);
}

.back-to-top-link:focus {
 outline: 3px solid var(--color-secondary);
 outline-offset: 3px;
 transform: translateY(-3px);
}

.back-to-top-link:active {
 transform: translateY(-1px);
 transition: transform 0.1s ease;
}

/* Responsive adjustments for back to top */
@media screen and (max-width: 768px) {
 .back-to-top-container {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
 }
 
 .back-to-top-link {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
 }
 
 .back-to-top-icon {
  font-size: 1.1rem;
 }
}

@media screen and (max-width: 480px) {
 .back-to-top-link {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
 }
}

/* Gallery Grid Layout */
.gallery-grid {
 display: grid;
 gap: var(--gallery-grid-gap);
 grid-template-columns: 1fr;
 grid-auto-rows: 1fr; /* Equal height cards */
 width: 100%;
 align-items: stretch;
}

/* Responsive Grid Breakpoints - Mobile First Approach */
/* Base: Mobile (1 column) */

@media (min-width: 30em) { /* 480px - Small tablets/large phones */
 .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 43.75em) { /* 700px - Tablets */
 .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 75em) { /* 1200px - Desktop */
 .gallery-grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

@media (min-width: 87.5em) { /* 1400px - Large Desktop */
 .gallery-grid {
  grid-template-columns: repeat(4, 1fr);
 }
}

/* Gallery Card Styling */
.gallery-card {
 background: var(--card-bg-color);
 border: 1px solid var(--card-border-color);
 border-radius: 20px;
 overflow: hidden;
 transition: all 0.3s ease;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 height: 100%;
 position: relative;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

.gallery-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--gallery-card-hover-shadow);
 border-color: var(--element-accent-color);
}

.gallery-card:focus {
 outline: 2px solid var(--icon-one-color);
 outline-offset: 2px;
 transform: translateY(-2px);
}

.gallery-card:active {
 transform: translateY(-2px);
 transition: transform 0.1s ease;
}

/* Card Header */
.card-header {
 padding: var(--gallery-card-padding);
 padding-bottom: calc(var(--gallery-card-padding) / 2);
 background: linear-gradient(135deg, var(--hero-element-bg-color), transparent);
}

.project-title {
 font-family: Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
 font-size: var(--card-title-size);
 font-weight: 600;
 line-height: 1.4;
 color: var(--main-font-color);
 margin: 0;
 text-shadow: 0 1px 2px var(--text-shadow-color);
}

/* Card Image Container */
.card-image-container {
 position: relative;
 width: 100%;
 aspect-ratio: 16/10;
 overflow: hidden;
}

.gallery-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-image {
 transform: scale(1.05);
}

/* Card Footer */
.card-footer {
 padding: var(--gallery-card-padding);
 padding-top: calc(var(--gallery-card-padding) / 2);
 margin-top: auto;
}

.tech-stack {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
}

.tech-tag {
 background: var(--tech-tag-bg);
 border: 1px solid var(--tech-tag-border);
 color: var(--main-font-color);
 padding: 0.25rem 0.5rem;
 border-radius: 12px;
 font-size: var(--tech-tag-size);
 font-weight: 500;
 transition: all 0.2s ease;
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
}

.tech-tag:hover {
 background: var(--element-accent-color);
 border-color: var(--icon-one-color);
 transform: translateY(-1px);
}

.gallery-card:hover .tech-tag {
 border-color: var(--icon-one-color);
}

/* Modal Styling */
.modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.9);
 backdrop-filter: blur(10px);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 1000;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s ease;
}

.modal.active {
 opacity: 1;
 visibility: visible;
}

.modal.closing {
 opacity: 0;
 visibility: visible;
 transition: opacity 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), visibility 0.3s ease;
}

.modal-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 cursor: pointer;
}

.modal-content {
 position: relative;
 max-width: 90vw;
 max-height: 90vh;
 background: var(--hero-element-bg-color);
 border-radius: var(--border-radius-large);
 padding: 2rem;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 backdrop-filter: blur(20px);
 border: 1px solid var(--element-accent-color);
 transform: scale(0.8) translateY(20px);
 transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
 opacity: 0;
}

.modal.active .modal-content {
 transform: scale(1) translateY(0);
 opacity: 1;
}

.modal.closing .modal-content {
 transform: scale(0.9) translateY(-10px);
 opacity: 0;
 transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.3s ease;
}

.modal-close {
 position: absolute;
 top: 1rem;
 right: 1rem;
 background: var(--card-button-bg-color);
 border: 1px solid var(--card-border-color);
 color: var(--main-font-color);
 font-size: 2rem;
 width: 3rem;
 height: 3rem;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 1001;
 transition: background-color 0.3s ease;
}

.modal-close:hover {
 background: var(--icon-one-color);
}

.modal-close:focus {
 outline: 2px solid var(--icon-one-color);
 outline-offset: 2px;
}

.modal-image {
 width: 100%;
 height: auto;
 max-height: 70vh;
 object-fit: contain;
}

.modal-info {
 padding: 1.5rem;
}

.modal-project-title {
 font-size: 1.75rem;
 color: var(--main-font-color);
 margin: 0 0 1rem 0;
}

.modal-tech-stack {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
}

/* Loading and Error States */
.gallery-image.lazy {
 opacity: 0;
 transition: opacity 0.3s ease;
}

.gallery-image.loaded {
 opacity: 1;
}

.gallery-image.loading {
 background: var(--hero-element-bg-color);
 position: relative;
}

.gallery-image.loading::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 20px;
 height: 20px;
 margin: -10px 0 0 -10px;
 border: 2px solid var(--element-accent-color);
 border-top: 2px solid var(--icon-one-color);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

.gallery-image.error-state {
 background: var(--hero-element-bg-color);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-color-main);
 font-size: 0.875rem;
 min-height: 200px;
}

/* Mobile Optimizations */
@media (max-width: 480px) {
 .gallery-section {
  padding: 1rem;
 }
 
 .gallery-grid {
  gap: 1rem;
 }
 
 .gallery-card {
  min-height: 280px; /* Ensure minimum card height on mobile */
 }
 
 .modal-content {
  max-width: 95vw;
  max-height: 95vh;
 }
 
 .modal-close {
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
 }
}

/* Tablet Optimizations */
@media (min-width: 481px) and (max-width: 1199px) {
 .gallery-section {
  padding: 2rem 1.5rem;
 }
 
 .gallery-grid {
  gap: 1.5rem;
 }
}

/* Desktop Optimizations */
@media (min-width: 1200px) {
 .gallery-section {
  padding: 3rem 2rem;
 }
}

/* Screen Reader Only Content */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
 .gallery-card {
  border-width: 2px;
 }
 
 .tech-tag {
  border-width: 2px;
 }
 
 .modal-close {
  border-width: 2px;
 }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
 .gallery-card,
 .gallery-image,
 .tech-tag,
 .modal,
 .modal-content {
  transition: none;
  animation: none;
 }
 
 .gallery-card:hover {
  transform: none;
 }
 
 .gallery-image.loading::after {
  animation: none;
 }
}