/*
 Theme Name:   Benz Digital
 Theme URI:    https://www.benzdigital.de
 Author:       Stephan Benz
 Author URI:   https://www.benzdigital.de
 Description:  A custom WordPress theme for Benz Digital, designed for modern web experiences.
 Version:      1.0.4
 Tested up to: 6.6
 Requires PHP: 7.4
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  benzdigital
 Tags:         custom-logo, featured-images, woocommerce, block-styles, full-width-template, translation-ready
*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
  --color-primary: #008080;
  --color-secondary: #E0F2F2;
  --color-tertiary: #009699;
  --color-quaternary: #D8EFEF;
  --color-text-body: #333333;
  --color-text-headings: var(--color-primary);
  --color-text-muted: #707070;
  --color-border: #DDDDDD;

  --color-background-body: #fff;
  --color-background-content-section: #F8F8F8;
  --color-background-section: var(--color-background-content-section);
  --color-background-header: #fff;
  --color-text-header: var(--color-primary);
  --color-background-footer: var(--color-primary);
  --color-text-footer: #fff;
  --color-background-nav-mobile: #303030;

  --color-text-light: #fff;
  --color-text-dark: #000;

  --color-primary-accent: #a2c11d;
  --color-primary-accent-hover: #a2c11d;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-accent);

  --color-primary-hover: #006666;
  --color-secondary-hover: #cceaea;
  --color-black-hover: #222;
  --color-white-hover-bg: #f9f9f9;

  --white: #fff;
  --black: #000;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;

  --font-family-system-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-base: 'Be Vietnam Pro', var(--font-family-system-sans-serif);
  --font-family-headings: 'Be Vietnam Pro', var(--font-family-system-sans-serif);

  --font-size-base: 1rem;
  --font-size-sm: calc(var(--font-size-base) * 0.875);
  --font-size-lg: calc(var(--font-size-base) * 1.25);

  --line-height-base: 1.7;
  --line-height-headings: 1.4;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --spacing-unit: 1rem;
  --spacing-xs: calc(var(--spacing-unit) * 0.25);
  --spacing-sm: calc(var(--spacing-unit) * 0.5);
  --spacing-md: var(--spacing-unit);
  --spacing-lg: calc(var(--spacing-unit) * 1.5);
  --spacing-xl: calc(var(--spacing-unit) * 2);
  --spacing-2xl: calc(var(--spacing-unit) * 3);

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  --border-radius: 4px;
  --max-width-content: 1152px;
  --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

  --transition-fast: all 0.15s ease-in-out;
  --transition-base: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;

  --z-index-base: 1;
  --z-index-header: 1000;
  --z-index-nav: 1100;
  --z-index-overlay: 2000;
  --z-index-modal: 3000;
  --z-index-toast: 4000;

}

/*--------------------------------------------------------------
# Reset & Normalize (bleibt größtenteils gleich)
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-body);
  background-color: var(--color-background-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow-x: hidden;
}

@media (min-width: 990px) {
  body {
    box-shadow: var(--box-shadow);
  }
}

/*--------------------------------------------------------------
# Base Styles
--------------------------------------------------------------*/

/* ## Typography ## */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-headings);
  color: var(--color-text-headings);
  line-height: var(--line-height-headings);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: calc(var(--font-size-base) * 2.5);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: calc(var(--font-size-base) * 2);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: calc(var(--font-size-base) * 1.75);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: calc(var(--font-size-base) * 1.5);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-size: calc(var(--font-size-base) * 1.25);
  font-weight: var(--font-weight-medium);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

span.subline {
  display: block;
  font-size: 1rem;
  font-weight: 500;
}

p {
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-normal);
}

p.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
}

ul,
ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

li {
  margin-bottom: var(--spacing-sm);
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--color-primary-accent);
  /* Gold als Akzent-Border */
  background-color: var(--color-background-content-section);
  /* Sehr helles Grau für Blockquote-Hintergrund */
  font-style: italic;
  font-weight: var(--font-weight-light);
  color: var(--color-text-body);
  /* Textfarbe innerhalb Blockquote anpassen */
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ## Links ## */
a {
  color: var(--color-link);
  text-decoration: none;
  /* Unterstreichung initial optional */
  transition: var(--transition-base);
  font-weight: var(--font-weight-medium);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ## Images & Media ## */
img,
video,
iframe,
object,
embed {
  max-width: 100%;
  height: auto;
  display: block;
  /* Verhindert unerwünschten Leerraum unter Bildern */
}

figure {
  margin: 0 0 var(--spacing-md);
}

figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}

