/* ==========================================================================
   PHP template structure (front-page.php, home.php, landing.php,
   single-propeti.php, archive-properti.php, taxonomy-properti-pilihan.php +
   inc/functions/sections.php).
   Enqueued ONLY on pages using a PHP template (assets.php).
   Every class is unique to this stylesheet (faaz-p-*): nothing here is
   shared with faaz.css, so editing the PHP template can never change a
   block-template page. Content rendered by custom blocks (hero search bar,
   icon tiles, card sliders, keuang row) keeps its own classes — those
   belong to the blocks.
   ========================================================================== */

/* Shared units: 1180 content box (1220 + 20px sides so the inner width
 * resolves to 1180 exactly), 20px child gaps, title, hairline, pill button. */
.faaz-p-box {
  max-width: 1220px;
  padding-inline: 20px;
  margin-inline: auto;
}

/* 2026-11-03 (user): the generic .faaz-p-gap > * + * { margin-top: 20px } sibling rule is
 * DELETED, and per-element margin-top replacements are NOT allowed — a blanket sibling
 * rule shifts the layout whenever a wrapper class is added, and scattering 20px margins
 * across classes makes the spacing impossible to edit in one place. Vertical spacing now
 * lives in the section wrappers (.faaz-p-section / .faaz-p-temukan padding), the hairline
 * (padding 30/30) and .faaz-p-jbp (padding 50 top / 100 bottom). */

/* 2026-11-03 (user spec): EVERY section of the PHP template has the same
 * vertical padding — 80px top + 80px bottom. One rule, one place to change.
 * Sections carry .faaz-p-section: hero, menemukan band, layanan band,
 * Keunggulan+Panduan band. */
.faaz-p-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* 2026-11-03 (user spec): every section title carries margin-bottom 20px. Measured:
 * title → next element = 20 + the next element's own padding (hairline 30, slider 30). */
.faaz-p-title {
  margin: 0 0 20px;
  color: var(--wp--preset--color--primary);
  font-size: 23px; /* base title size; mobile 21 */
  font-weight: 700;
}

@media (max-width: 767px) {
  .faaz-p-title {
    font-size: 21px;
  }
}

.faaz-p-red {
  color: var(--wp--preset--color--accent);
}

/* 2026-11-03 (user spec): the 24px titles carry this modifier — Temukan Properti Idaman
 * Anda and Panduan & Berita Properti. Every other .faaz-p-title stays 23 (21 mobile). */
.faaz-p-title-lg {
  font-size: 24px;
}

/* Mobile 21px, same as every other title. Printed AFTER .faaz-p-title-lg (0,1,0) so
 * it wins by order. */
@media (max-width: 767px) {
  .faaz-p-title-lg {
    font-size: 21px;
  }
}

/* 2026-11-03 (user spec): the hairline is an explicit 1px red line with
 * padding top AND bottom, not a border. background-clip:content-box keeps the
 * red on the 1px line only — a plain background-color would paint the whole
 * 41px padding box.
 * box-sizing:content-box is REQUIRED: the theme base sets border-box, so
 * height:1px resolves the content box to 1px − 40px = 0 (clamped) and the red
 * paints nothing; the equivalent fix under border-box is height:41px.
 * Verified: with content-box, rect = 1180×81 (40+1+40) and the red line = 1px. */
.faaz-p-hairline {
  box-sizing: content-box;
  width: 100%;
  height: 1px;
  background-color: var(--wp--preset--color--gold);
  background-clip: content-box;
  padding-top: 40px; /* user spec 2026-11-03: 40px top + bottom (was 30, before that 20) */
  padding-bottom: 40px;
}

.faaz-p-btn-row {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* user spec 2026-11-04 */
}

.faaz-p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 12px 24px;
  background: var(--wp--preset--color--blue);
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  text-decoration: none;
  /* Card skin (same as every card, 2026-11-02): 1px #e7e7e7 border + this shadow.
   * 2026-11-04 (user spec): the button carries the shadow. */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

/* Hero: photo bg + black gradient, content centred. 90vh desktop,
 * 35vh tablet, 48vh mobile (20px padding, bg centre-right). */
.faaz-p-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 20px; /* vertical padding = .faaz-p-section (80/80, user spec 2026-11-03; the old 100/100 is gone) */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Overlay: flat black 0.5 (user spec 2026-11-03, replaces the 0.9→0.45 gradient). */
.faaz-p-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.faaz-p-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

.faaz-p-hero-title {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 36px;
  line-height: 1.3;
  font-weight: 700;
}

/* The white search panel (the hero-search block inside it carries its own
 * width rules — .faaz-hero-search is the block's own CSS). */
