/*
 * TELA Resource Hub — Public Styles v2.1
 * Namespaced: .tela-* / .tela-hub__* to avoid theme conflicts.
 */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --tela-blue:        #1b4f8a;
  --tela-blue-dark:   #143d6b;
  --tela-blue-mid:    #2563ab;
  --tela-blue-light:  #e0ecf8;
  --tela-blue-50:     #f0f6ff;
  --tela-orange:      #e87a1e;
  --tela-orange-dark: #c9621a;
  --tela-green:       #2e7d52;
  --tela-green-light: #e6f4ec;
  --tela-red:         #b91c1c;
  --tela-gray-50:     #f9fafb;
  --tela-gray-100:    #f3f4f6;
  --tela-gray-200:    #e5e7eb;
  --tela-gray-300:    #d1d5db;
  --tela-gray-400:    #9ca3af;
  --tela-gray-600:    #4b5563;
  --tela-gray-700:    #374151;
  --tela-gray-800:    #1f2937;
  --tela-white:       #ffffff;

  --tela-radius:      8px;
  --tela-radius-lg:   12px;
  --tela-shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --tela-shadow:      0 4px 12px rgba(0,0,0,.09);
  --tela-shadow-hover:0 8px 28px rgba(0,0,0,.13);
  --tela-transition:  200ms ease;

  --tela-font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   HERO — refined light treatment
   ============================================================ */
.tela-hub__hero {
  background: linear-gradient(145deg, var(--tela-blue-50) 0%, var(--tela-white) 65%);
  padding: 32px 32px 28px;
  text-align: center;
  /* Double-stripe: 3px TELA blue + 3px TELA orange = both brand colors at page top */
  border-bottom: 3px solid var(--tela-blue);
  box-shadow: 0 3px 0 0 var(--tela-orange);
  position: relative;
  overflow: hidden;
}

/* Decorative soft-circle behind the title */
.tela-hub__hero::before {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,79,138,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Bottom-left accent circle in brand orange */
.tela-hub__hero::after {
  content: '';
  position: absolute;
  left: -50px;
  bottom: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,122,30,.08) 0%, transparent 70%);
  pointer-events: none;
}

.tela-hub__title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--tela-blue);
  position: relative; /* above decorative circles */
}

.tela-hub__intro {
  font-size: .9375rem;
  color: var(--tela-gray-600);
  margin: 0 auto;
  line-height: 1.55;
  max-width: 560px;
  position: relative;
}

.tela-hub__hero-actions {
  margin-top: 18px;
  position: relative;
}

.tela-hub__submit-btn {
  font-size: .875rem;
}

/* ============================================================
   FILTER BAR — sticky single-row strip (Behance Row 1)
   Pills have moved into the content area.
   ============================================================ */
.tela-hub__filter-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tela-white);
  border-bottom: 1px solid var(--tela-gray-200);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.admin-bar .tela-hub__filter-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .tela-hub__filter-bar { top: 46px; } }

/* --- ROW 1: Filter btn · Search · Sort --- */
.tela-hub__filter-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px; /* taller row to match Behance proportions */
}

/* Filter button — Behance pill style */
.tela-hub__filter-controls button.tela-hub__filter-panel-btn,
button.tela-hub__filter-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px; /* match Behance button height */
  border: 1px solid var(--tela-gray-300) !important;
  border-radius: 50px !important;
  background: var(--tela-white) !important;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  color: var(--tela-gray-700) !important;
  font-family: var(--tela-font-sans);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
  transition: border-color var(--tela-transition), background var(--tela-transition), box-shadow var(--tela-transition);
  box-shadow: var(--tela-shadow-sm);
  text-decoration: none !important;
  outline: none;
}

.tela-hub__filter-controls button.tela-hub__filter-panel-btn svg,
button.tela-hub__filter-panel-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--tela-gray-600);
}

/* Two-state icon: sliders (closed) → |← (open) */
.tela-hub__filter-icon--open  { display: none; }
.tela-hub__filter-icon--closed { display: inline-block; }

.tela-hub--filter-open .tela-hub__filter-icon--closed { display: none; }
.tela-hub--filter-open .tela-hub__filter-icon--open   { display: inline-block; }

.tela-hub__filter-controls button.tela-hub__filter-panel-btn:hover,
button.tela-hub__filter-panel-btn:hover {
  border-color: var(--tela-blue) !important;
  box-shadow: 0 2px 8px rgba(27,79,138,.15);
}

