/* --------------------------------------------
   Theme Resets
-------------------------------------------- */
div#content {
  display: block;
  padding: 0;
  margin: 0;
}

.site-content .content-area {
  width: 100% !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0 !important;
  padding: 0;
}

div#page {
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* --------------------------------------------
   Design System: Grid Layout - Base Row (BEM-style)
-------------------------------------------- */
.row {
  display: grid;
  margin: 0 auto;
  width: 90%;
}

.row--fluid {
  display: grid;
}

/* --------------------------------------------
   Design System: Row Alignments (All Viewports)
-------------------------------------------- */
.row--align-center {
  align-items: center;
}

.row--align-top {
  align-items: flex-start;
}

.row--align-bottom {
  align-items: flex-end;
}

.row--align-stretch {
  align-items: stretch;
}

/* --------------------------------------------
   Design System: Row Alignments - Mobile Only
-------------------------------------------- */
.row--align-top-onlymobile {
  align-items: flex-start;
}

.row--align-center-onlymobile {
  align-items: center;
}

.row--align-bottom-onlymobile {
  align-items: flex-end;
}

.row--align-stretch-onlymobile {
  align-items: stretch;
}

@media (min-width: 1025px) {
  .row--align-top-onlymobile,
  .row--align-center-onlymobile,
  .row--align-bottom-onlymobile,
  .row--align-stretch-onlymobile {
    align-items: unset;
  }
}

/* --------------------------------------------
   Design System: Section Padding (Mobile Default)
-------------------------------------------- */
.section--padding-sm,
.section--padding-md,
.section--padding-lg,
.section--padding-xl {
  padding-top: clamp(100px, 6.2vw, 120px);
  padding-bottom: clamp(100px, 6.2vw, 120px);
}

/* --------------------------------------------
   Design System: Grid Columns (Mobile Default)
-------------------------------------------- */
.row--1col-full,
.row--2col-equal,
.row--3col-equal,
.row--4col-equal,
.row--5col-equal,
.row--6col-equal,
.row--2col-60-40,
.row--2col-40-60,
.row--3col-50-25-25,
.row--3col-60-20-20,
.row--3col-20-60-20,
.row--3col-25-25-50,
.row--2col-45-55,
.row--2col-55-45,
.row--2col-70-30,
.row--2col-30-70 {
  grid-template-columns: 1fr;
}

/* --------------------------------------------
   Design System: Reverse Grid Utility
-------------------------------------------- */
.row--reverse {
  direction: rtl;
}

.row--reverse > * {
  direction: ltr;
}

.row--reverse-onlymobile {
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 1025px) {
  .row--reverse-onlymobile {
    display: grid;
    flex-direction: unset;
  }
}

/* --------------------------------------------
   Design System: Gap Utilities
-------------------------------------------- */

.row--gap-sm,
.row--gap-md,
.row--gap-lg,
.row--gap-xl,
.row--gap-xxl {
  gap: 40px;
}
.row--mobile-gap {
  gap: 40px;
}

@media (min-width: 1025px) {
  .row--mobile-gap {
    gap: 0;
  }
  .row--gap-sm {
    gap: 20px;
  }
  .row--gap-md {
    gap: 30px;
  }
  .row--gap-lg {
    gap: 40px;
  }
  .row--gap-xl {
    gap: 60px;
  }
  .row--gap-xxl {
    gap: 80px;
  }
}

/* --------------------------------------------
   Media Queries - Desktop (≥1025px)
-------------------------------------------- */
@media (min-width: 1025px) {
  .row {
    max-width: 1720px;
  }

  /* Equal column layouts */
  .row--2col-equal {
    grid-template-columns: repeat(2, 1fr);
  }
  .row--3col-equal {
    grid-template-columns: repeat(3, 1fr);
  }
  .row--4col-equal {
    grid-template-columns: repeat(4, 1fr);
  }
  .row--5col-equal {
    grid-template-columns: repeat(5, 1fr);
  }
  .row--6col-equal {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Two-column proportional layouts */
  .row--2col-60-40 {
    grid-template-columns: 3fr 2fr;
  }
  .row--2col-40-60 {
    grid-template-columns: 2fr 3fr;
  }
  .row--2col-45-55 {
    grid-template-columns: 9fr 11fr;
  }
  .row--2col-55-45 {
    grid-template-columns: 11fr 9fr;
  }
  .row--2col-70-30 {
    grid-template-columns: 7fr 3fr;
  }
  .row--2col-30-70 {
    grid-template-columns: 3fr 7fr;
  }

  /* Three-column proportional layouts */
  .row--3col-50-25-25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .row--3col-60-20-20 {
    grid-template-columns: 3fr 1fr 1fr;
  }
  .row--3col-20-60-20 {
    grid-template-columns: 1fr 3fr 1fr;
  }
  .row--3col-25-25-50 {
    grid-template-columns: 1fr 1fr 2fr;
  }

  /* Section paddings - Responsive */
  .section--padding-sm {
    padding-top: clamp(60px, 5.2vw, 100px);
    padding-bottom: clamp(60px, 5.2vw, 100px);
  }
  .section--padding-md {
    padding-top: clamp(60px, 7.8vw, 150px);
    padding-bottom: clamp(60px, 7.8vw, 150px);
  }
  .section--padding-lg {
    padding-top: clamp(60px, 10.4vw, 200px);
    padding-bottom: clamp(60px, 10.4vw, 200px);
  }
  .section--padding-xl {
    padding-top: clamp(60px, 13vw, 250px);
    padding-bottom: clamp(60px, 13vw, 250px);
  }
}

/* --------------------------------------------
   Media Queries - Ultra Wide Screens (≥1921px)
-------------------------------------------- */
@media (min-width: 1921px) {
  .row {
    max-width: 95%;
    width: 95%;
  }
}

/* --------------------------------------------
   Global Styles
-------------------------------------------- */
html,
body {
  overflow-x: hidden;
  background-color: #fff !important;
}

/* --------------------------------------------
   Section background styles
-------------------------------------------- */
.section--bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.section--bg--center {
  background-position: center;
}

.section--overlay--dark {
  background-blend-mode: overlay;
  background-color: #00000048;
}

.section--relative {
  position: relative;
}

/* --------------------------------------------
   Global Blocks
-------------------------------------------- */
.column {
  width: 100%;
}

.block--image {
  display: flex;
  height: 100%;
  transition: 300ms;
  width: 100%;
}

.block--image__img {
  height: 100%;
  transition: 300ms;
  width: 100%;
}

.block--button {
  display: flex;
  width: max-content;
}

.block--button__link {
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: 300ms;
}

.block--button--primary .block--button__link {
  background: #000;
  color: #fff;
}

.block--button--primary .block--button__link:hover {
  background: #666;
  color: #fff;
}

.block--paragraph {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.block--title {
  text-align: left;
}

.block--title--center {
  text-align: center;
}

.block--title--right {
  text-align: right;
}