/*
 * Sompura Sthapati — blog / archive design layer
 * Scope: the Elementor archive template (.elementor-766) only.
 * Palette locked to the site's existing heritage tokens (gold / marble / ink).
 * Radius system: pills (interactive) = 999px, cards = 12px, chips = 999px. No mixing.
 */

.elementor-766 {
  --sp-gold: #C9A84C;
  --sp-gold-light: #E8D5A3;
  --sp-brown: #8B4513;
  --sp-cream: #FAF6F0;
  --sp-ink: #2C2420;
  --sp-deep: #1A1512;
  --sp-muted: rgba(44, 36, 32, 0.72);
  --sp-hairline: rgba(201, 168, 76, 0.24);
  --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 1. Masthead band ---------- */

.elementor-766 .elementor-element-7263e6a {
  position: relative;
  overflow: hidden;
  padding: 4.25rem 1.5rem 3.25rem !important;
  background-color: var(--sp-deep);
  border-bottom: 1px solid var(--sp-hairline);
}

/* Legibility scrim + Vastu pada lattice, drawn as a layer ABOVE whatever
   background image the Elementor template carries. The photo stays editable
   in Elementor; this only guarantees the title's contrast. */
.elementor-766 .elementor-element-7263e6a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(0deg, transparent 96%, rgba(201, 168, 76, 0.09) 96%),
    linear-gradient(90deg, transparent 96%, rgba(201, 168, 76, 0.09) 96%),
    radial-gradient(120% 92% at 50% -10%, rgba(201, 168, 76, 0.22) 0%, rgba(26, 21, 18, 0) 62%),
    linear-gradient(180deg, rgba(26, 21, 18, 0.95) 0%, rgba(26, 21, 18, 0.86) 55%, rgba(26, 21, 18, 0.96) 100%);
  background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%;
}

.elementor-766 .elementor-element-7263e6a > .e-con-inner {
  position: relative;
  z-index: 2;
}

.elementor-766 .elementor-element-7263e6a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 88px;
  height: 2px;
  z-index: 3;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(201, 168, 76, 0), var(--sp-gold), rgba(201, 168, 76, 0));
}

.elementor-766 .elementor-element-7263e6a .elementor-heading-title {
  color: var(--sp-gold-light) !important;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem) !important;
  letter-spacing: 0.09em !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  /* the masthead photo varies, so the display type carries its own contrast */
  text-shadow: 0 2px 18px rgba(26, 21, 18, 0.55);
}

/* breadcrumbs inside the band: kill the stray 125px top margin, lighten */
.elementor-766 .elementor-element-7263e6a .elementor-widget-breadcrumbs {
  margin-top: 0.9rem !important;
}
.elementor-766 .elementor-element-7263e6a .elementor-widget-breadcrumbs,
.elementor-766 .elementor-element-7263e6a .elementor-widget-breadcrumbs a {
  /* was 0.72 alpha over a photographic band: too thin for 18px text */
  color: #F7F1E4 !important;
  text-shadow: 0 1px 5px rgba(26, 21, 18, 0.95);
}
.elementor-766 .elementor-element-7263e6a .elementor-widget-breadcrumbs a:hover {
  color: var(--sp-gold-light) !important;
}

/* ---------- 2. Standfirst + topic rail ---------- */

.sp-topics {
  padding: 2.5rem 1.5rem 0.5rem;
  text-align: center;
}

.sp-topics__standfirst {
  max-width: 60ch;
  margin: 0 auto 1.75rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--sp-muted);
}

.sp-topics__label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-brown);
}

.sp-topics__rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  max-width: 1000px;
}

.sp-topics__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--sp-hairline);
  border-radius: 999px;
  background: var(--sp-cream);
  color: var(--sp-ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateZ(0);
  transition: color 0.28s var(--sp-ease), border-color 0.28s var(--sp-ease),
    background-color 0.28s var(--sp-ease), transform 0.28s var(--sp-ease);
}

.sp-topics__pill:hover,
.sp-topics__pill:focus-visible {
  border-color: var(--sp-gold);
  color: var(--sp-brown);
  transform: translateY(-2px);
}

.sp-topics__pill[aria-current="page"] {
  background: linear-gradient(135deg, #D6B65C, var(--sp-gold));
  border-color: var(--sp-gold);
  color: var(--sp-deep);
}

/* ---------- 3. Post cards ---------- */

/* Editorial 2-up rhythm instead of the generic 3-equal-cards row.
   Elementor ships elementor-grid-3 on this widget; override by widget id. */
@media (min-width: 768px) {
  .elementor-766 .elementor-element-5700894 .elementor-posts-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 2rem !important;
    row-gap: 2.25rem !important;
  }
}

