/* ============================================================
   Golf Post Blog Creator — gp-blogcreator.css
   Wizard (step 1 input, step 2 editor), author card, badges,
   profile blog cards. Mobile-first at 600px breakpoint.
   ============================================================ */

/* === Design Tokens (local) === */
:root {
  --bc-green: #04AD79;
  --bc-green-light: rgba(4, 173, 121, 0.08);
  --bc-green-hover: #039968;
  --bc-gold: #C5A55A;
  --bc-gold-light: rgba(197, 165, 90, 0.10);
  --bc-radius: 12px;
  --bc-radius-sm: 10px;
  --bc-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --bc-border: #e2e8f0;
  --bc-text: #1a202c;
  --bc-text-muted: #718096;
  --bc-bg: #fff;
  --bc-bg-page: #f7fafc;
}

/* ============================================================
   WIZARD CONTAINER
   ============================================================ */

.blog-creator {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

.blog-creator__step {
  display: none;
}

.blog-creator__step--active {
  display: block;
}

/* ============================================================
   STEP 1 — INPUT
   ============================================================ */

/* --- Textarea --- */
.blog-input {
  display: block;
  width: 100%;
  min-height: 160px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bc-text);
  background: var(--bc-bg);
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}

.blog-input:focus {
  outline: none;
  border-color: var(--bc-green);
  box-shadow: 0 0 0 3px var(--bc-green-light);
}

.blog-input::placeholder {
  color: var(--bc-text-muted);
}

/* --- Style Selector --- */
.blog-styles {
  display: flex;
  gap: 12px;
}

.blog-style {
  flex: 1;
  padding: 16px;
  background: var(--bc-bg);
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.blog-style:hover {
  border-color: #cbd5e0;
  box-shadow: var(--bc-shadow);
}

.blog-style--active {
  border-color: var(--bc-green);
  background: var(--bc-green-light);
  box-shadow: 0 0 0 3px var(--bc-green-light);
}

.blog-style__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bc-text);
  margin-bottom: 4px;
}

.blog-style__desc {
  display: block;
  font-size: 12px;
  color: var(--bc-text-muted);
  line-height: 1.4;
}

/* --- Photo Upload --- */
.blog-photos {
  margin-top: 16px;
}

.blog-photos__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-photos__thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--bc-border);
}

.blog-photos__add {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 2px dashed var(--bc-border);
  background: var(--bc-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--bc-text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.blog-photos__add:hover {
  border-color: var(--bc-green);
  color: var(--bc-green);
}

/* --- Club Autocomplete --- */
.blog-club {
  position: relative;
}

.blog-club__input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--bc-text);
  background: var(--bc-bg);
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.blog-club__input:focus {
  outline: none;
  border-color: var(--bc-green);
  box-shadow: 0 0 0 3px var(--bc-green-light);
}

.blog-club__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bc-bg);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}

.blog-club__result {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--bc-text);
  cursor: pointer;
  transition: background 0.15s;
}

.blog-club__result:hover {
  background: var(--bc-green-light);
}

/* --- Buttons --- */
.blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--bc-radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  line-height: 1.4;
}

.blog-btn--primary {
  background: var(--bc-green);
  color: #fff;
}

.blog-btn--primary:hover {
  background: var(--bc-green-hover);
  color: #fff;
  text-decoration: none;
}

.blog-btn--secondary {
  background: var(--bc-bg-page);
  color: var(--bc-text);
  border: 1px solid var(--bc-border);
}

.blog-btn--secondary:hover {
  background: #edf2f7;
  text-decoration: none;
}

.blog-btn--link {
  background: none;
  color: var(--bc-green);
  padding: 10px 8px;
}

.blog-btn--link:hover {
  color: var(--bc-green-hover);
  text-decoration: underline;
}

.blog-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Generating State --- */
.blog-generating {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bc-green-light);
  border-radius: var(--bc-radius);
  font-size: 14px;
  color: var(--bc-text);
}

.blog-generating__spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--bc-border);
  border-top-color: var(--bc-green);
  border-radius: 50%;
  animation: bc-spin 0.7s linear infinite;
}

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

/* ============================================================
   STEP 2 — EDITOR
   ============================================================ */

.blog-editor__field {
  margin-bottom: 16px;
}

.blog-editor__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bc-text-muted);
  margin-bottom: 6px;
}

.blog-editor__title {
  display: block;
  width: 100%;
  padding: 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--bc-text);
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  line-height: 1.25;
  box-sizing: border-box;
}

.blog-editor__title::placeholder {
  color: #cbd5e0;
}