/* ## Forms (Basic) ## */
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-background-section);
  /* Uses the now defined --color-background-section */
  color: var(--color-text-body);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  /* Normalsiert Suchfelder */
}

textarea {
  width: 100%;
  resize: vertical;
}

label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-bold);
}

/* ## Tables (Basic) ## */
table {
  width: 100%;
  margin-bottom: var(--spacing-md);
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  /* Rahmen um die Tabelle */
}

th,
td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-background-content-section);
  /* Sehr helles Grau für Tabellen-Header */
  color: var(--color-text-headings);
  /* Dunkler Text für TH */
}


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* ## Buttons ## */

/* Base Button Styles */
.btn {
  display: inline-flex;
  /* Use flex for easy icon alignment */
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /* Space between text and icon if present */
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family-base);
  /* Inherit from base by default */
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  transition: var(--transition-base);
  text-transform: uppercase;
  /* Default to uppercase, can be overridden */
  letter-spacing: 0.05em;
  /* Default letter spacing */
}

/* General Hover/Focus for all .btn, can be fine-tuned by variants */
.btn:hover,
.btn:focus {
  text-decoration: none;
  /* Usually no underline for buttons */
}

/* Specific focus-visible for better accessibility if outline is removed on :focus */
.btn:focus-visible {
  outline: 2px solid var(--color-primary-accent);
  /* Or a dedicated focus color */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-background-body), 0 0 0 4px var(--color-primary-accent);
}

/* --- Button Variants --- */

/* Primary Button (Main Call to Action) */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-light);
}

/* Secondary Button */
.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  /* Text color that contrasts with light teal */
  border-color: var(--color-secondary);
}

.btn--secondary:hover,
.btn--secondary:focus {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--color-primary);
}

/* Accent Button (using your existing --color-primary-accent) */
.btn--accent {
  background-color: var(--color-primary-accent);
  color: var(--color-text-light);
  /* Assuming accent is dark enough for light text */
  border-color: var(--color-primary-accent);
}

.btn--accent:hover,
.btn--accent:focus {
  background-color: var(--color-primary-accent-hover);
  /* Ensure this is defined and different */
  border-color: var(--color-primary-accent-hover);
  color: var(--color-text-light);
}

/* Link-style Button (for "more" links etc.) */
.btn--link {
  background-color: transparent;
  color: var(--color-link);
  border-color: transparent;
  padding: var(--spacing-xs) 0;
  /* Minimal padding, adjust as needed */
  font-weight: var(--font-weight-medium);
  text-transform: none;
  /* Usually not uppercase */
  letter-spacing: normal;
}

.btn--link:hover,
.btn--link:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
  background-color: transparent;
  /* Ensure no bg on hover */
}

.btn--link .fa,
/* For FontAwesome icons */
.btn--link [class^="icon-"],
/* Generic icon class prefix */
.btn--link svg {
  /* Icons in link buttons might not need extra margin if `gap` is used,
     but you can add specific styling if needed, e.g., vertical alignment */
  vertical-align: middle;
}

