/* ============================================================
   Premium Developer Portfolio - Skills Section Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1.  Skills Section (full-width wrapper, background depth)
     2.  Container Layout (1200px max width, centered)
     3.  Section Header (subtitle, heading, description)
     4.  Typography (headings, subtitle, description)
     5.  Category Styling (grouping + category titles)
     6.  Grid Layout (responsive auto-fit cards)
     7.  Skill Card Design (glassmorphism, spacing, height)
     8.  Glassmorphism Effect (blur + transparency)
     9.  Icon Styling (circular icon container, scaling)
     10. Hover Effects (lift, border, glow, icon scale)
     11. 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 and About sections.
   ============================================================ */


/* ============================================================
   1. SKILLS SECTION
   ------------------------------------------------------------
   The .skills 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 About 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 About section's rhythm.
   ============================================================ */
.skills {
  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 15% 20%, rgba(56, 189, 248, 0.06), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(245, 158, 11, 0.05), transparent 45%),
    var(--color-bg);
}


/* ============================================================
   2. CONTAINER LAYOUT
   ------------------------------------------------------------
   .skills-container caps the content at a 1200px maximum width
   and centers it horizontally with auto margins. This matches
   the hero, navbar, and about widths so the whole portfolio
   aligns on a consistent grid. The container uses Flexbox with
   a column direction to stack the header and the categories
   with a consistent vertical gap.
   ============================================================ */
.skills-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 categories */
}


/* ============================================================
   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.
   ============================================================ */
.skills-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 */
}


/* ============================================================
   4. TYPOGRAPHY
   ------------------------------------------------------------
   The subtitle uses muted text with a subtle accent touch to
   label the section without competing with the main heading.
   The main heading uses Space Grotesk Bold for a premium,
   modern feel. The description uses Inter in muted color for
   calm, readable supporting copy. This hierarchy mirrors the
   About section so the whole portfolio feels cohesive.
   ============================================================ */

/* Small subtitle - muted with an accent-colored label dot */
.skills-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 */
.skills-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 */
.skills-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 */
.skills-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);
}


/* ============================================================
   5. CATEGORY STYLING
   ------------------------------------------------------------
   Each category (Frontend, Frameworks & Libraries, Tools) is
   grouped with a title and its own grid of cards. The
   categories stack vertically with a generous gap (48px) so
   each group feels distinct and premium. The category title
   uses Space Grotesk with a small accent underline for a
   handcrafted, labeled feel.
   ============================================================ */
/* REFINED: Categories now have more vertical separation (64px) so each
   group feels like its own distinct section with its own identity. */
.skills-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);              /* REFINED: 48px between title and grid for breathing room */
}

/* REFINED: Category title now sits inside a subtle pill container to
   give each category its own visual identity and stronger separation. */
.skills-category-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);              /* REFINED: space for the inline dot */
  font-family: var(--font-heading);
  font-weight: 600;                 /* REFINED: slightly bolder for identity */
  font-size: 1.375rem;              /* REFINED: 22px - distinct but not dominant */
  letter-spacing: -0.01em;
  color: var(--color-text);
  position: relative;
  align-self: flex-start;           /* REFINED: don't stretch the title */
  padding: var(--space-1) var(--space-3);  /* REFINED: pill padding */
  padding-left: var(--space-2);     /* REFINED: tighter left for the dot */
  border-radius: 999px;             /* REFINED: pill shape */
  border: 1px solid var(--color-border);
  background-color: rgba(30, 41, 59, 0.5);  /* REFINED: subtle surface */
}

/* REFINED: A small accent dot before the category title for identity */
.skills-category-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  flex-shrink: 0;
}

/* REFINED: Removed the underline; the pill container now provides identity */


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


/* ============================================================
   7. SKILL CARD DESIGN
   ------------------------------------------------------------
   Each skill card is a premium glassmorphism surface. It uses
   rounded corners (20px), a soft border, an elegant shadow,
   and plenty of internal padding (32px) for breathing room.
   Flexbox with a column direction stacks the icon, name, and
   description. A consistent min-height keeps all cards in a
   row visually balanced even when descriptions vary in length.
   ============================================================ */
