.wccps-post-showcase {
  --wccps-primary: #1f6feb;
  --wccps-accent: #18a999;
  --wccps-text: #1d2330;
  --wccps-radius: 20px;
  --wccps-gap: 16px;
  --wccps-card-padding: 14px;
  --wccps-card-padding-x: 16px;
  --wccps-card-padding-y: 14px;
  --wccps-card-radius: 18px;
  --wccps-card-bg: rgba(255, 255, 255, 0.84);
  --wccps-card-border: rgba(17, 24, 39, 0.08);
  --wccps-card-border-width: 1px;
  --wccps-hero-padding-x: 28px;
  --wccps-hero-padding-y: 24px;
  --wccps-hero-border: rgba(17, 24, 39, 0.08);
  --wccps-hero-border-width: 1px;
  --wccps-hero-radius: 22px;
  --wccps-container-bg:
    radial-gradient(circle at 0% 0%, rgba(31, 111, 235, 0.12), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(24, 169, 153, 0.15), transparent 40%),
    #fff;
  --wccps-container-border: rgba(17, 24, 39, 0.08);
  --wccps-container-radius: 28px;
  --wccps-container-padding: 18px;
  --wccps-container-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
  --wccps-font-heading: inherit;
  --wccps-font-title: inherit;
  --wccps-font-excerpt: inherit;
  --wccps-font-meta: inherit;
  --wccps-font-button: inherit;
  --wccps-font-link: inherit;
  --wccps-heading-transform: none;
  --wccps-post-title-transform: none;
  --wccps-heading-color: var(--wccps-text);
  --wccps-subtitle-color: rgba(29, 35, 48, 0.78);
  --wccps-title-color: var(--wccps-text);
  --wccps-excerpt-color: rgba(29, 35, 48, 0.95);
  --wccps-meta-color: rgba(29, 35, 48, 0.72);
  --wccps-link-color: var(--wccps-primary);
  --wccps-title-size: clamp(1.4rem, 2.8vw, 2rem);
  --wccps-heading-size: clamp(1.8rem, 3.6vw, 3rem);
  --wccps-subtitle-size: 1rem;
  --wccps-excerpt-size: 1rem;
  --wccps-meta-size: 0.76rem;
  --wccps-button-size: 1rem;
  --wccps-link-size: 1rem;
  --wccps-main-meta-font: var(--wccps-font-meta);
  --wccps-main-meta-size: var(--wccps-meta-size);
  --wccps-main-meta-weight: 700;
  --wccps-main-meta-style: normal;
  --wccps-main-meta-line-height: 1.2;
  --wccps-main-title-font: var(--wccps-font-title);
  --wccps-main-title-size: var(--wccps-title-size);
  --wccps-main-title-weight: 700;
  --wccps-main-title-style: normal;
  --wccps-main-title-line-height: 1.2;
  --wccps-main-desc-font: var(--wccps-font-excerpt);
  --wccps-main-desc-size: var(--wccps-excerpt-size);
  --wccps-main-desc-weight: 400;
  --wccps-main-desc-style: normal;
  --wccps-main-desc-line-height: 1.5;
  --wccps-secondary-meta-font: var(--wccps-font-meta);
  --wccps-secondary-meta-size: var(--wccps-meta-size);
  --wccps-secondary-meta-weight: 700;
  --wccps-secondary-meta-style: normal;
  --wccps-secondary-meta-line-height: 1.2;
  --wccps-secondary-title-font: var(--wccps-font-title);
  --wccps-secondary-title-size: var(--wccps-title-size);
  --wccps-secondary-title-weight: 700;
  --wccps-secondary-title-style: normal;
  --wccps-secondary-title-line-height: 1.3;
  --wccps-secondary-desc-font: var(--wccps-font-excerpt);
  --wccps-secondary-desc-size: var(--wccps-excerpt-size);
  --wccps-secondary-desc-weight: 400;
  --wccps-secondary-desc-style: normal;
  --wccps-secondary-desc-line-height: 1.5;
  --wccps-button-bg: linear-gradient(120deg, var(--wccps-primary), var(--wccps-accent));
  --wccps-button-text: #fff;
  --wccps-button-border: transparent;
  --wccps-button-bg-hover: linear-gradient(120deg, var(--wccps-primary), var(--wccps-accent));
  --wccps-button-text-hover: #fff;
  --wccps-button-border-hover: transparent;
  --wccps-button-radius: 999px;
  --wccps-button-padding-top: 11px;
  --wccps-button-padding-right: 20px;
  --wccps-button-padding-bottom: 11px;
  --wccps-button-padding-left: 20px;

  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
  padding: var(--wccps-container-padding);
  background: var(--wccps-container-bg);
  border-radius: var(--wccps-container-radius);
  border: 1px solid var(--wccps-container-border);
  box-shadow: var(--wccps-container-shadow);
  color: var(--wccps-text);
}

