/* Style_Companies.css — Styling specifically for the Companies page
   This file defines the visual design for the ICT companies directory,
   including company cards with icons/tags/details and informational cards. */

/* Import base.css for foundational styles */
@import url('base.css');

/* ===== PAGE ACCENT COLOR ===== */
/* Override the default accent color for this page - using purple theme for Companies */
:root {
  --accent: #8b5cf6;  /* Vibrant purple - used for headings, borders, tags throughout this page */
}

/* ===== PAGE HEADER ===== */
/* The top section with page title and subtitle */
.page-header {
  text-align: center;  /* Center all text horizontally */
  margin-bottom: 3rem;  /* Large space below header before content */
  padding: 3rem 1rem;  /* Vertical 3rem, horizontal 1rem padding */
  /* Purple gradient with subtle radial overlay pattern for visual interest */
  background: 
    radial-gradient(circle at 25% 75%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(196, 181, 253, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-radius: 20px;  /* Rounded corners */
  box-shadow: var(--shadow-sm);  /* Theme shadow */
}

/* Main page heading */
.page-header h2 {
  font-size: 2.75rem;  /* Larger heading (~44px) */
  color: var(--accent);  /* Purple color matching page theme */
  margin: 0 0 1rem 0;  /* No top margin, 1rem bottom margin */
  font-weight: 800;  /* Extra bold weight for emphasis */
  letter-spacing: -0.03em;  /* Tighter letter spacing */
}

/* Subtitle below main heading */
.subtitle {
  font-size: 1.25rem;  /* Larger size (~20px) */
  color: #64748b;  /* Slate gray color for secondary text */
  margin: 0;  /* No margins (page-header provides spacing) */
  font-weight: 500;  /* Medium weight */
}

/* ===== COMPANIES GRID ===== */
/* Grid layout for company cards */
.companies-grid {
  display: grid;  /* Use CSS Grid for responsive card layout */
  /* Auto-fit: automatically place cards in rows
     minmax(320px, 1fr): each card minimum 320px, maximum equal fraction of space
     Result: cards wrap to new row when space is tight, expand equally when space available */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;  /* 2rem (~32px) spacing between cards */
  margin-bottom: 3rem;  /* Large space below grid before next section */
}

/* ===== COMPANY CARD ===== */
/* Individual company card container */
.company-card {
  background: var(--card-bg);  /* Use theme card background (white in light mode, dark in dark mode) */
  border-radius: 20px;  /* More rounded corners for modern card appearance */
  padding: 2.5rem;  /* Generous padding around card content */
  border: 2px solid rgba(139, 92, 246, 0.12);  /* Subtle purple border */
  /* Smooth transitions for all animatable properties (transform, shadow, border): */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth easing */
  box-shadow: var(--shadow-sm);  /* Theme shadow */
  position: relative;  /* For decorative elements */
  overflow: hidden;  /* Clip overflow */
}

/* Decorative gradient overlay */
.company-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.company-card:hover::before {
  opacity: 1;  /* Show gradient on hover */
}

/* Company card hover state - lifts card and strengthens shadow/border */
.company-card:hover {
  transform: translateY(-10px);  /* Move card up 10 pixels for lift effect */
  box-shadow: var(--shadow-lg);  /* Stronger shadow */
  border-color: rgba(139, 92, 246, 0.3);  /* More visible purple border */
}

/* Company card header (icon + company name) */
.company-header {
  display: flex;  /* Use flexbox for horizontal layout */
  align-items: center;  /* Center items vertically */
  gap: 1rem;  /* 1rem space between icon and name */
  margin-bottom: 1rem;  /* Space below header before tags */
}

/* Company icon (emoji in rounded square) */
.company-icon {
  font-size: 2.75rem;  /* Larger emoji (~44px) */
  /* Gradient background with purple tint */
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06));
  width: 70px;  /* Larger square container */
  height: 70px;  /* Fixed height (same as width = square) */
  display: flex;  /* Use flexbox to center emoji */
  align-items: center;  /* Center emoji vertically */
  justify-content: center;  /* Center emoji horizontally */
  border-radius: 16px;  /* More rounded corners for icon container */
  transition: transform 0.3s ease;  /* Smooth animation */
}

.company-card:hover .company-icon {
  transform: scale(1.05);  /* Slightly enlarge on card hover */
}

/* Company name heading */
.company-header h3 {
  margin: 0;  /* No margins (flex gap provides spacing) */
  color: var(--fg);  /* Use theme foreground color */
  font-size: 1.65rem;  /* Larger heading (~26.4px) */
  font-weight: 700;  /* Bold weight */
}

/* ===== COMPANY TAGS ===== */
/* Container for skill/category tags (e.g., "Web Development", "Cloud") */
.company-tags {
  display: flex;  /* Use flexbox for horizontal layout */
  flex-wrap: wrap;  /* Allow tags to wrap to new line if needed */
  gap: 0.65rem;  /* Increased spacing between tags */
  margin-bottom: 1.5rem;  /* Space below tags before description */
}

/* Individual tag pill */
.tag {
  background: rgba(139, 92, 246, 0.12);  /* Light purple background */
  color: var(--accent);  /* Purple text matching page theme */
  padding: 0.5rem 1rem;  /* Increased padding for better appearance */
  border-radius: 24px;  /* Fully rounded ends (pill shape) */
  font-size: 0.9rem;  /* Slightly larger text (~14.4px) */
  font-weight: 600;  /* Semi-bold for readability */
  border: 1px solid rgba(139, 92, 246, 0.2);  /* Subtle border */
  transition: all 0.2s ease;  /* Smooth transitions */
}

