/* ── AEMS Offerings Plugin ── pixel-matched to Next.js app ──────────── */

/* Inter font — same as Next.js layout.tsx */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Hide the WordPress page title on any page containing this shortcode.
   Covers Twenty* themes, Elementor, Astra, GeneratePress, OceanWP, Divi. */
.aems-container ~ * { /* no-op anchor so the rule block is grouped */ }
body:has(.aems-container) .entry-title,
body:has(.aems-container) .page-title,
body:has(.aems-container) .post-title,
body:has(.aems-container) h1.title,
body:has(.aems-container) .elementor-page-title,
body:has(.aems-container) .elementor-widget-page-title { display: none !important; }

/* ── Container ────────────────────────────────────────────────────────── */
.aems-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.aems-container * {
  box-sizing: border-box;
}

/* ── Grid — grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ──────────── */
.aems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}

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

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

/* ── Card — rounded-lg border bg-card shadow-sm overflow-hidden ───────── */
/* --border: 214.3 31.8% 91.4%  |  --radius: 0.5rem  |  shadow-sm */
.aems-card {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: hsl(0, 0%, 100%);              /* --card */
  color: hsl(222.2, 84%, 4.9%);                    /* --card-foreground */
  border-radius: 0.5rem;                           /* --radius / rounded-lg */
  border: 1px solid hsl(214.3, 31.8%, 91.4%);     /* --border */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);    /* shadow-sm */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-shadow */
}

/* hover:shadow-lg */
.aems-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px  6px  -4px rgba(0, 0, 0, 0.1);
}

/* ── Image area — relative aspect-video ──────────────────────────────── */
.aems-card__image-link {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}

.aems-card__image-wrap {
  position: relative;
  aspect-ratio: 16 / 9; /* aspect-video */
  overflow: hidden;
  background-color: hsl(210, 40%, 96.1%); /* --secondary */
}

/* object-cover fill */
.aems-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* absolute inset-0 bg-gradient-to-t from-black/60 to-transparent */
.aems-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  pointer-events: none;
}

/* ── Badges — absolute top-2 left-2 flex gap-2 ───────────────────────── */
.aems-card__badges {
  position: absolute;
  top:  0.5rem; /* top-2 */
  left: 0.5rem; /* left-2 */
  display: flex;
  gap: 0.5rem;  /* gap-2 */
}

/* shadcn Badge: inline-flex rounded-full border-transparent px-2.5 py-0.5 text-xs font-semibold */
.aems-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;       /* rounded-full */
  border: 1px solid transparent;
  padding: 0.125rem 0.625rem;  /* py-0.5 px-2.5 */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;          /* text-xs */
  line-height: 1rem;
  font-weight: 600;            /* font-semibold */
  color: #ffffff;
  white-space: nowrap;
}