.faaz-p-panel {
  margin: 20px auto 0;
  width: 90%;
  max-width: 708px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-p-hero {
    min-height: 35vh !important;
    padding: 20px !important;
  }
  .faaz-p-hero-title {
    font-size: 23px;
    line-height: 1.2;
  }
  .faaz-p-panel {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .faaz-p-hero {
    min-height: 48vh !important;
    padding: 20px !important;
    background-position: center right;
  }
  .faaz-p-hero-title {
    font-size: 23px;
    line-height: 1.2;
  }
  /* Mobile (user spec 2026-11-04): the hero inner has no side padding — the panel is
   * already width:100%, so the 20px gutter is removed. */
  .faaz-p-hero-inner {
    padding-inline: 0;
  }
  .faaz-p-panel {
    width: 100%;
  }
}

/* Temukan band (padding 40/20/80, tablet 80/50, mobile bottom 100). */
/* 2026-11-03 (user spec): the PHP template carries NO margin on the shared slider wrapper.
 * .faaz-pp in faaz.css has margin-top:30 (block pages keep that); here it is zeroed with a
 * .faaz-p-gap-scoped rule, so the override can only ever apply inside a PHP template and
 * spacing comes only from .faaz-p-title margin-bottom — nothing hidden in a shared class.
 * .faaz-pb in faaz.css has margin-top:30 (Properti Baru) — zeroed the same way.
 * Measured: title → Properti Baru slider = 20, title → Properti Pilihan slider = 20. */
.faaz-p-gap .faaz-pp,
.faaz-p-gap .faaz-pb {
  position: relative;
  margin-top: 0;
}

/* Temukan band: SPECIAL CASE (user spec 2026-11-03) — padding-top 50px instead of the
 * section rule's 80; padding-bottom stays 80 (.faaz-p-section, printed before this rule,
 * so this single-class rule wins by order). Measured paddingTop = 50px. The old
 * per-breakpoint paddings (40/80, tablet 80/50, mobile 100 bottom) are deleted. */
.faaz-p-temukan {
  padding-top: 50px;
}

/* The icon row (hero-icons block inside), centred in the 1180 column. */
.faaz-p-icons {
  max-width: 610px;
  margin-inline: auto;
}

/* The intro photo wrapper (user spec 2026-11-03): TOTAL 50px from the icon row above,
 * TOTAL 100px to the Temukan title below — both are padding, because the generic
 * .faaz-p-gap sibling rule is deleted (the wrapper carries no margin) and
 * .faaz-p-title { margin: 0 } kills any gap under the image. Measured: icons bottom
 * → img top = 50, img bottom → title top = 100. */
.faaz-p-jbp {
  background: #fff;
  padding: 50px 0 100px;
}

.faaz-p-jbp-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);
}

/* Temukan intro paragraph: 65% desktop / 80% tablet / 100% mobile, left. */
/* 2026-11-03 (user spec, exact rule): margin: 0 — the intro carries no spacing of its
 * own; the gap above it comes from .faaz-p-title margin-bottom 20. Tablet/mobile width
 * overrides below stay. */
