/* ==========================================================================
   Alamu Prosper - site fixes
   Loaded after the theme/Elementor CSS on every page.
   ========================================================================== */

/* The posts widget ships `grid-template-columns:repeat(3,1fr)` with no
   responsive override. Grid items default to `min-width:auto`, so the cards
   refuse to shrink below their min-content width (~741px) and push the whole
   document sideways on phones and small tablets. Present in the original
   export on both the blog page and the home page. */
.wcf__posts .wcf-posts > * { min-width: 0; }
.wcf__posts .wcf-posts img { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
  .wcf__posts .wcf-posts { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .wcf__posts .wcf-posts { grid-template-columns: 1fr !important; }
}

/* Belt and braces: nothing should be able to scroll the document sideways. */
html, body { overflow-x: hidden; }

/* ---- Alamu Prosper text wordmark (replaces the old SaaSapp logo image) --- */
.ap-wordmark{
  display:inline-block;
  font-family:"Urbanist", sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1;
  letter-spacing:-.01em;
  color:#FFFFFF;
  text-decoration:none;
  white-space:nowrap;
}
.ap-wordmark:hover{opacity:.85;}
.ap-wordmark--footer{margin-bottom:6px;}

/* ---- Alamu Prosper SVG logo ------------------------------------------- */
.ap-logo-img{display:block;width:auto;max-width:100%;}
.ap-logo-img--header{height:56px !important;}
.ap-logo-img--footer{height:60px !important;}

/* ---- logo sizing overrides (beat theme img{max-width:100%} + width clamps) */
.ap-logo-img{display:block !important;width:auto !important;max-width:none !important;object-fit:contain;}
.ap-logo-img--header{height:56px !important;}
.ap-logo-img--footer{height:60px !important;}
.op-logo,.ap-logo-link--footer{display:inline-block !important;width:auto !important;max-width:none !important;}
.elementor-widget-image:has(.ap-logo-img--footer),
.elementor-widget-image:has(.ap-logo-img--footer) > .elementor-widget-container{
  width:auto !important;max-width:none !important;overflow:visible !important;
}


/* ---- home page: temporarily hide the whole team section --------------- */
/* Remove this rule (and the nav rule below) to bring the team section back. */
#team{ display:none !important; }
/* Hide the "Team" menu links (desktop + mobile) so no dead anchor remains. */
a[href="#team"], li:has(> a[href="#team"]){ display:none !important; }

/* ---- team section: uniform responsive grid + square photos ----------- */
/* The six team photos ship at very different native sizes (440x440, 313x423,
   200x200, 173x170). Force a consistent square crop and a responsive grid so
   the row reads evenly on desktop, tablet and mobile. */

/* Grid: 3 across on desktop, 2 on tablet/phone. `.elementor-element-d051d5d`
   is the flex wrapper Elementor generated for the member cards. */
#team .elementor-element-d051d5d{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:32px 24px;
  width:100%;
  align-items:start;
}
@media (max-width:1024px){
  #team .elementor-element-d051d5d{ grid-template-columns:repeat(2, 1fr) !important; }
}
@media (max-width:600px){
  #team .elementor-element-d051d5d{ grid-template-columns:repeat(2, 1fr) !important; gap:24px 16px; }
}

/* Each member card: centered column, full grid-cell width. */
#team .elementor-element-d051d5d > .e-con{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Uniform square photo, cropped to fill (no letterboxing), face kept centred.
   Elementor's image widget shrink-wraps to the photo's native width, so we must
   force the whole widget chain to full width before the square sizing applies. */
#team .elementor-widget-wcf--image,
#team .elementor-widget-wcf--image > .elementor-widget-container,
#team .wcf--image{ width:100% !important; max-width:100% !important; text-align:center; }
#team .wcf--image img{
  width:100% !important;
  max-width:240px !important;
  aspect-ratio:1 / 1;
  height:auto !important;
  object-fit:cover;
  object-position:center 20%;
  background:#F2F4F7;
  border-radius:16px;
  display:block;
  margin:0 auto;
}

/* Name / role sit tidily under the photo. */
#team .wcf--image + .elementor-widget .wcf--title{ margin-top:14px; }
#team .team-social{ text-align:center; }

/* Newly added members (Vinod, Karthick) have no per-element Elementor CSS, so
   their titles fall back to the theme's bold PT Serif heading. Match them to the
   existing team members: Urbanist name + DM Sans role. */
#team .ap-team-name{
  font-family:"Urbanist", sans-serif !important;
  font-weight:700 !important;
  font-size:25px !important;
  line-height:35px !important;
  color:rgb(13, 15, 48) !important;
}
#team .ap-team-role{
  font-family:"DM Sans", sans-serif !important;
  font-weight:400 !important;
  font-size:16px !important;
  line-height:1.63 !important;
  color:rgb(80, 80, 80) !important;
}