/* ===== Premium Phase 3 — stats strip + cards + testimonial polish ===== */

/* --- Stats strip ----------------------------------------------------- */
.pism-stats-strip {
  background: #fff;
  border-top: 1px solid #ECEEF3;
  border-bottom: 1px solid #ECEEF3;
}

.pism-stats-strip__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}

.pism-stats-strip__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.pism-stats-strip__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    #E4E7EC 25%,
    #E4E7EC 75%,
    transparent 100%);
}

.pism-stats-strip__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, #0B44C1 0%, #17447F 60%, #0B2A6B 100%);
  color: #E5B93B;                            /* gold accent for SVGs */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    0 6px 16px rgba(11, 68, 193, 0.30),
    0 1px 2px rgba(15, 23, 42, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* subtle inner sheen — top-left highlight */
.pism-stats-strip__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events: none;
}

.pism-stats-strip__icon svg {
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.pism-stats-strip__text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pism-stats-strip__value {
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(1.5rem, 1.15rem + 0.85vw, 2rem);
  font-weight: 600;
  color: #0B44C1;
  line-height: 1.1;
}

.pism-stats-strip__label {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748B;
  margin-top: 6px;
}

@media (max-width: 920px) {
  .pism-stats-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 18px;
    padding: 24px 18px;
  }
  .pism-stats-strip__item::after { display: none !important; }
}

/* --- Footer address card: subtle map texture background -------------- */
/* Target the address icon-box in the footer (element-id 30291c40) and
   give it a faint map-like SVG background for a premium "you're here" feel. */
.elementor-element-30291c40 .elementor-icon-box-wrapper,
.elementor-widget-icon-box:has(.elementor-icon-box-description:where([class*="Jalan"], [class*="Pandan"])) .elementor-icon-box-wrapper {
  background:
    /* compass-soft gradient */
    linear-gradient(135deg, rgba(11, 68, 193, 0.04), rgba(229, 185, 59, 0.03)),
    /* map streets + buildings SVG (inline data URI) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g stroke='%230B44C1' stroke-width='0.6' opacity='0.12' fill='none'><path d='M0 50 H240 M0 130 H240 M0 200 H240'/><path d='M50 0 V240 M120 0 V240 M190 0 V240'/></g><g fill='%230B44C1' opacity='0.06'><rect x='10' y='10' width='30' height='30'/><rect x='60' y='15' width='50' height='30'/><rect x='130' y='10' width='50' height='30'/><rect x='200' y='15' width='30' height='25'/><rect x='10' y='65' width='30' height='55'/><rect x='60' y='60' width='50' height='60'/><rect x='130' y='75' width='50' height='45'/><rect x='200' y='60' width='30' height='60'/><rect x='10' y='140' width='30' height='50'/><rect x='60' y='145' width='50' height='45'/><rect x='130' y='140' width='50' height='50'/><rect x='200' y='150' width='30' height='40'/><rect x='10' y='210' width='30' height='25'/><rect x='60' y='205' width='50' height='30'/><rect x='130' y='210' width='50' height='25'/><rect x='200' y='205' width='30' height='30'/></g><circle cx='120' cy='130' r='6' fill='%23E5B93B' opacity='0.45'/><circle cx='120' cy='130' r='14' fill='none' stroke='%23E5B93B' stroke-width='0.8' opacity='0.35'/></svg>"),
    #fff !important;
  background-size: 240px 240px, 240px 240px, cover !important;
  background-position: 0 0, 0 0, center !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  position: relative;
  overflow: hidden;
}

/* Ensure icon + text stay readable above the texture */
.elementor-element-30291c40 .elementor-icon-box-icon,
.elementor-element-30291c40 .elementor-icon-box-content {
  position: relative;
  z-index: 1;
}

/* --- Card depth (blog/news cards only — NOT the "Why PISM" tiles) ---- */
.single-blog,
.blog-item {
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
              0 6px 18px -10px rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.single-blog:hover,
.blog-item:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06),
              0 24px 48px -16px rgba(11, 68, 193, 0.16) !important;
}

/* --- News teaser uniformity: same image height + aligned Read More ---- */
/* All four homepage news cards share the same image aspect ratio and the
   "Read More" button is pinned to the bottom of each card so titles of
   different line counts don't shift the row layout.
   IMPORTANT: scope strictly to .blog--style4 (the homepage news teaser
   template). The /newsletter/ page uses .blog--style1 with a totally
   different markup (.rts-blog-post + .blog-thumb), and applying these
   flex rules there collapses the inner card to its image's natural
   width — see commit history for the regression. */
