/* ==========================================================================
   PawCare Veterinary Theme - Layout
   ========================================================================== */

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

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

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

/* ---------------------------------------------------------------------------
   Grid Utilities
   --------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

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

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

.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   DnD Area Resets (HubSpot Drag-and-Drop)
   --------------------------------------------------------------------------- */
.dnd-section {
  padding: 0;
}

.dnd-section > .row-fluid {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.dnd-section .dnd-column {
  padding: 0;
}

.dnd-section .dnd-module {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Section Spacing with data-attributes
   --------------------------------------------------------------------------- */

/* Padding Top */
[data-pt="none"] {
  padding-top: 0;
}
[data-pt="xs"] {
  padding-top: var(--spacing-xs);
}
[data-pt="sm"] {
  padding-top: var(--spacing-sm);
}
[data-pt="md"] {
  padding-top: var(--spacing-md);
}
[data-pt="lg"] {
  padding-top: var(--spacing-lg);
}
[data-pt="xl"] {
  padding-top: var(--spacing-xl);
}
[data-pt="2xl"] {
  padding-top: var(--spacing-2xl);
}
[data-pt="3xl"] {
  padding-top: var(--spacing-3xl);
}
[data-pt="4xl"] {
  padding-top: var(--spacing-4xl);
}
[data-pt="5xl"] {
  padding-top: var(--spacing-5xl);
}
[data-pt="section"] {
  padding-top: var(--spacing-section);
}

/* Padding Bottom */
[data-pb="none"] {
  padding-bottom: 0;
}
[data-pb="xs"] {
  padding-bottom: var(--spacing-xs);
}
[data-pb="sm"] {
  padding-bottom: var(--spacing-sm);
}
[data-pb="md"] {
  padding-bottom: var(--spacing-md);
}
[data-pb="lg"] {
  padding-bottom: var(--spacing-lg);
}
[data-pb="xl"] {
  padding-bottom: var(--spacing-xl);
}
[data-pb="2xl"] {
  padding-bottom: var(--spacing-2xl);
}
[data-pb="3xl"] {
  padding-bottom: var(--spacing-3xl);
}
[data-pb="4xl"] {
  padding-bottom: var(--spacing-4xl);
}
[data-pb="5xl"] {
  padding-bottom: var(--spacing-5xl);
}
[data-pb="section"] {
  padding-bottom: var(--spacing-section);
}

/* ---------------------------------------------------------------------------
   Section Background Variants
   --------------------------------------------------------------------------- */
.section--primary {
  background-color: var(--color-bg-primary);
}

.section--secondary {
  background-color: var(--color-bg-secondary);
}

.section--tertiary {
  background-color: var(--color-bg-tertiary);
}

.section--dark {
  background-color: var(--color-text-primary);
  color: var(--color-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-on-dark);
}

.section--dark p,
.section--dark li {
  color: rgba(255, 255, 255, 0.8);
}