.faaz-p-intro {
  width: 65%;
  margin: 0 0 27px; /* user spec 2026-11-03: 27px below the intro line */
  color: var(--wp--preset--color--secondary);
  font-size: 15px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faaz-p-intro {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .faaz-p-intro {
    width: 100%;
  }
  /* Mobile (user spec 2026-11-04): Temukan band padding-top 30 (the .faaz-p-temukan
   * rule is printed after .faaz-p-section, so the pair selector is needed to beat it),
   * and .faaz-p-jbp padding-TOP 30 / padding-BOTTOM 70 (icon row → image = 30, image →
   * title = 70, was 100). Both sides need !important — .faaz-p-jbp's own
   * `padding: 50px 0 100px` shorthand is printed LATER in the file at the same
   * specificity, so a plain media-query override loses. Only top/bottom are overridden so
   * the ≤1024 side padding survives. */
  .faaz-p-temukan.faaz-p-section {
    padding-top: 30px;
  }
  .faaz-p-jbp {
    padding-top: 30px !important;
    padding-bottom: 70px !important;
  }
}

/* Layanan band (user spec 2026-11-03): the band is a CARD — the photo, the white 60%
 * overlay, radius 8, shadow and 50px padding all live on .faaz-p-layanan-inner (the bg
 * style attribute is on that div in sections.php; .faaz-p-box was removed from it).
 * WIDTH OWNER = THE SECTION: .faaz-p-layanan is capped 1180 + centered, with 20px side
 * padding (the same area model as .faaz-p-box), and the card fills the section's content
 * area (1140). The section keeps the 80/80 vertical padding. The overlay sits below the
 * text via z-index. Measured: section rect 1180 centred (x 42.5), card fills 1140. */
/* Layanan band: SPECIAL CASE (user spec 2026-11-03) — vertical padding 0 (both top and
 * bottom; .faaz-p-section 80/80 is printed before, so this single-class rule wins by
 * order). Side padding 20 + width owner stay. Measured: paddingTop 0, paddingBottom 0. */
.faaz-p-layanan {
  max-width: 1180px;
  margin-inline: auto;
  /* padding-inline removed (user spec 2026-11-03) — the card is the element that owns
   * its own padding (50px). Vertical padding 0. */
  padding-top: 0;
  padding-bottom: 0;
}

/* Tablet → mobile (≤1024, user spec 2026-11-03): 20px side padding so the card keeps a
 * gutter; desktop stays 0. */
@media (max-width: 1024px) {
  .faaz-p-layanan {
    padding-inline: 20px;
  }
}

.faaz-p-layanan-inner {
  padding: 50px; /* user spec: 50px all sides */
  border-radius: 8px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  background-position: 23% 37%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.faaz-p-layanan-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.faaz-p-layanan-inner > * {
  position: relative;
  z-index: 1;
}

/* Card padding shrinks on tablet→mobile (user spec 2026-11-03): 30 top/bottom, 20 sides
 * (desktop keeps 50). MUST be printed after the base .faaz-p-layanan-inner rule — equal
 * specificity (0,1,0), so order decides (the first attempt, placed before it, lost and
 * the computed padding stayed 50). */
@media (max-width: 1024px) {
  .faaz-p-layanan-inner {
    padding: 30px 20px;
  }
}

/* 2026-11-03 (user spec): ALL .faaz-p-layanan-title styling is deleted (base rule + the
 * ≤1024 23px / ≤767 22px overrides). The band title is styled only by .faaz-p-title
 * (23px, margin-bottom 20, line-height normal, 21px mobile). The class stays on the h2
 * as a markup hook. */

/* 2026-11-03 (user spec): no margin — the band's spacing is set in the wrappers, not on
 * the paragraph container (the old margin-top 60 + ≤1024 40 !important rules are deleted).
 * Measured: layanan title → paragraphs = 0. */
.faaz-p-layanan-cols {
  margin: 0;
}

/* 2026-11-03 (user spec): paragraph spacing = margin-bottom 27px, not margin-top (the
 * sibling rule is deleted). Measured: paragraph gap 27, last paragraph → padding 27. */
.faaz-p-layanan-p {
  margin: 0 0 27px;
  max-width: 864px; /* user spec 2026-11-03 (was 767, the live Elementor width) */
  color: var(--wp--preset--color--secondary);
  font-size: 15px;
}

/* The last paragraph carries no bottom margin (the card's 50px padding is the closing
 * space) — user spec 2026-11-03. */
.faaz-p-layanan-p:last-child {
  margin-bottom: 0;
}

/* Lokasi tiles (user spec 2026-11-03). Two renderings from one section:
 *  - DESKTOP (≥768): .faaz-p-lokasi-grid = 3 columns, gap 20. Bandung spans 1 column ×
 *    2 rows; the 4 Jakarta tiles fill columns 2-3 in DOM order. Small tile min-height
 *    140 (Bandung = 140+20+140 = 300). The two swipers are hidden.
 *  - MOBILE (≤767): the grid is hidden; .faaz-p-lokasi-top = Swiper (1 big slide,
 *    label + link, arrows left/right) and .faaz-p-lokasi-strip = Swiper (5 mini tiles,
 *    NO link). The two share one navigation rule via Swiper thumbnails: swiping the top
 *    moves the strip, clicking a mini sets the top slide. Clicking a mini can never
 *    navigate (no href) and cannot shift the row (slides are transform-positioned inside
 *    overflow:hidden), which is why scroll-snap was rejected — a focused anchor inside a
 *    scroll container scrolls the container.
 * Shared skin: radius 8, cover background, card shadow, dark overlay under the white label. */

.faaz-p-lokasi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.faaz-p-lokasi-tile,
.faaz-p-lokasi-slide,
.faaz-p-lokasi-mini {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* 2026-11-04 (user spec, revised): the card shadow is ONLY on the desktop grid tiles —
 * the mobile swipers (.faaz-p-lokasi-slide / .faaz-p-lokasi-mini) get NO shadow, the mini
 * card keeps its own (0 0 3px 2px). Printed after the base rule, same specificity → wins. */
.faaz-p-lokasi-tile {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

.faaz-p-lokasi-tile {
  min-height: 140px; /* small tiles; Bandung = 140 + 20 gap + 140 = 300 */
  text-decoration: none;
}

.faaz-p-lokasi-slide {
  min-height: 300px; /* the mobile big tile (user spec 2026-11-03: 300px) */
  text-decoration: none;
}

.faaz-p-lokasi-mini {
  /* Mini strip tile (user spec 2026-11-04, structure rewrite): the slide keeps Swiper's
   * inline width and NO visuals; the inner .faaz-p-lokasi-mini-card owns the background
   * image, radius 8, the 2px-spread card shadow, and its own margin = the shadow room
   * (spaceBetween:0 in faaz-lokasi-swiper.js, so neighbours never collide). The slide is
   * the label's positioned ancestor (the label is absolute, NOT inside the card), so
   * position:relative stays on the slide. padding:0 + overflow:visible clear the shared
   * tile rule so the card's shadow is not clipped by the slide. Height = 16:9 of the
   * slide width (the user's 2026-11-03 spec). */
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 5px; /* the shadow room lives on the swiper item (user spec 2026-11-04: 5px) */
  overflow: visible;
}

.faaz-p-lokasi-mini-card {
  /* 2026-11-04 (iOS bottom-clip fix): geometry from inset, NOT height:100%. In WebKit a
   * percentage height inside a flex item whose height comes from aspect-ratio is
   * indefinite for percentage resolution, so Safari resolves the card against the slide's
   * PADDING box (85px, not the 75px content box) → the card's bottom lands 5px past the
   * strip's overflow:hidden clip line = the bottom radius + bottom shadow get cut. inset
   * is engine-independent. Visual result identical in Chrome: card stays 5px inside the
   * slide, 142×75 at x20. */
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2); /* user spec 2026-11-04: bottom strip card, blur 3 (reach 5 = the slide's 5px padding, the strip's -5 sides) */
  overflow: hidden;
}

.faaz-p-lokasi-big {
  grid-row: span 2; /* 1 column wide, 2 rows tall (the reference layout) */
}

.faaz-p-lokasi-tile::before,
.faaz-p-lokasi-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  transition: opacity 0.3s;
}

/* Small animation (user spec): the overlay DARKENS 0.35 → 0.7 while the pointer is on the
 * tile, so the white label gains contrast. */
.faaz-p-lokasi-tile:hover::before,
.faaz-p-lokasi-slide:hover::before {
  opacity: 0.7;
}

/* 2026-11-04 (user): the mini strip overlay + hover live on the INNER card
 * (.faaz-p-lokasi-mini-card), not on the swiper slide. inset:0 fills the card's padding
 * box (the card has no padding), radius 8 matches the card, and the label sits above it
 * (.faaz-p-lokasi-label has z-index:1, its ancestor is the slide, outside the card). */
.faaz-p-lokasi-mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  transition: opacity 0.3s;
}
.faaz-p-lokasi-mini-card:hover::before {
  opacity: 0.7;
}

.faaz-p-lokasi-label {
  margin: 0;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  color: #fff;
  font-size: 20px; /* user spec: 20px for the 4 small tiles */
  font-weight: 700;
  line-height: 1;
}

/* Bandung (the tall tile) label = 23px (user spec) */
.faaz-p-lokasi-big .faaz-p-lokasi-label {
  font-size: 23px;
}

/* Nav arrows (user spec 2026-11-04): the card-slider CIRCLE SKIN, in Swiper's DEFAULT
 * position (vendored .swiper-button-* keeps them absolute, left/right, vertically
 * centred). The vendored rule is (0,1,0) and loads before this file, so the plain
 * width/height/margin-top overrides win by order. Swiper writes --swiper-navigation-size:
 * 44px, so the vendored SVG width/height must be overridden explicitly. Swiper's
 * .swiper-button-disabled (opacity .35 + pointer-events:none) is inherited. */
.faaz-p-lokasi-nav {
  width: 37px;
  height: 37px;
  margin-top: -18.5px; /* vertical centre: -(height/2), replaces the vendored -22px */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  color: #000;
  cursor: pointer;
  transition:
    background-color 300ms,
    color 300ms;
}
/* Swiper's vendored ::after prints the literal strings "prev"/"next" — dropped, the
 * chevron is the SVG. */
.faaz-p-lokasi-nav::after {
  content: none;
}
.faaz-p-lokasi-nav:hover {
  background: #000;
  color: #fff;
}
.faaz-p-lokasi-nav svg {
  width: 25px;
  height: 25px;
}

/* Swiper container (2026-11-04, final): Swiper's own defaults, NOTHING added — no
 * padding, overflow:hidden from the vendored CSS (the clip that keeps the prev/next
 * slides out of view). The parent .faaz-p-lokasi-box class is removed from the markup.
 * Arrows stay at Swiper's default offset 0 (the container edge). */

/* Desktop: swipers off */
.faaz-p-lokasi-top,
.faaz-p-lokasi-strip {
  display: none;
}

@media (max-width: 767px) {
  .faaz-p-lokasi-grid {
    display: none;
  }
  .faaz-p-lokasi-top,
  .faaz-p-lokasi-strip {
    display: block;
  }
  /* 2026-11-04 (user): the -5 sides + padding-top belong to the BOTTOM mini strip only
   * (the top slider keeps display:block alone). The strip's box grows 5px past the page
   * edges so its overflow:hidden clip sits 5px OUTSIDE the slides' edge — the outer cards'
   * side shadow (reach 7 = blur 5 + spread 2) fits. padding-top 5 = top shadow room (the
   * strip clips at the padding edge, so the room is inside the clip). Swiper measures the
   * container width for slide widths: the -5 sides widen each slide by 10. */
  .faaz-p-lokasi-strip {
    margin-left: -5px;
    margin-right: -5px;
    padding-top: 5px;
    padding-bottom: 5px; /* 2026-11-04 (iOS): real bottom shadow room. The slide's bottom used to sit exactly on the overflow:hidden clip line (zero room), so iOS DPR rounding ate the last shadow row. +5px between the tiles and the section's 80px bottom padding. */
  }
  /* The top swiper's wrapper card (user spec 2026-11-04): the radius 8 + the card skin
   * shadow live HERE, not on the slides. The wrapper is the full-width row; overflow:hidden
   * makes the row corners round (the swiper's own overflow:hidden already rounds the
   * visible slide inside the radius). The shadow paints outside the wrapper (top, bottom
   * and the sides) — nothing above clips it, the parent .faaz-p-box is overflow:visible.
   * A slide's own edge shadow at the row edges is clipped by the swiper. */
  .faaz-p-lokasi-top-wrap {
    position: relative;
    border-radius: 8px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); /* user spec 2026-11-04 */
    overflow: hidden;
  }
  /* 2026-11-04 (user): the strip's margin-top is removed — the mini tiles own their own
   * shadow room (padding), and the top wrapper's shadow occupies the space between them. */
  .faaz-p-lokasi-mini .faaz-p-lokasi-label {
    left: 10px;
    bottom: 10px;
    font-size: 13px;
  }
  /* Mobile: the card-slider circle shrinks, same numbers as .faaz-pp-nav on ≤767
   * (30px circle, 18px chevron). Written after the base rule so the pair selector wins. */
  .faaz-p-lokasi-nav.swiper-button-prev,
  .faaz-p-lokasi-nav.swiper-button-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .faaz-p-lokasi-nav.swiper-button-prev svg,
  .faaz-p-lokasi-nav.swiper-button-next svg {
    width: 18px;
    height: 18px;
  }
}

