/* ==========================================================================
   Homepage-specific styles (moved from Additional CSS)
   ========================================================================== */

/* --- Hero --- */
.header-hero{ height:auto; max-height:150px; padding:3rem; }
.header-hero.header-hero--cover.header-hero--large{ background-position:center -70px; }
.header-hero .container{ margin-top:-50px; }
.header-hero .container .wp-block-heading{ margin-bottom:-.1rem; margin-top:1rem; font-size:2rem; }

body.home .hp-form--listing-search { border-radius: 3rem !important; overflow: hidden; }


/* --- Section Title Hover Icons (slide + reveal, no flicker) --- */
:root{
  --icon-size: 40px;
  --icon-gap: 9px;
}

.content-title a{
  position: relative;                /* anchor for ::before / ::after */
  display: inline-block;             /* stable inline box */
  transition: transform .3s ease;
  will-change: transform;
}

/* Slide the text left to “make room” for the icon */
.content-title a:hover{
  transform: translateX(calc(-1 * ((var(--icon-size) + var(--icon-gap)) / 2)));
}

/* Invisible hover corridor: keeps hover active across the gap */
.content-title a::before{
  content: "";
  position: absolute;
  top: -6px;                          /* small vertical forgiveness */
  bottom: -6px;
  left: 0;
  /* extend to the right by icon size + gap so the cursor never leaves hover */
  right: calc(-1 * (var(--icon-size) + var(--icon-gap)));
  background: transparent;
  pointer-events: auto;               /* ensure it participates in hover */
}

/* Icon that fades in to the right of the link */
.content-title a::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(var(--icon-gap), -50%);
  width: var(--icon-size);
  height: var(--icon-size);

  /* Use mask so we can set an exact color */
  background-color: #333333;
  -webkit-mask: var(--icon-url) center/contain no-repeat;
          mask: var(--icon-url) center/contain no-repeat;

  opacity: 0;
  transition: opacity .3s ease;
}

.content-title a:hover::after{
  opacity: 1;
}

/* Per-link icon sources (unchanged) */
.content-title a[href*="/listing-category/full-gyms/"]{ --icon-url: url("/wp-content/uploads/2025/06/weights.png"); }
.content-title a[href*="/listing-category/yoga-studios/"]{ --icon-url: url("/wp-content/uploads/2025/08/yoga.png"); }
.content-title a[href*="/listing-category/pilates-studios/"]{ --icon-url: url("/wp-content/uploads/2025/06/pilates-2.png"); }
.content-title a[href*="/listing-category/cross-training-gyms/"]{ --icon-url: url("/wp-content/uploads/2025/06/battle-rope.png"); }
.content-title a[href*="/listing-category/mma-gyms/"]{ --icon-url: url("/wp-content/uploads/2025/06/martial-arts.png"); }
.content-title a[href*="/listing-category/dance-studios/"]{ --icon-url: url("/wp-content/uploads/2025/08/dancing.png"); }



/* Category cards: no dimming, always “lit” */
body.home .hp-listing-categories .hp-listing-category--view-block,
body.home .hp-listing-categories .hp-listing-category--view-block *{
  filter: none !important;
  opacity: 1 !important;
}
body.home .hp-listing-categories .hp-listing-category--view-block::before,
body.home .hp-listing-categories .hp-listing-category--view-block::after,
body.home .hp-listing-categories .hp-listing-category--view-block *::before,
body.home .hp-listing-categories .hp-listing-category--view-block *::after{
  content: none !important;
  background: transparent !important;
}



/* Reduce vertical space between sections */
body.home .hp-listings-wrapper + .content-title { margin-top: -2rem !important; }
body.home .hp-listings-wrapper.no-scroll + .content-title { margin-top: -1rem !important; }
@media (max-width: 767px){
  body.home .hp-listings-wrapper + .content-title { margin-top: -3rem !important; }
  body.home .hp-listings-wrapper.no-scroll + .content-title { margin-top: -2rem !important; }
}

/* Normalize featured-row gap (mobile) */
@media (max-width: 767px){
  body.home .hp-listings-wrapper { margin-bottom: 2px; }
}

/* --- Category Cards Row --- */
body.home .hp-listing-categories .hp-row { display: contents; }
body.home .hp-listing-categories{
  position:relative; display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
  gap:.75rem !important; padding-bottom:1rem; padding-top:7px !important; align-items:stretch; scrollbar-width:none;
}
body.home .hp-listing-categories::-webkit-scrollbar{ display:none; }
.home .hp-listing-categories .hp-grid__item{ padding:0 !important; flex-basis:24%; max-width:24%; }
.home .hp-listing-categories .hp-listing-category{ border-radius:.8rem; overflow:hidden; position:relative; }
.home .hp-listing-categories .hp-listing-category img{ transform:scale(1.1); }
.home .hp-listing-categories .hp-listing-category__count{ display:none; }
.home .hp-listing-categories .hp-listing-category__content{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:1.2rem 1rem;
}
/* Ensure title container is centered and spans full width */
.home .hp-listing-category--view-block h3.hp-listing-category__name{
  margin: 0;
  width: 100%;
  text-align: center !important;
  display: block;
}