.wccps-post-showcase.wccps-container-plain {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.wccps-post-showcase h2,
.wccps-post-showcase h3,
.wccps-post-showcase p {
  margin-top: 0;
}

.wccps-header {
  margin-bottom: 1rem;
}

.wccps-header h2 {
  margin-bottom: 0.35rem;
  line-height: 1.2;
  font-family: var(--wccps-font-heading);
  text-transform: var(--wccps-heading-transform) !important;
  color: var(--wccps-heading-color);
  font-size: var(--wccps-heading-size);
}

.wccps-header p {
  margin: 0;
  color: var(--wccps-subtitle-color);
  font-size: var(--wccps-subtitle-size);
}

.wccps-hero {
  margin: 0 0 1rem;
}

.wccps-hero-link {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  background: rgba(255, 255, 255, 0.84);
  border-radius: var(--wccps-hero-radius);
  border: var(--wccps-hero-border-width) solid var(--wccps-hero-border);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
  color: inherit;
  text-decoration: none;
}

.wccps-hero-link:hover {
  text-decoration: none;
}

.wccps-hero-media {
  min-width: 0;
  align-self: start;
}

.wccps-post-showcase .wccps-hero-media img,
.wccps-post-showcase .wccps-card-media img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}

.wccps-hero-content {
  padding: var(--wccps-hero-padding-y) var(--wccps-hero-padding-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.wccps-hero-content h3 {
  font-size: var(--wccps-main-title-size);
  margin-bottom: 0.6rem;
  line-height: 1.2;
  font-family: var(--wccps-main-title-font);
  text-transform: var(--wccps-post-title-transform) !important;
  color: var(--wccps-main-title-color, var(--wccps-title-color));
  font-weight: var(--wccps-main-title-weight);
  font-style: var(--wccps-main-title-style);
  line-height: var(--wccps-main-title-line-height);
}

.wccps-hero-content p:not(.wccps-eyebrow) {
  margin: 0 0 0.8rem;
  font-family: var(--wccps-main-desc-font);
  font-size: var(--wccps-main-desc-size);
  color: var(--wccps-main-desc-color, var(--wccps-excerpt-color));
  font-weight: var(--wccps-main-desc-weight);
  font-style: var(--wccps-main-desc-style);
  line-height: var(--wccps-main-desc-line-height);
}

.wccps-eyebrow {
  margin: 0 0 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wccps-meta-size);
  font-weight: 700;
  color: var(--wccps-meta-color);
  font-family: var(--wccps-font-meta);
}

.wccps-hero-content .wccps-eyebrow {
  color: var(--wccps-main-meta-color, var(--wccps-meta-color));
  font-family: var(--wccps-main-meta-font);
  font-size: var(--wccps-main-meta-size);
  font-weight: var(--wccps-main-meta-weight);
  font-style: var(--wccps-main-meta-style);
  line-height: var(--wccps-main-meta-line-height);
}

.wccps-post-showcase .wccps-hero-content .wccps-cta {
  margin-top: 0.4rem;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  gap: 0.35rem;
  font-weight: var(--wccps-cta-font-weight, 700);
  font-style: var(--wccps-cta-font-style, normal);
  color: var(--wccps-cta-color, var(--wccps-link-color));
  font-size: var(--wccps-cta-font-size, var(--wccps-link-size));
  font-family: var(--wccps-cta-font-family, var(--wccps-font-link));
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.wccps-post-showcase .wccps-hero-link:hover .wccps-cta,
.wccps-post-showcase .wccps-hero-link:focus-visible .wccps-cta {
  color: var(--wccps-cta-color-hover, var(--wccps-cta-color, var(--wccps-link-color)));
}

.wccps-post-showcase .wccps-hero-content .wccps-cta-button {
  color: var(--wccps-cta-color, #fff);
  background: var(--wccps-cta-bg, var(--wccps-primary));
  border: var(--wccps-cta-border-width, 1px) solid var(--wccps-cta-border, transparent);
  border-radius: var(--wccps-cta-radius, 8px);
  padding: var(--wccps-cta-padding-top, 11px) var(--wccps-cta-padding-right, 20px) var(--wccps-cta-padding-bottom, 11px) var(--wccps-cta-padding-left, 20px);
  text-decoration: none;
}

.wccps-post-showcase .wccps-hero-link:hover .wccps-cta-button,
.wccps-post-showcase .wccps-hero-link:focus-visible .wccps-cta-button {
  color: var(--wccps-cta-color-hover, var(--wccps-cta-color, #fff));
  background: var(--wccps-cta-bg-hover, var(--wccps-cta-bg, var(--wccps-primary)));
  border-color: var(--wccps-cta-border-hover, var(--wccps-cta-border, transparent));
}

.wccps-post-showcase .wccps-hero-content.wccps-hero-cta-pos-bottom .wccps-cta {
  margin-top: auto;
}

.wccps-hero-content.wccps-hero-cta-align-center .wccps-cta {
  margin-left: auto;
  margin-right: auto;
}

.wccps-hero-content.wccps-hero-cta-align-right .wccps-cta {
  margin-left: auto;
}

.wccps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wccps-gap);
}

.wccps-card {
  background: var(--wccps-card-bg);
  border-radius: var(--wccps-card-radius);
  border: var(--wccps-card-border-width) solid var(--wccps-card-border);
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.wccps-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12);
}

.wccps-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.wccps-card-media {
  min-width: 0;
  background: #eef5ff;
}

.wccps-post-showcase .wccps-card .wccps-card-content {
  padding: var(--wccps-card-padding-y) var(--wccps-card-padding-x) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: var(--wccps-secondary-content-align, flex-start);
}

.wccps-card-content h3 {
  font-size: var(--wccps-secondary-title-size);
  line-height: 1.3;
  margin-bottom: 0.45rem;
  font-family: var(--wccps-secondary-title-font);
  text-transform: var(--wccps-post-title-transform) !important;
  color: var(--wccps-secondary-title-color, var(--wccps-title-color));
  font-weight: var(--wccps-secondary-title-weight);
  font-style: var(--wccps-secondary-title-style);
  line-height: var(--wccps-secondary-title-line-height);
}

.wccps-card-content p:last-child {
  margin-bottom: 0;
}

.wccps-card-content p:not(.wccps-eyebrow) {
  font-family: var(--wccps-secondary-desc-font);
  font-size: var(--wccps-secondary-desc-size);
  color: var(--wccps-secondary-desc-color, var(--wccps-excerpt-color));
  font-weight: var(--wccps-secondary-desc-weight);
  font-style: var(--wccps-secondary-desc-style);
  line-height: var(--wccps-secondary-desc-line-height);
}

.wccps-card-content .wccps-eyebrow {
  color: var(--wccps-secondary-meta-color, var(--wccps-meta-color));
  font-family: var(--wccps-secondary-meta-font);
  font-size: var(--wccps-secondary-meta-size);
  font-weight: var(--wccps-secondary-meta-weight);
  font-style: var(--wccps-secondary-meta-style);
  line-height: var(--wccps-secondary-meta-line-height);
}

.wccps-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: linear-gradient(140deg, rgba(31, 111, 235, 0.26), rgba(24, 169, 153, 0.3));
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
}

.wccps-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

.wccps-post-showcase.wccps-button-align-left .wccps-footer {
  justify-content: flex-start;
}

.wccps-post-showcase.wccps-button-align-center .wccps-footer {
  justify-content: center;
}

.wccps-post-showcase.wccps-button-align-right .wccps-footer {
  justify-content: flex-end;
}

.wccps-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wccps-button-bg);
  color: var(--wccps-button-text);
  border-radius: var(--wccps-button-radius);
  border: 1px solid var(--wccps-button-border);
  box-shadow: 0 8px 22px rgba(15, 76, 255, 0.2);
  font-weight: 700;
  padding: var(--wccps-button-padding-top) var(--wccps-button-padding-right) var(--wccps-button-padding-bottom) var(--wccps-button-padding-left);
  text-decoration: none;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  font-family: var(--wccps-font-button);
  font-size: var(--wccps-button-size);
}

