/* Tutorial Details styles */

:root{
  --bg:#F6F3F6;
  --ink:#4f3b4e;
  --brand:#5c475b;          /* primary purple */
  --border:#e4dce3;
  --chip:#efe7ee;
  --danger:#C04A5A;         /* delete red */

  /* “Edit” pill palette – used for the chips under the title */
  --pill-edit-bg:#A68CA5;
  --pill-edit-bg-hover:#7F627D;
  --pill-edit-ink:#F6F3F6;
}

body{ background:var(--bg); color:var(--ink); }

/* ---------- Layout ---------- */
.post-wrapper{
  display:flex; gap:40px; align-items:flex-start;
  max-width:900px; width:100%; margin:40px auto; padding:0;
  background:none; border:none;
}
.td-wrap{ max-width:900px; margin:26px auto 80px; padding:0 18px; }

.image-side{ flex-shrink:0; }
.post-img{
  width:300px; border-radius:12px; object-fit:contain; display:block;
  background:#fff; border:1px solid var(--border);
}
.image-side video{
  width:300px; border-radius:12px; display:block; background:#000;
  border:1px solid var(--border);
}
.pdf-link{
  display:inline-block; margin-top:10px; padding:8px 14px; border-radius:999px;
  background:#E5E1DA; color:var(--brand); font-weight:800; text-decoration:none;
  border:1px solid var(--border);
}

.details-side{ flex:1; display:flex; flex-direction:column; }

.action-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.icon-form{ display:inline; }
.icon-button{ background:none; border:none; font-size:1.3rem; cursor:pointer; transition:transform .2s; }
.icon-button:hover{ transform:scale(1.1); }
.likes-count{ font-size:.95rem; color:#555; }

.follow-form{ margin-left:auto; }
.follow-button{
  padding:6px 14px; background:#E5E1DA; color:#5C475B; border:none; border-radius:20px;
  font-size:.85rem; cursor:pointer;
}
.follow-button.following{ background:#DCD1DB; color:#5C475B; }

.post-title,
.td-title{ font-size:1.3rem; font-weight:900; margin:10px 0 6px; color:#222; }
.description{ font-size:1rem; color:#555; margin-bottom:10px; }
.post-meta{ font-size:.9rem; color:#6b5a69; margin-bottom:8px; }

/* ---------- Chips / Pills under the title ---------- */
.td-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 10px; }

/* Make the chips look like the “Edit” pill */
.page-tutorial-details .td-chips .chip,
.page-tutorial-details .td-chips .chip:link,
.page-tutorial-details .td-chips .chip:visited{
  background:var(--pill-edit-bg);
  color:var(--pill-edit-ink);
  border:1px solid var(--pill-edit-bg);
  border-radius:999px;
  padding:6px 12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
}
.page-tutorial-details .td-chips .chip:hover{
  background:var(--pill-edit-bg-hover);
  border-color:var(--pill-edit-bg-hover);
  color:var(--pill-edit-ink);
}

/* ---------- Legacy buttons kept for other pages ---------- */
.edit-post-button{
  display:inline-block; margin-top:10px; padding:6px 18px;
  background:#A68CA5; color:#F6F3F6; text-decoration:none; border-radius:999px;
  font-weight:800; font-size:.85rem; border:none; transition:background-color .2s ease;
}
.edit-post-button:hover{ background:#7F627D; }
.delete-post-button{
  display:inline-block; margin-top:10px; padding:6px 18px;
  background:#7F627D; color:#F6F3F6; text-decoration:none; border-radius:999px;
  font-weight:800; font-size:.85rem; border:none; transition:background-color .2s ease;
}
.delete-post-button:hover{ background:#5C475B; }

/* ---------- Comments ---------- */
.container{ max-width:900px; margin:auto; word-break:break-word; }
.comment-box{ background:#fdf5f8; padding:16px 20px; border-radius:12px; margin-bottom:12px; }
.comment-form{ margin-bottom:20px; }
.comment-button{
  padding:6px 14px; border:none; border-radius:999px; font-weight:800; font-size:13px;
  cursor:pointer; transition:background-color .2s ease;
}
.comment-delete-button{ background:#7F627D; color:#fff; }
.comment-delete-button:hover{ background:#5C475B; }
.comment-hide-button{ background:#A68CA5; color:#fff; }
.comment-hide-button:hover{ background:#7F627D; }
.comment-show-hidden{
  background:#e0d2e1; color:#5C475B; font-weight:800; padding:6px 14px;
  border-radius:999px; border:none; cursor:pointer; font-size:13px;
}
.comment-show-hidden:hover{ background:#d4c2d4; }
.comment-submit-button{
  background:#7F627D; color:#fff; font-weight:800; padding:8px 18px; border:none;
  border-radius:999px; font-size:14px; cursor:pointer;
}
.comment-submit-button:hover{ background:#5C475B; }

/* ---------- Media row ---------- */
.td-media{ margin-bottom:18px; }
.td-media-title{ font-weight:800; color:#5C475B; margin:0 0 8px; }
.td-media-title a{ color:#5C475B; text-decoration:none; }
.td-media-title a:hover{ text-decoration:underline; }

.td-link{
  display:inline-block; margin-top:8px;
  font-weight:700; color:#5C475B;
  background:#EDE4EE;
  padding:6px 12px;
  border-radius:999px;
  text-decoration:none;
}
.td-link:hover{ background:#DCD1DB; }

.pdf-fallback{
  height:220px; display:flex; align-items:center; justify-content:center;
  background:#f2ecf2; color:#5C475B; border-radius:12px;
}
.pdf-fallback .badge{
  background:#fff; border:1px solid #d7c8d6; padding:4px 8px; border-radius:8px; font-weight:700;
}

/* ---------- Unified buttons used in tutorial_details.php ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:8px 14px; border-radius:999px; border:1px solid transparent;
  font-weight:800; text-decoration:none; cursor:pointer; line-height:1;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm{ padding:6px 10px; font-size:.9rem; }
.btn-primary{ background:var(--brand); color:#F6F3F6; }
.btn-primary:hover{ background:#4c394b; }
.btn-outline{ background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-outline:hover{ background:#efe7ee; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#a53e4d; }

/* Inline layout for action buttons next to comments */
.comment-box form{ display:inline-block; margin:0; }
.comment-box form + form{ margin-left:8px; }
.comment-box .btn{ margin-top:6px; }
@media (min-width:600px){
  .comment-box .btn{ margin-top:0; }
}

/* Owner action row (Edit / Delete) wraps nicely */
.owner-actions,
.td-title + div{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  .post-wrapper{ flex-direction:column; align-items:center; gap:18px; }
  .image-side, .details-side{ width:100%; text-align:center; }
  .image-side video, .post-img{ width:min(420px, 100%); margin:0 auto; }
  .action-row{ justify-content:center; flex-wrap:wrap; }
  .follow-form{ margin-left:0; margin-top:10px; }
}