.tela-hub__filter-controls button.tela-hub__filter-panel-btn.is-active,
button.tela-hub__filter-panel-btn.is-active {
  border-color: var(--tela-blue) !important;
  background: var(--tela-blue-light) !important;
  color: var(--tela-blue) !important;
  box-shadow: none;
}

.tela-hub__filter-controls button.tela-hub__filter-panel-btn.is-active svg,
button.tela-hub__filter-panel-btn.is-active svg {
  color: var(--tela-blue);
}

button.tela-hub__filter-panel-btn:focus-visible { outline: 2px solid var(--tela-blue) !important; outline-offset: 2px; }

/* Filter count badge — blue normally, orange when panel is active (better contrast) */
.tela-hub__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tela-blue);
  color: var(--tela-white);
  border-radius: 50px;
  font-size: .6875rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  line-height: 1;
}

.tela-hub__filter-controls button.tela-hub__filter-panel-btn.is-active .tela-hub__filter-count,
button.tela-hub__filter-panel-btn.is-active .tela-hub__filter-count {
  background: var(--tela-orange); /* stands out against the blue-light active background */
}

/* Inline search — takes remaining space */
.tela-hub__inline-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.tela-hub__inline-search-icon {
  position: absolute;
  left: 14px;   /* pushed right so icon clears text */
  width: 15px;
  height: 15px;
  color: var(--tela-gray-400);
  pointer-events: none;
  flex-shrink: 0;
}

/* Search input — doubled selectors to beat theme specificity */
.tela-hub__filter-controls .tela-hub__inline-search input.tela-hub__inline-search-input,
input[type="search"].tela-hub__inline-search-input,
.tela-hub__inline-search-input {
  width: 100%;
  padding: 10px 20px 10px 44px !important; /* 44px = 14px offset + 15px icon + 15px gap */
  font-size: .875rem;
  font-family: var(--tela-font-sans);
  border: 1px solid var(--tela-gray-300) !important;
  border-radius: 50px !important;
  background: var(--tela-gray-50) !important;
  color: var(--tela-gray-800) !important;
  outline: none !important;
  transition: border-color var(--tela-transition), background var(--tela-transition), box-shadow var(--tela-transition);
  line-height: 1;
  box-shadow: none !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Placeholder cross-browser */
.tela-hub__inline-search-input::placeholder          { color: var(--tela-gray-400) !important; opacity: 1 !important; }
.tela-hub__inline-search-input::-webkit-input-placeholder { color: var(--tela-gray-400) !important; }
.tela-hub__inline-search-input::-moz-placeholder     { color: var(--tela-gray-400) !important; opacity: 1 !important; }
.tela-hub__inline-search-input:-ms-input-placeholder { color: var(--tela-gray-400) !important; }

.tela-hub__filter-controls .tela-hub__inline-search input.tela-hub__inline-search-input:focus,
input[type="search"].tela-hub__inline-search-input:focus,
.tela-hub__inline-search-input:focus {
  border-color: var(--tela-blue) !important;
  background: var(--tela-white) !important;
  box-shadow: 0 0 0 3px rgba(27,79,138,.10) !important;
  outline: none !important;
  color: var(--tela-gray-800) !important;
}

/* Sort — custom Behance-style dropdown */
.tela-hub__sort-wrap {
  flex-shrink: 0;
  position: relative;
}

.tela-hub__sort-btn,
.tela-hub__sort-wrap button.tela-hub__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px; /* match filter button height */
  border: 1px solid var(--tela-gray-300) !important;
  border-radius: 50px !important;
  background: var(--tela-white) !important;
  color: var(--tela-gray-700) !important;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--tela-font-sans);
  white-space: nowrap;
  line-height: 1;
  box-shadow: var(--tela-shadow-sm);
  transition: border-color var(--tela-transition), box-shadow var(--tela-transition);
  text-decoration: none !important;
}

.tela-hub__sort-btn svg:not(.tela-hub__sort-chevron) { width: 16px; height: 16px; flex-shrink: 0; color: var(--tela-gray-600); }