.aems-badge--blue   { background-color: #2563eb; } /* bg-blue-600 */
.aems-badge--purple { background-color: #9333ea; } /* bg-purple-600 */
.aems-badge--amber  { background-color: #d97706; } /* bg-amber-600 */

/* ── Card body — CardContent className="p-4" ─────────────────────────── */
.aems-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;        /* stretch to fill remaining card height */
}

/* font-semibold mb-1 — clamped to 2 lines so all cards stay same height */
.aems-card__title {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.17rem;
  font-weight: 600;
  line-height: 1.4;
  height: calc(1.17rem * 1.4 * 2); /* reserve exactly 2 lines */
  margin: 0 0 0.25rem;
  color: hsl(222.2, 84%, 4.9%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* text-sm text-amber-600 mb-1 */
.aems-card__sub {
  font-size: 0.875rem;   /* text-sm */
  line-height: 1.25rem;
  color: #d97706;        /* text-amber-600 */
  margin: 0 0 0.25rem;   /* mb-1 */
  text-transform: capitalize;
}

/* text-sm text-gray-500 mb-3 line-clamp-2 */
.aems-card__desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  height: calc(1.25rem * 2); /* reserve exactly 2 lines */
  color: #6b7280;
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* ── Footer — always pinned to bottom of card body ───────────────────── */
.aems-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;  /* push to bottom regardless of title/desc length */
}

/* text-amber-600 font-medium */
.aems-card__price {
  font-size: 0.875rem;
  font-weight: 500;      /* font-medium */
  color: #d97706;        /* text-amber-600 */
}

/* ── Button — shadcn Button size="sm" default variant ────────────────── */
/* h-9 px-3 rounded-md text-sm bg-primary text-primary-foreground */
/* --primary: 222.2 47.4% 11.2%  |  --primary-foreground: 210 40% 98% */
.aems-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;                               /* h-9 */
  padding-left: 0.75rem;                         /* px-3 */
  padding-right: 0.75rem;
  border-radius: 0.375rem;                       /* rounded-md */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;                           /* text-sm */
  font-weight: 500;
  background-color: hsl(222.2, 47.4%, 11.2%);   /* --primary */
  color: hsl(210, 40%, 98%) !important;          /* --primary-foreground */
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* hover:bg-primary/90 */
.aems-btn:hover {
  background-color: hsl(222.2, 47.4%, 11.2%, 0.9);
  color: hsl(210, 40%, 98%) !important;
}

/* ── States ───────────────────────────────────────────────────────────── */
.aems-error,
.aems-empty {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #6b7280;
  font-size: 0.875rem;
  padding: 1rem 0;
}

/* ── Pagination — matches renderPagination() in offerings/page.tsx ────── */
/* flex flex-col gap-4 rounded-lg border bg-white px-4 py-4             */
/* sm:flex-row sm:items-center sm:justify-between                        */
.aems-pager {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(214.3, 31.8%, 91.4%);  /* --border */
  background-color: #ffffff;
  padding: 1rem;
  margin-top: 1rem;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.aems-pager:empty { display: none; }

@media (min-width: 640px) {            /* sm: */
  .aems-pager {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* "Showing X to Y of Z results" — text-sm text-gray-600 */
.aems-pager__info {
  font-size: 0.875rem;
  color: #4b5563;          /* text-gray-600 */
  margin: 0;
  line-height: 1.5;
}

/* font-medium text-gray-900 on the numbers */
.aems-pager__info strong {
  font-weight: 500;
  color: #111827;          /* text-gray-900 */
}

/* Nav row */
.aems-pager__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* ── Base button — h-9 w-9 rounded-md text-sm border-input bg-background */
.aems-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;                              /* h-9 */
  min-width: 2.25rem;                           /* w-9 */
  padding: 0 0.5rem;
  border-radius: 0.375rem;                      /* rounded-md */
  border: 1px solid hsl(214.3, 31.8%, 91.4%);  /* border-input */
  background-color: #ffffff;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(222.2, 84%, 4.9%);                /* text-card-foreground */
  cursor: pointer;
  gap: 0.25rem;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  text-decoration: none;
}

/* hover:bg-accent hover:text-accent-foreground */
.aems-pager__btn:not(.aems-pager__btn--disabled):not(.aems-pager__btn--active):hover {
  background-color: hsl(210, 40%, 96.1%);      /* --accent */
  color: hsl(222.2, 47.4%, 11.2%);             /* --accent-foreground */
}

/* Active page — bg-primary text-primary-foreground */
.aems-pager__btn--active {
  background-color: hsl(222.2, 47.4%, 11.2%);  /* --primary */
  color: hsl(210, 40%, 98%);                   /* --primary-foreground */
  border-color: hsl(222.2, 47.4%, 11.2%);
}

/* pointer-events-none opacity-50 */
.aems-pager__btn--disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

/* Previous / Next — h-9 px-4 gap-1 (wider than page numbers) */
.aems-pager__prev,
.aems-pager__next {
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 0.25rem;
}

/* Ellipsis placeholder */
.aems-pager__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  color: #6b7280;
}