/* REFINED: Skill cards are now compact and floating with a column
   layout. This gives them a distinct, technology-focused identity
   that feels lighter than the About cards. Reduced padding, min-height,
   and a lighter shadow make them feel more compact and airy. */
.skill-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);              /* 16px between icon, name, description */

  padding: var(--space-3);          /* REFINED: 24px padding - more compact */
  min-height: 160px;                /* REFINED: shorter for a compact feel */

  border-radius: 16px;              /* REFINED: slightly smaller radius */
  border: 1px solid var(--color-border);

  /* Glassmorphism effect (defined in detail in section 8) */
  background-color: rgba(30, 41, 59, 0.40);  /* REFINED: slightly lighter for floating feel */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);  /* REFINED: lighter shadow for floating feel */

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

/* Skill name - Space Grotesk, bold, the card's focal point */
.skill-name {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: 1.25rem;               /* 20px */
  letter-spacing: -0.01em;
  color: var(--color-text);
}

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


/* ============================================================
   8. 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
   .skill-card above and documented here for clarity. We keep
   the opacity moderate (0.45) so text contrast stays high for
   accessibility.
   ============================================================ */


/* ============================================================
   9. ICON STYLING
   ------------------------------------------------------------
   Each technology icon sits inside a circular container with
   a soft border and a subtle surface tint. The icon inherits
   the primary color so all icons share a cohesive accent. On
   hover the icon scales up slightly (handled in section 10),
   giving a tactile, premium micro-interaction. The container
   is 56px to give the icon presence without dominating the card.
   ============================================================ */
/* REFINED: Icon container is now larger and more prominent with a
   gradient background tint for stronger visual identity. */
.skill-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 64px;                      /* REFINED: larger for more prominence */
  height: 64px;                     /* REFINED: larger for more prominence */
  border-radius: 18px;              /* REFINED: slightly larger radius */
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(245, 158, 11, 0.08));  /* REFINED: gradient tint */
  border: 1px solid rgba(56, 189, 248, 0.20);  /* REFINED: subtle primary border */

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

/* REFINED: The SVG icon is larger for more prominence */
.skill-icon {
  width: 32px;                      /* REFINED: larger icon */
  height: 32px;                     /* REFINED: larger icon */
  color: var(--color-primary);
  display: block;
  transition: transform var(--transition-speed) var(--transition-ease);
}


/* ============================================================
   10. HOVER EFFECTS
   ------------------------------------------------------------
   On hover, each card lifts gently (-6px), its border shifts
   to the primary color, and a soft primary glow appears. The
   icon also scales up slightly (1.1) for a tactile feel. All
   transitions use the shared 300ms easing curve so the whole
   portfolio feels cohesive and responsive. These effects are
   subtle and premium, never excessive.
   ============================================================ */
.skill-card:hover {
  transform: translateY(-6px);      /* Subtle lift */
  border-color: var(--color-primary);
  box-shadow: 0 16px 40px rgba(56, 189, 248, 0.20); /* Soft primary glow */
}

/* REFINED: Icon now scales and rotates slightly for a premium feel,
   and the container gains a soft glow on hover */
.skill-card:hover .skill-icon-wrap {
  transform: scale(1.1) rotate(5deg);  /* REFINED: scale + rotate */
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);  /* REFINED: soft glow */
}

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


/* ============================================================
   11. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   The auto-fit grid handles most responsiveness automatically,
   but we add two breakpoints to fine-tune spacing and
   alignment:
     - Tablet  (max-width: 900px): center-align the section
       header and tighten the grid gap slightly.
     - Mobile  (max-width: 600px): reduce padding, center the
       header, and ensure cards are comfortable on small screens.
   The grid naturally collapses to 2 columns on tablet and 1
   column on mobile thanks to the minmax(260px, 1fr) rule.
   ============================================================ */

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

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

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

  /* REFINED: Center the pill category titles on tablet/mobile */
  .skills-category-title {
    align-self: center;             /* REFINED: center the pill */
  }
}

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

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

  .skills-grid {
    gap: var(--space-2);             /* 16px gap on mobile */
  }

  .skill-card {
    padding: var(--space-3);         /* 24px padding on mobile */
    min-height: 180px;               /* Slightly shorter on mobile */
  }

  .skill-name {
    font-size: 1.125rem;             /* 18px on mobile */
  }
}