/* ==========================================================================
   Base — Reset, Typography, Layout, Utilities
   (Inter font loaded via Google Fonts CDN in base.html)
   ========================================================================== */

/* ==========================================================================
   Modern CSS Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-body);
  min-height: 100vh;
  transition: background-color var(--transition-base), color var(--transition-base);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--space-6) 0;
}

::selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

/* ==========================================================================
   Typography Scale
   ========================================================================== */
.text-xs   { font-size: var(--font-size-xs);  }
.text-sm   { font-size: var(--font-size-sm);  }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md);  }
.text-lg   { font-size: var(--font-size-lg);  }
.text-xl   { font-size: var(--font-size-xl);  }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }
.text-4xl  { font-size: var(--font-size-4xl); }

h1, .h1 { font-size: var(--font-size-4xl); }
h2, .h2 { font-size: var(--font-size-3xl); }
h3, .h3 { font-size: var(--font-size-2xl); }
h4, .h4 { font-size: var(--font-size-xl);  }
h5, .h5 { font-size: var(--font-size-lg);  }
h6, .h6 { font-size: var(--font-size-md);  }

.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* ==========================================================================
   Container System
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-fluid {
  width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-narrow {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-wide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* ==========================================================================
   Bootstrap 4 Grid Compatibility
   ========================================================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width:  8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%;      }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%;      }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%;      }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%;     }

/* SM breakpoint (≥576px) */
@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 auto; width:  8.3333%; }
  .col-sm-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-sm-3  { flex: 0 0 auto; width: 25%;      }
  .col-sm-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-sm-6  { flex: 0 0 auto; width: 50%;      }
  .col-sm-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-sm-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-sm-9  { flex: 0 0 auto; width: 75%;      }
  .col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%;     }
}

/* MD breakpoint (≥768px) */
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 auto; width:  8.3333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%;      }
  .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%;      }
  .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%;      }
  .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%;     }
}

/* LG breakpoint (≥992px) */
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 auto; width:  8.3333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%;      }
  .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%;      }
  .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%;      }
  .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%;     }
}

/* XL breakpoint (≥1200px) */
@media (min-width: 1200px) {
  .col-xl-1  { flex: 0 0 auto; width:  8.3333%; }
  .col-xl-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-xl-3  { flex: 0 0 auto; width: 25%;      }
  .col-xl-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-xl-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%;      }
  .col-xl-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-xl-9  { flex: 0 0 auto; width: 75%;      }
  .col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%;     }
}

/* Bootstrap offset helpers */
.offset-1  { margin-left:  8.3333%; }
.offset-2  { margin-left: 16.6667%; }
.offset-3  { margin-left: 25%;      }
.offset-4  { margin-left: 33.3333%; }
.offset-6  { margin-left: 50%;      }

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* ── Clearfix ── */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Text Truncation ── */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Display ── */
.d-none          { display: none !important; }
.d-block         { display: block !important; }
.d-inline        { display: inline !important; }
.d-inline-block  { display: inline-block !important; }
.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }
.d-grid          { display: grid !important; }

@media (min-width: 576px) {
  .d-sm-none   { display: none !important; }
  .d-sm-block  { display: block !important; }
  .d-sm-flex   { display: flex !important; }
}
@media (min-width: 768px) {
  .d-md-none   { display: none !important; }
  .d-md-block  { display: block !important; }
  .d-md-flex   { display: flex !important; }
}
@media (min-width: 992px) {
  .d-lg-none   { display: none !important; }
  .d-lg-block  { display: block !important; }
  .d-lg-flex   { display: flex !important; }
}

/* ── Flexbox ── */
.flex-row       { flex-direction: row; }
.flex-column    { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-grow-1    { flex-grow: 1; }
.flex-shrink-0  { flex-shrink: 0; }

.justify-content-start   { justify-content: flex-start; }
.justify-content-center  { justify-content: center; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around  { justify-content: space-around; }

.align-items-start   { align-items: flex-start; }
.align-items-center  { align-items: center; }
.align-items-end     { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── Text alignment ── */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ── Colors ── */
.text-primary   { color: var(--color-primary) !important; }
.text-accent    { color: var(--color-accent) !important; }
.text-muted     { color: var(--text-secondary) !important; }
.text-white     { color: #fff !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-accent  { background-color: var(--color-accent) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-body    { background-color: var(--bg-body) !important; }

/* ── Spacing helpers ── */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.p-0  { padding: 0 !important; }
.p-2  { padding: var(--space-2) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-6  { padding: var(--space-6) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

/* ── Borders ── */
.border        { border: 1px solid var(--border-color) !important; }
.border-top    { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.rounded       { border-radius: var(--border-radius) !important; }
.rounded-lg    { border-radius: var(--border-radius-lg) !important; }
.rounded-full  { border-radius: var(--border-radius-full) !important; }

/* ── Misc ── */
.overflow-hidden { overflow: hidden; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Body Fade Handling
   ========================================================================== */
body.fade-out {
  opacity: 0;
  transition: opacity var(--transition-base);
}

body.fade-in {
  opacity: 1;
  transition: opacity var(--transition-base);
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}