/* ASC Camp Finder -- Brand DNA reference: ASC_Brand_DNA_Guide.html (ASC Playbook folder) */
:root{
  --asc-green: #5e9b57;
  --asc-orange: #e5903a;
  --asc-blue: #4977d2;
  --asc-yellow: #fcdd81;
  --asc-grey: #323232;
  --asc-brown: #4e260a;

  --asc-primary: var(--asc-blue);
  --asc-primary-dark: #395e9f;
  --asc-accent: var(--asc-yellow);
  --asc-bg: #f4f4f2;
  --asc-surface: #ffffff;
  --asc-border: #e4e2dd;
  --asc-text: var(--asc-grey);
  --asc-text-muted: #6c6c6c;
  --asc-body-copy: var(--asc-brown);
  --asc-heading-accent: var(--asc-blue);
  --asc-radius: 10px;
  --asc-radius-lg: 16px;
  --asc-shadow: 0 1px 2px rgba(20,30,25,0.06), 0 4px 16px rgba(20,30,25,0.06);
  --asc-shadow-hover: 0 2px 4px rgba(20,30,25,0.08), 0 10px 24px rgba(20,30,25,0.10);
  --asc-font: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.asc-camp-finder{
  font-family: var(--asc-font);
  color: var(--asc-text);
  line-height: 1.45;
  box-sizing: border-box;
}
.asc-camp-finder *{ box-sizing: border-box; }

.asc-cf-heading{ margin-bottom: 16px; }
.asc-cf-heading h2{
  font-family: var(--asc-font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.4rem;
  color: var(--asc-heading-accent);
  margin: 0 0 6px;
}
.asc-cf-heading p{
  margin: 0;
  color: var(--asc-body-copy);
  font-size: 0.95rem;
  font-weight: 400;
  max-width: 720px;
  text-align: justify;
}

/* ---------- Filter bar ---------- */
.asc-cf-filterbar{
  position: relative;
  z-index: 20;
  background: var(--asc-surface);
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  box-shadow: var(--asc-shadow);
  padding: 16px;
  margin-bottom: 22px;
}

.asc-cf-filter-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.asc-cf-filter-group{ position: relative; }

.asc-cf-filter-trigger{
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--asc-bg);
  border: 1px solid var(--asc-border);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--asc-font);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--asc-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.asc-cf-filter-trigger:hover{ border-color: var(--asc-primary); }
.asc-cf-filter-trigger[aria-expanded="true"]{
  border-color: var(--asc-primary);
  background: #eaf0fb;
}
.asc-cf-filter-trigger .asc-cf-count{
  background: var(--asc-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
}
.asc-cf-filter-trigger .asc-cf-chevron{ font-size: 0.65rem; opacity: 0.6; transform: translateY(1px); }

.asc-cf-panel{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--asc-surface);
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius);
  box-shadow: var(--asc-shadow-hover);
  padding: 14px;
  z-index: 30;
}
.asc-cf-panel.open{ display: block; }
.asc-cf-panel-title{ font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--asc-text-muted); margin: 0 0 10px; }

.asc-cf-pill-group{ display: flex; flex-wrap: wrap; gap: 6px; }
.asc-cf-pill{
  border: 1px solid var(--asc-border);
  background: var(--asc-bg);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--asc-font);
  font-size: 0.83rem;
  cursor: pointer;
  color: var(--asc-text);
  user-select: none;
}
.asc-cf-pill.active{
  background: var(--asc-primary);
  border-color: var(--asc-primary);
  color: #fff;
}
.asc-cf-pill:hover:not(.active){ border-color: var(--asc-primary); }

.asc-cf-panel-actions{
  display:flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--asc-border);
}
.asc-cf-link-btn{
  background: none; border: none; color: var(--asc-primary); font-weight: 600; font-size: 0.82rem; cursor: pointer; padding: 0;
}
.asc-cf-link-btn:hover{ text-decoration: underline; }

.asc-cf-reset-all{
  margin-left: auto;
  background: none;
  border: 1px solid var(--asc-border);
  color: var(--asc-text-muted);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--asc-font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.asc-cf-reset-all:hover{ color: var(--asc-text); border-color: var(--asc-text-muted); }

.asc-cf-filter-row + .asc-cf-activity-search{ margin-top: 12px; }
.asc-cf-activity-input{
  width: 100%;
  max-width: 360px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--asc-border);
  font-family: var(--asc-font);
  font-size: 0.87rem;
  background: var(--asc-bg);
  color: var(--asc-text);
  display: block;
}
.asc-cf-activity-input:focus{ outline: none; border-color: var(--asc-primary); }
.asc-cf-activity-input::-webkit-search-cancel-button{ cursor: pointer; }

