/*
==================================================================
ELVEA CSS FRAMEWORK - SHOWCASE.CSS
Version: 1.0.0
Created: 2025-10-15
Base: assets/css/core.css (načítava sa ako prvý)
Used by: services.html, about.html, projects.html, contact.html

OBSAHUJE:
- Services cards (pokročilé cenníkové karty)  
- Values grid (konkurenčné výhody)
- Contact forms (formuláre s validáciou)
- Timeline components (firemná história)
- Team profiles (prezentácia tímu)
- Certifications showcase
- Achievements metrics (rozšírené štatistiky)
- Social proof components
- FAQ accordions

MIGRAČNÉ ALIASY:
.services-card → .showcase__item--service
.values__grid → .showcase--values
.contact-form → .form--contact
.timeline → .timeline (už v core.css)
.achievement → .metric (alias v core.css)
==================================================================
*/

/* ===============================================
SERVICES SHOWCASE COMPONENTS  
=============================================== */

/* SERVICES CARDS - MIGRAČNÉ ALIASY + NOVÉ NÁZVY */
.services-card,              /* migračný alias */
.showcase__item--service {   /* nový funkcionálny názov */
  background: rgba(255, 255, 255, 0.95);
  padding: 50px 40px;
  border-radius: var(--border-radius-large);
  text-align: center;
  box-shadow: var(--shadow-light);
  transition: var(--transition-standard);
  border: 3px solid transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-card:hover,
.showcase__item--service:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-heavy);
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.98);
}

/* SERVICE CARD TITLE */
.services-card__title,
.services-card-title,        /* migračný alias */
.showcase__service-title {
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-weight: var(--font-weight-black);
  line-height: 1.3;
}

/* SERVICE CARD PRICE */
.services-card__price,
.services-card-price,        /* migračný alias */
.showcase__service-price {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-text-white);
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 25px;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(107, 142, 35, 0.3);
}

/* SERVICE CARD FEATURES */
.services-card__features,
.services-card-features,     /* migračný alias */
.showcase__service-features {
  list-style: none;
  margin: 25px 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.services-card__features li,
.services-card-features li,
.showcase__service-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
}

.services-card__features li:before,
.services-card-features li:before,
.showcase__service-features li:before {
  content: "✓";
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* SERVICE CARD ACTIONS */
.services-card__actions,
.services-card-actions,      /* migračný alias */
.showcase__service-actions {
  margin-top: auto;
  padding-top: 25px;
}

.service-btn,                /* migračný alias */
.showcase__service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #000066 100%);
  color: var(--color-text-white);
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-standard);
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
}

.service-btn:hover,
.showcase__service-btn:hover {
  background: linear-gradient(135deg, #000066 0%, #000044 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 128, 0.4);
  color: var(--color-text-white);
}

.service-btn--secondary,
.showcase__service-btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.service-btn--secondary:hover,
.showcase__service-btn--secondary:hover {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.service-btn--primary,
.showcase__service-btn--primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  box-shadow: var(--shadow-cta);
}

.service-btn--primary:hover,
.showcase__service-btn--primary:hover {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent-darker) 100%);
  box-shadow: var(--shadow-cta-hover);
}

/* ===============================================
VALUES GRID COMPONENTS
=============================================== */

.values__grid,               /* migračný alias */
.showcase--values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.values__card,               /* migračný alias */
.values-card,                /* migračný alias */
.showcase__value-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 40px 30px;
  border-radius: var(--border-radius-large);
  text-align: center;
  box-shadow: var(--shadow-light);
  transition: var(--transition-standard);
  border: 3px solid transparent;
  position: relative;
}

.values__card:hover,
.values-card:hover,
.showcase__value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-heavy);
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.98);
}

.values-card__title,         /* migračný alias */
.values-card-title,          /* migračný alias */ 
.showcase__value-title {
  color: var(--color-primary);
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-weight: var(--font-weight-black);
}