/* 2026-11-03: the combined Keunggulan+Panduan section (.faaz-p-kp) is split; the intro
 * paragraph and the hairline separator are removed. The block's own render supplies
 * .faaz-keuang-clip, so the row needs no hand-written wrapper. Keunggulan = one section
 * (.faaz-p-keuang) with background #F9FAFB (user spec). */
.faaz-p-keuang {
  background: #f9fafb;
}

/* Panduan & Berita */

.faaz-p-panduan-sub {
  margin: 0 0 27px; /* user spec 2026-11-03: 27px below the Panduan sub line */
  color: var(--wp--preset--color--secondary);
  font-size: 16px;
}

/* ==========================================================================
   Blog archive (home.php, /blog/) — 2026-11-05. Plain divs, no wp-block /
   core-layout classes. The class names faaz-bl-* are the same names the
   block pattern uses, and every faaz.css rule for them is scoped to
   .faaz-bl-cover (the core cover element), which does not exist on this
   page — so the two stylesheets cannot collide. Numbers measured on the
   block template at 1280/1024/500 before the conversion.
   ========================================================================== */

/* Hero strip: the bg image (center/cover) under a white veil 0.3 (0.8 @M),
 * padding 80/20 sides (18 sides @M). The content sits above the veil. */
.faaz-bl-strip {
  position: relative;
  padding: 80px 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.faaz-bl-veil {
  position: absolute;
  inset: 0;
  background-color: #fff;
  opacity: 0.3;
}

/* The 1180 column, 20px child gaps (the pattern group's blockGap). */
.faaz-bl-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Title 18/lh1/700 with the live -0.48 tracking; margin-bottom 15 + the 20px
 * column gap = the measured 35px title→sub spacing. */
.faaz-bl-title {
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.48px;
  color: var(--wp--preset--color--primary);
}

.faaz-bl-sub {
  margin: 0;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.faaz-bl-sub-accent {
  color: var(--wp--preset--color--accent);
}

/* Intro: 50% of the column, LEFT-aligned (the live margin is 0 50% 0 0, so no
 * auto margins on the left). */
.faaz-bl-intro {
  margin: 0;
  width: 50%;
  font-size: 16px;
  line-height: 27px;
  color: var(--wp--preset--color--secondary);
}

/* The filter-row + grid wrapper: the pattern group's padding (hero→filter 30,
 * pagination→footer 100) is a faaz.css class rule (.faaz-bg-wrap); the
 * constrained layout core supplied here is written out — children capped at
 * 1180 with auto margins, and the 20px gap between the filter and the grid
 * (the grid's measured margin-top:20). */
.faaz-bg-wrap > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.faaz-bg-wrap > * + * {
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .faaz-bl-title {
    font-size: 16px;
    line-height: 16px;
  }

  .faaz-bl-sub {
    font-size: 28px;
  }

  .faaz-bl-intro {
    width: 64%;
  }
}

@media (max-width: 767px) {
  .faaz-bl-strip {
    padding: 80px 18px;
    /* user spec 2026-11-05: mobile anchors the photo to the RIGHT edge (the
     * house), not the centre — with cover, a narrow column shows the right slice. */
    background-position: right center;
  }

  .faaz-bl-veil {
    opacity: 0.8;
  }

  .faaz-bl-sub {
    font-size: 25px;
  }

  .faaz-bl-intro {
    width: 100%;
  }
}

/* ==========================================================================
   Single post (single-post.php) — background band + mobile featured image.
   .faaz-bl-bg is the full-bleed band the article sits in (user spec
   2026-11-05: #FAFBFD); .faaz-bl keeps its own 800px column + auto margins,
   so only the band paints. No padding: the band height = the article height.
   ========================================================================== */
.faaz-bl-bg {
  background-color: #fafbfd;
}

/* ==========================================================================
   Single post (single-post.php, 2026-11-05 — user spec: the photo centred on
   mobile). Desktop keeps the live .single .entry-img skin from faaz.css
   (36% cover band, radius 6, mb 32). Measured at a 500px viewport the band is
   425x153 while the photo is 778x282, so cover crops 64px top + 64px bottom
   (46% of the height). On mobile the figure therefore stops being a cover
   band and becomes a normal image block: whole photo, width 100%, centred.
   Same specificity as faaz.css and this file loads after it (dep 'faaz').
   ========================================================================== */
@media (max-width: 767px) {
  .faaz-bl-media {
    padding-top: 0;
    height: auto;
  }

  .faaz-bl-media img {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0;
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    object-fit: unset;
  }
}

/* ==========================================================================
   404 page (404.php, 2026-11-05) — live ref tools/reference/404-live-ref.html
   (BuddyBoss/Elementor page 7797): white section, min-height 80vh, content
   vertically centred, 0 padding; mobile section state = 50vh + 100px/20px
   padding. The row is the old block template's columns (40% mascot / 60% text,
   20px gap) inside the shared .faaz-p-box (inner 1180), so the % resolve
   against 1180 exactly. Numbers measured on the live page, same values the
   block version used in faaz.css (that section is now dead there).
   ========================================================================== */

/* Section (live 4b1ad6f): flex ROW, justify-content center, align-items center,
 * min-height 80vh (a FLOOR — content can push it taller), white, padding 0.
 * align-items:center is what keeps the mascot at its natural 232×345 (live). */
.faaz-p-404 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: var(--wp--preset--color--white);
}

/* The row sits in the shared .faaz-p-box (1220 + 20px sides → inner 1180, the live
 * e-con-inner). width:100% is REQUIRED here: the box is a FLEX item, and a flex
 * item with max-width + auto margins is fit-content sized, not stretched — the
 * first build measured the box at 704 (shrink-to-fit). (0,2,0) beats .faaz-p-box. */
.faaz-p-404 .faaz-p-box {
  width: 100%;
}

/* Live row: 40% / 60% containers, 20px gap (Elementor --width 40%/60% + gap 20;
 * the 20px overflow shrinks 40:60 → 464 + 696 at a 1180 row). */
.faaz-p-404-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
}

