/* ============================================
   Collection Page — Издательства партнёры
   Light theme, grid layout
   ============================================ */

/* ---- Page Overrides ---- */
.collection-page {
  background-color: #F5F5F5;
  color: var(--color-main);
}

.collection-page body {
  background-color: #F5F5F5;
}

/* ---- Main Content Area ---- */
.collection-main {
  padding: 2rem 0 3rem;
  min-height: calc(100vh - 80px);
}

/* ---- Header Section ---- */
.collection-header {
  margin-bottom: 1.5rem;
}

.collection-breadcrumb {
  font-size: 0.875rem;
  color: #757575;
  margin-bottom: 0.5rem;
}

.collection-breadcrumb a {
  color: #757575;
  text-decoration: none;
}

.collection-breadcrumb a:hover {
  color: var(--color-main);
}

.collection-breadcrumb-sep {
  margin: 0 0.5rem;
  opacity: 0.6;
}

.collection-breadcrumb-current {
  color: #757575;
}

.collection-title {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-main);
  margin-bottom: 24px;
}

/* ---- Category Tags ---- */
.collection-tags-wrap {
  margin-bottom: 2rem;
}

.collection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  overflow: hidden;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  max-height: 7rem;
  transition: max-height 0.3s ease;
}

.collection-tags-wrap.is-expanded .collection-tags {
  max-height: none;
}

.collection-tag {
  flex-shrink: 0;
  padding: 0.813rem 1rem;
  border-radius: 12px;
  border: none;
  background-color: var(--color-gray-hover);
  color: var(--color-main) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-tag:hover {
  background-color: #E5E5E5 !important;
}

.collection-tag--active {
  background-color: var(--color-primary-hover) !important;
  color: var(--color-primary) !important;
}

.collection-tag--active:hover {
  background-color: var(--color-primary-pale) !important;
}

.collection-tags-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
  margin-top: 2px;
}

.collection-tags-toggle:hover {
  color: var(--color-main);
}

/* ---- Main Grid ---- */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr 0.6fr 0.8fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ---- Cards ---- */
.collection-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.collection-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
}

/* Feature Card (Large) */
.collection-card--feature {
  color: var(--color-main);
}

.collection-card--feature .collection-card-inner {
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

/* Image — full card background, lowest z-index */
.collection-card--feature .collection-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
  overflow: hidden;
}

.collection-card--feature .collection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Badge and content — above image */
.collection-card--feature .collection-card-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: #FFFFFF;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-main);
  width: fit-content;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-bottom: auto;
}

.collection-card--feature .collection-card-badge-icon {
  flex-shrink: 0;
}

.collection-card--feature .collection-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.collection-card--feature .collection-card-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-main);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.collection-card--feature .collection-card-desc {
  font-size: 16px;
  color: var(--color-gray-800);
  margin: 0 0 24px;
  line-height: 30px;
  max-width: 360px;
}

.collection-card--feature .collection-card-btn {
  width: fit-content;
  font-weight: 400;
}

/* Middle Column */
.collection-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.collection-card--info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Вы найдёте — меньшая высота */
.collection-card--blue {
  background-color: var(--color-blue-pale);
  color: var(--color-main);
  flex: 0 0 auto;
  min-height: 130px;
}

/* Вы сможете — большая высота, с линиями сверху */
.collection-card--white {
  background-color: #FFFFFF;
  color: var(--color-main);
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
}

