/* putihh.com: de-junk build overrides. Small, hand-written, no magic numbers. */

/* Swiper 11 renders on the same .swiper-wrapper/.swiper-slide markup as the
   old Swiper 3 the theme shipped with; only the root class changed
   (swiper-container -> swiper). See assets/js/site.js for init. */

/* Scroll-linked parallax bands (replaces WPBakery + skrollr, quarantined). */
.brxy-parallax-band {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: background-position;
}

/* Vertical spacer, replaces WPBakery's vc_empty_space divs. */
.spacer { display: block; }

/* Utility: zero left/right padding on a row when it must sit flush
   (replaces WPBakery's per-row vc_custom_XXXX hash classes). */
.u-flush { padding-left: 0; padding-right: 0; }

/* Isotope filter: active state (theme CSS already styles .active via
   :before underline on .filter-buttons .brxy-menu > li > a.active). */

/* Contact / about page real-content cards reuse .contact-list and
   .location-list from brixey-styles.css as-is. */

/* Hover reveals (theme originally toggled a .brxy-hover class via jQuery
   .hover(); replaced with plain CSS :hover/:focus-within, same visual
   result, no JS required, works for keyboard focus too). */
.swiper-slide:hover .brxy-expand-btn,
.swiper-slide:focus-within .brxy-expand-btn {
  opacity: 1;
  transform: scale(1);
}
.gallery-item:hover .gallery-wrap:before,
.gallery-item:hover .gallery-label {
  opacity: 1;
}
.project-list:hover .project-picture img {
  transform: scale(1.08);
}

/* Fix: on project detail pages the theme makes .brxy-header position:fixed
   (via .brxy-full-page, needed so the fullscreen slider runs edge to edge)
   but .brxy-header keeps a solid white background: the theme's own
   "transparent header" option has no matching CSS anywhere in the capture,
   so it never did anything, live site included. Left as captured, the
   fixed opaque header sits on top of the "Details" toggle and the
   prev/next controls at their default top:20px, making both unclickable.
   Nudging them below the header's real height (~68px) is the minimal fix;
   nothing else about the layout changes. */
.brxy-full-page .brxy-sinlge-detail.fullscreen .brxy-info-btn {
  top: 88px;
}
.brxy-full-page .brxy-sinlge-detail.fullscreen .brxy-expand-btn {
  top: 88px;
}
.brxy-full-page .brxy-project-detail .project-controls {
  top: 68px;
}

/* Change 1: more breathing room between the Prev/grid/Next nav bar and the
   project name. Theme shipped .project-title with margin-bottom only; add
   margin-top so the title doesn't sit flush under the nav row's border. */
.brxy-project-detail .project-title {
  margin-top: 26px;
}

/* Change 2: drop the solid black square behind the swiper prev/next arrows.
   Arrow glyph (FontAwesome, via ::before, inherits color/text-shadow) stays
   white with a soft shadow for contrast on light photo areas, no box. */
.swiper-button-prev,
.swiper-button-next {
  background: transparent;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.5);
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: transparent;
  opacity: 0.75;
}

/* Change 3: main footer text size, matching the address-block size
   (.brxy-footer p is 14px). Column headings, contact links, and the address
   block inherit 14px from here; logo is an <img> with explicit width/height
   attributes, unaffected by font-size. The bottom .brxy-secondary-footer bar
   (copyright + tagline) is a separate element, not touched here, so it keeps
   the theme's own original size (brixey-styles.css, ~10px). */
.brxy-footer {
  font-size: 14px;
}

/* Change 4: the project-page carousel was showing two arrows per side, a
   big one and a small one overlapping it. Swiper 11's own default CSS
   (vendor-swiper-11.2.6.min.css) draws a glyph via ::after (swiper-icons
   font). The theme's CSS (brixey-styles.css, built for the old Swiper 3)
   separately draws a smaller FontAwesome glyph via ::before on the same
   button. Both fire since both stylesheets are loaded. Drop the theme's
   ::before glyph, keep Swiper's own ::after arrow as the single glyph. */
.swiper-button-prev:before,
.swiper-button-next:before {
  content: none;
}

/* Change 5: home hero title ("UNIQUE HOMES IN PARADISE") matches the
   heading typeface used across the sibling umahdibali.com site (Playfair
   Display, self-hosted, see fonts.css). Family only, size unchanged. */
.brxy-heading-wrap .brxy-heading {
  font-family: 'Playfair Display', serif;
}

/* Change 6: breathing room between the hero slider and the intro title
   ("Unique locations..."). Theme shipped 0 top margin, title sat flush
   under the slider. */
.brxy-about .about-title {
  margin-top: 56px;
}
@media screen and (max-width: 767px) {
  .brxy-about .about-title {
    margin-top: 36px;
  }
}

/* Change 7: intro body copy under the title matches the "WHY INVEST IN
   BALI?" section's body copy (colour already matched at 777777 via the
   theme's global p rule; font-size didn't, 16px vs 15px). */
.brxy-about .about-description p {
  font-size: 15px;
}

/* Change 8: project-detail "Details" panel (.brxy-project-detail) is
   position:fixed with top:0/bottom:0, a bounded box with no overflow
   rule, so content taller than the viewport was clipped, not scrollable. */
.brxy-sinlge-detail .brxy-project-detail {
  overflow-y: auto;
}

/* Change 9: home project tiles now wrap the image in the same <a> as the
   title (build.py). The theme's own hover-tint layer (.project-picture:
   before, opacity:0, position:absolute, z-index:1) sits above that link in
   the stacking order and silently ate every click. It's decorative only
   (never visible, only ever toggled by a .brxy-hover class this build
   doesn't use); let clicks pass through to the link underneath. */
.project-picture:before {
  pointer-events: none;
}

/* Change 10: home project-tile images (build.py, home_grid_order) come from
   four different source photos at four different native aspect ratios.
   width:100% with no fixed height (the theme default) let each tile take
   its own image's aspect ratio, so tiles of different heights sat side by
   side in the same row. A fixed 16:9 box plus object-fit:cover crops any
   source photo to one identical tile height, never stretches it (the
   theme default was `width:100%` with intrinsic height, not `fill`; cover
   is the belt-and-braces choice regardless of source aspect). */
.project-listings.style1 .project-picture {
  aspect-ratio: 16 / 9;
}
.project-listings.style1 .project-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}