/* ==========================================================================
   Homepage "Property corner" (resources/views/partials/property-promo.blade.php)
   Uses the brand tokens from app.css; loaded on the homepage only.
   ========================================================================== */
.pp-section { padding: 1.5rem 0 1.75rem; }
.pp-section.pp-overlap { position: relative; z-index: 2; margin-top: -3rem; padding-top: 0; }
@media (max-width: 767.98px) { .pp-section.pp-overlap { margin-top: -2.1rem; } }

.pp-panel { background: #fff; border-radius: 24px; padding: 1.35rem; box-shadow: var(--kb-shadow-lg); border: 1px solid rgba(228, 232, 240, .8); }
@media (max-width: 575.98px) { .pp-panel { padding: .9rem; border-radius: 20px; } }

.pp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; }
.pp-kicker { display: inline-flex; align-items: center; gap: .35rem; font-family: "Hind Siliguri", sans-serif; font-weight: 700; font-size: .85rem; color: var(--kb-red); background: var(--kb-red-50); padding: .2rem .7rem; border-radius: 999px; margin-bottom: .35rem; }
.pp-head h2 { font-family: "Hind Siliguri", var(--bs-body-font-family); font-weight: 700; font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem); color: var(--kb-navy); margin: 0; line-height: 1.3; }
.pp-hl { background: linear-gradient(90deg, var(--kb-blue), var(--kb-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-post { display: inline-flex; align-items: center; gap: .4rem; font-family: "Hind Siliguri", sans-serif; font-weight: 700; font-size: .92rem; color: var(--kb-navy); background: var(--kb-gold-50); border: 1.5px solid var(--kb-gold); padding: .45rem .95rem; border-radius: 999px; transition: background .2s, transform .2s var(--kb-ease); white-space: nowrap; }
.pp-post i { color: var(--kb-gold-600); }
.pp-post:hover { background: var(--kb-gold); color: var(--kb-navy); transform: translateY(-1px); }
@media (max-width: 575.98px) { .pp-post { font-size: .82rem; padding: .35rem .8rem; } }

/* Grid: the first card leads (wider on desktop, full row on smaller screens) */
.pp-grid { display: grid; gap: 1rem; grid-template-columns: 1.45fr 1fr 1fr; }
@media (max-width: 991.98px) { .pp-grid { grid-template-columns: 1fr 1fr; } .pp-sale { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .pp-grid { gap: .65rem; } }

/* Card */
.pp-card { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: 236px; border-radius: 20px; color: #fff; text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(11, 21, 51, .55); transition: transform .35s var(--kb-ease), box-shadow .35s var(--kb-ease);
  animation: pp-rise .7s var(--kb-ease) both; animation-delay: var(--d, 0ms); }
.pp-card:hover, .pp-card:focus-visible { color: #fff; transform: translateY(-6px); box-shadow: 0 26px 46px -18px rgba(11, 21, 51, .6); }
.pp-card:focus-visible { outline: 3px solid var(--kb-gold); outline-offset: 3px; }
.pp-card::before { /* soft light blob */ content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -90px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); transition: transform .6s var(--kb-ease); }
.pp-card:hover::before { transform: translate(-30px, 20px) scale(1.1); }

.pp-sale { background: radial-gradient(420px 260px at 100% 0%, rgba(255, 194, 26, .28), transparent 60%), linear-gradient(135deg, var(--kb-blue-900) 0%, var(--kb-blue-700) 35%, var(--kb-blue) 75%, #1667E8 100%); min-height: 270px; }
.pp-sale::after { /* gold frame marks the featured card */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(120deg, var(--kb-gold), rgba(255, 194, 26, .15) 35%, rgba(255, 255, 255, .1) 60%, var(--kb-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pp-rent { background: radial-gradient(300px 220px at 100% 0%, rgba(255, 194, 26, .25), transparent 60%), linear-gradient(135deg, #8E0910 0%, var(--kb-red-600) 45%, #F0353B 100%); }
.pp-share { background: radial-gradient(300px 220px at 100% 0%, rgba(255, 194, 26, .22), transparent 60%), linear-gradient(135deg, var(--kb-navy) 0%, #18265A 55%, #26408F 100%); }

/* Moving highlight on hover */
.pp-shine { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 46%, transparent 60%); transform: translateX(-120%); }
.pp-card:hover .pp-shine { transform: translateX(120%); transition: transform .9s var(--kb-ease); }

.pp-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 1.25rem 1.3rem 1.15rem; width: 64%; }
.pp-sale .pp-body { width: 58%; padding: 1.5rem 1.6rem 1.35rem; }
.pp-badge { display: inline-flex; align-items: center; gap: .3rem; font-family: "Hind Siliguri", sans-serif; font-weight: 700; font-size: .78rem; color: var(--kb-navy);
  background: linear-gradient(90deg, var(--kb-gold), #FFE07A, var(--kb-gold)); background-size: 200% 100%; padding: .18rem .65rem; border-radius: 999px; margin-bottom: .7rem;
  box-shadow: 0 4px 14px -4px rgba(255, 194, 26, .7); animation: pp-gleam 3.2s linear infinite; }
.pp-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); font-size: 1.3rem; color: var(--kb-gold); margin-bottom: .7rem; backdrop-filter: blur(4px); transition: transform .35s var(--kb-ease); }
.pp-card:hover .pp-icon { transform: rotate(-8deg) scale(1.08); }
.pp-title { font-family: "Hind Siliguri", var(--bs-body-font-family); font-weight: 700; color: #fff; font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem); line-height: 1.3; margin: 0 0 .3rem; text-wrap: balance; }
.pp-sale .pp-title { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem); }
.pp-text { font-family: "Hind Siliguri", var(--bs-body-font-family); font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .85); margin: 0 0 .35rem; }
.pp-en { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.pp-foot { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pp-count { display: inline-flex; align-items: center; gap: .4rem; font-family: "Hind Siliguri", sans-serif; font-weight: 600; font-size: .82rem; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); padding: .2rem .65rem; border-radius: 999px; }
.pp-dot { width: 7px; height: 7px; border-radius: 50%; background: #3BE07F; box-shadow: 0 0 0 0 rgba(59, 224, 127, .6); animation: pp-pulse 2s infinite; }
.pp-cta { display: inline-flex; align-items: center; gap: .35rem; font-family: "Hind Siliguri", sans-serif; font-weight: 700; font-size: .9rem; color: var(--kb-navy); background: #fff; padding: .38rem .9rem; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); transition: background .2s, gap .25s var(--kb-ease); }
.pp-sale .pp-cta { background: var(--kb-gold); }
.pp-card:hover .pp-cta { gap: .6rem; }

/* Illustration */
.pp-art { position: absolute; z-index: 1; right: -4px; bottom: -6px; width: 46%; max-width: 250px; height: auto; transition: transform .5s var(--kb-ease); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .25)); }
.pp-sale .pp-art { width: 50%; max-width: 360px; right: 0; }
.pp-card:hover .pp-art { transform: translate(-6px, -6px) scale(1.05); }
.pp-float { animation: pp-float 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* Trust strip */
.pp-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; margin: 1rem 0 0; padding: 0; font-family: "Hind Siliguri", sans-serif; font-size: .88rem; font-weight: 600; color: var(--kb-muted); }
.pp-trust i { color: var(--kb-green); margin-right: .25rem; }

/* Tablet & phone: the two secondary cards sit side by side in a compact layout */
@media (max-width: 991.98px) {
  .pp-sale { min-height: 230px; }
  .pp-rent, .pp-share { min-height: 210px; }
  .pp-rent .pp-body, .pp-share .pp-body { width: 100%; padding-bottom: 1rem; }
  .pp-rent .pp-art, .pp-share .pp-art { width: 52%; opacity: .32; right: -14px; bottom: -10px; }
}
@media (max-width: 575.98px) {
  .pp-card { border-radius: 16px; }
  .pp-sale { min-height: 205px; }
  .pp-sale .pp-body { width: 64%; padding: 1rem 1rem .95rem; }
  .pp-sale .pp-art { width: 52%; right: -10px; }
  .pp-rent, .pp-share { min-height: 0; }
  .pp-rent .pp-body, .pp-share .pp-body { padding: .85rem .8rem .8rem; }
  .pp-icon { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 11px; margin-bottom: .5rem; }
  .pp-badge { font-size: .7rem; margin-bottom: .5rem; }
  .pp-title { font-size: 1rem; }
  .pp-sale .pp-title { font-size: 1.3rem; }
  .pp-text { font-size: .8rem; }
  .pp-rent .pp-text, .pp-share .pp-text, .pp-rent .pp-en, .pp-share .pp-en { display: none; }
  .pp-foot { padding-top: .6rem; gap: .4rem; }
  .pp-rent .pp-count, .pp-share .pp-count { display: none; }
  .pp-cta { font-size: .8rem; padding: .3rem .75rem; }
  .pp-trust { font-size: .78rem; gap: .3rem 1rem; margin-top: .8rem; }
}

@keyframes pp-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } } /* "translate", not "transform": keeps the hover lift working */
@keyframes pp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pp-gleam { to { background-position: -200% 0; } }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 224, 127, .6); } 70% { box-shadow: 0 0 0 7px rgba(59, 224, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 224, 127, 0); } }

@media (prefers-reduced-motion: reduce) {
  .pp-card, .pp-float, .pp-badge, .pp-dot { animation: none; }
  .pp-card, .pp-art, .pp-icon, .pp-shine, .pp-card::before { transition: none; }
  .pp-card:hover { transform: none; }
  .pp-card:hover .pp-shine { transform: translateX(-120%); }
}

/* The categories panel normally tucks under the hero (.overlap-up); not when this section sits in between */
.pp-section + .section .overlap-up { margin-top: 0; }