/* ============================================================
   Premium Developer Portfolio - About Section Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1.  About Section (full-width wrapper, background depth)
     2.  Container Layout (1200px max width, centered)
     3.  Two-column Structure (Flexbox, desktop layout)
     4.  Left Image Area (profile composition)
     5.  Image Styling (rounded corners, soft shadow, border)
     6.  Decorative Elements (abstract background shapes)
     7.  Typography (headings, accent line, paragraph)
     8.  Information Grid (elegant info cards)
     9.  Statistics Cards (glassmorphism, hover lift)
     10. Hover Effects (smooth transitions)
     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.
   ============================================================ */


/* ============================================================
   1. ABOUT SECTION
   ------------------------------------------------------------
   The .about 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 hero above, without being
   overly bright. position: relative lets the decorative shapes
   anchor to it. Generous vertical padding (96px) gives the
   section premium breathing room.
   ============================================================ */
.about {
  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 80% 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
   ------------------------------------------------------------
   .about-container caps the content at a 1200px maximum width
   and centers it horizontally with auto margins. This matches
   the hero and navbar widths so the whole portfolio aligns on
   a consistent grid. Side padding keeps content off the edges
   on smaller screens.
   ============================================================ */
.about-container {
  position: relative;
  z-index: 1;

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


/* ============================================================
   3. TWO-COLUMN STRUCTURE
   ------------------------------------------------------------
   Flexbox creates the two-column layout: the left image area
   and the right content. On desktop they sit side by side with
   a generous 64px gap; on tablet/mobile they stack vertically
   (handled in the media queries below). The right column takes
   more space (1.4) so the text and cards dominate the layout,
   while the image (1) balances the composition.
   ============================================================ */
.about-grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-6);              /* 64px gap between columns */
}

.about-image-area {
  flex: 1;                          /* Image column */
  min-width: 0;
}

.about-content {
  flex: 1.4;                        /* Content column - wider */
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 32px vertical rhythm */
}


/* ============================================================
   4. LEFT IMAGE AREA
   ------------------------------------------------------------
   The left column holds the portrait image and its decorative
   background shapes. It is positioned relative so the
   decorative shapes can anchor to it. The image is sticky on
   desktop so it stays visible while the right column scrolls,
   creating a premium, magazine-like reading experience.
   ============================================================ */
.about-image-area {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* On desktop, keep the image framed nicely within the column */
.about-image-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
}


/* ============================================================
   5. IMAGE STYLING
   ------------------------------------------------------------
   The portrait uses rounded corners (20px), a soft shadow for
   depth, and a thin elegant border to separate it from the
   background. object-fit: cover keeps the aspect ratio stable
   when a real photo replaces the placeholder. A subtle gradient
   overlay (via a pseudo-element) adds a premium tint.
   ============================================================ */
/* REFINED: The portrait now sits inside a gradient-bordered frame for
   a stronger, more editorial visual presence. The frame uses padding
   plus a gradient background to create the ring, while the image is
   clipped to rounded corners inside it. */
.about-image-frame {
  padding: 4px;                     /* REFINED: gradient ring thickness */
  border-radius: 24px;              /* REFINED: slightly larger radius */
  background: linear-gradient(160deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);  /* REFINED: deeper, premium shadow */
}

.about-portrait {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;              /* Portrait aspect ratio */
  object-fit: cover;

  border-radius: 20px;              /* Rounded corners (16-24px range) */
  border: 2px solid var(--color-bg);  /* REFINED: inner border to separate from ring */
  box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.25));

  /* Subtle gradient overlay for a premium tint */
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.08), transparent 60%);
}


/* ============================================================
   6. DECORATIVE ELEMENTS
   ------------------------------------------------------------
   Purely visual background shapes behind the portrait: soft
   blurred blobs and a thin outline ring. They add handcrafted
   depth without distracting from the image. All are absolutely
   positioned and static (no animation). aria-hidden in the HTML
   ensures screen readers skip them.
   ============================================================ */
.about-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;             /* Never block clicks */
}

/* Soft blurred color blob (primary) - top left ambient glow */
.about-decor-blob--primary {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -24px;
  left: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.30), transparent 70%);
  filter: blur(50px);
  opacity: 0.6;
}

/* Soft blurred color blob (accent) - bottom right ambient glow */
.about-decor-blob--accent {
  position: absolute;
  width: 180px;
  height: 180px;
  bottom: -20px;
  right: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25), transparent 70%);
  filter: blur(50px);
  opacity: 0.5;
}

/* Thin outline ring for a handcrafted, geometric feel */
.about-decor-ring {
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-border);
  border-radius: 50%;
}


/* ============================================================
   7. TYPOGRAPHY
   ------------------------------------------------------------
   The section heading uses Space Grotesk Bold for a premium,
   modern feel. A small decorative accent line beneath it adds
   a handcrafted touch and visually anchors the heading. The
   introduction paragraph uses Inter in muted color for calm,
   readable supporting copy.
   ============================================================ */

/* Section heading */
.about-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);
}

/* Decorative accent line beneath the heading */
.about-accent-line {
  display: block;
  width: 64px;
  height: 4px;
  margin-top: var(--space-2);       /* 16px gap below the heading */
  border-radius: 999px;             /* Rounded ends */
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* Introduction paragraph */
.about-intro {
  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);
  max-width: 38rem;                 /* Cap line length for readability */
}


