/* ============================================================
   Premium Developer Portfolio - Projects Section Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1.  Projects Section (full-width wrapper, background depth)
     2.  Container Layout (1200px max width, centered)
     3.  Section Header (subtitle, heading, description)
     4.  Grid Layout (responsive 3/2/1 columns)
     5.  Project Card Styling (glassmorphism, spacing, height)
     6.  Glassmorphism Effect (blur + transparency)
     7.  Image Styling (rounded top, aspect ratio, zoom on hover)
     8.  Typography (titles, descriptions)
     9.  Technology Badges (pill-shaped, primary accent)
     10. Button Styling (primary Live Demo + secondary GitHub)
     11. Hover Effects (lift, border, glow, zoom, slide, color)
     12. Responsive Design (media queries for tablet & mobile)
   ------------------------------------------------------------
   NOTE: This file does NOT redefine the color palette, fonts, or
   spacing variables. It reuses the CSS variables already defined
   in style.css (--color-bg, --color-surface, --color-primary,
   --color-accent, --color-text, --color-muted, --color-border,
   --font-heading, --font-body, --space-*, --transition-*).
   This keeps the whole portfolio on one cohesive theme and
   matches the design language of the Hero, About, and Skills
   sections.
   ============================================================ */


/* ============================================================
   1. PROJECTS SECTION
   ------------------------------------------------------------
   The .projects section is a full-width wrapper. It uses a
   subtle radial-gradient overlay on the background to add
   gentle depth and separate it visually from the Skills
   section above, without being overly bright. position:
   relative lets any future decorative layers anchor to it.
   Generous vertical padding (96px) gives the section premium
   breathing room and matches the other sections' rhythm.
   ============================================================ */
.projects {
  position: relative;
  width: 100%;
  padding: var(--space-8) var(--space-4); /* REFINED: 128px top/bottom for premium breathing room */

  /* Layered radial gradients for subtle, premium depth */
  background:
    radial-gradient(circle at 85% 15%, rgba(56, 189, 248, 0.06), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(245, 158, 11, 0.05), transparent 45%),
    var(--color-bg);
}


/* ============================================================
   2. CONTAINER LAYOUT
   ------------------------------------------------------------
   .projects-container caps the content at a 1200px maximum
   width and centers it horizontally with auto margins. This
   matches the hero, navbar, about, and skills widths so the
   whole portfolio aligns on a consistent grid. The container
   uses Flexbox with a column direction to stack the header
   and the grid with a consistent vertical gap.
   ============================================================ */
.projects-container {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);              /* 64px gap between header and grid */
}


/* ============================================================
   3. SECTION HEADER
   ------------------------------------------------------------
   The header groups the subtitle, main heading, and short
   description. It is left-aligned on desktop and center-aligned
   on tablet/mobile (handled in media queries). A consistent
   vertical gap (16px) creates a calm, premium rhythm between
   the three text elements. This mirrors the Skills header so
   the whole portfolio feels cohesive.
   ============================================================ */
.projects-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between subtitle, heading, description */
  max-width: 42rem;                 /* Cap width so the description stays readable */
}

/* Small subtitle - muted with an accent-colored label dot */
.projects-subtitle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);              /* 8px between dot and text */

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* A small accent-colored dot before the subtitle for a handcrafted touch */
.projects-subtitle::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* Main heading - Space Grotesk Bold, the focal point of the header */
.projects-heading {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: clamp(2rem, 4vw, 2.75rem); /* Responsive: ~32px to ~44px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* Short description - muted, readable supporting copy */
.projects-description {
  font-family: var(--font-body);
  font-size: 1.0625rem;             /* 17px - comfortable reading size */
  line-height: 1.7;                 /* Generous line height for readability */
  color: var(--color-muted);
}


/* ============================================================
   4. GRID LAYOUT
   ------------------------------------------------------------
   The projects grid uses CSS Grid with auto-fit columns. On
   desktop this naturally produces 3 cards per row (within the
   1200px container), on tablet 2 per row, and on mobile 1 per
   row. The minmax(320px, 1fr) ensures cards never get too
   narrow while filling the available space. A 32px gap keeps
   the cards evenly spaced and premium.
   ============================================================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);              /* 32px between cards */
}


/* ============================================================
   5. PROJECT CARD STYLING
   ------------------------------------------------------------
   Each project card is a premium glassmorphism surface. It
   uses rounded corners (24px), a soft border, an elegant
   shadow, and a column Flexbox layout that stacks the image,
   content, and buttons. The card has no internal padding so
   the image can stretch to the top edges, while the content
   area below has its own padding. overflow: hidden keeps the
   image zoom contained within the rounded corners.
   ============================================================ */
/* REFINED: Project cards now have a deeper, more premium shadow and
   a subtle gradient overlay for a richer, image-first feel. */
