/**
 * Theme Name: Astra Child
 * Author: Brainstorm Force
 * Author URI: http://wpastra.com/about/
 * Description: Astra Child Theme for The Expert Camper with custom category template styles.
 * Version: 1.0.1
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: astra-child
 * Template: astra
 */

/* ==========================================================================
   0) SCOPE + DESIGN TOKENS
   -------------------------------------------------------------------------- */

/* Works on both:
   - Page template file: template-category-page.php
   - Woo product category archives (taxonomy)
*/
:root {
  --tec-max: 1200px;
  --tec-gap: 14px;
  --tec-green: #2C5746;
  --tec-green-dark: #22473a;
  --tec-soft: #eaf2ed;
  --tec-shadow: 0 8px 20px rgba(0,0,0,.08);
  --tec-card-w: 268px; /* Popular carousel card width */
}

.page-template-template-category-page .tec-scope,
.product-category .tec-scope { /* helper class if you wrap sections */ }


/* ==========================================================================
   1) GLOBAL SECTION / WRAPPERS
   -------------------------------------------------------------------------- */

.page-template-template-category-page .tec-cat-wrap,
.product-category .tec-cat-wrap { padding: 24px 0; }

.page-template-template-category-page .tec-container,
.product-category .tec-container {
  max-width: var(--tec-max);
  margin: 0 auto;
  padding: 0 16px;
}

.page-template-template-category-page .tec-title,
.product-category .tec-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
}

.page-template-template-category-page .tec-subtitle,
.product-category .tec-subtitle {
  margin: 24px 0 12px;
  font-size: clamp(20px, 3vw, 28px);
}

.page-template-template-category-page .tec-section,
.product-category .tec-section { margin: 24px 0; }

.page-template-template-category-page .tec-content p,
.product-category .tec-content p { margin: 0 0 1em; }


/* ==========================================================================
   2) BREADCRUMBS (BRAND STYLE)
   -------------------------------------------------------------------------- */

.page-template-template-category-page .ast-breadcrumbs,
.page-template-template-category-page #breadcrumbs,
.product-category .ast-breadcrumbs,
.product-category #breadcrumbs {
  max-width: var(--tec-max);
  margin: 8px auto 6px;
  padding: 0 16px;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--tec-green);
}

.page-template-template-category-page .ast-breadcrumbs a,
.page-template-template-category-page #breadcrumbs a,
.product-category .ast-breadcrumbs a,
.product-category #breadcrumbs a {
  color: var(--tec-green);
  text-decoration: none;
  font-weight: 600;
}

.page-template-template-category-page .ast-breadcrumbs a:hover,
.page-template-template-category-page #breadcrumbs a:hover,
.product-category .ast-breadcrumbs a:hover,
.product-category #breadcrumbs a:hover {
  color: #234538;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-template-template-category-page .breadcrumb_last,
.product-category .breadcrumb_last { opacity: .85; font-weight: 500; }

.page-template-template-category-page .breadcrumb-separator,
.product-category .breadcrumb-separator { margin: 0 6px; opacity: .5; }


/* ==========================================================================
   3) HERO (SPLIT LAYOUT + TABS)
   -------------------------------------------------------------------------- */

.page-template-template-category-page .tec-hero-band,
.product-category .tec-hero-band {
  background: var(--tec-green);
  width: 100%;
  margin: 0 0 14px;
}

.page-template-template-category-page .tec-hero-band__inner,
.product-category .tec-hero-band__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.page-template-template-category-page .tec-hero-split__inner,
.product-category .tec-hero-split__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap: clamp(16px,3vw,28px);
  align-items: center;
  padding: clamp(16px,3vw,28px) 0;
}

