/*
 * Global Stylesheet for Michael Abid's enhanced portfolio
 *
 * This file defines a cohesive visual language for the entire site.
 * The design draws inspiration from modern minimalism with a
 * distinctive red and black palette, smooth animations and glassy
 * surfaces. Sections are spaced generously and typography is set
 * using Inter and Poppins for excellent legibility. Feel free
 * to tweak variables in the :root selector to adjust colours or
 * spacing. Comments throughout explain the purpose of each block.
 */

/* CSS custom properties define the colour palette and sizing. */
:root {
  --color-primary: #150910;
  --color-secondary: #e63946;
  --color-accent: #f07167;
  --color-muted: #a89aa1;
  --color-text: #f5f5f5;
  --color-bg-light: rgba(255, 255, 255, 0.05);
  --color-glass: rgba(255, 255, 255, 0.08);
  --color-glass-border: rgba(255, 255, 255, 0.2);
  --gradient-start: #33091b;
  --gradient-end: #5a0e26;
  --transition-fast: 0.3s;
}

/* Reset and global rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Poppins', sans-serif;
  line-height: 1.6;
  background-color: var(--color-primary);
  color: var(--color-text);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

a:hover,
a:focus {
  color: var(--color-accent);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

/* Layout helpers */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Navigation */
header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(21, 9, 16, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}

.logo {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

nav .nav-list {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

nav .nav-list li a {
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: background-color var(--transition-fast) ease,
    color var(--transition-fast) ease;
}

nav .nav-list li a.active {
  background-color: var(--color-secondary);
  color: #fff;
}

nav .nav-list li a:hover,
nav .nav-list li a:focus {
  color: var(--color-secondary);
}

/* Hero section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  background: linear-gradient(160deg, var(--gradient-start), var(--gradient-end)), url('assets/hero-bg.png') center/cover no-repeat;
  position: relative;
  text-align: center;
  color: var(--color-text);
  padding: 4rem 1rem;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 2rem;
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--color-muted);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  color: #fff;
  font-weight: 600;
  transition: transform var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease;
}

.btn:hover,
.btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Section styling */
.section {
  padding: 4rem 0;
  position: relative;
}

.section.dark {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 2rem;
}

/* About */
#about .about-text {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.7;
}

/* Skills */
#skills .skills-grid {
  /* Use a grid layout for skills so each category occupies equal
     space and adjusts to the same height. Auto-fit ensures
     responsiveness and equal widths, while grid-auto-rows: 1fr
     gives all items equal height within a row. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

#skills .skill-block {
  /* Each skill block stretches to fill its grid cell. Using flex
     container allows content to expand and contract while keeping
     equal heights. */
  background: var(--color-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-glass-border);
  padding: 1.5rem;
  border-radius: 0.75rem;
  transition: transform var(--transition-fast) ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#skills .skill-block:hover {
  transform: translateY(-5px);
}

#skills .skill-block h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--color-secondary);
}

#skills .skill-block ul li {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: var(--color-text);
}

/* Projects section */
.project-category {
  margin-bottom: 2.5rem;
}

.project-category h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}

.project-card {
  background: var(--color-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-glass-border);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease;
  overflow: hidden;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.project-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.project-card h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-secondary);
}

.project-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  flex-grow: 1;
}

.project-card .tags {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-accent);
}

.project-card a.more {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-secondary);
  font-weight: 600;
}

/* Blog section */
/* Blog section listings */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-glass-border);
  border-radius: 1rem;
  padding: 0;
  /* Remove padding to allow image to be full bleed at top */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
  overflow: hidden;
  height: 100%;
  text-align: left;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  /* Full bleed at top */
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-glass-border);
}

/* Card Content Wrapper */
.blog-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card h4 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.blog-card .meta {
  font-size: 0.85rem;
  color: var(--color-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.blog-card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.blog-card a.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: gap 0.3s ease;
}

.blog-card a.more::after {
  content: '→';
  transition: transform 0.3s ease;
}

.blog-card:hover a.more::after {
  transform: translateX(5px);
}

/* Social feed */
.social-feed {
  margin: 3rem 0;
}

.social-feed .social-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.social-feed .social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-glass);
  border: 1px solid var(--color-glass-border);
  padding: 1rem;
  border-radius: 0.75rem;
  width: 150px;
  transition: transform var(--transition-fast) ease;
}