.tela-hub__sort-btn:hover,
.tela-hub__sort-wrap button.tela-hub__sort-btn:hover { border-color: var(--tela-blue) !important; box-shadow: 0 2px 8px rgba(27,79,138,.15); }
.tela-hub__sort-btn.is-open,
.tela-hub__sort-wrap button.tela-hub__sort-btn.is-open { border-color: var(--tela-blue) !important; background: var(--tela-blue-light) !important; color: var(--tela-blue) !important; }
.tela-hub__sort-btn:focus-visible { outline: 2px solid var(--tela-blue) !important; outline-offset: 2px; }

.tela-hub__sort-chevron {
  width: 8px;
  height: 5px;
  color: var(--tela-gray-400);
  flex-shrink: 0;
  transition: transform var(--tela-transition);
}

.tela-hub__sort-btn.is-open .tela-hub__sort-chevron { transform: rotate(180deg); }

/* Floating sort menu */
.tela-hub__sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: var(--tela-white);
  border: 1px solid var(--tela-gray-200);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  z-index: 300;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow: hidden;
}

.tela-hub__sort-menu[hidden] { display: none; }

.tela-hub__sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: .875rem;
  font-family: var(--tela-font-sans);
  color: var(--tela-gray-700);
  cursor: pointer;
  transition: background var(--tela-transition);
  white-space: nowrap;
  gap: 24px;
}

.tela-hub__sort-option:hover { background: var(--tela-gray-50); }
.tela-hub__sort-option:focus { background: var(--tela-blue-50); outline: none; }

.tela-hub__sort-option.is-selected { font-weight: 600; color: var(--tela-blue); }

.tela-hub__sort-option.is-selected::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b4f8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 8 6 12 14 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

/* --- ROW 2 (was): Active filter chips --- */
.tela-hub__active-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px 9px;
  flex-wrap: wrap;
  border-top: 1px solid var(--tela-gray-100);
  background: var(--tela-blue-50);
}

.tela-hub__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.tela-hub__active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tela-blue-light);
  color: var(--tela-blue);
  border: 1px solid rgba(27,79,138,.2);
  border-radius: 50px;
  padding: 4px 10px 4px 12px;
  font-size: .75rem;
  font-weight: 600;
}

.tela-hub__active-filter-tag button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  opacity: .6;
  transition: opacity var(--tela-transition);
}

.tela-hub__active-filter-tag button:hover { opacity: 1; }

.tela-hub__clear-filters {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--tela-blue) !important;
  font-size: .8125rem;
  font-weight: 500;
  padding: 4px 8px;
  text-decoration: underline;
  font-family: var(--tela-font-sans);
  flex-shrink: 0;
  white-space: nowrap;
}

.tela-hub__clear-filters:hover { color: var(--tela-blue-dark) !important; text-decoration: underline; }

/* ============================================================
   BODY — flex: sidebar + content (no overflow-x scroll on open)
   ============================================================ */
.tela-hub__body {
  display: flex;
  align-items: flex-start;
  overflow-x: hidden; /* prevents horizontal scroll during panel animation */
}

/* ============================================================
   FILTER PANEL (inline sidebar — Behance-style)
   ============================================================ */
.tela-hub__filter-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tela-white);
  border-right: 0 solid var(--tela-gray-200);
  transition: width 240ms ease, min-width 240ms ease, border-width 0ms 240ms;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.tela-hub--filter-open .tela-hub__filter-panel {
  width: 270px;
  min-width: 270px;
  border-right-width: 1px;
  border-right-color: var(--tela-gray-200);
  transition: width 240ms ease, min-width 240ms ease, border-width 0ms 0ms;
}

.tela-hub__panel-body {
  flex: 1;
  overflow-y: auto;
  padding-top: 8px; /* breathing room at top */
}

.tela-hub__filter-group { border-bottom: 1px solid var(--tela-gray-100); }

.tela-hub__filter-toggle,
.tela-hub__filter-panel button.tela-hub__filter-toggle {
  width: 100%;
  text-align: left;
  background: none !important;
  border: none !important;
  border-bottom: none !important;
  padding: 13px 18px;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tela-gray-600) !important;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--tela-font-sans);
  transition: background var(--tela-transition);
  white-space: nowrap;
  box-shadow: none !important;
  outline: none;
  text-decoration: none !important;
}

.tela-hub__filter-toggle:hover,
.tela-hub__filter-panel button.tela-hub__filter-toggle:hover {
  background: var(--tela-gray-50) !important;
  color: var(--tela-gray-800) !important;
}
.tela-hub__filter-toggle:focus-visible { outline: 2px solid var(--tela-blue) !important; outline-offset: -2px; }