.collection-card--smojete .collection-card-graphic {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  background-image: url('../img/collection/card-lines.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.collection-card--smojete .collection-card-heading,
.collection-card--smojete .collection-card-text {
  position: relative;
  z-index: 1;
}

.collection-card-heading {
  font-size: 20px;
  color: var(--color-main);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  font-weight: 500;
}

.collection-card-text {
  font-size: 16px;
  color: var(--color-gray-800);
  margin: 0;
  line-height: 24px;
}

/* Tall Card (Right) — изображение внутри карточки */
.collection-card--tall {
  background-color: #FFFFFF;
  color: var(--color-main);
}

.collection-card--tall .collection-card-inner {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.collection-card--tall .collection-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.collection-card--tall .collection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.collection-card--tall .collection-card-body {
  padding: 0;
}

.collection-card--tall .collection-card-heading {
  margin-bottom: 0.5rem;
}

/* ---- Bottom Filter Bar ---- */
.collection-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #E0E0E0;
}

.collection-filter-label {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.collection-levels {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.collection-level-btn {
  padding: 0.813rem 1rem;
  border-radius: 12px;
  border: none;
  background-color: var(--color-gray-hover);
  color: var(--color-main);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.collection-level-btn:hover {
  background-color: #E0E0E0;
}

.collection-level-btn:focus {
  outline: 2px solid var(--color-primary, #B41E23);
  outline-offset: 2px;
}

.collection-level-btn--active {
  background-color: var(--color-primary-hover);
  color: var(--color-primary);
}

.collection-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  background-color: var(--color-gray-hover);
  padding: 13px 12px;
  border-radius: 10px;
}

.collection-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.collection-toggle-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #FFFFFF;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.collection-toggle input:checked + .collection-toggle-box {
  background-color: #B41E23;
}

.collection-toggle input:checked + .collection-toggle-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4px;
  margin-top: -7px;
  width: 6px;
  height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.collection-toggle-text {
  white-space: nowrap;
}

/* ---- Date Picker (filter bar) ---- */
.collection-date-picker-wrap {
  position: relative;
}

.collection-date-picker-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 13px 16px;
  border: none;
  border-radius: 10px;
  background-color: var(--color-gray-hover);
  color: var(--color-main);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 280px;
  text-align: left;
}

.collection-date-picker-btn:hover {
  background-color: #E0E0E0;
}

.collection-date-picker-btn:focus {
  outline: 2px solid var(--color-primary, #B41E23);
  outline-offset: 2px;
}

.collection-date-picker-btn[aria-expanded="true"] .collection-date-picker-arrow {
  transform: rotate(180deg);
}

.collection-date-picker-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.collection-date-picker-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-600);
}

.collection-date-picker-btn.has-value .collection-date-picker-text {
  color: var(--color-main);
}

.collection-date-picker-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.collection-date-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 1rem;
  min-width: 300px;
  display: none;
}

.collection-date-picker-dropdown.is-open {
  display: block;
}

.collection-date-picker-calendar .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.collection-date-picker-calendar .calendar-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-main);
}

.collection-date-picker-calendar .calendar-nav:hover {
  color: var(--color-primary);
}

.collection-date-picker-calendar .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-gray-500);
  text-align: center;
}

.collection-date-picker-calendar .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.collection-date-picker-calendar .calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.collection-date-picker-calendar .calendar-day:hover {
  background-color: var(--color-gray-100);
}

.collection-date-picker-calendar .calendar-day--other {
  color: var(--color-gray-400);
}

.collection-date-picker-calendar .calendar-day--selectable:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-primary);
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .collection-grid {
    grid-template-columns: 1fr 1fr;
  }

  .collection-card--feature {
    grid-column: 1 / -1;
  }

  .collection-card--feature .collection-card-inner {
    min-height: 320px;
  }
}