/* Ensure links inside social items arrange their contents vertically */
.social-feed .social-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

/* Override hover styles on social feed icons and text */
.social-feed .social-item a:hover span,
.social-feed .social-item a:focus span {
  color: var(--color-accent);
}

.social-feed .social-item:hover {
  transform: translateY(-4px);
}

.social-feed .social-item .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  fill: var(--color-secondary);
}

.social-feed .social-item span {
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}

/* Contact section */
#contact .contact-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#contact .contact-form label {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

#contact .contact-form input,
#contact .contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--color-bg-light);
  color: var(--color-text);
  font-family: inherit;
}

#contact .contact-form input:focus,
#contact .contact-form textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.1);
}

#contact .contact-form button {
  align-self: flex-start;
  margin-top: 1rem;
}

/* Base form styling */
/* Apply a column layout and consistent spacing to any element with the
   `contact-form` class. This ensures forms outside the #contact
   section (such as the blog post creation page) inherit the same
   vertical layout without duplicating rules. Specific forms can
   override width or margin via inline styles or additional selectors. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Generic styles for form elements within any .contact-form. These mirror
   the input and textarea styling used on the contact page, ensuring
   consistency across forms like the blog creation page. */
.contact-form label {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--color-bg-light);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  transition: background-color var(--transition-fast) ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Footer */
footer {
  background-color: #0a0306;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
}

footer .footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

footer .social-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

footer .social-links a {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast) ease;
}

footer .social-links a:hover {
  transform: translateY(-3px);
}

footer .social-links svg {
  width: 24px;
  height: 24px;
  fill: var(--color-secondary);
  transition: fill var(--transition-fast) ease;
}

footer .social-links a:hover svg {
  fill: var(--color-accent);
}

/* Animations for fade in */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .nav-container {
    flex-direction: column;
    gap: 0.5rem;
  }

  nav .nav-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  #skills .skill-block {
    flex: 1 1 100%;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Timeline styling */
.project-timeline {
  margin-top: 3rem;
}

.project-timeline h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
}

.timeline-container {
  position: relative;
  margin-left: 1.5rem;
}

.timeline-entry {
  position: relative;
  border-left: 2px solid var(--color-secondary);
  padding: 1rem 1rem 1rem 1.5rem;
  margin-bottom: 2rem;
}

.timeline-entry::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: 0.75rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--color-secondary);
  border-radius: 50%;
}

.timeline-entry .entry-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.timeline-entry .entry-date {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.timeline-entry .entry-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.timeline-entry .entry-desc {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.timeline-entry .entry-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.timeline-entry .entry-images img {
  /* Increase thumbnail size for better legibility */
  /* Increase thumbnail size for timeline images to improve readability */
  width: 280px;
  height: 170px;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Image modal overlay for timeline zoom */
.img-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.img-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.img-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.timeline-entry .entry-videos,
.timeline-entry .entry-links {
  margin-bottom: 0.75rem;
}

.timeline-entry .entry-links a {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-secondary);
  margin-right: 0.5rem;
}

.timeline-add-link {
  text-align: left;
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.6rem;
  }

  .btn {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
  }

  .section-title {
    font-size: 1.5rem;
  }
}

/*
 * Project page specific styles
 *
 * These classes customise the layout and appearance of the
 * project detail page. The hero section inherits from the
 * generic hero but allows dynamic backgrounds. Status badges
 * indicate the current state of the project with distinct
 * colours. Content sections are spaced and styled for
 * readability.
 */
.project-hero {
  position: relative;
  padding: 6rem 0 3rem;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: var(--color-text);
}

.project-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
  z-index: 0;
}

.project-hero-content {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}

.project-hero-content h1 {
  font-size: 2.4rem;
  font-weight: 700;
}

.project-hero-content p {
  font-size: 1.2rem;
  margin-top: 0.5rem;
  color: var(--color-muted);
}