.blog--style4 .row.blog-gird-item > .grid-item {
  display: flex;
}
.blog--style4 .row.blog-gird-item .single-blog {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.blog--style4 .single-blog__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog--style4 .blog__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  background: #f1f5f9;
}
.blog--style4 .blog__thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.blog--style4 .blog__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.blog--style4 .single-blog:hover .blog__thumb img {
  transform: scale(1.04);
}
.blog--style4 .blog__meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog--style4 .blog__meta .react_button {
  margin-top: auto;       /* pin to bottom regardless of title length */
  align-self: flex-start;
}

/* --- "Why PISM" tile pair (Six Core Pillars + School Facilities) ----- */
/* Keep them transparent so the title labels (white on blue bg) remain
   visible. Just normalise the image aspect ratio for consistency. */
.campus__single--item {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 14px;
  overflow: visible;
}

.campus__single--item--thumb {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 11;          /* both images now match */
  display: block;
  box-shadow: 0 14px 38px -16px rgba(0,0,0,0.35);
}

.campus__single--item--thumb img,
.campus__single--item--thumb a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.campus__single--item--thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Title link below the tile: white on blue, premium spacing */
.campus__single--item--title.title {
  margin-top: 18px !important;
  font-family: "Playfair Display", "Georgia", serif !important;
  font-weight: 500 !important;
}

.campus__single--item--title.title a {
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.campus__single--item--title.title a:hover {
  opacity: 0.85;
}

.campus__single--item--title.title a span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
}

.campus__single--item--title.title a:hover span {
  background: rgba(255,255,255,0.28);
  transform: translateX(2px);
}

/* --- Testimonials: equal height + truncate -------------------------- */
.slider-inner-wrapper .swiper-wrapper,
.testimonial.style1 .swiper-wrapper {
  align-items: stretch !important;
}

.swiper-slide:has(.rts__single--testimonial) {
  height: auto;
  display: flex;
}

.rts__single--testimonial {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  /* tidy padding so quote glyph + content sit nicely */
  padding: 32px 30px 28px !important;
}

.rts__single--testimonial--text.des.is-truncated,
.rts__single--testimonial--text.des {
  margin-bottom: 12px;
}

.rts__single--testimonial--author {
  margin-top: auto !important;   /* pin author to bottom of card */
}

.pism-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #0B44C1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease;
}
.pism-readmore::after {
  content: "→";
  transition: transform 150ms ease;
}
.pism-readmore:hover {
  color: #093697;
}
.pism-readmore:hover::after {
  transform: translateX(2px);
}

/* --- Newsletter card: show the whole PDF first-page render --------- */
/* The rt-elements default CSS has THREE colliding rules on .blog-thumb:
     .rts-blog-post .single-blog-post .blog-thumb { height: 150px }
     .rts-blog-post .single-blog-post .blog-thumb { height: 100% }
     .blog-v-full .blog-thumb { min-height: 420px }
   Combined with `position:absolute` on the img (so the parent has no
   flow content to push it tall), the card ends up clamped to 420px and
   the image is object-fit:cover-cropped.
   Override all three so the card adopts the image's natural 640:905
   aspect ratio and the whole first page renders edge-to-edge. */
.blog--style1 .rts-blog-post.blog-v-full .single-blog-post .blog-thumb {
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  aspect-ratio: 640 / 905;
}
.blog--style1 .rts-blog-post.blog-v-full .single-blog-post .blog-thumb img {
  object-position: top !important;   /* belt + braces if aspect ever drifts */
}

/* Hide the "user" author chip on newsletter cards — the author is always
   the placeholder "user" account, which adds no information. Only the
   date is kept in the overlay. */
.blog--style1 .rts-blog-post .blog-content .rt-author {
  display: none !important;
}

/* --- Newsletter subscribe section: breathing room ------------------- */
/* The "Subscribe to Our Newsletter!" heading sat flush against the top
   edge of the blue section. Give the whole container symmetric vertical
   padding so the heading + form sit nicely centred. */
.elementor-element-1bdaf9a > .e-con-inner {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
@media (max-width: 767px) {
  .elementor-element-1bdaf9a > .e-con-inner {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}