.faaz-p-404-media {
  flex: 0 1 40%;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.faaz-p-404-media img {
  max-width: 50%; /* live widget 10fec4b img{max-width:50%} → 232 of the 464 column */
  height: auto;
}

/* Text column: flex column, gap 20 (the block group's blockGap 20). Every child
 * carries margin:0 — the PHP template gets no core block defaults, so the 20px
 * rhythm comes only from this gap. */
.faaz-p-404-text {
  flex: 0 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.faaz-p-404-text > * {
  margin: 0;
}

/* Outlined "404" (live widget deb1765): 200px, 3px accent -webkit-text-stroke,
 * white fill — white on the white section reads as a hollow outline. Core has no
 * attribute for a text-stroke, so it lives in CSS in both versions. */
.faaz-p-404-num {
  font-size: 200px;
  font-weight: 800; /* user spec 2026-11-05 */
  line-height: 1;
  color: var(--wp--preset--color--white);
  -webkit-text-stroke: 3px var(--wp--preset--color--accent);
}

/* h2 = theme.json h2 (24px / 700) + the stored line-height 1, primary colour. */
.faaz-p-404-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--primary);
}

.faaz-p-404-desc {
  font-size: 15px;
  line-height: 1.6875;
}

/* Icon link row (live widget 3046a1e): 15px secondary text, 14px primary FA
 * glyphs as pseudo-elements, accent on hover. The vendored FA5 build's cmap is
 * OFFSET from standard FA5: house-user lives at U+E065 (verified with fontTools). */