.tela-hub__chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tela-gray-400);
  border-bottom: 2px solid var(--tela-gray-400);
  transform: rotate(45deg);
  transition: transform var(--tela-transition);
  flex-shrink: 0;
  margin-top: -2px;
}

.tela-hub__filter-toggle[aria-expanded="false"] .tela-hub__chevron { transform: rotate(-45deg); margin-top: 2px; }

.tela-hub__filter-options { padding: 2px 12px 10px; }
.tela-hub__filter-options.is-collapsed { display: none; }

.tela-hub__filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  font-size: .875rem;
  color: var(--tela-gray-700) !important;
  cursor: pointer;
  border-radius: var(--tela-radius);
  transition: background var(--tela-transition);
  white-space: nowrap;
  user-select: none;
}

.tela-hub__filter-option:hover { background: var(--tela-blue-light); }

.tela-hub__filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--tela-blue);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.tela-hub__filter-option span { color: var(--tela-gray-700); pointer-events: none; }

/* ============================================================
   SECTION PILLS — inside content area (shift with content)
   ============================================================ */
.tela-hub__section-strip {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--tela-gray-200);
  margin-bottom: 16px;
}

.tela-hub__section-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: wrap;
}

.tela-hub__section-pills::-webkit-scrollbar { display: none; }

/*
 * HIGH-SPECIFICITY pill rules — defeat theme button overrides.
 */
.tela-hub__content .tela-hub__section-strip .tela-hub__section-pills button.tela-hub__pill,
div.tela-hub__content div.tela-hub__section-strip div.tela-hub__section-pills button.tela-hub__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1.5px solid var(--tela-gray-200) !important;
  outline: none;
  background: var(--tela-white) !important;
  color: var(--tela-gray-700) !important;
  font-size: .8125rem;
  font-weight: 600;
  font-family: var(--tela-font-sans);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: .01em;
  transition: background var(--tela-transition), border-color var(--tela-transition), color var(--tela-transition), box-shadow var(--tela-transition);
  text-decoration: none !important;
  box-shadow: var(--tela-shadow-sm);
  margin: 0;
  flex-shrink: 0;
}

.tela-hub__content .tela-hub__section-strip .tela-hub__section-pills button.tela-hub__pill:hover {
  background: var(--tela-blue-light) !important;
  border-color: var(--tela-blue) !important;
  color: var(--tela-blue) !important;
  box-shadow: 0 2px 8px rgba(27,79,138,.12);
  text-decoration: none !important;
}

.tela-hub__content .tela-hub__section-strip .tela-hub__section-pills button.tela-hub__pill.tela-hub__pill--active,
.tela-hub__content .tela-hub__section-strip .tela-hub__section-pills button.tela-hub__pill[aria-pressed="true"] {
  background: var(--tela-blue) !important;
  border-color: var(--tela-blue) !important;
  color: var(--tela-white) !important;
  box-shadow: 0 2px 10px rgba(27,79,138,.25);
}

.tela-hub__content .tela-hub__section-strip .tela-hub__section-pills button.tela-hub__pill:focus-visible {
  outline: 2px solid var(--tela-blue) !important;
  outline-offset: 2px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.tela-hub__content {
  flex: 1;
  min-width: 0;
  padding: 0 20px 64px;
}

.tela-hub__results-count {
  font-size: .8125rem;
  color: var(--tela-gray-400);
  margin: 0 0 14px;
  min-height: 1.2em;
}

/* ============================================================
   CARD GRID
   ============================================================ */
.tela-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* Slightly narrower column minimum when filter panel is open */
.tela-hub--filter-open .tela-hub__grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Related strip uses flex, not grid */

.tela-hub__loading {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 0;
  color: var(--tela-gray-400);
  font-size: .9375rem;
}

.tela-hub__spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--tela-gray-200);
  border-top-color: var(--tela-blue);
  border-radius: 50%;
  animation: tela-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes tela-spin { to { transform: rotate(360deg); } }

.tela-hub__empty {
  text-align: center;
  padding: 72px 24px;
  color: var(--tela-gray-600);
}

