/**
 * IELTSMerit reusable component classes.
 * Foundation only — not applied to existing Elementor content in this phase.
 */

.im-container {
  width: min(100% - (var(--im-gutter-mobile) * 2), var(--im-container));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .im-container {
    width: min(100% - (var(--im-gutter-tablet) * 2), var(--im-container));
  }
}

@media (min-width: 1024px) {
  .im-container {
    width: min(100% - (var(--im-gutter-desktop) * 2), var(--im-container));
  }
}

.im-section {
  padding-block: var(--im-space-2xl);
}

.im-section--compact {
  padding-block: var(--im-space-xl);
}

.im-section--light {
  background-color: var(--im-color-surface-muted);
  color: var(--im-color-text);
}

.im-section--dark {
  background-color: var(--im-color-primary-dark);
  color: #f7f8fb;
}

.im-section--dark .im-heading,
.im-section--dark .im-eyebrow {
  color: inherit;
}

.im-eyebrow {
  display: inline-block;
  margin: 0 0 var(--im-space-xs);
  font-family: var(--im-type-small-family);
  font-size: var(--im-type-small-size);
  font-weight: 700;
  line-height: var(--im-type-small-line);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--im-color-accent);
}

.im-script {
  font-family: var(--im-type-script-family);
  font-weight: var(--im-type-script-weight);
  font-size: var(--im-type-script-size);
  line-height: var(--im-type-script-line);
  letter-spacing: var(--im-type-script-tracking);
}

.im-stats {
  display: block;
  padding-block: var(--im-space-xl);
  background: var(--im-color-primary-dark);
  color: var(--im-color-on-primary);
}

.im-stats__grid {
  display: grid;
  gap: var(--im-space-lg);
}

@media (min-width: 768px) {
  .im-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .im-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.im-stats__item {
  display: grid;
  justify-items: center;
  gap: var(--im-space-2xs);
  text-align: center;
}

.im-stats__value {
  font-family: var(--im-type-h2-family);
  font-size: var(--im-type-h2-size);
  font-weight: 700;
  line-height: 1.1;
  color: var(--im-color-on-primary);
}

.im-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--im-radius-sm);
  background: color-mix(in srgb, var(--im-color-accent) 22%, white);
  color: var(--im-color-primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.im-heading {
  margin: 0 0 var(--im-space-sm);
  color: var(--im-color-primary-dark);
}

.im-heading--display {
  font-family: var(--im-type-display-family);
  font-weight: var(--im-type-display-weight);
  font-size: var(--im-type-display-size);
  line-height: var(--im-type-display-line);
  letter-spacing: var(--im-type-display-tracking);
}

.im-heading--section {
  font-family: var(--im-type-h2-family);
  font-weight: var(--im-type-h2-weight);
  font-size: var(--im-type-h2-size);
  line-height: var(--im-type-h2-line);
  letter-spacing: var(--im-type-h2-tracking);
}

.im-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--im-space-2xs);
  min-height: 2.875rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--im-radius-pill);
  font-family: var(--im-type-button-family);
  font-weight: var(--im-type-button-weight);
  font-size: var(--im-type-button-size);
  line-height: var(--im-type-button-line);
  letter-spacing: var(--im-type-button-tracking);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--im-duration-fast) var(--im-ease),
    color var(--im-duration-fast) var(--im-ease),
    border-color var(--im-duration-fast) var(--im-ease),
    box-shadow var(--im-duration-fast) var(--im-ease);
}

.im-button--primary {
  background-color: var(--im-color-accent);
  color: var(--im-color-on-accent);
  box-shadow: var(--im-shadow-sm);
}

.im-button--primary:hover,
.im-button--primary:focus-visible {
  background-color: var(--im-color-accent-hover);
  color: var(--im-color-on-accent);
}

.im-button--secondary {
  background-color: var(--im-color-primary);
  color: var(--im-color-on-primary);
}

.im-button--secondary:hover,
.im-button--secondary:focus-visible {
  background-color: var(--im-color-primary-hover);
  color: var(--im-color-on-primary);
}

.im-button--ghost {
  background-color: transparent;
  color: var(--im-color-primary);
  border-color: var(--im-color-border);
}

.im-button--ghost:hover,
.im-button--ghost:focus-visible {
  border-color: var(--im-color-primary);
  color: var(--im-color-primary-dark);
}

.im-card,
.im-course-card,
.im-feature-card,
.im-resource-card,
.im-testimonial {
  background: var(--im-color-surface);
  border: 1px solid var(--im-color-border);
  border-radius: var(--im-radius-lg);
  box-shadow: var(--im-shadow-sm);
  padding: var(--im-space-lg);
}

.im-card--featured {
  border-color: color-mix(in srgb, var(--im-color-accent) 55%, var(--im-color-border));
  box-shadow: var(--im-shadow-md);
}

.im-stat {
  display: grid;
  gap: var(--im-space-2xs);
}

.im-stat strong {
  font-family: var(--im-type-h2-family);
  font-size: var(--im-type-h2-size);
  line-height: 1.1;
  color: var(--im-color-primary);
}

.im-testimonial {
  display: grid;
  gap: var(--im-space-sm);
}

.im-cta {
  display: grid;
  gap: var(--im-space-md);
  padding: var(--im-space-xl);
  border-radius: var(--im-radius-lg);
  background: var(--im-color-surface-muted);
}

.im-cta--dark {
  background: var(--im-color-primary-dark);
  color: #f7f8fb;
}

.im-cta--accent {
  background: color-mix(in srgb, var(--im-color-accent) 18%, white);
  border: 1px solid color-mix(in srgb, var(--im-color-accent) 40%, var(--im-color-border));
}

.im-grid {
  display: grid;
  gap: var(--im-space-md);
}

.im-grid--2,
.im-grid--3,
.im-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .im-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 1024px) {
  .im-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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