/* Black Button */
.btn--black {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.btn--black:hover,
.btn--black:focus {
  background-color: var(--color-black-hover);
  border-color: var(--color-black-hover);
  color: var(--white);
}

/* White Button (typically on dark backgrounds) */
.btn--white {
  background-color: var(--white);
  color: var(--black);
  border-color: var(--color-border);
  /* Or var(--white) if on a colored bg */
}

.btn--white:hover,
.btn--white:focus {
  background-color: var(--color-white-hover-bg);
  border-color: var(--color-border);
  /* Or a slightly darker white */
  color: var(--black);
}

/* Outline Primary Button (Transparent with Primary Border) */
.btn--outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline-primary:hover,
.btn--outline-primary:focus {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

/* Outline Accent Button (Transparent with Accent Border) */
.btn--outline-accent {
  background-color: transparent;
  color: var(--color-primary-accent);
  border-color: var(--color-primary-accent);
}

.btn--outline-accent:hover,
.btn--outline-accent:focus {
  background-color: var(--color-primary-accent);
  color: var(--color-text-light);
  /* Or black, depending on accent color */
}

/* Icon Only Button (for round/square icon buttons) */
.btn--icon-only {
  padding: var(--spacing-sm);
  /* Adjust for desired size */
  /* To make it more square/circular, aspect-ratio is great */
  aspect-ratio: 1 / 1;
  /* Or fixed width/height if aspect-ratio isn't supported enough for you */
  /* width: calc(var(--font-size-base) * var(--line-height-base) + (var(--spacing-sm) * 2) + 2px); */
  /* height: calc(var(--font-size-base) * var(--line-height-base) + (var(--spacing-sm) * 2) + 2px); */
  gap: 0;
  /* No gap needed if only icon */
}

.btn--icon-only .fa,
.btn--icon-only [class^="icon-"],
.btn--icon-only svg {
  font-size: var(--font-size-lg);
  /* Or adjust icon size as needed */
  margin: 0;
  /* Remove any intrinsic margins from icon */
}


/* --- Styling for <button> tag and form input buttons --- */
/* Keep this separate from the .btn utility classes for more control */

/* Default styling for <button> elements (if they don't have a .btn class)
   You might want them to look like primary buttons by default or be unstyled.
   Here, we'll make them look like the .btn--accent by default to match your original.
*/
main button {
  /* Apply base .btn styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border-radius: var(--border-radius);
  transition: var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;

  /* Apply .btn--accent styles */
  background-color: var(--color-primary-accent);
  color: var(--color-background-body);
  /* White text on accent bg */
  border: 1px solid var(--color-primary-accent);
}

main button:hover,
main button:focus {
  background-color: var(--color-primary-accent-hover);
  border-color: var(--color-primary-accent-hover);
  color: var(--color-background-body);
  text-decoration: none;
}

main button:focus-visible {
  outline: 2px solid var(--color-primary-accent-hover);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-background-body), 0 0 0 4px var(--color-primary-accent-hover);
}


/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

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

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

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

.text-sm {
  font-size: var(--font-size-sm);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Visually Hidden / Screen Reader Text (WordPress Standard) */
.screen-reader-text,
.sr-only {
  /* sr-only ist eine gängige Alternative */
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  /* Wichtig für WordPress .screen-reader-text */
  width: 1px;
  word-wrap: normal !important;
  /* Ensure no breaking words are read aloud as separate words. */
}

.screen-reader-text:focus,
.sr-only:focus {
  /* Damit es sichtbar wird, wenn es fokussiert wird (z.B. Skip-Links) */
  background-color: var(--color-background-section);
  /* Uses the now defined --color-background-section */
  border-radius: var(--border-radius);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--color-primary-accent);
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP admin bar. */
}

/*--------------------------------------------------------------
# WordPress Core Styles
--------------------------------------------------------------*/
/* Alignments */
.alignleft {
  float: left;
  margin-right: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.alignright {
  float: right;
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-md);
  clear: both;
  /* Um Float-Probleme zu vermeiden */
}

/* Für Gutenberg alignwide und alignfull (Beispiel) */
/* Diese müssen im Kontext deines Theme-Containers funktionieren */
.alignwide {
  margin-left: calc(-1 * var(--spacing-xl));
  margin-right: calc(-1 * var(--spacing-xl));
  max-width: calc(var(--max-width-content) + (2 * var(--spacing-xl)));
}

.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* Clear floats after .alignleft or .alignright */
.entry-content::after,
.comment-content::after,
.widget::after {
  content: "";
  display: table;
  clear: both;
}

/* Captions */
.wp-caption {
  margin-bottom: var(--spacing-md);
  max-width: 100%;
  /* Wichtig für Responsive */
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--spacing-sm);
}

