/* ================================================================
   Group Nodes — Community Content Listing
   File: themes/theme_acbf/css/group-nodes.css
   Add to libraries.yml under global: css/group-nodes.css: {}
   ================================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.gn-hero {
  background: linear-gradient(135deg, #1C1C2E 0%, #2d2d4a 55%, #0d3d1e 100%);
  position: relative;
  overflow: hidden;
  padding: 48px 0 40px;
  margin-bottom: 0;
}
.gn-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(232,193,106,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,193,106,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.gn-hero-orb-1 {
  position: absolute; top: -60px; right: -60px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(232,193,106,.12) 0%, transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.gn-hero-orb-2 {
  position: absolute; bottom: -40px; left: 5%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(29,172,75,.14) 0%, transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.gn-hero-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gn-hero-icon {
  width: 56px; height: 56px;
  background: rgba(232,193,106,.15);
  border: 1px solid rgba(232,193,106,.3);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #e8c16a;
  font-size: 22px;
  flex-shrink: 0;
}
.gn-hero-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #e8c16a; margin-bottom: 6px;
}
.gn-hero-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700; color: #fff;
  margin: 0 0 6px; line-height: 1.2;
}
.gn-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin: 0;
}

/* ── Body ──────────────────────────────────────────────────── */
.gn-body {
  background: #F7F5F0;
  padding: 32px 0 60px;
  min-height: 60vh;
}

/* ── Filters ───────────────────────────────────────────────── */
.gn-filters {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e4dc;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(28,28,46,.05);
}
.gn-filters-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gn-filter-icon {
  color: #e8c16a;
  font-size: 15px;
  flex-shrink: 0;
}
.gn-filters .views-exposed-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.gn-filters .form-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gn-filters .form-item__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b6b7a;
  white-space: nowrap;
  margin: 0;
}
.gn-filters select {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e2ddd4;
  background: #f7f5f0;
  color: #1C1C2E;
  cursor: pointer;
}
.gn-filters select:focus {
  outline: none;
  border-color: #1dac4b;
}
.gn-filters .form-actions { margin: 0; }
.gn-filters input[type="submit"] {
  background: var(--btn-primary, #1aaa4b);
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.gn-filters input[type="submit"]:hover { background: var(--btn-primary-hover, #044c2b); }

/* ── Action links ──────────────────────────────────────────── */
.gn-actions {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gn-actions .action-links-item a,
.gn-actions .button-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-primary, #1aaa4b);
  color: #fff !important;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.gn-actions .action-links-item a:hover { background: var(--btn-primary-hover, #044c2b); }

/* ── Grid ──────────────────────────────────────────────────── */
.gn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* ── Card ──────────────────────────────────────────────────── */
.gn-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e4dc;
  box-shadow: 0 2px 12px rgba(28,28,46,.06);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  border-top: 3px solid #e8e4dc;
}
.gn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(28,28,46,.11);
}
/* Color accent top borders per type */
.gn-card--gold   { border-top-color: #e8c16a; }
.gn-card--green  { border-top-color: #1dac4b; }
.gn-card--blue   { border-top-color: #3b82f6; }
.gn-card--purple { border-top-color: #8b5cf6; }
.gn-card--teal   { border-top-color: #14b8a6; }
.gn-card--orange { border-top-color: #f97316; }
.gn-card--grey   { border-top-color: #9ca3af; }

.gn-card-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Type badge */
.gn-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gn-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
}
.gn-type-badge--gold   { background: rgba(232,193,106,.14); color: #a8782a; border: 1px solid rgba(232,193,106,.35); }
.gn-type-badge--green  { background: rgba(29,172,75,.10);   color: #17923e; border: 1px solid rgba(29,172,75,.28); }
.gn-type-badge--blue   { background: rgba(59,130,246,.10);  color: #1d4ed8; border: 1px solid rgba(59,130,246,.28); }
.gn-type-badge--purple { background: rgba(139,92,246,.10);  color: #6d28d9; border: 1px solid rgba(139,92,246,.28); }
.gn-type-badge--teal   { background: rgba(20,184,166,.10);  color: #0f766e; border: 1px solid rgba(20,184,166,.28); }
.gn-type-badge--orange { background: rgba(249,115,22,.10);  color: #c2410c; border: 1px solid rgba(249,115,22,.28); }
.gn-type-badge--grey   { background: rgba(156,163,175,.12); color: #4b5563; border: 1px solid rgba(156,163,175,.3); }

.gn-unpublished-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  background: rgba(239,68,68,.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,.25);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Title */
.gn-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C2E;
  margin: 0;
  line-height: 1.4;
  flex: 1;
}
.gn-card-title a {
  color: inherit;
  text-decoration: none;
}
.gn-card-title a:hover { color: #1dac4b; }

/* Footer */
.gn-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0ede7;
  margin-top: auto;
}
.gn-card-date {
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 5px;
}
.gn-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gn-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gn-btn-view {
  background: var(--btn-primary, #1aaa4b);
  color: #fff;
  border: none;
}
.gn-btn-view:hover { background: var(--btn-primary-hover, #044c2b); color: #fff; text-decoration: none; }
.gn-btn-edit {
  background: transparent;
  border: 1px solid #e2ddd4;
  color: #6b6b7a;
  padding: 5px 9px;
}
.gn-btn-edit:hover { border-color: #e8c16a; color: #e8c16a; text-decoration: none; }

/* ── Empty state ───────────────────────────────────────────── */
.gn-empty {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
}
.gn-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
.gn-empty p { font-size: 15px; margin: 0; }

/* ── Pager ─────────────────────────────────────────────────── */
.gn-pager { margin-top: 32px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gn-hero { padding: 32px 0 28px; }
  .gn-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .gn-grid { grid-template-columns: 1fr; }
}

/* ── Hide admin elements on group nodes page ───────────────── */
.path-group .block-group-operations,
.path-group .block-group-operations h2,
.group-1-nodes .block-group-operations,
.group-1-nodes .block-group-operations h2 {
  display: none !important;
}

/* Hide the default admin table since we use card grid */
.view-group-nodes .views-table {
  display: none !important;
}

/* Hide page-header section default title (we have our own hero) */
.path-group .page-header .header-text {
  display: none !important;
}

/* Style action links (Add existing / Add new content) */
.gn-page-actions {
  margin-bottom: 20px;
}
.gn-page-actions .action-links-item a,
.gn-page-actions .button-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--btn-primary, #1aaa4b) !important;
  border: 1.5px solid var(--btn-primary, #1aaa4b);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-right: 8px;
  transition: all .2s;
}
.gn-page-actions .action-links-item a:hover,
.gn-page-actions .button-action:hover {
  background: var(--btn-primary, #1aaa4b);
  color: #fff !important;
}

/* Fix view container padding */
.view-group-nodes {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Override any olivero table styles leaking in */
.gn-body table { display: none; }