.project-status {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.project-status.completed {
  background-color: rgba(38, 166, 91, 0.2);
  color: #26a65b;
}

.project-status.working-on {
  background-color: rgba(255, 215, 0, 0.2);
  color: #f6c90e;
}

.project-status.stand-by {
  background-color: rgba(128, 128, 128, 0.2);
  color: #8e8e8e;
}

.project-details-container p.project-description {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.project-highlights {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}

.project-highlights li {
  margin-bottom: 0.4rem;
}

.project-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.image-gallery img {
  flex: 1 1 280px;
  max-width: calc(33.333% - 1rem);
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
}

.video-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.team-list {
  margin-left: 1.5rem;
  color: var(--color-text);
  line-height: 1.6;
  list-style: none;
}

.team-list li {
  /* Position and spacing for team members. By increasing padding we
     give more room for the coloured bullet and emphasise each name.
     A slightly larger margin improves vertical rhythm. */
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
  font-weight: 500;
}

.team-list li::before {
  /* Each team member is preceded by a small red dot. The dot size and
     colour convey the red/black aesthetic while keeping the list
     compact and easily scannable. */
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
}

.skill-category>ul>li {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  color: #fff;
  font-weight: 600;
  margin: 5px;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}


/* Utility classes used across pages */
/* Hidden elements are not rendered. Useful for password gating or
   toggling UI sections. */
.hidden {
  display: none !important;
}

/* Error messages display in the accent colour and use a smaller font.
   This class can be applied to paragraphs or spans that convey form
   validation feedback or password failures. */
.error {
  color: var(--color-accent);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* --- Timeline & CV Section --- */

.cv-download {
  margin-top: 2rem;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.timeline-section {
  margin-top: 4rem;
  overflow: hidden;
  /* Prevent scrollbars from connecting lines */
  padding-bottom: 2rem;
}

.subsection-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2rem;
  color: var(--color-text);
}

.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0;
  /* We manage line connections via pseudo-elements, so 0 row gap ensures lines touch. 
     We add padding/margin to items themselves for spacing. */
}

/* Base Item Styles */
.timeline-item {
  position: relative;
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
}

/* Snake Grid Placement Rules */
/* Pattern: L, R, R, L, L, R... */
.timeline-item:nth-child(4n+1) {
  grid-column: 1;
  text-align: right;
}

.timeline-item:nth-child(4n+2) {
  grid-column: 2;
  text-align: left;
}

.timeline-item:nth-child(4n+3) {
  grid-column: 2;
  text-align: left;
}

.timeline-item:nth-child(4n+4) {
  grid-column: 1;
  text-align: right;
  grid-row: 2;
}

/* Connector Lines - The Snake Path */
/* We use ::before and ::after to draw the path segments relative to center of item */
.timeline-item::before,
.timeline-item::after {
  content: '';
  position: absolute;
  background-color: var(--color-glass-border);
  z-index: 0;
  transition: background-color 0.3s;
}

.timeline-item:hover::before,
.timeline-item:hover::after {
  background-color: var(--color-accent);
}

/* Line thickness */
:root {
  --line-width: 4px;
}

/* 
   Type 1: 4n+1 (Left Col)
   Connects: Top (Previous) -> Right (Next) 
   Exception: First child has no Top.
*/
.timeline-item:nth-child(4n+1)::before {
  /* Top connector */
  width: 4px;
  height: 50%;
  top: 0;
  right: -2px;
  /* Align to right edge for Left-aligned text? No, item 1 is text-align right. */
  /* Wait, let's center the lines? 
     For text-align right, the "spine" should perhaps be on the right edge? 
     Let's center the spine in the BOX. 
  */
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item:nth-child(4n+1)::after {
  /* Right connector */
  height: 4px;
  width: 50%;
  top: 50%;
  left: 50%;
}

/* 
   Type 2: 4n+2 (Right Col)
   Connects: Left (Previous) -> Bottom (Next) 
*/
.timeline-item:nth-child(4n+2)::before {
  /* Left connector */
  height: 4px;
  width: 50%;
  top: 50%;
  left: 0;
}

.timeline-item:nth-child(4n+2)::after {
  /* Bottom connector */
  width: 4px;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

/* 
   Type 3: 4n+3 (Right Col)
   Connects: Top (Previous) -> Left (Next) 
*/
.timeline-item:nth-child(4n+3)::before {
  /* Top connector */
  width: 4px;
  height: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item:nth-child(4n+3)::after {
  /* Left connector */
  height: 4px;
  width: 50%;
  top: 50%;
  left: 0;
}

/* 
   Type 4: 4n+4 (Left Col)
   Connects: Right (Previous) -> Bottom (Next) 
*/
.timeline-item:nth-child(4n+4)::before {
  /* Right connector */
  height: 4px;
  width: 50%;
  top: 50%;
  left: 50%;
}

.timeline-item:nth-child(4n+4)::after {
  /* Bottom connector */
  width: 4px;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

/* Fixes for endpoints */
.timeline-item:first-child::before {
  display: none !important;
  /* No line coming from top */
}

.timeline-item:last-child::after {
  display: none !important;
  /* No line going to next */
}

/* If last child is odd, it might need to hide the side connector if there's no next item */
/* But ::after covers the "Outgoing" connection. So simply hiding ::after on last-child works generally.*/


/* Timeline Content Styling */
.timeline-content {
  background: var(--color-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-glass-border);
  padding: 1.5rem;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}

.timeline-item:hover .timeline-content {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border-color: var(--color-accent);
}

.timeline-year {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-secondary);
  color: #fff;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-title {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.25rem;
  color: var(--color-text);
  font-weight: bold;
}

.timeline-subtitle {
  display: block;
  font-size: 0.95rem;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: 1rem;
}

.timeline-desc {
  margin-bottom: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}

.timeline-details {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.timeline-details li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: left;
  /* Ensure details list is always readable */
}

.timeline-details li::before {
  content: '•';
  color: var(--color-accent);
  position: absolute;
  left: 0;
}

/* Marker (The Dot) */
/* We place the dot at the Center of the item grid cell, where lines meet */
.timeline-marker {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: var(--color-primary);
  border: 3px solid var(--color-secondary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: background-color 0.3s, border-color 0.3s;
}

.timeline-item:hover .timeline-marker {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .timeline {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .timeline::after {
    /* Create a simple vertical line on the left for mobile */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-glass-border);
    top: 0;
    bottom: 0;
    left: 2rem;
    /* Align with left padding */
    border-radius: 2px;
    z-index: 0;
  }

  .timeline-item {
    grid-column: 1 !important;
    /* Force all to col 1 */
    text-align: left !important;
    padding-left: 4.5rem;
    /* Space for line */
    padding-right: 1rem;
  }

  .timeline-item::before,
  .timeline-item::after {
    display: none;
    /* Hide snake lines on mobile */
  }

  .timeline-marker {
    left: 2rem;
    /* Move marker to left line */
    transform: translate(-50%, -50%);
  }
}

/* --- Enriched Project Page Styles --- */

/* Meta Banner (Context & Metrics) */
.project-meta-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: var(--color-glass);
  border: 1px solid var(--color-glass-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  align-items: center;
}

.meta-group {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.meta-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.meta-group.metric .meta-value {
  font-size: 1.4rem;
  color: var(--color-secondary);
}

/* Technical Challenges */
.project-technical {
  margin: 3rem 0;
}

.project-technical h3 {
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.technical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.technical-card {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--color-accent);
  padding: 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

.technical-card h4 {
  color: var(--color-accent);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.technical-card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* Team Summary */
.team-summary {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.team-details summary {
  cursor: pointer;
  color: var(--color-secondary);
  font-weight: 500;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.team-details summary:hover {
  color: var(--color-accent);
}

.team-details ul {
  margin-top: 0.5rem;
  margin-left: 1rem;
}

/* Outline Button */
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
}


.btn-outline:hover {
  background: var(--color-secondary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

/* Grouped Timeline Entries */
.timeline-entry.group .group-content {
  display: flex;
  flex-direction: column;
}

.timeline-entry.group .group-item {
  padding: 0.75rem 0;
}

.timeline-entry.group .group-item.bordered-top {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-entry.group .entry-header.small {
  margin-bottom: 0.25rem;
}

.timeline-entry.group .entry-header.small .entry-date {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
}

.timeline-entry.group .entry-header.small .entry-title {
  font-size: 1rem;
}

.timeline-entry.group .entry-desc.small {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  margin-left: 0.5rem;
  border-left: 2px solid var(--color-glass-border);
  padding-left: 0.75rem;
}

/* Video & Iframe responsiveness */
video,
iframe {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}

/* =========================================
   Professional Blog Layout (Refactored)
   ========================================= */

/* 
   Content Container
   Constrains the reading width for optimal line length (approx 65-75 chars).
   Centers the content while allowing specific elements to break out.
*/
.post-content {
  max-width: 44rem;
  /* ~700px */
  margin: 0 auto;
  padding: 0 1rem;
}

/* 
   Typography Base
   Optimized for long-form reading in dark mode.
   Reduces eye strain by lowering contrast slightly (off-white).
*/
.post-content p,
.post-content li {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.8;
  color: #d0d0d0;
  /* Softened white */
  margin-bottom: 2rem;
  /* Generous paragraph spacing */
  font-weight: 300;
  /* Lighter weight for modern look */
}

/* 
   Heading Hierarchy
   Clear separation using size, spacing, and weight.
   Headings act as "breathing room" in a long article.
*/
.blog-block-heading {
  color: var(--color-text);
  font-family: 'Poppins', sans-serif;
  line-height: 1.3;
  margin-top: 3.5rem;
  /* Significant vertical pause before new section */
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

h2.blog-block-heading {
  font-size: 2rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.75rem;
  color: #ffffff;
}

h3.blog-block-heading {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-secondary);
  /* Accent color for sub-sections */
  margin-top: 2.5rem;
}

h4.blog-block-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  color: var(--color-accent);
}

/* 
   Lists
   Visual anchors. Distinct from normal text.
*/
.blog-block-list {
  margin: 2rem 0;
  padding-left: 1.5rem;
}

.blog-block-list li {
  margin-bottom: 0.75rem;
  position: relative;
}

.blog-block-list.ul>li::marker {
  color: var(--color-secondary);
}

.blog-block-list.ol>li::marker {
  color: var(--color-secondary);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

/* 
   Images
   Consistent margins and captioning.
*/
.blog-block-image {
  margin: 3rem 0;
  width: 100%;
}

.blog-block-image img {
  border-radius: 4px;
  /* Subtler radius */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: auto;
}

.blog-block-image figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-top: 0.75rem;
  font-family: 'Inter', sans-serif;
  opacity: 0.8;
}

/* 
   Full-width Images
   Breaks the container constraint to span the full viewport width.
*/
.blog-block-image.align-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}

.blog-block-image.align-full img {
  border-radius: 0;
  /* No radius for full bleed */
  width: 100%;
  display: block;
}

/* 
   Callout / Brief Blocks
   For TL;DRs, Notes, and Key Takeaways.
*/
.blog-block-brief,
.blog-block-quote {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--color-secondary);
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
  border-radius: 0 4px 4px 0;
}

.blog-block-brief strong,
.blog-block-quote strong {
  color: var(--color-secondary);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.blog-block-brief p,
.blog-block-quote p {
  margin-bottom: 0;
  /* Remove bottom margin inside callouts */
  font-size: 1.05rem;
  color: #e5e5e5;
}

.blog-block-quote {
  font-style: italic;
  border-left-color: var(--color-accent);
  /* Differentiate quotes from briefs */
}

.blog-block-quote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  font-style: normal;
  text-align: right;
  font-weight: 500;
}

/* 
   Code Blocks
   Terminal-like appearance.
*/
.blog-block-code {
  background: #111;
  /* Darker background */
  padding: 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 2.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
  line-height: 1.5;
}

.blog-block-code code {
  font-family: 'Consolas', 'Monaco', monospace;
  color: #e0e0e0;
}

.post-content code:not([class]) {
  /* Inline code */
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  color: var(--color-accent);
}

/* 
   Divider / End of Article
*/
.blog-block-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-glass-border), transparent);
  margin: 4rem auto;
  width: 80%;
}

/* 
   Post Header Refinements (overrides generic generic .container styles if needed)
*/
.section-title {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.5rem;
  /* Larger title */
  margin-bottom: 1rem;
}

.meta {
  text-align: center;
  margin-bottom: 3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0.7;
}

/* 
   Mobile Responsiveness
*/
@media (max-width: 768px) {
  .post-content {
    padding: 0 1.25rem;
  }

  .post-content p,
  .post-content li {
    font-size: 1rem;
    /* Slightly smaller on mobile */
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .blog-block-heading {
    margin-top: 2.5rem;
  }

  .blog-block-image.align-full {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    max-width: 100%;
  }
}