/* Galleries - Basis für WP Standard Galerie */
.gallery {
  margin-bottom: var(--spacing-md);
  display: grid;
  gap: var(--spacing-md);
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ... weitere Spalten nach Bedarf ... */

.gallery-caption {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-top: var(--spacing-xs);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/* ## Focus States ## */
/* Genereller Fokus-Stil für Elemente, die keinen eigenen haben */
*:focus-visible {
  /* :focus-visible ist moderner als :focus für reine Tastaturnavigation */
  outline: 2px solid var(--color-primary-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-background-body), 0 0 0 4px var(--color-primary-accent);
  /* Doppelter Ring für besseren Kontrast */
}

/* Entferne den Standard-Outline nur, wenn du einen besseren :focus-visible Stil hast */
*:focus {
  /* outline: none;  <-- Vorsicht damit! Nur wenn :focus-visible gut implementiert ist. */
}


/* ## Skip Links ## */
/* Bereits oben bei .screen-reader-text:focus abgedeckt.
   HTML Beispiel im Theme wäre:
   <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
   ...
   <main id="content">...</main>
*/


/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/
@media print {
  body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
    /* Feste Größe für Druck */
  }

  a {
    color: #000 !important;
    /* Schwarz für Links */
    text-decoration: underline !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    /* URLs anzeigen */
    font-size: 90%;
  }

  .site-header,
  .site-footer,
  .main-navigation,
  .sidebar,
  .button,
  .no-print {
    /* Klasse für Elemente, die nicht gedruckt werden sollen */
    display: none !important;
  }

  h1,
  h2,
  h3 {
    color: #000 !important;
    page-break-after: avoid;
    /* Verhindert Umbruch nach Überschriften */
  }

  img {
    max-width: 100% !important;
    /* Verhindert überbreite Bilder */
    page-break-inside: avoid;
  }

  table,
  blockquote {
    page-break-inside: avoid;
  }
}


/* Grid Base */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-md);
}

/* Grid Modifiers */
.grid.gap-0 {
  gap: 0;
}

.grid.gap-xs {
  gap: var(--spacing-xs);
}

.grid.gap-sm {
  gap: var(--spacing-sm);
}

.grid.gap-md {
  gap: var(--spacing-md);
}

.grid.gap-lg {
  gap: var(--spacing-lg);
}

.grid.gap-xl {
  gap: var(--spacing-xl);
}

.grid.gap-2xl {
  gap: var(--spacing-2xl);
}

.grid.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-md);
}

.grid.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-md);
}

/* Auto-responsive für 12-Spalten System */
.grid.cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* Alignment Utilities */
.justify-start {
  justify-items: start;
}

.justify-center {
  justify-items: center;
}

.justify-end {
  justify-items: end;
}

.items-start {
  align-items: start;
}

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

.items-end {
  align-items: end;
}

/* Container System */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 5%;
}

.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl {
  padding: 0 var(--spacing-md);
}

.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

.container-xl {
  max-width: var(--container-xl);
}

.container-2xl {
  max-width: var(--container-2xl);
}

.container-fluid {
  max-width: none;
}

/* Padding Utilities */
.p-0 {
  padding: 0;
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

/* Base Column Classes (Mobile First) */
.grid>.col-1 {
  grid-column: span 1;
}

.grid>.col-2 {
  grid-column: span 2;
}

.grid>.col-3 {
  grid-column: span 3;
}

.grid>.col-4 {
  grid-column: span 4;
}

.grid>.col-5 {
  grid-column: span 5;
}

.grid>.col-6 {
  grid-column: span 6;
}

.grid>.col-7 {
  grid-column: span 7;
}

.grid>.col-8 {
  grid-column: span 8;
}

.grid>.col-9 {
  grid-column: span 9;
}

.grid>.col-10 {
  grid-column: span 10;
}

.grid>.col-11 {
  grid-column: span 11;
}

.grid>.col-12 {
  grid-column: span 12;
}

.grid>.col-auto {
  grid-column: auto;
}

/* Small Devices (≥640px) */
@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }

  .grid>.col-sm-1 {
    grid-column: span 1;
  }

  .grid>.col-sm-2 {
    grid-column: span 2;
  }

  .grid>.col-sm-3 {
    grid-column: span 3;
  }

  .grid>.col-sm-4 {
    grid-column: span 4;
  }

  .grid>.col-sm-5 {
    grid-column: span 5;
  }

  .grid>.col-sm-6 {
    grid-column: span 6;
  }

  .grid>.col-sm-7 {
    grid-column: span 7;
  }

  .grid>.col-sm-8 {
    grid-column: span 8;
  }

  .grid>.col-sm-9 {
    grid-column: span 9;
  }

  .grid>.col-sm-10 {
    grid-column: span 10;
  }

  .grid>.col-sm-11 {
    grid-column: span 11;
  }

  .grid>.col-sm-12 {
    grid-column: span 12;
  }

  .grid>.col-sm-auto {
    grid-column: auto;
  }

  .grid>.offset-sm-0 {
    grid-column-start: auto;
  }

  .grid>.offset-sm-1 {
    grid-column-start: 2;
  }

  .grid>.offset-sm-2 {
    grid-column-start: 3;
  }

  .grid>.offset-sm-3 {
    grid-column-start: 4;
  }

  .grid>.offset-sm-4 {
    grid-column-start: 5;
  }

  .grid>.offset-sm-5 {
    grid-column-start: 6;
  }

  .grid>.offset-sm-6 {
    grid-column-start: 7;
  }

  .grid>.offset-sm-7 {
    grid-column-start: 8;
  }

  .grid>.offset-sm-8 {
    grid-column-start: 9;
  }

  .grid>.offset-sm-9 {
    grid-column-start: 10;
  }

  .grid>.offset-sm-10 {
    grid-column-start: 11;
  }

  .grid>.offset-sm-11 {
    grid-column-start: 12;
  }
}