.tag:hover {
  background: rgba(139, 92, 246, 0.18);  /* Darker background on hover */
  transform: translateY(-2px);  /* Slight lift */
}

/* Company description paragraph */
.company-description {
  color: var(--fg);  /* Use theme foreground color (black in light mode, white in dark mode) */
  line-height: 1.7;  /* Generous line spacing */
  margin-bottom: 1.75rem;  /* Space below description before details section */
  font-size: 1.05rem;  /* Slightly larger text */
}

/* ===== COMPANY DETAILS SECTION ===== */
/* Container for company details (location, size, founded, website) */
.company-details {
  display: flex;  /* Use flexbox for vertical stacking */
  flex-direction: column;  /* Stack items vertically */
  gap: 0.75rem;  /* 0.75rem spacing between detail items */
  padding-top: 1rem;  /* Space above details section */
  border-top: 1px solid rgba(0,0,0,0.06);  /* Subtle top border to separate from description */
}

/* Individual detail item (icon + text) */
.detail-item {
  display: flex;  /* Use flexbox for horizontal layout */
  align-items: center;  /* Center icon and text vertically */
  gap: 0.5rem;  /* 0.5rem space between icon and text */
  font-size: 0.95rem;  /* Slightly smaller than body text (~15.2px) */
  color: var(--muted);  /* Muted gray color for secondary information */
}

/* Icon next to each detail */
.detail-icon {
  font-size: 1.25rem;  /* Slightly larger than text (~20px) for visibility */
}

/* Links inside detail items (e.g., website links) */
.detail-item a {
  color: var(--accent);  /* Use accent color for links */
  text-decoration: none;  /* Remove underline */
  font-weight: 600;  /* Semi-bold for emphasis */
  transition: all 0.2s ease;  /* Smooth transitions */
  display: inline-flex;  /* Allow proper alignment */
  align-items: center;  /* Center vertically */
  gap: 0.25rem;  /* Space between text and potential icon */
}

/* Link hover state */
.detail-item a:hover {
  color: var(--fg);  /* Change to foreground color on hover */
  text-decoration: underline;  /* Add underline on hover */
  transform: translateX(2px);  /* Slight slide right */
}

/* ===== INFO SECTION ===== */
/* Grid layout for informational cards at bottom of page */
.info-section {
  display: grid;  /* Use CSS Grid for responsive card layout */
  /* Auto-fit: automatically place cards
     minmax(280px, 1fr): each card minimum 280px, maximum equal fraction */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;  /* 1.5rem spacing between info cards */
  margin-bottom: 2rem;  /* Space below section */
}

/* Individual info card */
.info-card {
  /* Gradient background with very subtle purple tint */
  background: linear-gradient(135deg, rgba(106, 63, 181, 0.05), rgba(106, 63, 181, 0.02));
  border: 1px solid rgba(106, 63, 181, 0.15);  /* Subtle purple border (15% opacity) */
  border-radius: 12px;  /* Rounded corners */
  padding: 1.5rem;  /* Padding around content */
  text-align: center;  /* Center all text and icons */
}

/* Icon at top of info card */
.info-icon {
  font-size: 2.5rem;  /* Large emoji (~40px) */
  margin-bottom: 1rem;  /* Space below icon before heading */
}

/* Info card heading */
.info-card h3 {
  color: var(--accent);  /* Purple color matching page theme */
  margin: 0 0 0.75rem 0;  /* No top margin, 0.75rem bottom margin */
  font-size: 1.25rem;  /* Medium-large size (~20px) */
}

/* Info card description paragraph */
.info-card p {
  color: var(--muted);  /* Muted gray color for secondary text */
  line-height: 1.6;  /* Comfortable line spacing (160% of font size) */
  margin: 0;  /* No margins (card padding provides spacing) */
}

/* ===== RESPONSIVE DESIGN ===== */
/* Adjustments for tablet and mobile screens */
@media (max-width: 800px) {
  /* Smaller main heading on mobile */
  .page-header h2 {
    font-size: 1.75rem;  /* Reduce from 2.25rem to 1.75rem (~28px) */
  }
  
  /* Companies grid switches to single column */
  .companies-grid {
    grid-template-columns: 1fr;  /* Stack cards vertically instead of side-by-side */
  }
  
  /* Info section switches to single column */
  .info-section {
    grid-template-columns: 1fr;  /* Stack info cards vertically */
  }
}
/* ===== VIDEO CONTAINER STYLES ===== */
/* Styling for embedded YouTube iframe section */
.video-container {
  margin: 3rem 0;  /* Vertical spacing around video section */
  padding: 0;  /* No padding as iframe fills container */
}

/* Video section heading */
.video-container h2 {
  font-size: 2rem;  /* Large heading size */
  color: var(--accent);  /* Purple theme color */
  margin-bottom: 1.5rem;  /* Space below heading */
  font-weight: 700;  /* Bold font weight */
}

/* Video iframe styling */
.video-container iframe {
  box-shadow: var(--shadow-lg);  /* Deep shadow for depth */
  margin-top: 1rem;  /* Space above iframe */
}