.wccps-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 76, 255, 0.25);
  text-decoration: none;
  color: var(--wccps-button-text-hover);
  background: var(--wccps-button-bg-hover);
  border-color: var(--wccps-button-border-hover);
}

.wccps-site-button {
  display: inline-block;
  text-decoration: none;
}

.wccps-post-showcase .wccps-button.wccps-button-custom {
  background: var(--wccps-button-bg) !important;
  color: var(--wccps-button-text) !important;
  border-color: var(--wccps-button-border) !important;
  border-radius: var(--wccps-button-radius) !important;
  padding: var(--wccps-button-padding-top) var(--wccps-button-padding-right) var(--wccps-button-padding-bottom) var(--wccps-button-padding-left) !important;
}

.wccps-post-showcase .wccps-button.wccps-button-custom:hover {
  background: var(--wccps-button-bg-hover) !important;
  color: var(--wccps-button-text-hover) !important;
  border-color: var(--wccps-button-border-hover) !important;
}

.wccps-post-showcase.wccps-button-style-outline .wccps-button {
  background: transparent;
  color: var(--wccps-primary);
  border: 2px solid var(--wccps-primary);
  box-shadow: none;
}

.wccps-post-showcase.wccps-button-style-outline .wccps-button:hover {
  background: var(--wccps-primary);
  color: #fff;
}