/* Medium Devices (≥768px) */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }

  .grid>.col-md-1 {
    grid-column: span 1;
  }

  .grid>.col-md-2 {
    grid-column: span 2;
  }

  .grid>.col-md-3 {
    grid-column: span 3;
  }

  .grid>.col-md-4 {
    grid-column: span 4;
  }

  .grid>.col-md-5 {
    grid-column: span 5;
  }

  .grid>.col-md-6 {
    grid-column: span 6;
  }

  .grid>.col-md-7 {
    grid-column: span 7;
  }

  .grid>.col-md-8 {
    grid-column: span 8;
  }

  .grid>.col-md-9 {
    grid-column: span 9;
  }

  .grid>.col-md-10 {
    grid-column: span 10;
  }

  .grid>.col-md-11 {
    grid-column: span 11;
  }

  .grid>.col-md-12 {
    grid-column: span 12;
  }

  .grid>.col-md-auto {
    grid-column: auto;
  }

  .grid>.offset-md-0 {
    grid-column-start: auto;
  }

  .grid>.offset-md-1 {
    grid-column-start: 2;
  }

  .grid>.offset-md-2 {
    grid-column-start: 3;
  }

  .grid>.offset-md-3 {
    grid-column-start: 4;
  }

  .grid>.offset-md-4 {
    grid-column-start: 5;
  }

  .grid>.offset-md-5 {
    grid-column-start: 6;
  }

  .grid>.offset-md-6 {
    grid-column-start: 7;
  }

  .grid>.offset-md-7 {
    grid-column-start: 8;
  }

  .grid>.offset-md-8 {
    grid-column-start: 9;
  }

  .grid>.offset-md-9 {
    grid-column-start: 10;
  }

  .grid>.offset-md-10 {
    grid-column-start: 11;
  }

  .grid>.offset-md-11 {
    grid-column-start: 12;
  }
}

/* Large Devices (≥1024px) */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }

  .grid>.col-lg-1 {
    grid-column: span 1;
  }

  .grid>.col-lg-2 {
    grid-column: span 2;
  }

  .grid>.col-lg-3 {
    grid-column: span 3;
  }

  .grid>.col-lg-4 {
    grid-column: span 4;
  }

  .grid>.col-lg-5 {
    grid-column: span 5;
  }

  .grid>.col-lg-6 {
    grid-column: span 6;
  }

  .grid>.col-lg-7 {
    grid-column: span 7;
  }

  .grid>.col-lg-8 {
    grid-column: span 8;
  }

  .grid>.col-lg-9 {
    grid-column: span 9;
  }

  .grid>.col-lg-10 {
    grid-column: span 10;
  }

  .grid>.col-lg-11 {
    grid-column: span 11;
  }

  .grid>.col-lg-12 {
    grid-column: span 12;
  }

  .grid>.col-lg-auto {
    grid-column: auto;
  }

  .grid>.offset-lg-0 {
    grid-column-start: auto;
  }

  .grid>.offset-lg-1 {
    grid-column-start: 2;
  }

  .grid>.offset-lg-2 {
    grid-column-start: 3;
  }

  .grid>.offset-lg-3 {
    grid-column-start: 4;
  }

  .grid>.offset-lg-4 {
    grid-column-start: 5;
  }

  .grid>.offset-lg-5 {
    grid-column-start: 6;
  }

  .grid>.offset-lg-6 {
    grid-column-start: 7;
  }

  .grid>.offset-lg-7 {
    grid-column-start: 8;
  }

  .grid>.offset-lg-8 {
    grid-column-start: 9;
  }

  .grid>.offset-lg-9 {
    grid-column-start: 10;
  }

  .grid>.offset-lg-10 {
    grid-column-start: 11;
  }

  .grid>.offset-lg-11 {
    grid-column-start: 12;
  }
}