.values-card__features,      /* migračný alias */
.values-card-features,       /* migračný alias */
.showcase__value-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.values-card__features li,
.values-card-features li,
.showcase__value-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.values-card__features li:before,
.values-card-features li:before,
.showcase__value-features li:before {
  content: "→";
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===============================================
CONTACT FORMS COMPONENTS
=============================================== */

.contact-form,               /* migračný alias */
.form--contact {
  padding: 80px 0;
  background: var(--color-white);
}

.contact-form__content,
.contact-form-content,       /* migračný alias */
.form--contact__content {
  max-width: 800px;
  margin: 0 auto;
}

.contact-form__form,
.contact-form-form,          /* migračný alias */
.form--contact__form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contact-form-group,         /* migračný alias */
.form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row,
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.contact-form-label,         /* migračný alias */
.form__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.contact-form-input,         /* migračný alias */
.contact-form-select,        /* migračný alias */
.contact-form-textarea,      /* migračný alias */
.form__input,
.form__select,
.form__textarea {
  padding: 15px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 1rem;
  transition: var(--transition-standard);
  background: var(--color-white);
  font-family: var(--font-family-primary);
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus,
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.1);
}

.contact-form-textarea,
.form__textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-family-primary);
}

.contact-form-btn,           /* migračný alias */
.form__submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #000066 100%);
  color: var(--color-text-white);
  border: none;
  padding: 18px 40px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: var(--transition-standard);
  box-shadow: 0 8px 30px rgba(0, 0, 128, 0.3);
  text-decoration: none;
}

.contact-form-btn:hover,
.form__submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 128, 0.4);
  background: linear-gradient(135deg, #000066 0%, #000044 100%);
  color: var(--color-text-white);
}

/* ===============================================
TIMELINE COMPONENTS - ROZŠÍRENÉ
=============================================== */

/* Timeline je už definovaná v core.css, tu pridávame rozšírenia */
.timeline--company {
  background: var(--bg-light);
  padding: 80px 0;
}

.timeline__item--milestone {
  border-left: 4px solid var(--color-accent);
  background: rgba(107, 142, 35, 0.05);
}

.timeline__year--highlight {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(107, 142, 35, 0.4);
}

/* ===============================================
TEAM PROFILES COMPONENTS
=============================================== */

.team {
  padding: 80px 0;
  background: var(--color-white);
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.team__card {
  background: var(--bg-light);
  border-radius: var(--border-radius-large);
  padding: 40px 30px;
  text-align: center;
  transition: var(--transition-standard);
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.team__card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-heavy);
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.98);
}

.team__card--featured {
  background: linear-gradient(135deg, var(--color-primary) 0%, #000066 100%);
  color: var(--color-text-white);
}

.team__card--featured:hover {
  border-color: var(--color-accent);
}

.team__photo {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-primary);
  transition: var(--transition-standard);
}

.team__card--featured .team__photo {
  border-color: var(--color-text-white);
}

.team__card:hover .team__photo {
  transform: scale(1.1);
  border-color: var(--color-accent);
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-standard);
}

.team__name {
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 8px;
  font-weight: var(--font-weight-bold);
}

.team__card--featured .team__name {
  color: var(--color-text-white);
}

.team__position {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  margin-bottom: 15px;
}

.team__card--featured .team__position {
  color: var(--color-accent-light);
}

.team__experience {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 20px;
  font-style: italic;
}

.team__card--featured .team__experience {
  color: rgba(255, 255, 255, 0.8);
}

/* ===============================================
CERTIFICATIONS SHOWCASE
=============================================== */

.certifications {
  padding: 80px 0;
  background: var(--bg-light);
}

.certifications__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.certification {
  background: var(--color-white);
  padding: 40px 30px;
  border-radius: var(--border-radius-large);
  text-align: center;
  transition: var(--transition-standard);
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.certification:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-heavy);
  border-color: var(--color-primary);
}

.certification:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.certification__icon {
  color: var(--color-primary);
  margin-bottom: 20px;
  transition: var(--transition-standard);
  font-size: 3rem;
}

.certification:hover .certification__icon {
  color: var(--color-accent);
  transform: scale(1.1);
}