.wccps-post-showcase.wccps-button-style-ghost .wccps-button {
  background: rgba(17, 24, 39, 0.05);
  color: var(--wccps-text);
  box-shadow: none;
}

.wccps-post-showcase.wccps-button-style-ghost .wccps-button:hover {
  background: rgba(17, 24, 39, 0.1);
  color: var(--wccps-text);
}

.wccps-post-showcase.wccps-button-style-link .wccps-button {
  background: transparent;
  color: var(--wccps-link-color);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-family: var(--wccps-font-link);
  font-size: var(--wccps-link-size);
}

.wccps-post-showcase.wccps-button-style-link .wccps-button:hover {
  transform: none;
  text-decoration: underline;
  color: var(--wccps-link-color);
  box-shadow: none;
}

@media (max-width: 1024px) {
  .wccps-hero-link {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 900px) {
  .wccps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .wccps-footer {
    justify-content: flex-start;
  }
}

/* Keep text alignment independent for each card element. */
.wccps-post-showcase .wccps-hero .wccps-hero-content .wccps-eyebrow {
  text-align: var(--wccps-main-meta-align, inherit);
}

.wccps-post-showcase .wccps-hero .wccps-hero-content h3 {
  text-align: var(--wccps-main-title-align, inherit);
}

.wccps-post-showcase .wccps-hero .wccps-hero-content p:not(.wccps-eyebrow) {
  text-align: var(--wccps-main-desc-align, inherit);
}

.wccps-post-showcase .wccps-card .wccps-card-content .wccps-eyebrow {
  text-align: var(--wccps-secondary-meta-align, inherit);
}

.wccps-post-showcase .wccps-card .wccps-card-content h3 {
  text-align: var(--wccps-secondary-title-align, inherit);
}

.wccps-post-showcase .wccps-card .wccps-card-content p:not(.wccps-eyebrow) {
  text-align: var(--wccps-secondary-desc-align, inherit);
}

/* Grid-only layout. The featured layout keeps its original breakpoints. */
.wccps-layout-grid .wccps-grid {
  grid-template-columns: repeat(var(--wccps-grid-columns, 4), minmax(0, 1fr));
  gap: var(--wccps-grid-gap, 20px);
}
.wccps-layout-grid .wccps-card { min-width: 0; }
.wccps-layout-grid .wccps-card-content { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .wccps-layout-grid .wccps-grid { grid-template-columns: repeat(var(--wccps-grid-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wccps-layout-grid .wccps-grid { grid-template-columns: repeat(var(--wccps-grid-columns-mobile, 1), minmax(0, 1fr)); }
}
.wccps-post-showcase .wccps-card .wccps-card-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  padding-top: 16px;
  font-weight: 700;
  color: var(--wccps-card-cta-color, var(--wccps-secondary-title-color, var(--wccps-link-color)));
}
.wccps-post-showcase .wccps-card > a:hover .wccps-card-cta,
.wccps-post-showcase .wccps-card > a:focus-visible .wccps-card-cta {
  color: var(--wccps-card-cta-color-hover, var(--wccps-card-cta-color, var(--wccps-secondary-title-color, var(--wccps-link-color))));
}
.wccps-post-showcase .wccps-card .wccps-card-cta-button {
  margin-top: 16px;
  padding: 10px 18px;
  color: var(--wccps-card-cta-color, #fff);
  background: var(--wccps-card-cta-bg, var(--wccps-primary));
  border: var(--wccps-card-cta-border-width, 1px) solid var(--wccps-card-cta-border, transparent);
  border-radius: var(--wccps-card-cta-radius, 8px);
}
.wccps-post-showcase .wccps-card > a:hover .wccps-card-cta-button,
.wccps-post-showcase .wccps-card > a:focus-visible .wccps-card-cta-button {
  color: var(--wccps-card-cta-color-hover, var(--wccps-card-cta-color, #fff));
  background: var(--wccps-card-cta-bg-hover, var(--wccps-card-cta-bg, var(--wccps-primary)));
  border-color: var(--wccps-card-cta-border-hover, var(--wccps-card-cta-border, transparent));
}
.wccps-post-showcase .wccps-card .wccps-card-cta-align-center { align-self: center; }
.wccps-post-showcase .wccps-card .wccps-card-cta-align-right { align-self: flex-end; }

/* Main + two: text on the left, uncropped images on the right. */
.wccps-layout-featured_two .wccps-hero { margin-bottom: var(--wccps-two-gap, 20px); }
.wccps-layout-featured_two .wccps-hero-link {
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15%, var(--wccps-two-main-image-width, 50%), 75%));
  grid-template-areas: "text image";
  box-shadow: none;
}
.wccps-layout-featured_two .wccps-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wccps-two-gap, 20px);
}
.wccps-layout-featured_two .wccps-card,
.wccps-layout-featured_two .wccps-card:hover { min-width: 0; box-shadow: none; transform: none; }
.wccps-layout-featured_two .wccps-card > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15%, var(--wccps-two-card-image-width, 32%), 75%));
  grid-template-areas: "text image";
  align-items: stretch;
}
.wccps-layout-featured_two .wccps-hero-media,
.wccps-layout-featured_two .wccps-card-media { grid-area: image; align-self: start; }
.wccps-layout-featured_two .wccps-hero-content,
.wccps-layout-featured_two .wccps-card-content { grid-area: text; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .wccps-layout-featured_two .wccps-grid { grid-template-columns: minmax(0, 1fr); }
  .wccps-layout-featured_two .wccps-hero-link,
  .wccps-layout-featured_two .wccps-card > a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "text";
  }
}

/* Optional main image width; preserve the original ratio when unset. */
@media (min-width: 1025px) {
  .wccps-layout-featured .wccps-hero-link {
    grid-template-columns: minmax(0, clamp(15%, var(--wccps-main-image-width, 52.5%), 75%)) minmax(0, 1fr);
  }
}

/* Sides are independent; stacked mobile cards always keep the image first. */
@media (min-width: 768px) {
  .wccps-layout-featured_two.wccps-two-main-image-left .wccps-hero-link {
    grid-template-columns: minmax(0, clamp(15%, var(--wccps-two-main-image-width, 50%), 75%)) minmax(0, 1fr);
    grid-template-areas: "image text";
  }
  .wccps-layout-featured_two.wccps-two-card-image-left .wccps-card > a {
    grid-template-columns: minmax(0, clamp(15%, var(--wccps-two-card-image-width, 32%), 75%)) minmax(0, 1fr);
    grid-template-areas: "image text";
  }
}