/* ========================================
   MAIN CSS - Consolidated Stylesheet
   ========================================
   This file imports all component stylesheets
   in the correct order for the redesign.
   ======================================== */

/* 1. Base Styles - Variables, Reset, Utilities */
@import url('base.css');

/* 2. Layout - Header, Navigation, Footer */
@import url('layout.css');

/* 3. Components - Buttons, Cards, Forms */
@import url('components.css');

/* 4. Section Styles */
@import url('hero.css');
@import url('blog-page.css');
/* Note: about-section.css, portfolio-section.css, blog-section.css, 
   contact-section.css would be imported here once created */

/* ========================================
   SECTION PLACEHOLDERS
   ========================================
   These styles are inline until dedicated 
   section files are created by other agents
   ======================================== */

/* ========================================
   ABOUT SECTION
   ======================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.about-content {
  max-width: 540px;
}

.about-content .section-label {
  margin-bottom: var(--space-4);
}

.about-content .section-title {
  margin-bottom: var(--space-6);
}

.about-text {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.about-text p {
  margin-bottom: var(--space-4);
}

.about-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-slow);
}

.about-image:hover img {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .about-content {
    max-width: 100%;
    order: 2;
  }
  
  .about-image {
    order: 1;
  }
  
  .about-text {
    font-size: var(--text-base);
  }
}

/* ========================================
   PORTFOLIO SECTION
   ======================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

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

.portfolio-item a {
  display: block;
  position: relative;
}

.portfolio-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.portfolio-item:hover img {
  transform: scale(1.08);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 62, 80, 0.9) 0%,
    rgba(44, 62, 80, 0.4) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h3 {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  transform: translateY(20px);
  transition: transform var(--transition-normal) 100ms;
}

.portfolio-item:hover .portfolio-overlay h3 {
  transform: translateY(0);
}

.portfolio-category {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-light);
  transform: translateY(20px);
  transition: transform var(--transition-normal) 200ms;
}

.portfolio-item:hover .portfolio-category {
  transform: translateY(0);
}

/* Filter States */
.portfolio-item.is-hidden {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms ease, transform 300ms ease;
}

.portfolio-item.is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ========================================
   BLOG SECTION
   ======================================== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.blog-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

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

.blog-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

.blog-card-content {
  padding: var(--space-6);
}

.blog-card-title {
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.blog-card-title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.blog-card-title a:hover {
  color: var(--color-primary);
}

.blog-card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.blog-card-date {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.blog-card-link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-fast);
}

.blog-card-link:hover {
  gap: var(--space-2);
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   CONTACT SECTION
   ======================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-12);
  align-items: start;
}

.contact-form-wrapper {
  background-color: var(--color-white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-info h3 {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-info-item svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.contact-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.contact-info-item a,
.contact-info-item p {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  text-decoration: none;
}

.contact-info-item a:hover {
  color: var(--color-primary);
}

.contact-social {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.contact-social .social-link {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.contact-social .social-link:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.contact-social h4 {
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.form-success {
  background-color: #d4edda;
  color: #155724;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  border: 1px solid #c3e6cb;
  display: none;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .contact-form-wrapper {
    order: 2;
  }
  
  .contact-info {
    order: 1;
    text-align: center;
  }
  
  .contact-info-item {
    justify-content: center;
  }
  
  .contact-social {
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .contact-form-wrapper {
    padding: var(--space-6);
  }
}

/* ========================================
   ADDITIONAL UTILITY STYLES
   ======================================== */

/* Spacing utilities for sections */
.pt-0 { padding-top: 0; }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }

.pb-0 { padding-bottom: 0; }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }

/* View all button wrapper */
.view-all-wrapper {
  text-align: center;
  margin-top: var(--space-12);
}