/* Wayside Premium FSE — minimal enhancement CSS (hover + responsive grids) */

:root{
  --wbtw-transition: 180ms ease;
}

/* -----------------------------
   Header
------------------------------ */
.wbtw-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wbtw-header .wp-block-site-logo img{
  max-height: 56px;
  width: auto;
}
.wbtw-header .wp-block-navigation a{
  text-decoration: none;
}
.wbtw-header .wp-block-navigation a:hover{
  color: var(--wp--preset--color--primary);
}
.wbtw-header-search .wp-block-search__inside-wrapper{
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--soft);
  padding: 2px;
}

/* -----------------------------
   Section wrappers
------------------------------ */
.wbtw-section{
  padding-top: var(--wp--preset--spacing--xl);
  padding-bottom: var(--wp--preset--spacing--xl);
}
.wbtw-section--soft{
  background: var(--wp--preset--color--soft);
}
.wbtw-section--cta{
  background: var(--wp--preset--color--cta);
}

.wbtw-kicker{
  font-family: var(--wp--preset--font-family--accent);
  font-size: 28px;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  margin: 0 0 8px;
}

/* -----------------------------
   Post grids
------------------------------ */
.wbtw-post-grid .wp-block-post-template{
  display: grid;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .wbtw-post-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .wbtw-post-grid .wp-block-post-template{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}


.wbtw-post-grid--two .wp-block-post-template{
  display: grid;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .wbtw-post-grid--two .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.wbtw-post-grid--three .wp-block-post-template{
  grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .wbtw-post-grid--three .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .wbtw-post-grid--three .wp-block-post-template{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* -----------------------------
   Cards (used inside Query Loop)
------------------------------ */
.wbtw-card{
  height: 100%;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--subtle);
  overflow: clip;
  transition: transform var(--wbtw-transition), box-shadow var(--wbtw-transition), border-color var(--wbtw-transition);
}
.wbtw-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--wp--preset--shadow--hover);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 25%, var(--wp--preset--color--border));
}
.wbtw-card .wp-block-post-featured-image img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* Slightly taller card image when used as a featured block */
.wbtw-card--featured .wp-block-post-featured-image img{
  aspect-ratio: 16 / 10;
}

/* -----------------------------
   Post content polish
------------------------------ */
.wp-block-post-content figure,
.wp-block-post-content img{
  border-radius: var(--wp--preset--border-radius--m);
}
.wp-block-post-content figure{ overflow: clip; }

/* Tags as premium chips */
.wbtw-tags a{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--soft);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wbtw-tags a:hover{ color: var(--wp--preset--color--primary); }

/* -----------------------------
   Buttons + tags
------------------------------ */
.wbtw-tag{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--soft);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wbtw-tag:hover{
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--border));
  color: var(--wp--preset--color--primary);
}

/* -----------------------------
   Sidebar (single posts)
------------------------------ */
.wbtw-sidebar{
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--subtle);
}
@media (min-width: 1024px){
  .wbtw-sidebar{
    position: sticky;
    top: calc(var(--wp--custom--wbtw--headerHeight) + 16px);
  }
}

.wbtw-sidebar-list .wp-block-post-template{
  list-style: none;
  margin: 0;
  padding: 0;
}
.wbtw-sidebar-item{
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wbtw-sidebar-item:last-child{ border-bottom: 0; }
.wbtw-sidebar-item .wp-block-post-featured-image img{
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* -----------------------------
   Trending fallback helper
------------------------------ */
.wbtw-is-hidden{ display:none !important; }

/* -----------------------------
   Footer
------------------------------ */
.wbtw-footer{
  border-top: 1px solid var(--wp--preset--color--border);
}
.wbtw-footer a{
  text-decoration: none;
}
.wbtw-footer a:hover{
  color: var(--wp--preset--color--primary);
}

/* Make separators look like pro section dividers */
.wp-block-separator{
  opacity: 1;
  height: 1px;
}