.elementor-766 .elementor-posts-container .elementor-post__card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sp-hairline) !important;
  border-radius: 12px !important;
  background: var(--sp-cream) !important;
  box-shadow: 0 1px 0 rgba(201, 168, 76, 0.08);
  transition: transform 0.4s var(--sp-ease), box-shadow 0.4s var(--sp-ease),
    border-color 0.4s var(--sp-ease);
}

.elementor-766 .elementor-posts-container .elementor-post__card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 168, 76, 0.55) !important;
  /* shadow tinted to the warm background, never pure black */
  box-shadow: 0 18px 38px rgba(88, 62, 26, 0.13);
}

.elementor-766 .elementor-post__thumbnail {
  overflow: hidden;
  /* Elementor ships item_ratio 0.76 (portrait) and object-fit: fill, which
     stretches the photograph. Force a 16:10 crop and cover instead. */
  padding-bottom: 62.5% !important;
}
.elementor-766 .elementor-post__thumbnail img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}
.elementor-766 .elementor-post__thumbnail img {
  transition: transform 0.7s var(--sp-ease);
}
.elementor-766 .elementor-post__card:hover .elementor-post__thumbnail img {
  transform: scale(1.045);
}

/* category badge: was #F98012 (off-brand orange) -> heritage gold */
.elementor-766 .elementor-post__badge {
  background: linear-gradient(135deg, #D6B65C, var(--sp-gold)) !important;
  color: var(--sp-deep) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  padding: 0.28rem 0.8rem !important;
}

.elementor-766 .elementor-post__text {
  padding: 1.35rem 1.4rem 1.6rem !important;
}

.elementor-766 .elementor-post__title,
.elementor-766 .elementor-post__title a {
  color: var(--sp-ink) !important;
  font-size: clamp(1.08rem, 1.5vw, 1.32rem) !important;
  line-height: 1.28 !important;
}
.elementor-766 .elementor-post__title a:hover {
  color: var(--sp-brown) !important;
}

.elementor-766 .elementor-post__excerpt p {
  margin: 0.7rem 0 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.68 !important;
  color: var(--sp-muted) !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.elementor-766 .elementor-post__meta-data {
  margin-top: 0.85rem !important;
  color: rgba(139, 69, 19, 0.82) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
}

/* ---------- 4. Load more ---------- */

.elementor-766 .elementor-pagination,
.elementor-766 .e-load-more {
  margin-top: 3rem !important;
}

.elementor-766 .e-load-more-button,
.elementor-766 .elementor-button {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.85rem 2.2rem !important;
  background: linear-gradient(135deg, #D6B65C 0%, var(--sp-gold) 45%, var(--sp-brown) 100%) !important;
  color: #FFF8E9 !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  transition: transform 0.3s var(--sp-ease), box-shadow 0.3s var(--sp-ease);
}
.elementor-766 .e-load-more-button:hover,
.elementor-766 .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(139, 69, 19, 0.28);
}

/* ---------- 5. Reveal on scroll ---------- */
/* Hidden state applies ONLY when JS is present, so a JS failure leaves content visible. */

.js .elementor-766 .sp-reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js .elementor-766 .sp-reveal.sp-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--sp-ease), transform 0.6s var(--sp-ease);
  transition-delay: calc(var(--sp-i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .elementor-766 .sp-reveal,
  .js .elementor-766 .sp-reveal.sp-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .elementor-766 .elementor-post__card,
  .elementor-766 .elementor-post__thumbnail img,
  .sp-topics__pill {
    transition: none !important;
  }
}

/* ---------- 6. Responsive ---------- */

@media (max-width: 921px) {
  .elementor-766 .elementor-element-7263e6a {
    padding: 3.25rem 1.25rem 2.5rem !important;
  }
  .sp-topics {
    padding: 2rem 1rem 0.25rem;
  }
  .elementor-766 .elementor-post__text {
    padding: 1.15rem 1.15rem 1.35rem !important;
  }
}

@media (max-width: 767px) {
  /* topic rail becomes a swipeable strip instead of a tall wrapped block */
  .sp-topics__rail {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    scrollbar-width: none;
  }
  .sp-topics__rail::-webkit-scrollbar { display: none; }
  .sp-topics__pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .elementor-766 .elementor-posts-container {
    grid-template-columns: 1fr !important;
  }
}