.faaz-p-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 15px;
}
.faaz-p-404-links a {
  position: relative;
  padding-left: 22px;
  color: var(--wp--preset--color--secondary);
}
.faaz-p-404-links a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  color: var(--wp--preset--color--primary);
  transition: color 0.3s;
}
.faaz-p-404-links a:hover,
.faaz-p-404-links a:hover::before {
  color: var(--wp--preset--color--accent);
}
.faaz-p-404-links a:nth-child(1)::before {
  content: "\e065"; /* house-user */
}
.faaz-p-404-links a:nth-child(2)::before {
  content: "\f2bd"; /* user-circle */
}
.faaz-p-404-links a:nth-child(3)::before {
  content: "\f2b9"; /* address-book */
}
.faaz-p-404-links a:nth-child(4)::before {
  content: "\f781"; /* blog */
}

/* Mobile = the live section state (min-height 50vh, 100px/20px padding) + the
 * columns stacking inside the row (core .wp-block-columns wraps ≤780). Printed
 * after the desktop rules (same specificity) so order wins. */
@media (max-width: 767px) {
  .faaz-p-404 {
    min-height: 50vh;
    padding: 100px 20px;
  }

  .faaz-p-404-row {
    flex-wrap: wrap;
  }

  .faaz-p-404-media,
  .faaz-p-404-text {
    flex: 0 0 100%;
  }

  /* Numeral (user spec 2026-11-05): 120px (the live ≤767 value, widget deb1765)
   * pulled up 60px into the mascot. Written as a pair selector: the desktop
   * `.faaz-p-404-text > * { margin:0 }` is (0,2,0), so a single-class margin-top
   * here (0,1,0) would lose — pair + later order wins. */
  .faaz-p-404-text .faaz-p-404-num {
    font-size: 120px;
    margin-top: -60px;
  }

  /* Media column (user spec 2026-11-05): left-aligned, bleeding 20px past the
   * section's side padding, and pulling the text column up 90px (live 831fbb0
   * uses margin-top:-90px on the text column — same net overlap, written on the
   * media side). */
  .faaz-p-404-media {
    justify-content: start;
    margin-bottom: -90px;
    margin-left: -20px;
  }

  .faaz-p-404-media img {
    max-width: 180px;
  }

  .faaz-p-404-text {
    align-items: center;
    text-align: center;
  }

  .faaz-p-404-links {
    justify-content: center;
  }
}