.asc-cf-active-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.asc-cf-chip{
  display:flex; align-items:center; gap:6px;
  background: #eaf0fb; color: var(--asc-primary-dark);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 0.8rem; font-weight: 600;
}
.asc-cf-chip button{
  border:none; background: rgba(57,94,159,0.12); color: var(--asc-primary-dark);
  border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 0.75rem; line-height: 1;
}

/* ---------- Results ---------- */
.asc-cf-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.asc-cf-card{
  background: var(--asc-surface);
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  overflow: hidden;
  box-shadow: var(--asc-shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.asc-cf-card:hover{ box-shadow: var(--asc-shadow-hover); transform: translateY(-2px); }

.asc-cf-card-img{
  height: 160px;
  width: 100%;
  object-fit: cover;
  background: var(--asc-border);
  display:block;
}

.asc-cf-card-body{ padding: 16px; display:flex; flex-direction:column; gap: 8px; flex:1; }

.asc-cf-card-title{
  font-family: var(--asc-font);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--asc-heading-accent);
  margin: 0;
}
.asc-cf-card-loc{ font-size: 0.83rem; color: var(--asc-text-muted); margin: 0; }

.asc-cf-tag-row{ display:flex; flex-wrap:wrap; gap: 5px; margin: 4px 0; }
.asc-cf-tag{
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--asc-bg);
  border: 1px solid var(--asc-border);
  color: var(--asc-text-muted);
  padding: 3px 8px;
  border-radius: 999px;
}

.asc-cf-card-facts{ font-size: 0.82rem; color: var(--asc-text-muted); margin: 2px 0 0; }
.asc-cf-card-facts small{ font-size: 0.92em; opacity: 0.85; }

.asc-cf-card-cta{
  margin-top: auto;
  display:block;
  text-align:center;
  background: var(--asc-primary);
  color:#fff;
  text-decoration:none;
  font-family: var(--asc-font);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 100px;
  padding: 11px 10px;
}
.asc-cf-card:hover .asc-cf-card-cta{ background: var(--asc-primary-dark); }

.asc-cf-card-summary{
  font-size: 0.86rem;
  color: var(--asc-body-copy);
  line-height: 1.5;
  margin: 2px 0;
}

/* ---------- Layout: row (full-width, image beside content) ---------- */
.asc-cf-grid--row{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.asc-cf-card--row{
  flex-direction: row;
  align-items: stretch;
}
.asc-cf-card--row .asc-cf-card-img{
  width: 260px;
  min-width: 260px;
  height: auto;
}
.asc-cf-card--row .asc-cf-card-body{
  flex: 1;
}
.asc-cf-card--row .asc-cf-card-cta{
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding-left: 26px;
  padding-right: 26px;
}

/* ---------- Layout: simple (text only, no image/summary/CTA) ---------- */
.asc-cf-grid--simple{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.asc-cf-card--simple{
  border: none;
  border-bottom: 1px solid var(--asc-border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.asc-cf-card--simple:hover{
  box-shadow: none;
  transform: none;
  background: var(--asc-bg);
}
.asc-cf-card--simple .asc-cf-card-body{
  padding: 14px 4px;
  gap: 6px;
}

.asc-cf-empty{
  text-align:center;
  padding: 60px 20px;
  color: var(--asc-text-muted);
}
.asc-cf-empty h3{ color: var(--asc-text); margin-bottom: 6px; }

.asc-cf-error{
  background: #fdeceb; border: 1px solid #f3c6c2; color: #7a2a20;
  padding: 14px 16px; border-radius: var(--asc-radius); font-size: 0.9rem;
}

@media (max-width: 640px){
  .asc-cf-filter-row{ gap: 8px; }
  .asc-cf-filter-trigger{ padding: 8px 11px; font-size: 0.82rem; }
  .asc-cf-panel{ left: 0; right: 0; max-width: none; }
  .asc-cf-card--row{ flex-direction: column; }
  .asc-cf-card--row .asc-cf-card-img{ width: 100%; min-width: 0; height: 160px; }
}