/**
 * About Page Styles - o-nas.php
 * Świat MINI - Strona O nas
 */

/* Hero O nas */
.hero-about {
   background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/about-hero.jpg') center/cover;
   padding: 150px 0 100px;
   position: relative;
}

.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0,0,0,0.5);
}

.hero-content {
   position: relative;
   z-index: 1;
}

/* Intro section */
.intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

.lead {
   font-size: 20px;
   line-height: 1.6;
   margin-bottom: 20px;
   font-weight: 500;
}

.intro-stats {
   display: flex;
   gap: 30px;
   margin-top: 40px;
}

.stat-box {
   text-align: center;
}

.stat-box .stat-number {
   font-size: 48px;
   font-weight: 700;
   color: var(--color-accent);
}

.intro-image {
   position: relative;
}

.intro-image img {
   width: 100%;
   border-radius: 10px;
}

.image-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background: var(--color-accent);
   padding: 10px 20px;
   border-radius: 30px;
   font-weight: 600;
}

/* Timeline */
.timeline {
   position: relative;
   padding: 40px 0;
}

.timeline::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--color-accent);
   transform: translateX(-50%);
}

.timeline-item {
   position: relative;
   margin-bottom: 60px;
}

.timeline-item:nth-child(odd) {
   padding-right: calc(50% + 40px);
   text-align: right;
}

.timeline-item:nth-child(even) {
   padding-left: calc(50% + 40px);
}

.timeline-date {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   background: var(--color-accent);
   color: white;
   padding: 10px 20px;
   border-radius: 30px;
   font-weight: 700;
   font-size: 20px;
}

.timeline-content {
   background: rgba(255,255,255,0.05);
   padding: 30px;
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.1);
}

/* NOWA SEKCJA ZESPOŁU */
.team-section {
   padding: 80px 0;
}

.team-category {
   margin-bottom: 80px;
}

.team-category:last-child {
   margin-bottom: 0;
}

.team-category-title {
   text-align: center;
   font-size: 24px;
   color: var(--color-accent);
   margin-bottom: 40px;
   text-transform: uppercase;
   letter-spacing: 2px;
   position: relative;
   padding-bottom: 15px;
}

.team-category-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: var(--color-accent);
}

/* Gridy dla różnych kategorii */
.team-grid {
   display: grid;
   gap: 30px;
   margin-bottom: 20px;
}

.team-grid-management {
   grid-template-columns: repeat(3, 1fr);
}

.team-grid-mechanics {
   grid-template-columns: repeat(4, 1fr);
}

.team-grid-bodyshop {
   grid-template-columns: repeat(2, 1fr);
   max-width: 600px;
   margin: 0 auto;
}

.team-grid-support {
   grid-template-columns: 1fr;
   max-width: 300px;
   margin: 0 auto;
}

/* Karty zespołu */
.team-member {
   text-align: center;
   padding: 20px;
   background: rgba(255,255,255,0.02);
   border-radius: 15px;
   transition: all 0.3s ease;
}

