/**
 * About Us page.
 *
 * The hero is the shared page hero (components.css); Purpose and the
 * call-to-action band are the home page's components (home.css). The intro,
 * statistics and the dormant team grid are styled here, under their own
 * classes, so restyling the home page never shifts this one.
 */

:root {
  /* Fluid sizes, 390px → 1440px, read off the M/About and D/About frames. */
  --wb-about-fs-eyebrow: clamp(0.8125rem, 0.7196rem + 0.381vw, 1.0625rem); /* 13 → 17 */
  --wb-about-fs-text:    clamp(0.875rem, 0.7589rem + 0.476vw, 1.1875rem);  /* 14 → 19 */
  --wb-about-fs-stat:    clamp(1rem, 0.8375rem + 0.667vw, 1.4375rem);      /* 16 → 23 */
  --wb-about-fs-stat-p:  clamp(0.75rem, 0.6571rem + 0.381vw, 1rem);        /* 12 → 16 */
}

/* ==========================================================================
 * Hero
 * The title sits higher in this frame than in the Contact one: 271px from the
 * top rather than 332px, leaving the building clear below it.
 * ======================================================================= */

/* The phone frame rounds the hero's lower corners. */
.page-template-page-templatesabout-php .wb-page-hero {
  border-radius: 0 0 var(--wb-radius-sm) var(--wb-radius-sm);
}

@media (min-width: 64rem) {
  .page-template-page-templatesabout-php .wb-page-hero {
    padding-bottom: 10.125rem; /* 162px — centres the title 314px down */
    border-radius: 0;
  }
}

/* ==========================================================================
 * Intro — label and heading beside the paragraph, the wide photograph below
 * ======================================================================= */

.wb-about-intro {
  padding-top: var(--wb-space-7); /* 40px below the hero */
  padding-bottom: 0; /* the statistics' lower rule closes the section */
}

@media (min-width: 64rem) {
  .wb-about-intro {
    padding-top: 4.5rem; /* 72px */
  }
}

.wb-about-intro__eyebrow {
  margin-bottom: 0.1875rem; /* 3px */
  font-size: var(--wb-about-fs-eyebrow);
  letter-spacing: 0.01em;
}

.wb-about-intro__head {
  display: grid;
  gap: 1.25rem; /* 20px */
}

@media (min-width: 64rem) {
  .wb-about-intro__eyebrow {
    margin-bottom: 0.875rem; /* 14px */
    line-height: 1.35; /* 23 / 17 */
  }

  /*
   * Heading in a 450px column (a touch wider here so it breaks after "AND"
   * as drawn), the paragraph in a 610px one, pushed to the container's edges.
   */
  .wb-about-intro__head {
    grid-template-columns: minmax(0, 29rem) minmax(0, 38.125rem); /* 464 | 610 */
    justify-content: space-between;
    align-items: start;
    gap: var(--wb-space-8);
  }
}

/*
 * Set in capitals as drawn, so a heading typed in sentence case in the admin
 * still matches the design.
 */
.wb-about-intro__title {
  margin: 0;
  color: var(--wb-primary-dark);
  font-size: var(--wb-fs-about); /* 22 → 45 */
  line-height: 1.27; /* 57 / 45 */
  text-transform: uppercase;
}

.wb-about-intro__text {
  color: var(--wb-gray-600);
  font-size: var(--wb-about-fs-text);
  line-height: 1.6; /* 23 / 14 and 30 / 19 */
}

@media (min-width: 64rem) {
  .wb-about-intro__text {
    padding-top: 0.1875rem; /* 3px — first line sits just below the heading's */
    color: var(--wb-text-muted);
    letter-spacing: 0.005em;
  }
}

.wb-about-intro__text p {
  margin: 0;
}

.wb-about-intro__text p + p {
  margin-top: 1em;
}

/* Square-cornered on the phone, 8px radius at desktop, as drawn. */
.wb-about-intro__media {
  margin: 3.0625rem 0 0; /* 49px */
  overflow: hidden;
}