.tela-hub__empty svg { width: 64px; height: 64px; margin-bottom: 16px; color: var(--tela-gray-300); }
.tela-hub__empty h3  { font-size: 1.125rem; margin: 0 0 8px; color: var(--tela-gray-800); }
.tela-hub__empty p   { margin: 0 0 20px; }

/* ============================================================
   RESOURCE CARD
   ============================================================ */
.tela-card {
  background: var(--tela-white);
  border: 1px solid var(--tela-gray-200);
  border-radius: var(--tela-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--tela-transition), transform var(--tela-transition), border-color var(--tela-transition);
  box-shadow: var(--tela-shadow-sm);
}

.tela-card:hover {
  box-shadow: var(--tela-shadow-hover);
  transform: translateY(-3px);
  border-color: var(--tela-gray-300);
}

.tela-card:focus-within { outline: 2px solid var(--tela-blue); outline-offset: 2px; }
.tela-card--featured { border-top: 3px solid var(--tela-orange); }

.tela-card__local-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tela-green);
  color: var(--tela-white);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
}

.tela-card__local-badge svg { width: 11px; height: 11px; }

.tela-card__body { padding: 16px 16px 12px; flex: 1; }

.tela-card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

.tela-card__title { font-size: .9375rem; font-weight: 700; margin: 0 0 5px; line-height: 1.35; }

.tela-card__title-link { color: var(--tela-gray-800); text-decoration: none; }
.tela-card__title-link:hover { color: var(--tela-blue); }
.tela-card__title-link:focus-visible { outline: 2px solid var(--tela-blue); border-radius: 2px; }

.tela-card__owner { font-size: .75rem; color: var(--tela-gray-400); margin: 0 0 8px; }
.tela-card__owner a { color: var(--tela-blue); text-decoration: none; }
.tela-card__owner a:hover { text-decoration: underline; }

.tela-card__excerpt {
  font-size: .8125rem;
  color: var(--tela-gray-600);
  margin: 0 0 10px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tela-card__meta { display: flex; flex-wrap: wrap; gap: 4px; }

.tela-card__footer {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--tela-gray-100);
  flex-wrap: wrap;
  background: var(--tela-gray-50);
}

/* ============================================================
   BADGES
   ============================================================ */
.tela-badge {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 50px;
  letter-spacing: .02em;
  line-height: 1.6;
}