.certification__title {
  color: var(--color-primary);
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.certification__description {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.certification__status {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text-white);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===============================================
SOCIAL PROOF COMPONENTS
=============================================== */

.social-proof {
  padding: 80px 0;
  background: var(--bg-light);
}

.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.social-proof__item {
  background: var(--color-white);
  padding: 40px 30px;
  border-radius: var(--border-radius-large);
  text-align: center;
  box-shadow: var(--shadow-light);
  transition: var(--transition-standard);
  border: 3px solid transparent;
}

.social-proof__item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-primary);
}

.social-proof__icon {
  color: var(--color-primary);
  margin-bottom: 20px;
  font-size: 2.5rem;
}

.social-proof__item:hover .social-proof__icon {
  color: var(--color-accent);
}

.social-proof__item h3 {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: var(--font-weight-bold);
}

.social-proof__item p {
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  font-size: 0.95rem;
}

/* ===============================================
FAQ ACCORDIONS
=============================================== */

.faq {
  padding: 80px 0;
  background: var(--color-white);
}

.faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.faq__item {
  background: var(--bg-light);
  border-radius: var(--border-radius-large);
  padding: 30px 25px;
  border: 3px solid transparent;
  transition: var(--transition-standard);
}

.faq__item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-light);
  background: rgba(255, 255, 255, 0.95);
}

.faq__question {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.faq__answer p {
  margin: 10px 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.faq__answer p:first-child {
  margin-top: 0;
}

.faq__answer p:last-child {
  margin-bottom: 0;
}

.faq__answer strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ===============================================
RESPONSIVE DESIGN
=============================================== */

@media (max-width: 768px) {
  /* Services cards mobile */
  .services__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .services-card,
  .showcase__item--service {
    padding: 40px 25px;
  }
  
  /* Values grid mobile */
  .values__grid,
  .showcase--values {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  /* Form mobile */
  .form-row,
  .form__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  /* Team grid mobile */
  .team__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .team__photo {
    width: 100px;
    height: 100px;
  }
  
  /* Certifications mobile */
  .certifications__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  /* FAQ mobile */
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  /* Social proof mobile */
  .social-proof__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
  }
}

@media (max-width: 425px) {
  .services-card,
  .showcase__item--service,
  .values__card,
  .showcase__value-card,
  .team__card,
  .certification,
  .social-proof__item {
    padding: 30px 20px;
  }
  
  .contact-form-btn,
  .form__submit-btn {
    width: 100%;
    justify-content: center;
  }
  
  .services-card__title,
  .showcase__service-title,
  .values-card__title,
  .showcase__value-title {
    font-size: 1.3rem;
  }
}

/* ===============================================
ACCESSIBILITY & PERFORMANCE
=============================================== */

@media (prefers-reduced-motion: reduce) {
  .services-card,
  .showcase__item--service,
  .values__card,
  .showcase__value-card,
  .team__card,
  .certification,
  .social-proof__item,
  .faq__item {
    transition: none;
  }
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus,
.form__input:focus,
.form__select:focus,
.form__textarea:focus,
.contact-form-btn:focus,
.form__submit-btn:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Performance hints */
.services-card,
.showcase__item--service,
.team__card,
.certification {
  will-change: transform;
}

/* ===============================================
End of ELVEA CSS FRAMEWORK - SHOWCASE.CSS v1.0.0

OBSAHUJE KOMPONENTY PRE:
✅ services.html - Services cards, Values grid, Contact forms
✅ about.html - Timeline, Team profiles, Certifications, Achievements  
✅ projects.html - Project showcases, Galleries
✅ contact.html - Contact forms, FAQ, Social proof

MIGRAČNÉ ALIASY zachované pre bezproblémovú HTML aktualizáciu
FUNKCIONÁLNE NÁZVY pre univerzálne použitie
RESPONSIVE DESIGN pre všetky zariadenia
ACCESSIBILITY features pre prístupnosť

ĎALŠIE MODULY:
- interactive.css (kalkulátory, filtre)
- business.css (pricing, ponuky) 
- forms.css (pokročilé formuláre)
=============================================== */