.wb-about-intro__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 347 / 198;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .wb-about-intro__media {
    margin-top: 4.5rem; /* 72px below the paragraph */
    border-radius: var(--wb-radius-md);
  }

  .wb-about-intro__img {
    aspect-ratio: 1194 / 465;
  }
}

/* ==========================================================================
 * Statistics — four short phrases between two rules
 * Two by two on the phone, four across from tablet up.
 * ======================================================================= */

.wb-about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4375rem 0; /* 23px between the rows */
  margin: 1.75rem 0 0; /* 28px below the photograph */
  padding: 1.8125rem 0 1.6875rem; /* 29px 27px */
  border-top: 1px solid #EDF2F4;
  border-bottom: 1px solid #EDF2F4;
  list-style: none;
}

@media (min-width: 48rem) {
  .wb-about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .wb-about-stats {
    margin-top: var(--wb-space-2); /* 8px */
    padding: 4.75rem var(--wb-space-6) 5.0625rem; /* 76px 32px 81px — 306px tall as drawn */
    border-top: 2px solid #EAEEF2;
    border-bottom: 2px solid #E6EBF0;
  }
}

.wb-about-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--wb-space-1);
  text-align: center;
}

.wb-about-stats__icon {
  display: flex;
  color: var(--wb-secondary);
}

.wb-about-stats__icon .wb-icon {
  width: 1.75rem; /* 28px */
  height: 1.75rem;
}

@media (min-width: 64rem) {
  .wb-about-stats__icon .wb-icon {
    width: 3.25rem; /* 52px — the drawn glyphs are 45–55px across */
    height: 3.25rem;
  }
}

/* Navy on the phone, the primary blue at desktop, as drawn. */
.wb-about-stats__value {
  margin-top: 0.3125rem; /* 5px */
  color: var(--wb-primary-dark);
  font-size: var(--wb-about-fs-stat);
  font-weight: var(--wb-fw-bold);
  line-height: 1.375; /* 22 / 16 */
}

.wb-about-stats__value .wb-stats__symbol {
  color: var(--wb-secondary);
}

.wb-about-stats__label {
  max-width: 15rem; /* 240px */
  margin-top: var(--wb-space-1);
  color: var(--wb-gray-500);
  font-size: var(--wb-about-fs-stat-p);
  line-height: 1.35; /* 16 / 12 and 22 / 16 */
}

@media (min-width: 64rem) {
  .wb-about-stats__value {
    margin-top: 0.8125rem; /* 13px */
    color: var(--wb-primary);
    line-height: 1.4; /* 32 / 23 */
    letter-spacing: 0.005em;
  }

  .wb-about-stats__label {
    margin-top: var(--wb-space-2);
  }
}

/*
 * The design sets each figure on one line, wider than its column
 * ("Residential & Commercial"). From 1280px the columns leave room for that
 * without touching a neighbour; narrower screens let it wrap.
 */
@media (min-width: 80rem) {
  .wb-about-stats__value {
    white-space: nowrap;
  }
}

/* ==========================================================================
 * Our Purpose
 * The home page's section with this page's own photograph (about.php passes
 * the about-purpose slot): one 460×522 image, square to the copy's baseline,
 * with no headroom above it. Like the rest of this page it keeps to the
 * design's 1194px of content, so from 1440px up the copy starts 123px in and
 * the photograph at 857px, as drawn.
 * ======================================================================= */

.page-template-page-templatesabout-php .wb-purpose__img {
  aspect-ratio: 460 / 522;
}

/* Phone: 74px from the list to the photograph, which has no headroom of its own. */
@media (max-width: 63.9375rem) {
  .page-template-page-templatesabout-php .wb-purpose__figure {
    margin-top: 4.25rem; /* 68px + the 6px row gap */
  }
}

@media (min-width: 64rem) {
  /* The photograph starts 80px down; home's composite rises into that space. */
  .page-template-page-templatesabout-php .wb-purpose {
    padding-top: 5rem; /* 80px */
  }

  /*
   * The About frame draws its intro, wide photograph, statistics and Purpose
   * in one 1194px column, so they share it here and stay aligned.
   */
  .wb-about-intro > .wb-container,
  .page-template-page-templatesabout-php .wb-purpose > .wb-container {
    max-width: calc(74.625rem + (var(--wb-gutter-lg) * 2)); /* 1194px + gutters */
  }
}