.tela-badge--section    { background: var(--tela-blue-light);  color: var(--tela-blue); }
.tela-badge--subsection { background: var(--tela-gray-100);    color: var(--tela-gray-600); }
.tela-badge--age        { background: #fff3e0; color: #b45309; }
.tela-badge--audience   { background: var(--tela-green-light); color: var(--tela-green); }
.tela-badge--type       { background: var(--tela-gray-100);    color: var(--tela-gray-600); text-transform: capitalize; }

.tela-badge--home-to-school-ready        { background: #e0f0ff; color: #1d4ed8; }
.tela-badge--progress-not-perfection     { background: #f0fdf4; color: #166534; }
.tela-badge--the-power-of-everyday-talk  { background: #fef9c3; color: #854d0e; }

/* ============================================================
   BUTTONS
   ============================================================ */
.tela-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: .8125rem;
  font-weight: 600;
  font-family: var(--tela-font-sans);
  border-radius: var(--tela-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tela-transition), color var(--tela-transition), border-color var(--tela-transition), box-shadow var(--tela-transition);
  border: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.tela-btn:focus-visible { outline: 2px solid var(--tela-blue); outline-offset: 2px; }
.tela-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Primary: orange — reserved for the main CTA ("View Resource") */
/* Primary CTA — orange, reserved for "View Resource" / "Download" */
a.tela-btn--primary,
button.tela-btn--primary,
.tela-btn--primary {
  background: var(--tela-orange) !important;
  color: var(--tela-white) !important;
  border-color: var(--tela-orange) !important;
}
a.tela-btn--primary:hover,
button.tela-btn--primary:hover,
.tela-btn--primary:hover {
  background: var(--tela-orange-dark) !important;
  border-color: var(--tela-orange-dark) !important;
  color: var(--tela-white) !important;
  box-shadow: 0 4px 12px rgba(232,122,30,.3);
}

/* Outline — blue; !important to defeat theme pink overrides on <button> */
a.tela-btn--outline,
button.tela-btn--outline,
.tela-btn--outline {
  background: transparent !important;
  color: var(--tela-blue) !important;
  border-color: var(--tela-blue) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
a.tela-btn--outline:hover,
button.tela-btn--outline:hover,
.tela-btn--outline:hover {
  background: var(--tela-blue-light) !important;
  color: var(--tela-blue) !important;
  border-color: var(--tela-blue) !important;
}

/* Ghost — neutral secondary action */
a.tela-btn--ghost,
button.tela-btn--ghost,
.tela-btn--ghost {
  background: transparent !important;
  color: var(--tela-gray-600) !important;
  border-color: var(--tela-gray-300) !important;
  box-shadow: none !important;
}
a.tela-btn--ghost:hover,
button.tela-btn--ghost:hover,
.tela-btn--ghost:hover {
  background: var(--tela-gray-100) !important;
  border-color: var(--tela-gray-400) !important;
  color: var(--tela-gray-800) !important;
}

.tela-btn--large { padding: 12px 24px; font-size: .9375rem; }

/* ============================================================
   PAGINATION
   ============================================================ */
.tela-hub__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 40px 0 0;
  flex-wrap: wrap;
}

.tela-hub__pagination button {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--tela-gray-200);
  border-radius: var(--tela-radius);
  background: var(--tela-white);
  cursor: pointer;
  font-size: .875rem;
  color: var(--tela-gray-800);
  font-family: var(--tela-font-sans);
  transition: all var(--tela-transition);
}

.tela-hub__pagination button:hover { background: var(--tela-blue-light); border-color: var(--tela-blue); color: var(--tela-blue); }
.tela-hub__pagination button.is-active { background: var(--tela-blue); border-color: var(--tela-blue); color: var(--tela-white); font-weight: 700; }
.tela-hub__pagination button:focus-visible { outline: 2px solid var(--tela-blue); }
.tela-hub__pagination button:disabled { opacity: .4; cursor: default; }

/* ============================================================
   SINGLE RESOURCE PAGE
   ============================================================ */
.tela-single-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; }

.tela-breadcrumb { font-size: .8125rem; color: var(--tela-gray-600); margin-bottom: 24px; }
.tela-breadcrumb a { color: var(--tela-blue); text-decoration: none; }
.tela-breadcrumb a:hover { text-decoration: underline; }

.tela-single__inner { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: flex-start; }
.tela-single__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--tela-gray-800); margin: 0 0 12px; line-height: 1.2; }
.tela-single__local-badge { margin-bottom: 16px; border-radius: var(--tela-radius); display: inline-flex; padding: 5px 12px; }
.tela-single__owner { margin: 0 0 12px; font-size: .875rem; color: var(--tela-gray-600); }
.tela-single__owner a { color: var(--tela-blue); }
/* Two-row badge layout on single resource page */
.tela-single__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tela-single__badges--taxonomy { margin-bottom: 8px; }
.tela-single__badges--classification { margin-bottom: 20px; }
.tela-single__description { font-size: .9375rem; line-height: 1.7; color: var(--tela-gray-800); margin-bottom: 28px; }
.tela-single__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.tela-single__meta-box {
  background: var(--tela-gray-50);
  border: 1px solid var(--tela-gray-200);
  border-radius: var(--tela-radius-lg);
  padding: 20px;
  position: sticky;
  top: 80px;
}

.tela-single__meta-title { font-size: .9375rem; font-weight: 700; margin: 0 0 14px; color: var(--tela-gray-800); padding-bottom: 10px; border-bottom: 1px solid var(--tela-gray-200); }
.tela-single__meta-list { margin: 0; }
.tela-single__meta-list dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tela-gray-400); margin-top: 12px; }
.tela-single__meta-list dt:first-child { margin-top: 0; }
.tela-single__meta-list dd { font-size: .8125rem; color: var(--tela-gray-800); margin: 3px 0 0 0; }
.tela-single__meta-list a { color: var(--tela-blue); text-decoration: none; }
.tela-single__meta-list a:hover { text-decoration: underline; }

/* Related resources — Behance-style full-width callout strip (text left, cards right) */
.tela-single__related {
  margin-top: 56px;
  /* Break out of the single-wrap's max-width container */
  margin-left: -24px;
  margin-right: -24px;
  padding: 36px 32px 44px;
  background: var(--tela-blue-50);
  border-top: 3px solid var(--tela-blue);
  border-bottom: 1px solid var(--tela-gray-200);
}