.project-card {
  display: flex;
  flex-direction: column;

  border-radius: 24px;              /* Rounded corners (20-24px range) */
  border: 1px solid var(--color-border);
  overflow: hidden;                 /* Clip the image zoom within the card */

  /* Glassmorphism effect (defined in detail in section 6) */
  background-color: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);  /* REFINED: deeper premium shadow */

  transition:
    transform var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease);
}


/* ============================================================
   6. GLASSMORPHISM EFFECT
   ------------------------------------------------------------
   Glassmorphism is created by combining a semi-transparent
   surface color with a backdrop blur. This lets the subtle
   background gradients show through softly, giving the cards
   a premium, frosted-glass depth. The effect is applied on
   .project-card above and documented here for clarity. We
   keep the opacity moderate (0.45) so text contrast stays
   high for accessibility.
   ============================================================ */


/* ============================================================
   7. IMAGE STYLING
   ------------------------------------------------------------
   Each project image has a fixed 16:10 aspect ratio and uses
   object-fit: cover so placeholders fill the space cleanly.
   The top corners are rounded to match the card, while the
   bottom is square so it blends into the content area. On
   card hover the image zooms in subtly (scale 1.08) for a
   premium, tactile feel. A soft gradient overlay adds depth.
   ============================================================ */
/* REFINED: Increased screenshot height (16:9 → 16:11) so the image
   becomes the primary focus of the card, making it feel more premium. */
.project-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;            /* REFINED: taller image for image-first focus */
  overflow: hidden;                 /* Clip the zoom within the image area */
}

.project-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* Keep aspect ratio, fill the area */

  transition: transform var(--transition-speed) var(--transition-ease);
}

/* Subtle gradient overlay on the image for premium depth */
.project-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, 0.4));
  pointer-events: none;             /* Never block clicks */
}


/* ============================================================
   8. TYPOGRAPHY
   ------------------------------------------------------------
   The project title uses Space Grotesk Bold as the card's
   focal point. The description uses Inter in muted color for
   calm, readable supporting copy. On card hover the title
   shifts to the accent color for a premium micro-interaction.
   This hierarchy mirrors the rest of the portfolio.
   ============================================================ */

/* Content area below the image - padded for breathing room */
.project-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between title, description, badges */
  padding: var(--space-4);          /* 32px internal padding */
  flex: 1;                          /* Fill remaining card height */
}

/* Project title - Space Grotesk Bold, the card's focal point */
.project-title {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: 1.375rem;              /* 22px */
  letter-spacing: -0.01em;
  color: var(--color-text);

  transition: color var(--transition-speed) var(--transition-ease);
}

/* Short project description - muted, readable supporting copy */
.project-description {
  font-family: var(--font-body);
  font-size: 0.9375rem;             /* 15px - slightly smaller for supporting copy */
  line-height: 1.6;
  color: var(--color-muted);
}


/* ============================================================
   9. TECHNOLOGY BADGES
   ------------------------------------------------------------
   Technologies are displayed as modern pill-shaped badges.
   They use a soft primary-tinted background, a subtle border,
   small padding, and the primary accent color for the text.
   The badges wrap gracefully and have a consistent 8px gap.
   ============================================================ */
.project-tech {
  display: flex;
  flex-wrap: wrap;                  /* Allow badges to wrap on narrow cards */
  gap: var(--space-1);              /* 8px between badges */
  margin-top: var(--space-1);       /* Small breath above the badges */
}

/* Each technology badge - a rounded pill */
.project-tech-badge {
  display: inline-flex;
  align-items: center;

  font-family: var(--font-body);
  font-size: 0.8125rem;             /* 13px - small, elegant */
  font-weight: 500;
  color: var(--color-primary);      /* Primary accent color */

  padding: 4px var(--space-2);      /* 4px vertical, 16px horizontal */
  border-radius: 999px;             /* Fully rounded pill */
  background-color: rgba(56, 189, 248, 0.10); /* Soft primary tint */
  border: 1px solid rgba(56, 189, 248, 0.20); /* Subtle primary border */
}


/* ============================================================
   10. BUTTON STYLING
   ------------------------------------------------------------
   Each card has two buttons: a primary "Live Demo" (filled
   with the accent gradient) and a secondary "GitHub" (outlined
   style). They share a base .project-btn class for consistent
   sizing, rounded corners, comfortable padding, and equal
   height. On card hover the buttons slide upward slightly for
   a premium, tactile micro-interaction.
   ============================================================ */

/* Button group - spaced evenly, allows wrapping on small cards */
.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);              /* 16px between buttons */
  padding: 0 var(--space-4) var(--space-4); /* Match content padding */
  margin-top: auto;                 /* Push buttons to the bottom of the card */

  transition: transform var(--transition-speed) var(--transition-ease);
}