.team-member:hover {
   transform: translateY(-5px);
   background: rgba(255,255,255,0.05);
   box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Zarząd większe karty */
.team-member-management {
   padding: 30px;
}

/* Awatary z inicjałami */
.member-avatar {
   width: 100px;
   height: 100px;
   margin: 0 auto 20px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 36px;
   font-weight: 700;
   color: white;
   position: relative;
   transition: all 0.3s ease;
}

/* Kolory dla różnych działów */
.team-member-management .member-avatar {
   width: 120px;
   height: 120px;
   font-size: 42px;
   background: linear-gradient(135deg, #FFB700, #FFA000);
   box-shadow: 0 5px 20px rgba(255, 183, 0, 0.3);
}

.member-avatar-mechanic {
   background: linear-gradient(135deg, #E91E63, #C2185B);
   box-shadow: 0 5px 20px rgba(233, 30, 99, 0.3);
}

.member-avatar-bodyshop {
   background: linear-gradient(135deg, #2196F3, #1976D2);
   box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
}

.member-avatar-support {
   background: linear-gradient(135deg, #607D8B, #455A64);
   box-shadow: 0 5px 20px rgba(96, 125, 139, 0.3);
}

.team-member:hover .member-avatar {
   transform: scale(1.1);
}

.avatar-initials {
   text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Informacje o członku zespołu */
.member-info h4 {
   font-size: 20px;
   margin-bottom: 5px;
   font-weight: 600;
}

.member-role {
   color: var(--color-accent);
   font-weight: 600;
   margin-bottom: 10px;
   font-size: 14px;
}

.member-description {
   font-size: 14px;
   opacity: 0.8;
   line-height: 1.6;
   margin-top: 10px;
}

/* Values */
.values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   margin-top: 60px;
}

.value-card {
   text-align: center;
   padding: 40px 20px;
   background: rgba(255,255,255,0.05);
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.1);
   transition: all 0.3s ease;
}

.value-card:hover {
   transform: translateY(-5px);
   border-color: var(--color-accent);
}

.value-icon {
   font-size: 48px;
   color: var(--color-accent);
   margin-bottom: 20px;
}

/* Certificates */
.certificates-slider {
   display: flex;
   gap: 30px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 60px;
}

.certificate-item {
   text-align: center;
}

.certificate-item img {
   width: 200px;
   height: 150px;
   object-fit: contain;
   margin-bottom: 15px;
   background: white;
   padding: 20px;
   border-radius: 10px;
}

/* Gallery */
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 60px;
}

.gallery-item {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   height: 250px;
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.gallery-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
   padding: 20px;
   transform: translateY(100%);
   transition: transform 0.3s ease;
}

.gallery-item:hover img {
   transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
   transform: translateY(0);
}

/* Responsywność */
@media (max-width: 1200px) {
   .team-grid-mechanics {
       grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 1024px) {
   .intro-grid {
       grid-template-columns: 1fr;
       text-align: center;
   }

   .team-grid-management {
       grid-template-columns: 1fr;
       max-width: 400px;
       margin: 0 auto;
   }

   .team-grid-mechanics {
       grid-template-columns: repeat(2, 1fr);
   }

   .values-grid {
       grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   /* Zapobieganie overflow na mobile */
   .intro-grid,
   .timeline,
   .team-grid,
   .values-grid,
   .gallery-grid {
       width: 100%;
       max-width: 100%;
   }

   .intro-stats {
       justify-content: center;
       flex-wrap: wrap;
       gap: 20px;
       width: 100%;
   }

   .stat-box {
       flex: 0 1 calc(33.333% - 15px);
       min-width: 80px;
       max-width: 150px;
   }

   .timeline::before {
       left: 30px;
   }

   .timeline-item {
       padding-left: 80px !important;
       padding-right: 20px !important;
       text-align: left !important;
   }

   .timeline-date {
       left: 30px;
       transform: translateX(-50%);
       font-size: 16px;
       padding: 8px 15px;
       white-space: nowrap;
   }

   .timeline-content {
       word-wrap: break-word;
       overflow-wrap: break-word;
   }

   .team-grid-management,
   .team-grid-mechanics,
   .team-grid-bodyshop {
       grid-template-columns: 1fr;
       max-width: 300px;
       margin: 0 auto;
   }

   .gallery-grid {
       grid-template-columns: 1fr;
   }

   .values-grid {
       grid-template-columns: 1fr;
   }

   .member-avatar {
       width: 80px;
       height: 80px;
       font-size: 28px;
   }

   .team-member-management .member-avatar {
       width: 100px;
       height: 100px;
       font-size: 36px;
   }

   .lead {
       font-size: 18px;
       word-wrap: break-word;
   }

   .stat-box .stat-number {
       font-size: 36px;
   }
}

/* Bardzo małe ekrany (telefony < 576px) */
@media (max-width: 576px) {
   .lead {
       font-size: 16px;
       line-height: 1.5;
       word-wrap: break-word;
   }

   .intro-stats {
       flex-direction: column;
       gap: 20px;
       align-items: center;
       width: 100%;
       padding: 0 10px;
   }

   .stat-box {
       width: 100%;
       max-width: 200px;
       min-width: 0;
   }

   .stat-box .stat-number {
       font-size: 32px;
   }

   .stat-box .stat-label {
       font-size: 14px;
   }

   .timeline-content {
       padding: 20px;
   }

   .timeline-content h3 {
       font-size: 18px;
   }

   .timeline-content p {
       font-size: 14px;
   }

   .value-card {
       padding: 30px 15px;
   }

   .value-icon {
       font-size: 36px;
   }

   .gallery-item {
       height: 200px;
   }

   .member-info h4 {
       font-size: 18px;
   }

   .member-description {
       font-size: 13px;
   }

   .hero-about {
       padding: 100px 0 60px;
   }

   .section {
       padding: 40px 0;
   }

   .team-category {
       margin-bottom: 50px;
   }

   .team-category-title {
       font-size: 20px;
   }
}

/* Ekstra małe ekrany (< 400px) */
@media (max-width: 400px) {
   .intro-stats {
       gap: 15px;
   }

   .stat-box .stat-number {
       font-size: 28px;
   }

   .lead {
       font-size: 15px;
   }

   .timeline-item {
       padding-left: 70px !important;
       padding-right: 15px !important;
   }

   .timeline-date {
       font-size: 14px;
       padding: 6px 12px;
   }

   .timeline-content {
       padding: 15px;
   }

   .member-avatar {
       width: 70px;
       height: 70px;
       font-size: 24px;
   }

   .team-member-management .member-avatar {
       width: 90px;
       height: 90px;
       font-size: 32px;
   }
}