/* Additional Category Titles — simple dark outer glow */
.home .hp-listing-categories h3.hp-listing-category__name a{
  display: inline-block;               /* keeps centering reliable */
  color: #fff !important;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  /* dark outer glow (flat blur) */
  text-shadow: 0 0 10px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.45);;
}

@media (max-width: 1024px){ .home .hp-listing-categories .hp-grid__item{ flex-basis:31%; max-width:31%; } }
@media (max-width: 768px){  .home .hp-listing-categories .hp-grid__item{ flex-basis:48%; max-width:48%; } }
@media (max-width: 480px){  .home .hp-listing-categories .hp-grid__item{ flex-basis:65%; max-width:65%; } }

/* --- Listing Carousels (Featured & Regular) --- */
.hp-listings-wrapper{ position:relative; overflow:visible; margin-bottom:5px; }
body.home .hp-listings .hp-row{ display: contents; }
body.home .hp-listings{
  position:relative; display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; gap:.75rem !important;
  padding-bottom:1rem; padding-top:4px; align-items:stretch; scrollbar-width:none;
}
body.home .hp-listings::-webkit-scrollbar{ display:none; }

.hp-listings-wrapper .arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:2.5rem; height:2.5rem; background:#fff; color:#333;
  border:none; border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:10;
  font-size:1.9rem; box-shadow:0 2px 5px rgba(0,0,0,.15); transition: transform .2s ease, background-color .2s ease;
}
.hp-listings-wrapper .arrow:hover{ background-color:#fff; transform:translateY(-50%) scale(1.1); }
.hp-listings-wrapper .arrow.left{ left:-1.25rem; } .hp-listings-wrapper .arrow.right{ right:-1.25rem; }

body.home .hp-listings-wrapper:not(.no-scroll) .hp-listings,
.hp-listings-wrapper.no-scroll .hp-listings{ padding-left:1rem; padding-right:1rem; }

/* Sizing */
body.home .hp-listings .hp-grid__item{ scroll-snap-align:start; padding:0 !important; }
.hp-listings-wrapper.no-scroll .hp-listings{ overflow-x:hidden; scroll-snap-type:none; justify-content:center; }
/* Featured row: 5-up on desktop */
.hp-listings-wrapper.no-scroll .hp-listings .hp-grid__item{
  flex: 0 0 calc((100% - 3rem) / 5);   /* 5 items → 4 gaps of .75rem = 3rem */
  max-width: calc((100% - 3rem) / 5);
}
@media (min-width: 1440px){
  body.home .hp-listings-wrapper:not(.no-scroll) .hp-grid__item{
    flex:0 0 calc((100% - 2.5rem) / 6); max-width: calc((100% - 2.5rem) / 6);
  }
}
@media (max-width: 768px){
  .hp-listings-wrapper.no-scroll .hp-listings{
    overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start;
  }
  .hp-listings-wrapper.no-scroll .hp-listings .hp-grid__item{
    flex:0 0 calc((100% - 0.5rem) / 2); max-width: calc((100% - 0.5rem) / 2);
  }
  body.home .hp-listings-wrapper:not(.no-scroll) .hp-grid__item{ flex:0 0 30%; max-width:30%; }
  .hp-listings-wrapper .arrow{ top:35%; transform:translateY(-50%); }
}

@media (max-width: 480px){
  .hp-listings-wrapper.no-scroll .hp-listings .hp-grid__item{ flex:0 0 50%; max-width:50%; }
  body.home .hp-listings-wrapper:not(.no-scroll) .hp-grid__item{ flex:0 0 50%; max-width:50%; }
}

/* Featured row: step down to 3-up between tablet and mobile */
@media (max-width: 1024px) and (min-width: 769px){
  .hp-listings-wrapper.no-scroll .hp-listings .hp-grid__item{
    /* 3 cards → 2 gaps; your row gap is .75rem, so total = 1.5rem */
    flex: 0 0 calc((100% - 1.5rem) / 3);
    max-width: calc((100% - 1.5rem) / 3);
  }
}


/* 2-up on narrow desktop (not phones) */
@media (max-width: 640px) and (min-width: 481px){
  body.home .hp-listings-wrapper:not(.no-scroll) .hp-grid__item{
    flex: 0 0 48%;
    max-width: 48%;
  }
}


/* --- Homepage Listing Card Content --- */
body.home .hp-listing__content{
  padding:.5rem .25rem; flex-grow:1; display:flex; flex-direction:column;
}
body.home .hp-listing__title{
  font-size:1rem; line-height:1.25; -webkit-line-clamp:1; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
body.home .listing-meta-row{ margin-top:-.25rem; }
@media (min-width: 481px){
  .home .hp-listing__image{ height:180px; }
  .home .hp-listing__image img{ width:100%; height:100%; object-fit:cover; }
}

/* Hide unneeded elements on homepage cards */
.hp-listing--view-block .hp-listing__created-date,
body.home .hp-listing__details--primary,
body.home .hp-listing__categories,
body.home .hp-listing__footer{ display:none !important; }

/* Featured row background */
.hp-listings-wrapper.no-scroll .hp-listing{
  background-color:#f2fcff; transition: background-color .3s ease; border-radius:16px; overflow:hidden;
}
.hp-listings-wrapper.no-scroll .hp-listing:hover{ background-color:#c0e4f0; }

/* Center categories row */
body.home .hp-listing-categories{ justify-content:center !important; }


/* Homepage section headers: consistent on all screen sizes */
body.home h2.wp-block-heading.content-title,
body.home h2.wp-block-heading.content-title a{
  font-weight: 600 !important;
  color: #444444 !important;
  letter-spacing: -0.02em;
  line-height: 1.18;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 1.6rem) !important; /* min, preferred, max */
  text-decoration: none;
}


/* === Featured cards: bottom-right banner inside the IMAGE (2/3 width, left edge tapered) === */
.hp-listings-wrapper.no-scroll .hp-listing .hp-listing__image{
  position: relative;           /* anchor the banner */
  overflow: hidden;             /* respect rounded corners */
  --banner-h: 36px;             /* banner height (desktop) */
  --banner-cut: 18px;           /* diagonal inset on the top-left corner */
  --banner-width: 80%;      /* ~3/4 of image width */
}

/* render only when a label is present on the image wrapper */
.hp-listings-wrapper.no-scroll .hp-listing .hp-listing__image[data-ribbon]::after{
  content: attr(data-ribbon);
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--banner-width);

  /* allow 1–2 lines: minimum height, but expand when wrapping */
  min-height: var(--banner-h);
  height: auto;

  background: #61AFCB;
  color: #fff;

  display: flex;
  align-items: center;              /* centers single-line vertically */
  justify-content: flex-start;
  box-sizing: border-box;

  /* breathing room top/bottom and offset from the left diagonal */
  --banner-pad-y: .22rem;
  padding-top: var(--banner-pad-y);
  padding-bottom: var(--banner-pad-y);
  padding-left: calc(.75rem + var(--banner-cut));
  padding-right: .75rem;

  /* tighter gap between wrapped lines */
  line-height: 1.08;

  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;

  z-index: 5;
  pointer-events: none;

  /* left edge taper: top-left inset, bottom-left flush */
  clip-path: polygon(var(--banner-cut) 0%, 100% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}

/* Home > Featured row (no-scroll): allow up to 2 lines for titles on mobile */
@media (max-width: 768px){
  body.home .hp-listings-wrapper.no-scroll .hp-listing__title,
  body.home .hp-listings-wrapper.no-scroll .hp-listing__title a{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;  /* was 1 on home */
            line-clamp: 2;
    overflow: hidden;                   /* ellipsis after 2 lines if needed */
    /* optional: keep it comfy */
    line-height: 1.25;
  }
}

}

@media (max-width: 768px){
  .hp-listings-wrapper.no-scroll .hp-listing .hp-listing__image{
    --banner-h: 30px;
    --banner-cut: 14px;
    --banner-width: 70%;        /* a touch wider feels nicer on small cards */
  }
}

@media (max-width: 768px){
  .hp-listings-wrapper.no-scroll .hp-listing .hp-listing__image[data-ribbon]::after{
    --banner-pad-y: .18rem;
    line-height: 1.06;
  }
}

/* Keep the card box fixed; animate its inner frame */
.hp-listings-wrapper.no-scroll .hp-listing{
  transform: none !important;    /* neutralize any theme lift on the card itself */
  will-change: auto;
}

.hp-listings-wrapper.no-scroll .hp-listing .hp-listing__content,
.hp-listings-wrapper.no-scroll .hp-listing .hp-listing__image{
  transition: transform .18s ease;
  will-change: transform;
}

.hp-listings-wrapper.no-scroll .hp-listing:hover .hp-listing__content,
.hp-listings-wrapper.no-scroll .hp-listing:hover .hp-listing__image{
  transform: translateY(-4px);   /* your “rise” */
}



/* Optional: hide theme's default featured star if it clashes with the banner */
/* .hp-listings-wrapper.no-scroll .hp-listing .hp-listing__featured-badge{ display:none !important; } */