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

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(60px, 7.80vw, 80px);
  padding-bottom: clamp(60px, 7.80vw, 80px);
}


/* --------------------------------------------
   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.20vw, 100px);
    padding-bottom: clamp(60px, 5.20vw, 100px);
  }
  .section--padding-md {
    padding-top: clamp(60px, 7.80vw, 150px);
    padding-bottom: clamp(60px, 7.80vw, 150px);
  }
  .section--padding-lg {
    padding-top: clamp(60px, 10.40vw, 200px);
    padding-bottom: clamp(60px, 10.40vw, 200px);
  }
  .section--padding-xl {
    padding-top: clamp(60px, 13.00vw, 250px);
    padding-bottom: clamp(60px, 13.00vw, 250px);
  }
}


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


/* --------------------------------------------
   Global Styles
-------------------------------------------- */
html, body {
  overflow-x: hidden;
}


/* --------------------------------------------
   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: #0000008a;
}

.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;
}