/* ==========================================================================
   /perumahan-baru/ PHP archive (archive-perumahan-baru.php, 2026-11-05)
   Only the LAYOUT the FSE cover + constrained + flex groups supplied is
   written out here. The visual skins (faaz-pb-h1 / -pbs-panel / -pb-section /
   -pb-h2 / -pb-sort-col / -pg-grid) live in faaz.css and load on every page;
   php-template.css loads AFTER faaz.css, so any value the FSE stored inline on
   the desktop (hero padding, h1 30px, sort 232px, section 80/100) is re-declared
   at the DESKTOP width here and the responsive @media rules in faaz.css keep
   winning at their breakpoints (they are !important).
   ========================================================================== */

/* Hero: photo bg + flat black 0.5 overlay (::before), top-centre content,
 * content-driven height (no min-height). Desktop padding 20/20/180. */
.faaz-pb-hero {
  position: relative;
  background-color: #000;
  /* top-centre focal point — the FSE cover's focalPoint {x:0.5, y:0.16}
   * (object-position:50% 16%), so the house sits in the upper band. */
  background-position: 50% 16%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 20px 20px 180px;
}

.faaz-pb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Hero content column: the 1180 constrained cap, centred, above the overlay.
 * align-items:stretch (not center) so the breadcrumb spans the column and sits
 * left; h1 + panel self-centre (hero-inner + panel margin auto). */