.blog-editor__teaser {
  display: block;
  width: 100%;
  padding: 8px 0;
  font-size: 16px;
  color: var(--bc-text-muted);
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

.blog-editor__teaser::placeholder {
  color: #cbd5e0;
}

/* --- Toolbar --- */
.blog-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bc-bg-page);
  border: 1px solid var(--bc-border);
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.blog-editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 14px;
  color: var(--bc-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.blog-editor__tool:hover {
  background: var(--bc-bg);
  color: var(--bc-text);
}

.blog-editor__tool--active {
  background: var(--bc-green-light);
  color: var(--bc-green);
}

/* --- Body (contenteditable) --- */
.blog-editor__body {
  min-height: 300px;
  padding: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bc-text);
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  outline: none;
  transition: border-color 0.2s;
}

.blog-editor__body:focus {
  border-color: var(--bc-green);
  box-shadow: 0 0 0 3px var(--bc-green-light);
}

.blog-editor__body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 24px 0 8px;
  line-height: 1.3;
}

.blog-editor__body h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 20px 0 6px;
  line-height: 1.35;
}

.blog-editor__body p {
  margin: 0 0 12px;
}

.blog-editor__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

.blog-editor__body blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--bc-green);
  background: var(--bc-green-light);
  font-style: italic;
  color: var(--bc-text-muted);
  border-radius: 0 8px 8px 0;
}

/* --- Tags --- */
.blog-editor__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  min-height: 42px;
  border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  align-items: center;
  transition: border-color 0.2s;
}

.blog-editor__tags:focus-within {
  border-color: var(--bc-green);
  box-shadow: 0 0 0 3px var(--bc-green-light);
}

/* --- Translate checkbox row --- */
.blog-translate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bc-green-light);
  border-radius: var(--bc-radius-sm);
  font-size: 14px;
  color: var(--bc-text);
}

.blog-translate input[type="checkbox"] {
  accent-color: var(--bc-green);
  width: 18px;
  height: 18px;
}

/* --- Status Messages --- */
.blog-status-msg {
  padding: 12px 16px;
  border-radius: var(--bc-radius-sm);
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.blog-status-msg--success {
  background: var(--bc-green-light);
  color: #065f46;
  border: 1px solid rgba(4, 173, 121, 0.25);
}

.blog-status-msg--error {
  background: #fff5f5;
  color: #c53030;
  border: 1px solid rgba(197, 48, 48, 0.20);
}

/* ============================================================
   ARTICLE AUTHOR CARD
   ============================================================ */

.article-author-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
}

.article-author-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.article-author-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bc-green);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.article-author-card__info {
  flex: 1;
  min-width: 0;
}

.article-author-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 2px;
  line-height: 1.3;
}

.article-author-card__meta {
  font-size: 13px;
  color: var(--bc-text-muted);
  line-height: 1.4;
}

.article-author-card__socials {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.article-author-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bc-bg-page);
  color: var(--bc-text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.article-author-card__social:hover {
  background: var(--bc-green-light);
  color: var(--bc-green);
}

.article-author-card__follow {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-green);
  background: var(--bc-green-light);
  border: 1.5px solid var(--bc-green);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}

.article-author-card__follow:hover {
  background: var(--bc-green);
  color: #fff;
}

/* --- Community Badge --- */
.article-community-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bc-green);
  background: var(--bc-green-light);
  border-radius: 6px;
  margin-bottom: 8px;
}

/* ============================================================
   PROFILE BLOG CARDS
   ============================================================ */

.profile-blog-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  transition: box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
}

.profile-blog-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  text-decoration: none;
  color: inherit;
}

.profile-blog-card__cover {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bc-bg-page);
}

.profile-blog-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-blog-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-text);
  margin: 0 0 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-blog-card__meta {
  font-size: 12px;
  color: var(--bc-text-muted);
  line-height: 1.4;
}

/* --- Status Badges --- */
.profile-blog-card__status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.profile-blog-card__status--draft {
  background: #fef3c7;
  color: #92400e;
}

.profile-blog-card__status--pending {
  background: #e0e7ff;
  color: #3730a3;
}

.profile-blog-card__status--published {
  background: var(--bc-green-light);
  color: #065f46;
}

/* ============================================================
   RESPONSIVE — 600px
   ============================================================ */

@media (max-width: 600px) {

  .blog-creator {
    padding: 0 12px;
  }

  /* Style selector stacks vertically */
  .blog-styles {
    flex-direction: column;
  }

  /* Author card stacks */
  .article-author-card {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .article-author-card__socials {
    justify-content: center;
  }

  .article-author-card__follow {
    align-self: center;
  }

  /* Profile blog card stacks */
  .profile-blog-card {
    flex-direction: column;
  }

  .profile-blog-card__cover {
    width: 100%;
    height: 160px;
  }

  /* Editor title smaller on mobile */
  .blog-editor__title {
    font-size: 22px;
  }
}