.page-template-template-category-page .tec-hero-split__col--text,
.product-category .tec-hero-split__col--text { color: #fff; }

.page-template-template-category-page .tec-hero-split__col--media,
.product-category .tec-hero-split__col--media { display: block; }

.page-template-template-category-page .tec-hero-split__media-wrap,
.product-category .tec-hero-split__media-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.page-template-template-category-page .tec-hero-split__media-wrap img,
.product-category .tec-hero-split__media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-template-template-category-page .tec-hero__title,
.product-category .tec-hero__title {
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(24px,3vw,36px);
  color: #EAF7EF;
}

.page-template-template-category-page .tec-hero__subtitle,
.product-category .tec-hero__subtitle {
  font-size: clamp(14px,1.6vw,18px);
  line-height: 1.65;
  color: #F5F7F6;
}

.page-template-template-category-page .tec-hero__subtitle a,
.product-category .tec-hero__subtitle a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-template-template-category-page .tec-hero__subtitle a:hover,
.product-category .tec-hero__subtitle a:hover { color: #d2ffe1; }

.page-template-template-category-page .tec-tabs,
.product-category .tec-tabs { margin-top: 14px; }

.page-template-template-category-page .tec-tabs__list,
.product-category .tec-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.page-template-template-category-page .tec-tab,
.product-category .tec-tab {
  appearance: none;
  border: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.page-template-template-category-page .tec-tab.is-active,
.product-category .tec-tab.is-active { background: #fff; color: var(--tec-green); }
.page-template-template-category-page .tec-tab:focus,
.product-category .tec-tab:focus { outline: 2px solid #fff; outline-offset: 2px; }

.page-template-template-category-page .tec-tabs__panels,
.product-category .tec-tabs__panels {
  background: rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
}

.page-template-template-category-page .tec-tabpanel,
.product-category .tec-tabpanel { display: none; }

.page-template-template-category-page .tec-tabpanel.is-active,
.product-category .tec-tabpanel.is-active { display: block; }

@media (max-width: 768px) {
  .page-template-template-category-page .tec-hero-split__inner,
  .product-category .tec-hero-split__inner { grid-template-columns: 1fr; }
  .page-template-template-category-page .tec-hero-split__col--media,
  .product-category .tec-hero-split__col--media { display: none; }
}


/* ==========================================================================
   4) VIDEO (16:9 WRAPPER)
   -------------------------------------------------------------------------- */

.page-template-template-category-page .tec-video-wrap,
.product-category .tec-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.page-template-template-category-page .tec-video-wrap iframe,
.page-template-template-category-page .tec-video-wrap embed,
.page-template-template-category-page .tec-video-wrap video,
.product-category .tec-video-wrap iframe,
.product-category .tec-video-wrap embed,
.product-category .tec-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   5) POPULAR PRODUCTS — HORIZONTAL STRIP
   -------------------------------------------------------------------------- */

.page-template-template-category-page .tec-popular .tec-carousel,
.product-category .tec-popular .tec-carousel { position: relative; }

.page-template-template-category-page .tec-carousel__track,
.product-category .tec-carousel__track {
  display: flex;
  gap: var(--tec-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 6px 0;
  align-items: stretch;
  scrollbar-width: thin;
  cursor: grab;
  min-height: 1px; /* ensures a row always shows */
}

.page-template-template-category-page .tec-carousel__track.is-dragging,
.product-category .tec-carousel__track.is-dragging { cursor: grabbing; }

.page-template-template-category-page .tec-carousel__track::-webkit-scrollbar,
.product-category .tec-carousel__track::-webkit-scrollbar { height: 8px; }
.page-template-template-category-page .tec-carousel__track::-webkit-scrollbar-thumb,
.product-category .tec-carousel__track::-webkit-scrollbar-thumb {
  background: #cfd6d2; border-radius: 8px;
}

.page-template-template-category-page .tec-card,
.product-category .tec-card {
  flex: 0 0 var(--tec-card-w);
  max-width: var(--tec-card-w);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--tec-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-template-template-category-page .tec-card__thumb,
.product-category .tec-card__thumb {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f6f6f6;
}
.page-template-template-category-page .tec-card__thumb img,
.product-category .tec-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-template-template-category-page .tec-card__body,
.product-category .tec-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  min-height: 160px; /* keeps price+button aligned */
}

.page-template-template-category-page .tec-card__title,
.product-category .tec-card__title {
  font-size: 14px;
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}
.page-template-template-category-page .tec-card__title a,
.product-category .tec-card__title a { color: #1a1a1a; text-decoration: none; }
.page-template-template-category-page .tec-card__title a:hover,
.product-category .tec-card__title a:hover { text-decoration: underline; }

.page-template-template-category-page .tec-card__price,
.product-category .tec-card__price {
  font-weight: 700;
  margin: 6px 0;
  min-height: 2.2em;
}

.page-template-template-category-page .tec-card__cta,
.product-category .tec-card__cta { margin-top: auto; }
.page-template-template-category-page .tec-card__cta .button,
.product-category .tec-card__cta .button { width: 100%; text-align: center; }

.page-template-template-category-page .tec-card.outofstock,
.product-category .tec-card.outofstock { opacity: .65; }


/* ==========================================================================
   6) FIND BY CATEGORY — GRID CARDS (2×5 style)
   -------------------------------------------------------------------------- */

.page-template-template-category-page .tec-tile-grid--2x5,
.product-category .tec-tile-grid--2x5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1200px) {
  .page-template-template-category-page .tec-tile-grid--2x5,
  .product-category .tec-tile-grid--2x5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .page-template-template-category-page .tec-tile-grid--2x5,
  .product-category .tec-tile-grid--2x5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .page-template-template-category-page .tec-tile-grid--2x5,
  .product-category .tec-tile-grid--2x5 { grid-template-columns: repeat(2, 1fr); }
}

.page-template-template-category-page .tec-tile,
.product-category .tec-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--tec-shadow);
  text-decoration: none;
  color: #1a1a1a;
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-template-template-category-page .tec-tile:hover,
.product-category .tec-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.page-template-template-category-page .tec-tile__media,
.product-category .tec-tile__media {
  position: relative;
  display: block;
  height: clamp(160px, 26vw, 220px);
  background: #e9ecea;
  border-bottom: 1px solid rgba(0,0,0,.05);
  overflow: hidden;
}
.page-template-template-category-page .tec-tile__media img,
.product-category .tec-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-template-template-category-page .tec-tile__content,
.product-category .tec-tile__content { padding: 14px 16px 10px; flex: 1 1 auto; }

.page-template-template-category-page .tec-tile__title,
.product-category .tec-tile__title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.page-template-template-category-page .tec-tile__desc,
.product-category .tec-tile__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4a4a4a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.page-template-template-category-page .tec-tile__cta,
.product-category .tec-tile__cta {
  display: block;
  text-align: center;
  background: var(--tec-green);
  color: #fff;
  font-weight: 800;
  padding: 12px 14px;
  font-size: 15px;
  border-top: 1px solid rgba(0,0,0,.05);
}
.page-template-template-category-page .tec-tile:hover .tec-tile__cta,
.product-category .tec-tile:hover .tec-tile__cta { background: var(--tec-green-dark); }


/* ==========================================================================
   7) RATED BY CAMPERS — FULL-WIDTH STRIP
   -------------------------------------------------------------------------- */

.page-template-template-category-page .tec-rated,
.product-category .tec-rated { background: var(--tec-soft); padding: 40px 0; }

.page-template-template-category-page .tec-rated .tec-container,
.product-category .tec-rated .tec-container { max-width: 100%; padding: 0 20px; }

.page-template-template-category-page .tec-rated .tec-carousel__track,
.product-category .tec-rated .tec-carousel__track { align-items: stretch; }

.page-template-template-category-page .tec-rated .tec-card,
.product-category .tec-rated .tec-card {
  flex: 0 0 calc((100% - (5.5 - 1) * var(--tec-gap)) / 5.5);
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.page-template-template-category-page .tec-rated__media,
.product-category .tec-rated__media {
  position: relative;
  display: block;
  height: clamp(190px, 26vw, 240px);
  overflow: hidden;
  border-radius: 14px;
  background: #e9ecea;
}
.page-template-template-category-page .tec-rated__media img,
.product-category .tec-rated__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-template-template-category-page .tec-tile__cta-overlay,
.product-category .tec-tile__cta-overlay {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: inline-block;
  text-align: center;
  background: rgba(44,87,70,.96);
  color: #fff;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

@media (max-width: 1024px) {
  .page-template-template-category-page .tec-rated .tec-carousel__track > .tec-card,
  .product-category .tec-rated .tec-carousel__track > .tec-card {
    flex: 0 0 calc((100% - (3.5 - 1) * var(--tec-gap)) / 3.5);
  }
}
@media (max-width: 640px) {
  .page-template-template-category-page .tec-rated .tec-carousel__track > .tec-card,
  .product-category .tec-rated .tec-carousel__track > .tec-card {
    flex: 0 0 calc((100% - (1.5 - 1) * var(--tec-gap)) / 1.5);
  }
}

/* Expand Astra wrapper on our category pages */
.page-template-template-category-page .site-content .ast-container,
.product-category .site-content .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kill any inline max-width on sections and give a soft page gutter */
.page-template-template-category-page .tec-section,
.product-category .tec-section {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Use full width for our internal containers */
.page-template-template-category-page .tec-container,
.product-category .tec-container {
  max-width: 100% !important;
}

/* =========================================
   SECTION: Tents by Sleeping Capacity
   ========================================= */
/* Change section background to white */
.tec-capacity-wrap{
  width:100%;
  background:#fff; /* white background */
  padding:28px 0;
}
.tec-capacity__container{
  /* full-width like your other full-width sections */
  max-width:100%;
  padding:0 20px;
  margin:0 auto;
}
.tec-capacity__head{
  max-width:1200px;
  margin:0 auto 10px;
  padding:0 4px;
}
.tec-capacity__title{
  margin:0 0 6px;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.2;
  color:#2C5746;
  font-weight:800;
}
.tec-capacity__desc{
  margin:0 0 12px;
  color:#2C5746;
  opacity:1; /* was .85 */
  font-size:clamp(14px,1.6vw,16px);
}

/* Horizontal scroller row (desktop: single row, mobile: scroll) */
.tec-capacity__scroller{
  display:flex;
  gap:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 0 2px;
  scroll-snap-type:x proximity;
}
.tec-capacity__scroller::-webkit-scrollbar{ height:8px; }
.tec-capacity__scroller::-webkit-scrollbar-thumb{ background:#cfd6d2; border-radius:8px; }

/* Pill link */
.tec-capacity__pill{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  color:#1a1a1a;
  min-width:92px;            /* gives the label room */
  scroll-snap-align:center;
}
.tec-capacity__pill:hover .tec-capacity__circle{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.tec-capacity__pill.is-active .tec-capacity__circle{ outline:3px solid #8fd3b8; outline-offset:3px; }

/* Circle icon */
.tec-capacity__circle{
  width:84px;
  height:84px;
  border-radius:50%;
  background:#2C5746;      /* brand green */
  color:#fff;
  display:grid;
  place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tec-capacity__pill:hover .tec-capacity__circle{ background:#234c3c; }

.tec-capacity__abbr{
  font-weight:900;
  font-size:28px;
  letter-spacing:0.5px;
}

/* Label under circle */
.tec-capacity__label{
  margin-top:8px;
  font-size:13.5px;
  text-align:center;
  line-height:1.3;
  color:#2C5746;
  font-weight:700;
  max-width:120px;
}

/* Desktop: center the row inside a 1200px gutter while keeping full-bleed background */
@media (min-width: 1025px){
  .tec-capacity__scroller{
    max-width:1200px;
    margin:0 auto;
  }
}

/* =========================================
   SECTION: Tent Blog Scroller
   ========================================= */
.tec-blog-wrap {
  width: 100%;
  background: #fff;
  padding: 28px 0;
}
.tec-blog__head {
  max-width: 1200px;
  margin: 0 auto 14px;
  padding: 0 16px;
}
.tec-blog__title {
  margin: 0 0 6px;
  font-size: clamp(22px,3.6vw,32px);
  font-weight: 800;
  color: #2C5746;
}
.tec-blog__desc {
  margin: 0;
  color: #2C5746;
  opacity: .85;
  font-size: clamp(14px,1.6vw,16px);
}
.tec-blog__scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px;
  scroll-snap-type: x proximity;
}
.tec-blog__scroller::-webkit-scrollbar {
  height: 8px;
}
.tec-blog__scroller::-webkit-scrollbar-thumb {
  background: #cfd6d2;
  border-radius: 8px;
}
.tec-blog__card {
  flex: 0 0 240px;
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.tec-blog__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background: #eaeaea;
}
.tec-blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tec-blog__card-title {
  font-size: 15px;
  font-weight: 700;
  padding: 10px;
  flex-grow: 1;
  color: #1a1a1a;
}
.tec-blog__card-title a {
  text-decoration: none;
  color: inherit;
}
.tec-blog__cta {
  display: block;
  text-align: center;
  padding: 10px;
  background: #557A95; /* different from green */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.tec-blog__cta:hover {
  background: #436276;
}
/* ============ PATCH: Article card sizing & theme overrides ============ */

/* Rail: one tidy horizontal row */
.tec-articles__rail{
  display:flex;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:6px 0 8px;
}

/* Card: fixed width on desktop, consistent shell */
.tec-article-card{
  flex:0 0 300px;
  max-width:300px;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e6ece9;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tec-article-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.08); border-color:#dfe7e3; }

/* Media: same height for all via aspect-ratio */
.tec-article-card__media{ display:block; position:relative; aspect-ratio:16/9; background:#e9ecea; overflow:hidden; }
.tec-article-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tec-article-card__shade{ position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0)); }

/* Body: fixed min-height so CTAs line up */
.tec-article-card__body{
  display:flex; flex-direction:column; gap:10px;
  padding:12px;
  min-height:140px; /* tweak if you want more room for titles */
}

/* Title: clamp & override theme heading sizes */
.tec-article-card__title{
  margin:0;
  font-size:16px !important;       /* force over theme */
  line-height:1.35 !important;
  font-weight:800 !important;
  letter-spacing:.1px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.tec-article-card__title a{ color:#0f1b18 !important; text-decoration:none; }
.tec-article-card__title a:hover{ text-decoration:underline; }

/* CTA: non‑green, consistent height push */
.tec-article-card__cta{ margin-top:auto; }
.tec-btn--read{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px; border-radius:10px;
  background:#2a4f63; color:#fff; font-weight:700; font-size:14px;
  text-decoration:none;
}
.tec-btn--read:hover{ background:#203a49; }

/* Mobile: show bigger peeks but still uniform */
@media (max-width: 640px){
  .tec-article-card{ flex:0 0 78%; max-width:78%; }
}
<?php
/* =========================
 * ARTICLES — up to 10 from ACF, else fallback
 * ========================= */
$cat_label = isset($slug_label) ? $slug_label : 'Tents';
$posts_chosen = [];

// ACF chosen posts (IDs or objects), blog_post_1..10
if ( function_exists('get_field') ) {
  for ( $i=1; $i<=10; $i++ ) {
    $val = get_field("blog_post_{$i}");
    if ( empty($val) ) continue;
    $pid = is_object($val) ? (int)$val->ID : (int)$val;
    if ( $pid && get_post_status($pid) === 'publish' ) {
      $posts_chosen[] = $pid;
    }
  }
}

// Fallback URLs -> IDs
$fallback_urls = [
  'https://theexpertcamper.co.uk/blog/camping/the-essential-guide-to-purchasing-a-tent/',
  'https://theexpertcamper.co.uk/blog/camping/do-tents-lose-their-waterproofing/',
  'https://theexpertcamper.co.uk/blog/camping/camping-challenges/',
  'https://theexpertcamper.co.uk/blog/camping/britains-national-parks/',
  'https://theexpertcamper.co.uk/blog/safety/water-safety-tips/',
  'https://theexpertcamper.co.uk/blog/camping/dangers-of-camping/',
  'https://theexpertcamper.co.uk/blog/hiking/englands-best-trials/',
  'https://theexpertcamper.co.uk/blog/hiking/the-benefits-of-hiking/',
  // add two more in case fewer than 8 chosen so we can reach 10
  'https://theexpertcamper.co.uk/blog/camping/10-types-of-tents-and-their-pros-and-cons/',
  'https://theexpertcamper.co.uk/blog/camping/5-reasons-to-pitch-your-tent-in-yorkshire/',
];

if ( count($posts_chosen) < 10 ) {
  foreach ( $fallback_urls as $url ) {
    if ( count($posts_chosen) >= 10 ) break;
    $id = url_to_postid( $url );
    if ( $id && get_post_status($id) === 'publish' && ! in_array($id, $posts_chosen, true) ) {
      $posts_chosen[] = $id;
    }
  }
}

if ( ! empty($posts_chosen) ) :
?>
<section class="tec-articles-wrap">
  <div class="tec-articles__container">
    <header class="tec-articles__head">
      <h2 class="tec-articles__title"><?php echo esc_html($cat_label); ?> – Guides, Tips & Inspiration</h2>
      <p class="tec-articles__desc">Campers read our <?php echo esc_html(strtolower($cat_label)); ?> guides, learn tips, and find new ideas.</p>
    </header>

    <div class="tec-articles__rail" aria-label="Articles" tabindex="0">
      <?php
      $q = new WP_Query([
        'post_type'      => 'post',
        'post__in'       => $posts_chosen,
        'orderby'        => 'post__in',
        'posts_per_page' => 10,
        'ignore_sticky_posts' => true,
      ]);
      while ( $q->have_posts() ) : $q->the_post();
        $img = get_the_post_thumbnail_url(get_the_ID(), 'large');
      ?>
        <article class="tec-article-card">
          <a class="tec-article-card__media" href="<?php the_permalink(); ?>">
            <?php if ($img): ?>
              <img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr(get_the_title()); ?>" loading="lazy" decoding="async">
            <?php endif; ?>
            <span class="tec-article-card__shade" aria-hidden="true"></span>
          </a>
          <div class="tec-article-card__body">
            <h3 class="tec-article-card__title">
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h3>
            <div class="tec-article-card__cta">
              <a class="tec-btn tec-btn--read" href="<?php the_permalink(); ?>">Read more</a>
            </div>
          </div>
        </article>
      <?php endwhile; wp_reset_postdata(); ?>
    </div>
  </div>
</section>
<?php endif; ?>

/* ===========================
   Popular Tent Brands
   =========================== */
.tec-brands-wrap{
  width:100%;
  background:#fff;
  padding:28px 0 32px;
}
.tec-brands__container{
  max-width:100%;
  padding:0 20px;
  margin:0 auto;
}
.tec-brands__head{
  max-width:1200px;
  margin:0 auto 14px;
  padding:0 4px;
}
.tec-brands__title{
  margin:0 0 6px;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.2;
  color:#2C5746;
  font-weight:800;
}
.tec-brands__desc{
  margin:0;
  color:#2C5746;
  opacity:.85;
  font-size:clamp(14px,1.6vw,16px);
}

/* Horizontal rail */
.tec-brands__rail{
  display:flex;
  gap:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 0 2px;
  scroll-snap-type:x proximity;
}
.tec-brands__rail::-webkit-scrollbar{ height:8px; }
.tec-brands__rail::-webkit-scrollbar-thumb{ background:#cfd6d2; border-radius:8px; }

/* Card */
.tec-brand-card{
  flex:0 0 auto;
  scroll-snap-align:center;
}
.tec-brand-card__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#1a1a1a;
  min-width:130px;
}
.tec-brand-card__circle{
  width:96px;
  height:96px;
  border-radius:50%;
  background:#eaf2ed;
  display:grid;
  place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  overflow:hidden;
}
.tec-brand-card__circle img{
  width:80%;
  height:80%;
  object-fit:contain;
  display:block;
}
.tec-brand-card__badge{
  display:inline-block;
  font-weight:900;
  font-size:28px;
  color:#2C5746;
}
.tec-brand-card__inner:hover .tec-brand-card__circle{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  background:#e3efe8;
}

.tec-brand-card__text{
  margin-top:10px;
  text-align:center;
  max-width:160px;
}
.tec-brand-card__name{
  display:block;
  font-weight:800;
  color:#2C5746;
}
.tec-brand-card__desc{
  display:block;
  font-size:13px;
  color:#345b4c;
  opacity:.9;
  margin-top:2px;
}

/* Center the rail within your 1200px content width on desktop */
@media (min-width:1025px){
  .tec-brands__rail{ max-width:1200px; margin:0 auto; }
}
/* === TEC Filters (sidebar) === */
.tec-filter-sidebar { background:#fff; border:1px solid #e7ecea; border-radius:12px; padding:14px; }
.tec-filter__group + .tec-filter__group { border-top:1px solid #eef3f1; margin-top:12px; padding-top:12px; }
.tec-filter__heading { margin:0 0 8px; font-size:14px; font-weight:800; color:#2C5746; }
.tec-filter__list { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.tec-filter__list a { text-decoration:none; color:#123; padding:6px 8px; border-radius:8px; display:inline-block; }
.tec-filter__list a:hover { background:#f3f7f5; }
.tec-chip { display:inline-block; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#1a1a1a; text-decoration:none; }
.tec-chip:hover { background:#e4e9ff; }
/* layout collapse on small screens */
@media (max-width: 900px){
  .tec-grid-wrap { grid-template-columns:1fr; }
}

/* Two‑column filter+grid on category pages */
.tec-grid-wrap{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
@media (max-width: 900px){
  .tec-grid-wrap{grid-template-columns:1fr}
  .tec-sidebar{order:1}
  .tec-grid{order:2}
}
.tec-sidebar .tec-filter-title{font-size:18px}
.tec-filter-block__label{color:#1a1a1a}
.tec-filter-list a{text-decoration:none;color:#2C5746}
.tec-filter-list a:hover{text-decoration:underline}

/* Two-column archive with sidebar */
.woocommerce .tec-grid-wrap{display:grid;grid-template-columns:280px 1fr;gap:24px}
@media (max-width: 1024px){
  .woocommerce .tec-grid-wrap{grid-template-columns:1fr}
  .woocommerce .tec-grid-sidebar{order:-1;margin-bottom:16px}
}
/* Make the custom category template span full width and remove extra padding */
.page-template-template-category-page .site-content .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.page-template-template-category-page .entry-content {
  padding: 0;
}