/*
Theme Name: EVPA TECH
Theme URI: https://www.evpatech.sk
Author: EVPA TECH s.r.o.
Author URI: https://www.evpatech.sk
Description: Prémiová téma pre EVPA TECH s plnou podporou Elementoru a 100% responzívnym dizajnom pre PC, tablet a mobil.
Version: 1.0.0
Text Domain: evpatech
*/

@import url('assets/css/tailwind.css');
@import url('assets/css/style.css');

/* Dodatočné štýly pre WordPress a Elementor integráciu */
.elementor-page .site-content {
  padding: 0;
  max-width: 100%;
}

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}

/* Zabezpečenie správnej viditeľnosti Lucide ikon */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* Robust layout & spacing fallbacks */
.gap-10 { gap: 2.5rem !important; }
.gap-12 { gap: 3rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.w-9 { width: 2.25rem !important; }
.h-9 { height: 2.25rem !important; }
.w-10 { width: 2.5rem !important; }
.h-10 { height: 2.5rem !important; }
.h-40 { height: 10rem !important; }
.h-56 { height: 14rem !important; }
.h-64 { height: 16rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-7 { padding-left: 1.75rem !important; }

@media (min-width: 640px) {
  .sm\:p-8 { padding: 2rem !important; }
  .sm\:p-10 { padding: 2.5rem !important; }
  .sm\:gap-4 { gap: 1rem !important; }
  .sm\:gap-6 { gap: 1.5rem !important; }
}

@media (min-width: 1024px) {
  .lg\:gap-10 { gap: 2.5rem !important; }
  .lg\:gap-12 { gap: 3rem !important; }
}

/* Gallery Realizácie Styles */
.gallery-cover-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 240px;
  background-color: #f1f5f9;
}
.gallery-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-thumb-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-radius: 0.5rem;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.gallery-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-pill.active {
  background-color: #c8102e !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.gallery-thumbs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

/* Robust Gallery Photo Item Rules */
.gallery-photo-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0.75rem !important;
  background-color: #f1f5f9 !important;
  height: 220px !important;
  display: block !important;
  width: 100% !important;
}
.gallery-photo-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Modal and Gallery CTA Button Fixes */
#photo-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background-color: rgba(2, 6, 23, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#photo-modal.hidden {
  display: none !important;
}
#photo-modal.flex {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#photo-modal img#modal-img {
  max-height: 80vh !important;
  max-width: 90vw !important;
  object-fit: contain !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
.gallery-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 0.75rem !important;
  background-color: #c8102e !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  height: auto !important;
  line-height: 1.25 !important;
  align-self: flex-start !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
}
@media (min-width: 640px) {
  .gallery-cta-btn {
    align-self: center !important;
  }
}
.gallery-cta-btn:hover {
  background-color: #a00c24 !important;
  color: #ffffff !important;
}