/* ==========================================================================
   LAYOUT CSS - Grid System, Common Spacing, Layout Utilities
   ========================================================================== */

/* Common Spacing */
.common-spacing {
  height: var(--Space-12, 48px);
}

/* Grid System */
.grid-container {
  display: grid;
}

/* Section Layouts */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.section-child {
  /* Base styles for section children */
}

/* View All Link Styles */
.section-header .view-all {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--On-background-Brand-Default, #231f20);
  text-align: center;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Medium, 16px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  line-height: 140%;
  letter-spacing: -0.64px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

.section-header .view-all:hover {
  color: var(--Background-Brand-Primary, #520f09);
  transform: translateX(4px);
}

/* Generic Grid Layouts */
.grid-item {
  /* Base styles for grid items */
}

/* Responsive Grid Adjustments */
@media (max-width: 575px) {
  .common-spacing {
    height: var(--Space-10, 40px);
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-spacer-1-rem, 16px);
  }

  .section-header .view-all {
    background: #520f09;
    color: #fefdf9;
    padding: 12px 26px;
  }

  .section-header .view-all:hover {
    background: var(--Background-Brand-Primary-Hover, #63160f);
    transform: translateY(-1px);
  }

  .section-header .view-all i {
    color: #fefdf9;
  }
}

/* Floating Back to Top Button */
.floating-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.btn-back-to-top {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--Background-Brand-Primary, #520f09);
  border: none;
  color: var(--On-background-Brand-Primary, #fefdf9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(82, 15, 9, 0.3);
}

.btn-back-to-top:hover {
  background: var(--Background-Brand-Primary-Hover, #63160f);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(82, 15, 9, 0.4);
}

/* Responsive scroll to top button */
@media (max-width: 575px) {
  .floating-back-to-top {
    bottom: 16px;
    right: 16px;
  }
  .btn-back-to-top {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .floating-back-to-top {
    bottom: 20px;
    right: 20px;
  }
  .btn-back-to-top {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}