/* ===================================================================
   NW Bee Club — shared components
   Buttons, pills, photo cards, hex tiles, sparkline, polaroid, kicker.
   Used by both Almanac (public) and Editorial (members) surfaces.
   =================================================================== */

/* ---- Buttons ------------------------------------------------------ */
.al-btn,
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: none;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.al-btn:hover,
.ed-btn:hover {
  transform: translateY(-1px);
}

.al-btn:active,
.ed-btn:active {
  transform: translateY(0);
}

/* Almanac variants */
.al-btn--solid {
  background: var(--al-honey);
  color: var(--al-ink);
}
.al-btn--solid:hover {
  background: var(--al-honey-deep);
  color: var(--al-paper);
}

.al-btn--solid-dark {
  background: var(--al-ink);
  color: var(--al-paper);
}
.al-btn--solid-dark:hover {
  background: var(--al-moss-deep);
}

.al-btn--ghost {
  background: transparent;
  color: var(--al-ink);
  border: 1px solid var(--al-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
}
.al-btn--ghost:hover {
  background: var(--al-ink);
  color: var(--al-paper);
}

.al-btn--ghost-light {
  background: transparent;
  color: var(--al-paper);
  border: 1px solid var(--al-paper);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
}
.al-btn--ghost-light:hover {
  background: var(--al-paper);
  color: var(--al-ink);
}

.al-btn--sm {
  padding: 8px 14px;
  font-size: 13px;
}

/* Editorial variants */
.ed-btn--solid {
  background: var(--ed-ink);
  color: var(--ed-cream);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  font-size: 14px;
}
.ed-btn--solid:hover {
  background: var(--ed-honey-700);
}

.ed-btn--ghost {
  background: transparent;
  color: var(--ed-ink);
  border: 1px solid var(--ed-ink);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 11px 18px;
  font-size: 14px;
}
.ed-btn--ghost:hover {
  background: var(--ed-ink);
  color: var(--ed-cream);
}

.ed-btn--full {
  width: 100%;
}

/* ---- Pills / tags ------------------------------------------------- */
.al-pill,
.ed-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--al-paper-soft);
  color: var(--al-moss);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
}

.al-pill--paper {
  background: var(--al-paper);
  color: var(--al-honey-deep);
  border-color: var(--al-rule);
}

.al-pill--white {
  background: var(--al-white);
  color: var(--al-ink);
  border-color: var(--al-rule);
}

.al-pill--honey {
  background: var(--al-honey);
  color: var(--al-ink);
  border-color: transparent;
}

.al-pill--ink {
  background: var(--al-ink);
  color: var(--al-paper);
  border-color: transparent;
}

.al-pill--member {
  background: var(--al-moss);
  color: var(--al-paper);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 10px;
}

.ed-pill--active {
  background: #e2efce;
  color: var(--ed-forest-700);
}

/* ---- Section kicker ---------------------------------------------- */
.al-kicker,
.ed-kicker {
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 3px;
  color: var(--al-honey-deep);
  text-transform: uppercase;
  font-weight: 700;
}

.ed-kicker {
  color: var(--ed-honey-700);
}

/* ---- Section rule (Editorial: title with rule line) -------------- */
.ed-section-rule {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ed-section-rule__title {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ed-ink);
  text-transform: uppercase;
  letter-spacing: 3px;
  white-space: nowrap;
}
.ed-section-rule__line {
  flex: 1;
  height: 1px;
  background: var(--ed-ink);
}

/* ---- Honeycomb background pattern -------------------------------- */
.al-honeycomb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      60deg,
      transparent 49.5%,
      var(--hc-color, rgba(241, 195, 58, 0.1)) 49.5% 50.5%,
      transparent 50.5%
    ),
    linear-gradient(
      120deg,
      transparent 49.5%,
      var(--hc-color, rgba(241, 195, 58, 0.1)) 49.5% 50.5%,
      transparent 50.5%
    ),
    linear-gradient(
      0deg,
      transparent 49.5%,
      var(--hc-color, rgba(241, 195, 58, 0.1)) 49.5% 50.5%,
      transparent 50.5%
    );
  background-size: var(--hc-size, 48px) calc(var(--hc-size, 48px) * 1.732);
  opacity: var(--hc-opacity, 1);
}

/* SVG honeycomb (preferred — sharper). Use as: <div class="al-honeycomb-svg" data-color="..."></div> */
.al-honeycomb-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'><path d='M48 0 L96 24 L96 60 L48 84 L0 60 L0 24 Z' fill='none' stroke='%23f1c33a' stroke-opacity='0.18' stroke-width='1'/></svg>");
  background-size: 96px 84px;
}

.al-honeycomb-svg--dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'><path d='M48 0 L96 24 L96 60 L48 84 L0 60 L0 24 Z' fill='none' stroke='%23231d10' stroke-opacity='0.10' stroke-width='1'/></svg>");
}

/* ---- Photo frame (striped placeholder unless img child present) -- */
.al-photo {
  position: relative;
  background: repeating-linear-gradient(45deg, #ede3c5 0 8px, #f6efdc 8px 16px);
  border: 1px solid var(--al-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--al-ink-soft);
  overflow: hidden;
}

.al-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.al-photo--square {
  aspect-ratio: 1 / 1;
}
.al-photo--4-3 {
  aspect-ratio: 4 / 3;
}

.al-photo__tag {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* ---- Polaroid card ----------------------------------------------- */
.al-polaroid {
  background: var(--al-white);
  border: 1px solid var(--al-rule);
  box-shadow: 0 4px 14px rgba(35, 29, 16, 0.08);
}

.al-polaroid__caption {
  padding: 10px 12px;
  font-family: var(--ff-display);
  font-size: 14px;
  color: var(--al-ink);
  border-top: none;
}

/* ---- Hex tile (CSS clip-path) ------------------------------------ */
.al-hex,
.ed-hex {
  --hex-size: 86px;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.155);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ed-cream-3);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0 75%,
    0 25%
  );
  text-align: center;
  transition: transform 0.15s ease;
}

.ed-hex {
  background: var(--ed-cream-3);
}
.ed-hex--active {
  background: var(--ed-honey-400);
}
.ed-hex--ink {
  background: var(--ed-ink);
  color: var(--ed-cream);
}

.al-hex:hover,
.ed-hex:hover {
  transform: translateY(-2px);
}

.ed-hex-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.ed-hex-tile__label {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ed-ink);
}

.ed-hex__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ed-ink);
}

.ed-hex--ink .ed-hex__icon {
  color: var(--ed-cream);
}

.ed-hex__count {
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 700;
}

/* ---- Sparkline (inline SVG sized via parent) --------------------- */
.al-sparkline {
  display: inline-block;
  vertical-align: middle;
}

/* ---- Stat (number + label) --------------------------------------- */
.al-stat__num {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--al-ink);
  line-height: 1;
}
.al-stat__label {
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: var(--al-ink-soft);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---- Card (paper / white) ---------------------------------------- */
.al-card {
  background: var(--al-white);
  border: 1px solid var(--al-rule);
  padding: 28px;
}

.al-card--paper {
  background: var(--al-paper-deep);
  border: 1px solid var(--al-rule);
  padding: 32px;
}

.al-card--dark {
  background: var(--al-moss-deep);
  color: var(--al-paper);
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.al-card--honey {
  background: var(--al-honey);
  color: var(--al-ink);
  padding: 18px;
}

/* ---- Icon system (inline SVG via class) -------------------------- */
.al-icon,
.ed-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  flex-shrink: 0;
}