/* Inner row: fixed text panel left + scrolling cards right */
.tela-single__related-inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Left: fixed-width text panel */
.tela-single__related-panel {
  flex: 0 0 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.tela-single__related-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--tela-blue);
  line-height: 1.2;
}

.tela-single__related-subtitle {
  font-size: .875rem;
  color: var(--tela-gray-600);
  margin: 0;
  line-height: 1.5;
}

.tela-single__related-all {
  align-self: flex-start;
  white-space: nowrap;
}

/* Right: scroll wrapper — provides positioning context for arrows + fade edges */
.tela-single__related-strip-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Edge fade gradients — appear when content is cut off */
.tela-single__related-strip-wrap::before,
.tela-single__related-strip-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 8px;
  width: 80px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 200ms ease;
}
.tela-single__related-strip-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--tela-blue-50), transparent);
}
.tela-single__related-strip-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--tela-blue-50), transparent);
}
.tela-single__related-strip-wrap.has-prev::before { opacity: 1; }
.tela-single__related-strip-wrap.has-next::after  { opacity: 1; }

/* Arrow buttons — sit at the horizontal edges of the strip */
.tela-single__related-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: var(--tela-white) !important;
  border: 1px solid var(--tela-gray-200) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.14) !important;
  cursor: pointer;
  color: var(--tela-gray-700) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--tela-transition), color var(--tela-transition), border-color var(--tela-transition), box-shadow var(--tela-transition);
  text-decoration: none !important;
}
.tela-single__related-arrow:hover {
  background: var(--tela-blue) !important;
  color: var(--tela-white) !important;
  border-color: var(--tela-blue) !important;
  box-shadow: 0 4px 14px rgba(27,79,138,.3) !important;
}
.tela-single__related-arrow svg { width: 16px; height: 16px; flex-shrink: 0; }
.tela-single__related-arrow--prev { left: -18px; }
.tela-single__related-arrow--next { right: -18px; }
.tela-single__related-arrow[hidden] { display: none !important; }

/* Horizontal scroll card strip */
.tela-single__related-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px; /* prevent card box-shadow from clipping */
}

.tela-single__related-strip::-webkit-scrollbar { display: none; }

/* Fixed-width cards so they don't collapse in flex-nowrap */
.tela-single__related-strip .tela-card {
  flex: 0 0 280px;
  width: 280px;
  scroll-snap-align: start;
}

/* ============================================================
   SUBMIT MODAL
   ============================================================ */
.tela-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tela-modal[hidden] { display: none; }

.tela-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

.tela-modal__panel {
  position: relative;
  background: var(--tela-white);
  border-radius: var(--tela-radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: tela-modal-in 200ms ease;
}

@keyframes tela-modal-in {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tela-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--tela-gray-200);
  flex-shrink: 0;
}

.tela-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tela-blue);
  margin: 0;
}

.tela-modal__close,
button.tela-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: var(--tela-gray-100) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tela-gray-600) !important;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--tela-transition), color var(--tela-transition);
  text-decoration: none !important;
}
.tela-modal__close:hover,
button.tela-modal__close:hover {
  background: var(--tela-gray-200) !important;
  color: var(--tela-gray-800) !important;
}
.tela-modal__close svg { width: 14px; height: 14px; }

.tela-modal__body {
  overflow-y: auto;
  padding: 24px;
  flex: 1;
}

/* Remove the submit-wrap header inside the modal (redundant — modal title covers it) */
.tela-modal__body .tela-submit__header { display: none; }
.tela-modal__body .tela-submit-wrap { max-width: none; }

/* ============================================================
   SUBMISSION FORM
   ============================================================ */
.tela-submit-wrap { max-width: 680px; }
.tela-submit__header { margin-bottom: 28px; }
.tela-submit__title { font-size: 1.375rem; font-weight: 800; margin: 0 0 8px; color: var(--tela-gray-800); }
.tela-submit__intro { font-size: .9375rem; color: var(--tela-gray-600); margin: 0; }

.tela-form-group { margin-bottom: 18px; }
.tela-form-group--required label::after { content: ' *'; color: var(--tela-red); }
.tela-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tela-form-group label { display: block; font-size: .875rem; font-weight: 600; color: var(--tela-gray-800); margin-bottom: 5px; }