/* ============================================================
   8. INFORMATION GRID
   ------------------------------------------------------------
   A clean responsive grid of information cards (Name, Email,
   Location, Experience). Each card is an elegant surface with
   a label (muted, small) and a value (text, slightly bolder).
   The grid auto-fits so it stays balanced on all screen sizes.
   ============================================================ */
/* REFINED: Larger gap for more editorial breathing room between cards */
.about-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns on desktop */
  gap: var(--space-3);              /* REFINED: 24px between cards for editorial spacing */
}

/* REFINED: Info cards are now larger, softer, and more editorial.
   Increased padding, larger radius, and a subtle left accent border
   give each card its own visual weight without looking like a grid. */
.about-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);              /* 8px between label and value */

  padding: var(--space-4);          /* REFINED: 32px padding for larger, softer cards */
  border-radius: 20px;              /* REFINED: larger, more natural radius */
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);  /* REFINED: editorial left accent */

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

/* REFINED: Hover now lifts higher with a softer shadow and border glow */
.about-info-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  border-left-color: var(--color-accent);  /* REFINED: accent shifts on hover */
  transform: translateY(-4px);      /* REFINED: higher lift */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);  /* REFINED: softer shadow */
}

/* Label (muted, small, uppercase for a premium label look) */
.about-info-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;             /* 13px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* Value (primary text, slightly bolder) */
.about-info-value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;           /* Long emails wrap gracefully */
}


/* ============================================================
   9. STATISTICS CARDS
   ------------------------------------------------------------
   Three premium cards: Projects Completed, Years Learning,
   Certificates Earned. They use a glassmorphism effect
   (semi-transparent surface + backdrop blur), rounded corners,
   soft shadows, and a subtle hover lift. The large number is
   the focal point, with a small label beneath.
   ============================================================ */
/* REFINED: Larger gap for a more modern dashboard feel */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: var(--space-3);              /* REFINED: 24px between cards */
}

/* REFINED: Stats cards now have a modern dashboard style with a top
   accent line, larger padding, and a subtle gradient overlay. This
   gives them a distinct identity from the info cards above. */
.about-stat-card {
  position: relative;               /* REFINED: for the top accent line */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);              /* 8px between number and label */

  padding: var(--space-4);          /* REFINED: 32px padding for more presence */
  border-radius: 20px;              /* REFINED: larger, softer radius */

  /* Glassmorphism: semi-transparent surface + blur */
  background-color: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

  /* REFINED: subtle gradient overlay for dashboard depth */
  background-image: linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent 60%);

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

/* REFINED: Top accent line for a modern dashboard indicator */
.about-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0.7;
  transition: opacity var(--transition-speed) var(--transition-ease);
}

/* The large statistic number - the focal point */
.about-stat-number {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: clamp(1.75rem, 3vw, 2.25rem); /* Responsive */
  line-height: 1;
  color: var(--color-primary);      /* Primary accent for the number */
}

/* The small label beneath the number */
.about-stat-label {
  font-family: var(--font-body);
  font-size: 0.875rem;              /* 14px */
  font-weight: 500;
  color: var(--color-muted);
}


/* ============================================================
   10. HOVER EFFECTS
   ------------------------------------------------------------
   The statistics cards lift gently (-4px) on hover and their
   shadow deepens, giving a tactile, premium micro-interaction.
   The border also picks up a hint of the primary color. This
   matches the hover philosophy used across the portfolio.
   ============================================================ */
/* REFINED: Hover now also intensifies the top accent line for a
   premium dashboard micro-interaction */
.about-stat-card:hover {
  transform: translateY(-6px);      /* REFINED: higher lift */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
  border-color: rgba(56, 189, 248, 0.3);
}

.about-stat-card:hover::before {
  opacity: 1;                       /* REFINED: accent line brightens on hover */
}


/* ============================================================
   11. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   We use two breakpoints:
     - Tablet  (max-width: 900px): stack the two columns
       vertically, center-align the content, and let the
       information grid stay two columns.
     - Mobile  (max-width: 600px): tighten spacing, make the
       information grid a single column, and make the stats
       cards stack or stay compact for comfortable reading.
   ============================================================ */

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

  .about-grid {
    flex-direction: column;          /* Stack columns vertically */
    align-items: center;             /* Center-align stacked content */
    gap: var(--space-5);             /* 48px gap between stacked columns */
  }

  /* Center the image area on tablet */
  .about-image-area {
    justify-content: center;
  }

  .about-image-frame {
    max-width: 340px;                /* Slightly smaller on tablet */
  }

  /* Center-align the text content on tablet */
  .about-content {
    align-items: center;
    text-align: center;
  }

  /* Center the accent line under the heading */
  .about-accent-line {
    margin-left: auto;
    margin-right: auto;
  }
}

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

  .about-grid {
    gap: var(--space-4);             /* 32px gap on mobile */
  }

  .about-image-frame {
    max-width: 280px;                /* Smaller image on mobile */
  }

  /* Information grid becomes a single column on small phones */
  .about-info-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  /* Statistics cards stay in a row but tighten if needed */
  .about-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);             /* 8px gap on mobile */
  }

  .about-stat-card {
    padding: var(--space-2);         /* 16px padding on mobile */
    align-items: center;
    text-align: center;
  }

  .about-info-card {
    padding: var(--space-2);         /* 16px padding on mobile */
  }
}

/* ---- Very small phones: stack stats vertically ---- */
@media (max-width: 380px) {
  .about-stats {
    grid-template-columns: 1fr;      /* Single column on tiny screens */
  }
}