@media (max-width: 768px) {
  .collection-main {
    padding: 1rem 0 2rem;
  }

  .collection-title {
    font-size: 1.5rem;
  }

  .collection-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .collection-card--feature .collection-card-inner {
    min-height: 300px;
  }

  .collection-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .collection-toggle {
    margin-left: 0;
  }

  /* Level grid responsive */
  .level-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Level Grid — страница уровня A1
   Блок карточек с прозрачным фоном
   ============================================ */

.level-grid {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.9fr;
  gap: 1rem;
  margin-bottom: 2rem;
  background: transparent;
}

/* Columns */
.level-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.level-col--left {
  /* A1 card + 2x2 stats */
}

.level-col--middle,
.level-col--right {
  /* stacked cards */
}

/* Level Cards */
.level-card {
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.level-card--blue {
  background-color: var(--color-blue-pale, #E6F2FF);
  color: var(--color-main);
}

.level-card--white {
  background-color: #FFFFFF;
  color: var(--color-main);
}

/* A1 Hero Card */
.level-card--a1 {
  background-color: var(--color-blue-pale, #E6F2FF);
  padding: 1.5rem;
  min-height: 312px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.level-card-a1-bg, .level-card-a2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/collection/level-a-bg.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.6;
}
.level-card-b1-bg, .level-card-b2-bg {
	background-image: url('../img/collection/level-b-bg.png');
}
.level-card-c1-bg, .level-card-c2-bg {
	background-image: url('../img/collection/level-c-bg.png');
}

.level-card--a1 .level-card-badge,
.level-card--a1 .level-card-title,
.level-card--a1 .level-card-desc,
.level-card--a1 .level-card-btn {
  position: relative;
  z-index: 1;
}

.level-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background-color: #FFFFFF;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-main);
  width: fit-content;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-bottom: auto;
}

.level-card-title {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-main);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.level-card-desc {
  font-size: 16px;
  color: var(--color-gray-800);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.level-card-btn {
  width: fit-content;
  font-weight: 400;
}

/* 2x2 Stats Grid */
.level-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.level-stat-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.level-stat-icon {
  flex-shrink: 0;
}

.level-stat-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-main);
}

.level-stat-text span {
    font-size: 20px;
}

/* Small Blue Card */
.level-card--small {
  flex: 0 0 auto;
}

.level-card-heading {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-main);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.level-card-text {
  font-size: 16px;
  color: var(--color-gray-800);
  margin: 0;
  line-height: 1.5;
}

/* Card with Image Inside */
.level-card--image {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.level-card--image .level-card-image {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.level-card--image .level-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-card--image .level-card-image.small img {
    height: 212px;
}

.level-card--image .level-card-image.small {
    aspect-ratio: unset;
}

/* Audio Card — horizontal layout */
.level-card--audio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.level-card-audio-img {
  flex-shrink: 0;
}

.level-card-audio-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.level-card-audio-content {
  flex: 1;
  min-width: 0;
}

/* ============================================
   Thematic Grid — Фонетика, графика и орфография
   ============================================ */

/* Thematic feature card with diagonal lines */
.level-card--thematic {
  background-color: var(--color-blue-pale, #E6F2FF);
  padding: 1.5rem;
  min-height: 312px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.level-card-thematic-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 0;
  background-image: url('../img/collection/thematic-lines.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.level-card--thematic .level-card-badge,
.level-card--thematic .level-card-title,
.level-card--thematic .level-card-desc,
.level-card--thematic .level-card-btn {
  position: relative;
  z-index: 1;
}

.level-card--thematic .level-card-desc {
    width: 70%;
}

.level-card--thematic .level-card-title {
    font-size: 24px;
    width: 70%;
}

/* Stats: text-only card (260 других материалов) */
.level-stat-card--text-only {
  justify-content: center;
}

.level-stat-card--text-only .level-stat-text {
  text-align: center;
}

/* Tall image card — Вы сможете (woman reading, ~70% image) */
.thematic-grid .level-card--tall-img .level-card-image {
  aspect-ratio: 13 / 10;
}

.thematic-grid .level-card--tall-img {
  height: 100%;
}

/* ============================================
   Grammar Grid — Именительный падеж
   Hero banner + 4 cards row
   ============================================ */

.grammar-grid {
  margin-bottom: 2rem;
  background: transparent;
}

.grammar-hero {
  position: relative;
  background-color: var(--color-blue-pale, #E6F2FF);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.grammar-hero-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  z-index: 0;
  background-image: url('../img/collection/grammar-lines.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.grammar-hero-title,
.grammar-hero-desc,
.grammar-hero-btn {
  position: relative;
  z-index: 1;
}

.grammar-hero-title {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-main);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.grammar-hero-desc {
  font-size: 1rem;
  color: var(--color-gray-800, #414141);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.grammar-hero-btn {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary, #B41E23);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.grammar-hero-btn:hover {
  background-color: #9A1A1F;
  color: #FFFFFF;
}

.grammar-stats-row {
  display: flex;
  gap: 1rem;
}

.grammar-stat-card {
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.grammar-stat-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grammar-stat-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-main);
}

.grammar-stat-text span {
    font-size: 20px;
}

.grammar-stat-card--text-only .grammar-stat-text {
  text-align: center;
}

@media (max-width: 768px) {
  .grammar-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   Calendar Grid — Праздники и памятные даты
   Hero card + calendar widget
   ============================================ */

.calendar-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  margin-bottom: 2rem;
  background: transparent;
}

.calendar-hero {
  position: relative;
  background: var(--color-blue-pale);
  border-radius: 24px;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.calendar-hero-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  z-index: 0;
  background-image: url('../img/collection/calendar-lines.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.calendar-hero-badge,
.calendar-hero-title,
.calendar-hero-desc,
.calendar-hero-btn {
  position: relative;
  z-index: 1;
}

.calendar-hero-badge {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  background-color: #FFFFFF;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-main);
  margin-bottom: 1rem;
  width: fit-content;
}

.calendar-hero-title {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-main);
  line-height: 1.3;
  margin-top: auto;
}

.calendar-hero-desc {
  font-size: 16px;
  color: var(--color-gray-800, #414141);
  margin: 0 0 1.5rem;
  line-height: 1.5;
  max-width: 660px;
}

.calendar-hero-btn {
  width: fit-content;
}

.calendar-widget {
  background-color: var(--color-primary-hover);
  border-radius: 20px;
  padding: 20px;
}

.calendar-widget-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-main);
  margin: 0 0 1rem;
}

.calendar-box {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 1rem;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendar-nav {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-gray-500);
}

.calendar-nav:hover {
  color: var(--color-main);
}

.calendar-month-year {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-main);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-gray-600);
  text-align: center;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-main);
  border-radius: 50%;
  cursor: pointer;
}

.calendar-day:hover {
  background-color: var(--color-gray-100);
}

.calendar-day--other {
  color: var(--color-gray-400);
}

.calendar-day--holiday {
  background-color: var(--color-primary-hover);
  color: var(--color-primary);
}

@media (max-width: 992px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }
}

.event-box-calendar {
    padding: 100px 0;
}
.event-box-calendar h1 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--color-main);
}

.event-box-calendar p {
    font-size: 16px;
    color: var(--color-gray-500);
    max-width: 700px;
    margin-bottom: 0;
}