/* Reusable Components for E-Tineret Theme */

/* ================== SPACING SYSTEM ================== */
:root {
  /* Standard spacing values */
  --et-space-xs: 8px;
  --et-space-sm: 16px;
  --et-space-md: 24px;
  --et-space-lg: 30px;
  --et-space-xl: 40px;
  --et-space-2xl: 48px;
  
  /* Section spacing */
  --et-section-gap: var(--et-space-lg);
  --et-element-gap: var(--et-space-md);
  --et-content-gap: var(--et-space-sm);
  
  /* Mobile adjustments */
  --et-mobile-section-gap: var(--et-space-md);
  --et-mobile-element-gap: var(--et-space-sm);
}

/* ================== BREADCRUMBS ================== */
.et-breadcrumbs {
  margin: 0 0 var(--et-section-gap);
  position: relative;
  padding-bottom: 10px;
  font-family: var(--et-font-onest);
}

.et-breadcrumbs a {
  font-size: 16px;
  color: #75787B;
  text-decoration: none;
  font-weight: 400;
  transition: color .18s;
}

.et-breadcrumbs a:hover {
  color: #3459AF;
  text-decoration: none;
}

.et-breadcrumbs .current,
.et-breadcrumbs span:last-child {
  font-size: 16px;
  color: #3C3C3C;
  font-weight: 400;
  text-decoration: none;
}

.et-breadcrumbs .sep {
  font-size: 16px;
  opacity: .55;
  margin: 0 4px;
  font-weight: 400;
}

.et-breadcrumbs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, #D8DDE3 0%, #E6E9EE 55%, rgba(230, 233, 238, 0) 100%);
  border-radius: 1px;
  pointer-events: none;
}

/* ================== ARCHIVE TITLE ================== */
.et-cat-archive-title {
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 600;
  color: #222;
  font-family: var(--et-font-onest);
}

@media (max-width: 640px) {
  .et-cat-archive-title {
    font-size: 32px;
  }
}

/* ================== ARCHIVE HEAD ================== */
.et-cat-archive-head {
  margin: 0 0 var(--et-section-gap);
}

.et-cat-archive-head.has-desc {
  margin-bottom: calc(var(--et-section-gap) - 14px);
}

.et-cat-archive-description {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #525252;
  font-family: var(--et-font-onest);
}

/* ================== PAGE SECTIONS ================== */
.et-page-section {
  padding-top: clamp(var(--et-space-md), 3.5vw, var(--et-space-2xl));
  padding-bottom: clamp(60px, 7vw, 120px);
}

.et-page-section + .et-page-section {
  margin-top: var(--et-section-gap);
}

/* ================== RESPONSIVE SPACING ================== */
@media (max-width: 640px) {
  .et-breadcrumbs {
    margin: 0 0 var(--et-mobile-section-gap);
  }
  
  .et-cat-archive-head {
    margin: 0 0 var(--et-mobile-section-gap);
  }
  
  .et-page-section {
    padding-top: clamp(var(--et-space-2xl), 24vw, 128px);
    padding-bottom: clamp(70px, 16vw, 120px);
  }
}