/* ==========================================================================
 * Call-to-action band
 * The home page's component in its dark tone (about.php passes
 * 'tone' => 'dark'), over this page's own photograph: a darkened interior
 * with the tile mosaic already part of the image. Only the spacing and the
 * crop belong to this page. Scoped by the body class WordPress gives this
 * template (page-templates/about.php).
 * ======================================================================= */

/* The band is the last section, with white space before the footer. */
.page-template-page-templatesabout-php .wb-cta-band {
  margin-bottom: 3.375rem; /* 54px */
}

@media (min-width: 64rem) {
  .page-template-page-templatesabout-php .wb-cta-band {
    margin-bottom: 4.4375rem; /* 71px */
  }
}

/* The phone crop keeps to the left of the photograph, clear of the mosaic. */
.page-template-page-templatesabout-php .wb-cta-band__img {
  object-position: left center;
}

@media (min-width: 64rem) {
  /* Anchored bottom-right so a wider screen never crops the mosaic away. */
  .page-template-page-templatesabout-php .wb-cta-band__img {
    object-position: right bottom;
  }
}

/* ==========================================================================
 * Team — "Connect with Our Team"
 * Not in the current design, so about.php only draws it when the
 * wadi_badan_about_show_team filter returns true. Kept styled for that case.
 * ======================================================================= */

.wb-team__header {
  margin-bottom: var(--wb-space-6);
}

.wb-team__header .wb-eyebrow {
  font-size: var(--wb-fs-eyebrow-sm);
}

.wb-team__header .wb-section-header__title {
  font-size: var(--wb-fs-advant);
}

.wb-team__header .wb-section-header__lead {
  max-width: 28.75rem; /* 460px */
  font-size: var(--wb-fs-offer-lead);
  line-height: 1.7;
}

.wb-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem; /* 18px on mobile */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .wb-team__grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 19.125rem)); /* 306px */
    justify-content: center;
    gap: var(--wb-space-6); /* 32px */
  }
}

.wb-agent-card {
  position: relative;
  background-color: var(--wb-white);
}

/* Square corners on the portraits, unlike the theme's other media. */
.wb-agent-card__media {
  margin: 0;
  overflow: hidden;
}

.wb-agent-card__img {
  display: block;
  width: 100%;
  height: 16.875rem; /* 270px on mobile */
  object-fit: cover;
}

@media (min-width: 48rem) {
  .wb-agent-card__img {
    height: auto;
    aspect-ratio: 306 / 381;
  }
}

/*
 * The white plate sits over the portrait's lower-left corner, inset above the
 * bottom edge so a strip of the photograph still shows beneath it.
 */
.wb-agent-card__plate {
  position: absolute;
  inset-inline: 4.05%;
  bottom: 0.875rem; /* 14px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wb-space-2);
  min-height: 4.625rem; /* 74px */
  padding: 0.625rem 1rem;
  background-color: var(--wb-white);
  border-inline-start: 3px solid var(--wb-secondary);
  box-shadow: 0 0 24.74px rgba(0, 0, 0, 0.08);
}

@media (min-width: 48rem) {
  .wb-agent-card__plate {
    inset-inline: 0 auto;
    bottom: 1.25rem; /* 20px */
    width: 15.5625rem; /* 249px */
    min-height: 5.75rem; /* 92px */
    padding: var(--wb-space-2) 1.2981rem; /* 8px 20.77px */
    border-inline-start-width: 6px;
  }
}

/*
 * Both lines are the same grey in the design; the name is told apart by its
 * size and weight rather than by colour.
 */
.wb-agent-card__name {
  margin: 0;
  color: var(--wb-text-muted);
  font-size: var(--wb-fs-lead);
  font-weight: var(--wb-fw-bold);
  line-height: 1.2;
}

.wb-agent-card__role {
  margin: 0;
  color: var(--wb-text-muted);
  font-size: var(--wb-fs-body);
  line-height: var(--wb-lh-body);
}