/* ============================================================
   URBAN GRND — components.css
   Herbruikbare bouwstenen uit de brandkit. Gebruik deze .ug-*
   classes bij het invullen van de content-pagina's.
   ============================================================ */

/* ---- Eyebrow ---- */
.ug-eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:var(--text-sm);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ug-amber-500);
}
.ug-eyebrow--dot{display:inline-flex;align-items:center;gap:7px}
.ug-eyebrow--dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ug-amber-500)}

/* ---- Links & hover-patronen ---- */
.ug-link{transition:color .15s ease,opacity .15s ease}
.ug-link:hover{color:var(--ug-amber-500)}
.ug-navlink{position:relative}
.ug-navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--ug-amber-500);transition:right .2s ease}
.ug-navlink:hover::after{right:0}
.ug-lift{transition:transform .16s ease,box-shadow .16s ease}
.ug-lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

/* ---- Sectie-oppervlakken ---- */
.ug-section{padding:var(--space-8) 0}
.ug-surface-bright{background:var(--ug-violet-500);color:var(--on-dark)}
.ug-surface-deep{background:var(--ug-violet-800);color:var(--on-dark)}
.ug-surface-darkest{background:var(--ug-violet-900);color:var(--on-dark)}
.ug-surface-amber{background:var(--ug-amber-500);color:var(--ug-violet-800)}
.ug-grad-1{background:linear-gradient(135deg,#5a08d2,#7b38e0)}
.ug-grad-2{background:linear-gradient(135deg,#350096,#5a08d2)}
.ug-grad-3{background:linear-gradient(135deg,#2a0676,#5a08d2)}
.ug-grad-4{background:linear-gradient(135deg,#7b38e0,#350096)}
.ug-grad-5{background:linear-gradient(135deg,#5a08d2,#2a0676)}

/* ---- Button ---- */
.ug-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;border:2px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.ug-btn:active{transform:translateY(1px) scale(.99)}
.ug-btn--sm{font-size:var(--text-sm);padding:.5rem 1.1rem}
.ug-btn--md{font-size:var(--text-base);padding:.8rem 1.7rem}
.ug-btn--lg{font-size:var(--text-lg);padding:1rem 2.2rem}
.ug-btn--block{display:flex;width:100%}
.ug-btn--amber{background:var(--ug-amber-500);color:var(--ug-white);box-shadow:var(--glow-amber)}
.ug-btn--amber:hover{background:var(--ug-amber-700);transform:translateY(-2px)}
.ug-btn--violet{background:var(--ug-violet-500);color:var(--ug-white)}
.ug-btn--violet:hover{background:var(--ug-violet-400);transform:translateY(-2px)}
.ug-btn--outline{background:transparent;color:currentColor;border-color:currentColor}
.ug-btn--outline:hover{background:currentColor}
.ug-btn--outline:hover>*{color:var(--ug-violet-700)}
.ug-btn--white-outline{background:transparent;color:var(--ug-white);border-color:rgba(255,255,255,.55)}
.ug-btn--white-outline:hover{border-color:var(--ug-white);background:rgba(255,255,255,.1)}
.ug-btn--ghost{background:transparent;color:currentColor}
.ug-btn--ghost:hover{background:rgba(255,255,255,.12)}

/* ---- Badge ---- */
.ug-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);
  font-weight:700;font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:.4rem .8rem;border-radius:var(--radius-pill);line-height:1;
}
.ug-badge--amber{background:var(--ug-amber-500);color:var(--ug-violet-800)}
.ug-badge--amber-deep{background:var(--ug-amber-700);color:var(--ug-white)}
.ug-badge--amber-soft{background:var(--ug-amber-300);color:var(--ug-violet-800)}
.ug-badge--violet{background:var(--ug-violet-700);color:var(--ug-white)}
.ug-badge--violet-bright{background:var(--ug-violet-500);color:var(--ug-white)}
.ug-badge--lavender{background:var(--ug-violet-200);color:var(--ug-violet-800)}
.ug-badge--ink{background:var(--ug-ink);color:var(--ug-white)}
.ug-badge--white{background:var(--ug-white);color:var(--ug-violet-700)}
.ug-badge--soft{background:rgba(255,255,255,.12);color:var(--ug-white)}
.ug-badge--outline{background:transparent;color:currentColor;border:1.5px solid currentColor}
.ug-badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- Activity card ---- */
.ug-card{
  display:flex;flex-direction:column;background:var(--surface-card);color:var(--on-dark);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  transition:transform .16s ease,box-shadow .16s ease;
}
.ug-card--link{cursor:pointer}
.ug-card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ug-card__media{
  position:relative;aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,var(--ug-violet-500) 0 12px,var(--ug-violet-400) 12px 24px);
  display:flex;align-items:flex-start;padding:var(--space-4);gap:var(--space-2);
}
.ug-card__media-title{position:absolute;left:16px;bottom:14px;font-family:var(--font-display);text-transform:uppercase;font-size:1.35rem;color:rgba(255,255,255,.95);line-height:.95;max-width:88%}
.ug-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.ug-card__title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--text-h3);line-height:var(--leading-snug);color:var(--on-dark)}
.ug-card__meta{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-sm);color:var(--on-dark-muted);font-weight:600}
.ug-card__desc{font-size:var(--text-sm);color:var(--on-dark-muted);margin:0}
.ug-card__foot{margin-top:auto;padding-top:var(--space-2)}
.ug-card--light{background:var(--surface-light)}
.ug-card--light .ug-card__title{color:var(--on-light)}
.ug-card--light .ug-card__meta,.ug-card--light .ug-card__desc{color:var(--on-light-muted)}

/* ---- Price / arrangement card ---- */
.ug-price{
  position:relative;display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--surface-card);color:var(--on-dark);border:2px solid transparent;
  border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);box-shadow:var(--shadow-md);
}
.ug-price--featured{border-color:var(--ug-amber-500)}
.ug-price__flag{
  position:absolute;top:-13px;left:var(--space-5);background:var(--ug-amber-500);color:var(--ug-violet-800);
  font-weight:700;font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:.4rem .85rem;border-radius:var(--radius-pill);
}
.ug-price__name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--text-h3);line-height:var(--leading-snug)}
.ug-price__amount{display:flex;align-items:baseline;gap:.4rem}
.ug-price__amount b{font-family:var(--font-heading);font-weight:800;font-size:3.25rem;line-height:1;color:var(--ug-amber-500)}
.ug-price__per{font-size:var(--text-sm);color:var(--on-dark-muted);font-weight:600}
.ug-price__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.ug-price__list li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--text-sm)}
.ug-price__list li::before{
  content:"✓";flex:0 0 auto;width:1.35rem;height:1.35rem;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(227,150,56,.22);color:var(--ug-amber-500);border-radius:50%;font-size:.8rem;font-weight:700;
}
.ug-price__foot{margin-top:auto;padding-top:var(--space-2)}

/* ---- Container helper ---- */
.ug-container{max-width:var(--maxw);margin:0 auto;padding:0 24px}