/* ==========================================================
   OFFER
========================================================== */

.offer {
  background: var(--color-surface);
}

.offer .section-header {
  margin-bottom: var(--space-2xl);
}

/* ==========================================================
   OFFER CATEGORIES
========================================================== */

.offer-category {
  padding: 0;
}

.offer-category + .offer-category {
  margin-top: var(--space-2xl);
}

.offer-category__header {
  display: flex;
  align-items: center;
  gap: 1.25rem;

  margin-bottom: 2rem;
}

.offer-category__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 60px;
  height: 60px;


  flex-shrink: 0;

  border-radius: 50%;

  background: rgba(31, 77, 77, 0.08);
  color: var(--color-primary);

  font-size: 1.2rem;
}

.offer-category__content h3 {
  margin: 0 0 0.25rem;
}

.offer-category__content p {
  margin: 0;

  max-width: 700px;

  color: var(--color-text-light);
}

/* ==========================================================
   OFFER GRID
========================================================== */

.offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-lg);

  align-items: start;
}

/* ==========================================================
   OFFER CARD
========================================================== */

.offer-card {
  --offer-accent: var(--color-primary);

  display: flex;
  flex-direction: column;

  width: 100%;

  padding: 1.5rem 1.75rem;

  border: 1px solid var(--color-border);
  border-top: 4px solid var(--offer-accent);
  border-radius: var(--radius-lg);

  background: var(--color-surface);

  box-shadow: var(--shadow-sm);

  cursor: pointer;

  text-align: left;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.offer-card.is-open {
  transform: none;
  box-shadow: var(--shadow-lg);
}

/* ==========================================================
   SUMMARY
========================================================== */

.offer-card__summary {
  width: 100%;
}

.offer-card h3 {
  margin: 0 0 0.85rem;

  color: var(--color-heading);

  font-weight: 700;
}

.offer-card__summary p {
  margin: 0;

  color: var(--color-text-light);
}

.offer-card__cta {
  display: inline-flex;

  margin-top: 1rem;

  font-weight: 600;

  color: var(--offer-accent);

  transition: var(--transition);
}

/* ==========================================================
   EXPANDABLE CONTENT
========================================================== */

.offer-card__details {
  display: none;

  width: 100%;

  margin-top: 1.5rem;
  padding-top: 1.5rem;

  border-top: 1px solid var(--color-border);
}

.offer-card__details.is-hidden {
  display: none;
}

.offer-card__details:not(.is-hidden) {
  display: block;
}

.offer-card__content {
  width: 100%;
}

.offer-card__title {
  margin: 0 0 1rem;
}

.offer-card__intro {
  margin: 0 0 2rem;

  color: var(--color-text-light);

  line-height: 1.7;
}

.offer-card__section + .offer-card__section {
  margin-top: 1.5rem;
}

.offer-card__section h4 {
  margin: 0 0 0.75rem;

  color: var(--color-heading);

  font-weight: 600;
}

.offer-card__section p {
  margin: 0;

  color: var(--color-text-light);

  line-height: 1.7;
}

.offer-card__price {
  display: flex;
  justify-content: flex-end;

  margin-top: 2rem;

  font-size: 1.05rem;
  font-weight: 700;

  color: var(--offer-accent);
}

/* ==========================================================
   CARD COLORS
========================================================== */

.offer-card--english {
  --offer-accent: #3b82f6;
}

.offer-card--spanish {
  --offer-accent: #eab308;
}

.offer-card--proofreading {
  --offer-accent: #ef4444;
}

.offer-card--translation {
  --offer-accent: #22c55e;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 992px) {
  .offer__grid {
    grid-template-columns: 1fr;
  }
}