/* Base button styles shared by both buttons */
.project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);              /* 8px between icon and text */

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;             /* 15px */
  text-decoration: none;
  white-space: nowrap;              /* Prevent the text from wrapping */

  padding: var(--space-1) var(--space-3); /* 8px vertical, 24px horizontal */
  border-radius: 999px;             /* Fully rounded pill */
  border: 1px solid transparent;

  cursor: pointer;
  flex: 1;                          /* Equal width buttons */
  min-width: 120px;                 /* Ensure buttons stay comfortable */

  transition:
    transform var(--transition-speed) var(--transition-ease),
    background-color var(--transition-speed) var(--transition-ease),
    color var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease);
}

/* Button icon - small SVG that inherits the current text color */
.project-btn-icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* Primary button: filled with the accent gradient and a soft glow */
.project-btn-primary {
  color: var(--color-bg);           /* Dark text on bright button for contrast */
  background: linear-gradient(135deg, var(--color-accent), #FBBF24);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

/* Secondary button: outlined style for lower emphasis */
.project-btn-secondary {
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-border);
}

/* Hover: lift the primary button and intensify the glow */
.project-btn-primary:hover {
  transform: translateY(-2px);      /* Subtle lift */
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.40);
}

/* Hover: fill the secondary button subtly with the surface color */
.project-btn-secondary:hover {
  transform: translateY(-2px);      /* Subtle lift */
  background-color: rgba(30, 41, 59, 0.6);
  border-color: rgba(56, 189, 248, 0.4); /* Hint of primary on hover */
}

/* Active/pressed state: buttons sink slightly for feedback */
.project-btn:active {
  transform: translateY(0);
}


/* ============================================================
   11. HOVER EFFECTS
   ------------------------------------------------------------
   On hover, each project card lifts gently (-6px), its border
   shifts to the primary color, and a soft primary glow appears.
   The screenshot zooms in subtly (scale 1.08), the buttons
   slide upward slightly (-4px), and the project title changes
   to the accent color. The shadow also deepens. All transitions
   use the shared 300ms easing curve so the whole portfolio
   feels cohesive and responsive. These effects are subtle and
   premium, never excessive.
   ============================================================ */

/* Card hover: lift, primary border, soft glow, deeper shadow */
.project-card:hover {
  transform: translateY(-6px);      /* Subtle lift */
  border-color: var(--color-primary);
  box-shadow: 0 20px 48px rgba(56, 189, 248, 0.20); /* Soft primary glow */
}

/* REFINED: Image zoom is slightly more pronounced (1.1) for a
   more premium, tactile feel on hover */
.project-card:hover .project-image {
  transform: scale(1.1);            /* REFINED: slightly stronger zoom */
}

/* Buttons slide upward on card hover */
.project-card:hover .project-actions {
  transform: translateY(-4px);      /* Subtle upward slide */
}

/* Title changes to the accent color on card hover */
.project-card:hover .project-title {
  color: var(--color-accent);       /* Warm accent highlight */
}

/* Visible focus state for keyboard users (accessibility) */
.project-card:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 20px 48px rgba(56, 189, 248, 0.20);
}


/* ============================================================
   12. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   The auto-fit grid handles most responsiveness automatically,
   but we add two breakpoints to fine-tune spacing, alignment,
   and button layout:
     - Tablet  (max-width: 900px): center-align the section
       header and keep 2 cards per row.
     - Mobile  (max-width: 600px): reduce padding, center the
       header, and stack buttons full width for comfortable
       tap targets. The grid naturally collapses to 1 column.
   ============================================================ */

/* ---- Tablet and smaller ---- */
@media (max-width: 900px) {
  .projects {
    padding: var(--space-6) var(--space-3); /* 64px top/bottom, 24px sides */
  }

  .projects-container {
    gap: var(--space-5);             /* 48px gap on tablet */
  }

  /* Center-align the header on tablet/mobile */
  .projects-header {
    align-items: center;
    text-align: center;
    margin: 0 auto;                  /* Center the header block */
  }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .projects {
    padding: var(--space-5) var(--space-2); /* 48px top/bottom, 16px sides */
  }

  .projects-container {
    gap: var(--space-5);             /* 48px gap on mobile */
  }

  .projects-grid {
    gap: var(--space-3);             /* 24px gap on mobile */
  }

  .project-content {
    padding: var(--space-3);         /* 24px padding on mobile */
  }

  .project-actions {
    padding: 0 var(--space-3) var(--space-3); /* Match content padding */
  }

  .project-title {
    font-size: 1.25rem;              /* 20px on mobile */
  }

  /* Stack buttons full width for comfortable tap targets on mobile */
  .project-actions {
    flex-direction: column;
  }

  .project-btn {
    width: 100%;
    min-width: 0;                    /* Allow full-width on mobile */
  }
}