.faaz-pb-hero-col {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.faaz-pb-hero-col .faaz-crumbs {
  width: 100%;
}

/* h1 + search panel column (the 120px below the breadcrumb + responsive are
 * carried by .faaz-pb-hero-inner in faaz.css). */
.faaz-pb-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.faaz-pb-hero .faaz-pb-h1 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

/* White section: desktop padding 80 top / 100 bottom (the FSE stored inline);
 * sides 0 desktop, 20 from tablet (@1024 !important rule in faaz.css). */
.faaz-pb-section {
  padding: 80px 0 100px;
}

/* Constrained 1180 column for the section body (head row + grid). */
.faaz-pb-col {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Heading row: h2 + 232px sort column, bottom-aligned, gap 20, 20px above the
 * grid (the grid's 40px top margin in faaz.css collapses with this 20 to 40). */
.faaz-pb-headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}

/* Sort column width is desktop-only so the tablet (190) + mobile (100%) rules in
 * faaz.css keep winning below 1025. */
@media (min-width: 1025px) {
  .faaz-pb-sort-col {
    flex: 0 0 232px;
  }
}

/* ==========================================================================
   Developer archive / single + Agen archive / single + Search / Properti
   Pilihan root / Singular pages (2026-11-05, all PHP templates).
   Layout core supplied by the FSE patterns is written out; the skins +
   responsive paddings live in faaz.css (faaz-dv-* / faaz-ag-*). The desktop
   values the pattern groups stored inline (band paddings, h1/h2/h3 type, the
   232px sort column, the form-box border) are re-declared at DESKTOP width
   here; php-template.css loads after faaz.css so the responsive @media rules
   in faaz.css (they are !important) keep winning below their breakpoints.
   ========================================================================== */

/* Singular page shell: a plain DEFAULT-flow main (no constrained cap),
 * blockGap 0, margin-top 0 — the page's own sections go full-bleed. */
.faaz-p-main {
  margin-top: 0;
}

/* --- /developer/ archive -------------------------------------------------- */
.faaz-dv-crumb-sec {
  padding: 15px 0;
}

.faaz-dv-hero {
  padding: 30px 0 20px;
}

.faaz-dv-hero-in {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faaz-dv-hero .faaz-dv-h1 {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.faaz-dv-sec {
  padding: 50px 0 100px;
}

.faaz-dv-h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* --- /agen-properti/ archive --------------------------------------------- */
.faaz-ag-main {
  padding: 80px 0 100px;
}

.faaz-ag-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}

.faaz-ag-hcol {
  flex: 1 1 auto;
  min-width: 0;
}

.faaz-ag-head .faaz-ag-h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

.faaz-ag-form-sec {
  padding: 100px 0;
}

.faaz-ag-form-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: auto;
}

.faaz-ag-form-inner .faaz-ag-h3 {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

/* The form box border + vertical padding the FSE group stored inline (the
 * side padding + responsive live in faaz.css). */
.faaz-ag-form-box {
  padding-top: 30px;
  padding-bottom: 50px;
  background-color: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 8px;
}

@media (min-width: 1025px) {
  .faaz-ag-sort-col {
    flex: 0 0 232px;
  }
}

/* --- single agen-properti: the "Listing Properti" band ------------------ */
.faaz-ag-list {
  padding: 50px 0 80px;
  background-color: #fff;
}

.faaz-ag-list .faaz-ag-title {
  margin: 0 0 40px;
  color: var(--wp--preset--color--primary);
  line-height: 1;
}

/* ==========================================================================
 * Header / footer (plain-PHP structure) — classic-theme pivot, 2026-11-05.
 * header.php / footer.php emit plain faaz-* divs (no core block markup, no
 * wp-block wrapper classes). The layout core used to supply from the block
 * attributes (constrained 1180 cap + auto margins, flex rows, selfStretch
 * flex-grow, justify, gap, min-height, sticky, shadow, border, padding) is
 * written out here. Values mirror the old block attributes exactly.
 * ========================================================================== */

/* --- Top bar (hidden < 768px via faaz-hide-mobile) --- */
.faaz-topbar {
  background-color: #fff;
  padding-left: var(--wp--preset--spacing--50);
  padding-right: var(--wp--preset--spacing--50);
}

.faaz-topbar-inner {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  min-height: 39px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
  padding: 10px 0;
}

/* --- Main bar (pure CSS sticky: position:sticky in this rule) --- */
.faaz-mainbar {
  background-color: #fff;
  box-shadow: var(--wp--preset--shadow--bar);
  border-top: 1px solid #cfcfcf;
  padding: 11.5px 20px;
  position: sticky;
  top: 0;
  z-index: 99;
}

.faaz-mainbar-row {
  /* was layout:constrained → 1180 cap + auto margins. */
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

/* Logo column: selfStretch "fixed" → does not grow; padding-right spacing--40. */
.faaz-logo {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  padding-right: var(--wp--preset--spacing--40);
}

.faaz-logo .custom-logo {
  display: block;
  width: 82px;
  height: auto;
}

/* Nav + CTA column: selfStretch "fill" → flex-grow:1; right-aligned, gap 20. */
.faaz-nav {
  flex-grow: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

/* Pasang Iklan CTA — the core/button skin written out (theme.json core/button:
 * padding 10/15, radius 5, 11px/lh11/400, cta shadow), no wp-block class. */
.faaz-cta {
  display: inline-flex;
}

.faaz-cta-link {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 11px;
  font-weight: 400;
  text-decoration: none;
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--blue);
  box-shadow: var(--wp--preset--shadow--cta);
}

/* Mobile: logo shrinks; nav column drops its gap and hugs the right edge. */
@media (max-width: 767px) {
  .faaz-logo .custom-logo {
    width: 74px;
    height: auto;
  }
  .faaz-nav {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-end;
    align-items: center;
  }
}

/* --- Footer inner column (was a layout:constrained child core capped at
 * content-size + auto side margins; the plain div needs it written out).
 * faaz.css keeps the grid rules on this selector; these add the 1180 cap +
 * centring. php-template.css prints after faaz.css (same specificity). --- */
.faaz-footer > .faaz-inner {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

/* --- Footer copy bar (the dark bar: bg + hairline top + type) --- */
.faaz-footer-copy {
  background-color: var(--wp--preset--color--dark);
  border-top: 1px solid var(--wp--preset--color--white);
  padding-top: 20px;
  padding-bottom: 20px;
}

.faaz-footer-copy-text {
  margin: 0;
  color: #dadada;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-size: var(--wp--preset--font-size--13);
  text-align: center;
}

.faaz-footer-copy-text a {
  color: #dadada;
}