/* Extra Large Devices (≥1280px) */
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }

  .grid>.col-xl-1 {
    grid-column: span 1;
  }

  .grid>.col-xl-2 {
    grid-column: span 2;
  }

  .grid>.col-xl-3 {
    grid-column: span 3;
  }

  .grid>.col-xl-4 {
    grid-column: span 4;
  }

  .grid>.col-xl-5 {
    grid-column: span 5;
  }

  .grid>.col-xl-6 {
    grid-column: span 6;
  }

  .grid>.col-xl-7 {
    grid-column: span 7;
  }

  .grid>.col-xl-8 {
    grid-column: span 8;
  }

  .grid>.col-xl-9 {
    grid-column: span 9;
  }

  .grid>.col-xl-10 {
    grid-column: span 10;
  }

  .grid>.col-xl-11 {
    grid-column: span 11;
  }

  .grid>.col-xl-12 {
    grid-column: span 12;
  }

  .grid>.col-xl-auto {
    grid-column: auto;
  }

  .grid>.offset-xl-0 {
    grid-column-start: auto;
  }

  .grid>.offset-xl-1 {
    grid-column-start: 2;
  }

  .grid>.offset-xl-2 {
    grid-column-start: 3;
  }

  .grid>.offset-xl-3 {
    grid-column-start: 4;
  }

  .grid>.offset-xl-4 {
    grid-column-start: 5;
  }

  .grid>.offset-xl-5 {
    grid-column-start: 6;
  }

  .grid>.offset-xl-6 {
    grid-column-start: 7;
  }

  .grid>.offset-xl-7 {
    grid-column-start: 8;
  }

  .grid>.offset-xl-8 {
    grid-column-start: 9;
  }

  .grid>.offset-xl-9 {
    grid-column-start: 10;
  }

  .grid>.offset-xl-10 {
    grid-column-start: 11;
  }

  .grid>.offset-xl-11 {
    grid-column-start: 12;
  }
}

/* 2XL Devices (≥1536px) */
@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }

  .grid>.col-2xl-1 {
    grid-column: span 1;
  }

  .grid>.col-2xl-2 {
    grid-column: span 2;
  }

  .grid>.col-2xl-3 {
    grid-column: span 3;
  }

  .grid>.col-2xl-4 {
    grid-column: span 4;
  }

  .grid>.col-2xl-5 {
    grid-column: span 5;
  }

  .grid>.col-2xl-6 {
    grid-column: span 6;
  }

  .grid>.col-2xl-7 {
    grid-column: span 7;
  }

  .grid>.col-2xl-8 {
    grid-column: span 8;
  }

  .grid>.col-2xl-9 {
    grid-column: span 9;
  }

  .grid>.col-2xl-10 {
    grid-column: span 10;
  }

  .grid>.col-2xl-11 {
    grid-column: span 11;
  }

  .grid>.col-2xl-12 {
    grid-column: span 12;
  }

  .grid>.col-2xl-auto {
    grid-column: auto;
  }

  .grid>.offset-2xl-0 {
    grid-column-start: auto;
  }

  .grid>.offset-2xl-1 {
    grid-column-start: 2;
  }

  .grid>.offset-2xl-2 {
    grid-column-start: 3;
  }

  .grid>.offset-2xl-3 {
    grid-column-start: 4;
  }

  .grid>.offset-2xl-4 {
    grid-column-start: 5;
  }

  .grid>.offset-2xl-5 {
    grid-column-start: 6;
  }

  .grid>.offset-2xl-6 {
    grid-column-start: 7;
  }

  .grid>.offset-2xl-7 {
    grid-column-start: 8;
  }

  .grid>.offset-2xl-8 {
    grid-column-start: 9;
  }

  .grid>.offset-2xl-9 {
    grid-column-start: 10;
  }

  .grid>.offset-2xl-10 {
    grid-column-start: 11;
  }

  .grid>.offset-2xl-11 {
    grid-column-start: 12;
  }
}