/*
Theme Name: Divi Child - TM Moto
Theme URI: https://bigus.studio
Description: Child theme for Divi with TM Moto
Author: Bigus Studio
Author URI: https://bigus.studio
Template: Divi
Version: 2.4.0
*/

/* ============================================
   ZMIENNE
   ============================================ */

:root {
    --tm-color-primary: #0a1f44;
    --tm-color-accent: #f97316;
    --tm-h1-size: clamp(36px, 6vw, 72px);
    --tm-h2-size: clamp(28px, 4.5vw, 48px);
    --tm-h3-size: clamp(24px, 3.5vw, 36px);
    --tm-h4-size: clamp(20px, 2.5vw, 24px);
    --tm-h5-size: clamp(18px, 2vw, 20px);
    --tm-h6-size: clamp(15px, 1.8vw, 16px);
    --tm-body-size: clamp(14px, 1.5vw, 16px);
}

/* ============================================
   GLOBALNE
   ============================================ */

html,
body,
#page-container,
.et-boc {
  overflow-x: hidden;
}

/* ============================================
   HEADINGS
   ============================================ */

h1, .et_pb_text h1, .et_pb_slide_description h1, .et_pb_module h1 {
    font-size: var(--tm-h1-size);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--tm-color-primary);
}

h2, .et_pb_text h2, .et_pb_slide_description h2, .et_pb_module h2 {
    font-size: var(--tm-h2-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: var(--tm-color-primary);
}

h3, .et_pb_text h3, .et_pb_slide_description h3, .et_pb_module h3 {
    font-size: var(--tm-h3-size);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--tm-color-primary);
}

h4, .et_pb_text h4, .et_pb_slide_description h4, .et_pb_module h4 {
    font-size: var(--tm-h4-size);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--tm-color-primary);
}

h5, .et_pb_text h5, .et_pb_slide_description h5, .et_pb_module h5 {
    font-size: var(--tm-h5-size);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--tm-color-primary);
}

h6, .et_pb_text h6, .et_pb_slide_description h6, .et_pb_module h6 {
    font-size: var(--tm-h6-size);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--tm-color-primary);
}

p, .et_pb_text p, .et_pb_slide_description p, .et_pb_module p {
    font-size: var(--tm-body-size);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 16px;
    color: var(--tm-color-primary);
}

/* ============================================
   ANIMACJA TŁA - RUCH (fade z Divi)
   ============================================ */

.et_pb_section.bg-anim.bg-strong {
  position: relative;
  overflow: hidden;
}

.et_pb_section.bg-anim.bg-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  animation: leaderPan 35s ease-in-out infinite;
}

.et_pb_section.bg-anim.bg-strong .et_pb_background_overlay {
  z-index: 1;
}

.et_pb_section.bg-anim.bg-strong > .et_pb_row {
  position: relative;
  z-index: 2;
}

@keyframes leaderPan {
  0%, 100% {
    transform: scale(1.05) translate(0, 0);
  }
  50% {
    transform: scale(1.10) translate(2.5%, 0.3%);
  }
}

/* ============================================
   BUTTONS
   ============================================ */

.technical-spec-button {
  transition: all 0.3s ease;
}

.technical-spec-button:hover {
  background-color: #0ba8c7 !important;
  box-shadow: 0 4px 15px rgba(21, 208, 242, 0.4);
  transform: translateY(-2px);
}

.technical-spec-button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(21, 208, 242, 0.3);
}

.et_pb_button.tm-cta-button {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.et_pb_button.tm-cta-button:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

/* ============================================
   TM SPECS TABLE
   ============================================ */

.disclaimer {
  font-size: 8px;
}

.tm-specs-wrapper {
    margin: 40px 0;
}

.tm-specs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.tm-specs-col {
    min-width: 0;
}

.tm-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(10, 31, 68, 0.08), 
                0 1px 3px rgba(10, 31, 68, 0.04);
}

.tm-specs-table caption {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 18px 28px;
    text-align: center;
    color: #ffffff;
    background: var(--tm-color-primary);
}

.tm-specs-table tbody {
    display: table-row-group;
}

.tm-specs-table tr {
    border-bottom: none;
}

.tm-specs-table th,
.tm-specs-table td {
    padding: 18px 28px;
    text-align: left;
    vertical-align: top;
    border: none;
    background: transparent;
}

.tm-specs-table th {
    font-weight: 700;
    color: var(--tm-color-primary);
    width: 42%;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.tm-specs-table td {
    font-weight: 400;
    color: var(--tm-color-primary);
    font-size: 14px;
}

/* ============================================
   PORTFOLIO
   ============================================ */

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active {
    color: var(--tm-color-accent);
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media screen and (max-width: 1024px) {
    .tm-specs-columns { gap: 24px; }
    .tm-specs-table th, .tm-specs-table td { padding: 14px 20px; }
    .tm-specs-table caption { font-size: 12px; padding: 16px 20px; }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media screen and (max-width: 980px) {
  .et_pb_section.bg-anim.bg-strong::before {
    animation-duration: 45s;
  }
}

@media screen and (max-width: 768px) {
    .tm-specs-columns { grid-template-columns: 1fr; gap: 30px; }
    .tm-specs-table { border-radius: 10px; }
    .tm-specs-table th, .tm-specs-table td { display: table-cell; padding: 14px 20px; }
    .tm-specs-table th { width: 45%; font-size: 10px; }
    .tm-specs-table td { font-size: 13px; }
}

@media screen and (max-width: 480px) {
    .tm-specs-table caption { font-size: 14px; padding-bottom: 10px; }
    .tm-specs-table th { font-size: 9px; }
    .tm-specs-table td { font-size: 13px; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .et_pb_section.bg-anim.bg-strong::before {
    animation: none !important;
  }
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .tm-specs-columns { grid-template-columns: 1fr 1fr; gap: 20px; }
    .tm-specs-table th, .tm-specs-table td { padding: 6px 0; font-size: 9pt; }
}