.tela-form-group input[type="text"],
.tela-form-group input[type="url"],
.tela-form-group input[type="email"],
.tela-form-group input[type="search"],
.tela-form-group textarea,
.tela-form-group select {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: .9rem;
  font-family: var(--tela-font-sans);
  border: 1px solid var(--tela-gray-200);
  border-radius: var(--tela-radius);
  color: var(--tela-gray-800);
  background: var(--tela-white);
  transition: border-color var(--tela-transition), box-shadow var(--tela-transition);
  box-sizing: border-box;
}

.tela-form-group input:focus,
.tela-form-group textarea:focus,
.tela-form-group select:focus { outline: none; border-color: var(--tela-blue); box-shadow: 0 0 0 3px rgba(27,79,138,.12); }

.tela-form-help { font-size: .75rem; color: var(--tela-gray-400); margin: 4px 0 0; }
.tela-form-checkboxes { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tela-form-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; cursor: pointer; }
.tela-form-checkbox input { accent-color: var(--tela-blue); }
.tela-form-actions { margin-top: 24px; }

.tela-notice { padding: 12px 16px; border-radius: var(--tela-radius); font-size: .9rem; margin-bottom: 16px; }
.tela-notice--success { background: var(--tela-green-light); color: var(--tela-green); border: 1px solid #a7f3d0; }
.tela-notice--error   { background: #fef2f2; color: var(--tela-red); border: 1px solid #fca5a5; }

/* ============================================================
   ADMIN STYLES
   ============================================================ */
.tela-rh-admin .tela-rh-dashboard-cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; }

.tela-rh-stat-card {
  background: var(--tela-white);
  border: 1px solid var(--tela-gray-200);
  border-radius: var(--tela-radius-lg);
  padding: 20px 24px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--tela-shadow-sm);
}

.tela-rh-stat-number { font-size: 1.75rem; font-weight: 800; color: var(--tela-blue); line-height: 1; }
.tela-rh-stat-label  { font-size: .8125rem; color: var(--tela-gray-600); }
.tela-rh-stat-label a { color: var(--tela-orange); margin-left: 8px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .tela-hub__filter-controls { padding: 8px 14px; gap: 8px; }

  .tela-hub__inline-search { flex: 1 1 100%; order: -1; }

  .tela-hub__content { padding: 0 14px 48px; }

  .tela-hub__section-strip { padding: 14px 0 10px; }

  .tela-hub__grid { grid-template-columns: 1fr 1fr; }
  .tela-hub--filter-open .tela-hub__grid { grid-template-columns: 1fr; }

  /* On mobile, sidebar becomes a fixed overlay drawer */
  .tela-hub__filter-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    max-height: 100vh !important;
    height: 100vh;
    z-index: 999;
    width: 0 !important;
    min-width: 0 !important;
    box-shadow: none;
    overflow-y: auto;
  }

  .tela-hub--filter-open .tela-hub__filter-panel {
    width: 280px !important;
    min-width: 280px !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.18);
  }

  .tela-single__inner { grid-template-columns: 1fr; }
  .tela-single__meta-box { position: static; }

  /* Stack related resources panel above strip on mobile */
  .tela-single__related-inner { flex-direction: column; gap: 20px; }
  .tela-single__related-panel { flex: none; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  /* Give arrows more room on mobile */
  .tela-single__related-arrow--prev { left: -12px; }
  .tela-single__related-arrow--next { right: -12px; }

  .tela-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .tela-hub__hero { padding: 24px 16px 20px; }
  .tela-hub__title { font-size: 1.375rem; }

  .tela-hub__sort-wrap { display: none; }

  .tela-hub__section-pills { flex-wrap: nowrap; }

  .tela-hub__grid { grid-template-columns: 1fr; }
  .tela-hub--filter-open .tela-hub__grid { grid-template-columns: 1fr; }

  .tela-card__footer { flex-direction: column; }
  .tela-btn { justify-content: center; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .tela-hub__filter-bar,
  .tela-hub__filter-panel,
  .tela-hub__section-strip,
  .tela-hub__pagination,
  .tela-single__actions,
  .tela-single__related { display: none; }

  .tela-single-wrap { max-width: 100%; padding: 0; }
  .tela-single__inner { grid-template-columns: 1fr; }
  .tela-card { break-inside: avoid; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
  position: absolute;
  clip: rect(1px,1px,1px,1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

*:focus-visible { outline: 2px solid var(--tela-blue); outline-offset: 2px; }