/* ═══════════════════════════════════════════════════════
   cookframes-post.css — CSS riêng trang BÀI VIẾT
   Chỉ load trên pne-baiviet.php
   ═══════════════════════════════════════════════════════ */

/* ── max-width bài viết ── */
:root { --max-w: 780px; }

/* ── ARTICLE WRAPPER ── */
.article { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--side-pad); }

/* ── H1 ── */
h1.recipe-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700; line-height: 1.18;
  color: var(--ink); margin-top: 1rem; letter-spacing: -0.01em;
}
h1.recipe-title em { font-style: italic; color: var(--ember); }

/* ── INTRO ── */
.recipe-intro {
  margin-top: 1.2rem; font-size: 1.05rem; color: #3D3528; line-height: 1.8;
  border-left: 3px solid var(--ember); padding-left: 1.2rem;
}

/* ── JUMP TO RECIPE ── */
.jump-bar { margin-top: 1.2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn-jump {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--ember); color: #fff;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 0.55rem 1.1rem; border-radius: 3px; border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.btn-jump:hover { background: var(--ember-light); transform: translateY(-1px); }
.btn-jump.outline { background: transparent; color: var(--ember); border: 1.5px solid var(--ember); }
.btn-jump.outline:hover { background: var(--ember); color: #fff; }

/* ── CULTURAL INTRO ── */
.cultural-intro {
  margin-top: 2rem; padding: 1.4rem 1.5rem;
  background: var(--cream); border-radius: 4px; border: 1px solid var(--border); position: relative;
}
.cultural-intro::before {
  content: '"'; font-family: var(--font-display);
  font-size: 5rem; line-height: 1; color: var(--ember); opacity: 0.12;
  position: absolute; top: 0.2rem; left: 1rem;
}
.cultural-intro-label {
  font-size: 0.65rem; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ember); margin-bottom: 0.5rem;
}
.cultural-intro p { font-size: 0.96rem; line-height: 1.8; color: #3D3528; }

/* ── AUTHOR BAR ── */
.author-bar {
  margin-top: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);
}
.author-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ember) 0%, var(--gold) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.author-info { flex: 1; }
.author-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.author-name a { color: var(--ink); text-decoration: none; }
.author-name a:hover { color: var(--ember); }
.author-dates { font-size: 0.72rem; font-family: var(--font-mono); color: var(--muted); margin-top: 0.1rem; }
.author-dates time { color: var(--muted); }

/* ── ENGAGEMENT STATS ── */
.engage-stats { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-shrink: 0; }
.engage-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-family: var(--font-mono); color: var(--muted); }
.engage-item .ei-icon { font-size: 0.85rem; font-family: 'FontAwesome'; color: var(--muted); }
.engage-item .ei-count { font-weight: 500; color: var(--ink); }

/* ── PRINT BTN ── */
.print-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 1.5px solid var(--border); border-radius: 3px;
  padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.print-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ── HERO IMAGE 16:9 ── */
.hero-image { margin-top: 1.8rem; border-radius: 4px; overflow: hidden; position: relative; }
.hero-image figure { aspect-ratio: 16 / 9; background: var(--step-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-image figcaption { font-size: 0.75rem; color: var(--muted); text-align: center; padding: 0.5rem 0; font-family: var(--font-mono); }

/* ── META BAR ── */
.recipe-meta {
  margin-top: 1.8rem; background: var(--cream);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1.2rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 1.8rem;
}
.meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.meta-label { font-size: 0.68rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.meta-value { font-size: 1rem; font-weight: 500; color: var(--ink); }
.meta-value strong { color: var(--ember); }

/* ── SECTION HEADING ── */
.section-heading {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  color: var(--ink); margin-top: 2.5rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.section-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-icon { color: var(--ember); font-family: 'FontAwesome'; font-size: 0.85em; }

/* ── IMG PLACEHOLDER ── */
.img-placeholder .ph-icon { font-size: 2rem; opacity: 0.4; font-family: 'FontAwesome'; color: var(--muted); }
.storage-icon { font-size: 1.3rem; margin-bottom: 0.4rem; color: var(--ember); font-family: 'FontAwesome'; }

/* ── INGREDIENTS ── */
.ingredients-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2rem; }
@media (max-width: 480px) { .ingredients-list { grid-template-columns: 1fr; } }
.ingredients-list li {
  font-size: 0.95rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 0.5rem;
  cursor: pointer; user-select: none; transition: opacity 0.2s;
}
.ingredients-list li::before { content: '–'; color: var(--ember); font-weight: 700; flex-shrink: 0; }
.ingredients-list li.checked { opacity: 0.4; text-decoration: line-through; }
.ingredients-list li.checked .ing-qty { text-decoration: none; }
.ing-qty { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* ── STEPS ── */
.steps-list { display: flex; flex-direction: column; gap: 0; list-style: none; }
.step { margin-top: 2.5rem; scroll-margin-top: 70px; }
.step-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.step-number {
  width: 36px; height: 36px; border-radius: 50%; background: var(--ember); color: #fff;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.step-image { border-radius: 4px; overflow: hidden; background: var(--step-bg); margin-bottom: 1rem; }
.step-image.landscape figure { aspect-ratio: 16 / 9; }
.step-image.portrait figure { aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto; }
.step-image figure { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.step-image img { width: 100%; height: 100%; object-fit: cover; }
.step-desc { font-size: 0.98rem; line-height: 1.8; color: #3A3228; }
.step-tip { margin-top: 0.7rem; background: #FFF8EC; border-left: 3px solid var(--gold); padding: 0.7rem 1rem; font-size: 0.88rem; color: #5C4A20; border-radius: 0 4px 4px 0; }
.step-tip strong { color: var(--gold); }
.step + .step { padding-top: 1rem; border-top: 1px dashed var(--border); }

/* ── NOTES ── */
.recipe-notes { margin-top: 3rem; background: var(--cream); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; }
.recipe-notes h2 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.8rem; }
.recipe-notes p { font-size: 0.93rem; color: var(--muted); }

/* ── STORAGE BLOCK ── */
.storage-block { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 560px) { .storage-block { grid-template-columns: 1fr; } }
.storage-item { background: var(--cream); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.1rem; }
.storage-icon { font-size: 1.4rem; margin-bottom: 0.4rem; }
.storage-label { font-size: 0.65rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ember); margin-bottom: 0.25rem; }
.storage-duration { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.storage-note { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* ── ACTIVITIES BLOCK ── */
.activities-block { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.activity-item { display: flex; align-items: flex-start; gap: .85rem; padding: .75rem 1rem; background: #f7f2ea; border-left: 3px solid var(--ember); border-radius: 6px; }
.activity-icon { font-size: 1.3rem; color: var(--ember); min-width: 1.5rem; text-align: center; padding-top: .1rem; }
.activity-name { font-weight: 600; margin-bottom: .2rem; }
.activity-text { font-size: .9rem; color: var(--muted); }

/* ── FAQ ── */
.faq-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); text-align: left;
}
.faq-q:hover { color: var(--ember); }
.faq-icon {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--muted); flex-shrink: 0;
  transition: transform 0.25s, border-color 0.2s; font-style: normal;
}
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--ember); color: var(--ember); }
.faq-a { font-size: 0.93rem; line-height: 1.8; color: #3D3528; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s; }
.faq-item.open .faq-a { max-height: 400px; padding-bottom: 1rem; }

/* ── RATING BLOCK ── */
.rating-block { margin-top: 3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--cream); overflow: hidden; }
.rating-inner { display: flex; align-items: stretch; gap: 0; }
.rating-left { background: var(--ink); padding: 1.8rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; flex-shrink: 0; min-width: 120px; }
.rating-score { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1; }
.rating-stars-display { color: var(--gold); font-size: 1rem; letter-spacing: 2px; font-family: 'FontAwesome'; }
.rating-stars-display::before { content: "\f005\f005\f005\f005\f005"; }
.rating-count { font-size: 0.68rem; font-family: var(--font-mono); color: var(--muted); margin-top: 0.2rem; }
.rating-right { padding: 1.5rem 1.8rem; display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; flex: 1; }
.rating-prompt { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.star-picker { display: flex; gap: 0.2rem; }
.sp-star { background: none; border: none; cursor: pointer; font-size: 1.8rem; font-family: 'FontAwesome'; color: var(--border); padding: 0 0.1rem; line-height: 1; transition: color 0.1s, transform 0.1s; }
.sp-star::before { content: "\f005"; }
.sp-star:hover, .sp-star.hovered, .sp-star.selected { color: var(--gold); }
.sp-star:hover { transform: scale(1.15); }
.star-picker.voted .sp-star { cursor: default; }
.star-picker.voted .sp-star:hover { transform: none; }
.rating-feedback { font-size: 0.82rem; font-family: var(--font-mono); color: var(--ember); min-height: 1.2em; }
.rating-display { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
.stars { display: flex; gap: 1px; color: var(--gold); font-size: 0.85rem; }
.rating-text { font-size: 0.72rem; font-family: var(--font-mono); color: var(--muted); }
.rating-text strong { color: var(--ink); }

/* ── RELATED SECTION ── */
.related-section { background: var(--cream); border-top: 1px solid var(--border); margin-top: 4rem; padding: 3rem var(--side-pad); }
.related-inner { max-width: 1100px; margin: 0 auto; }
.related-heading { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.6rem; }
.related-heading .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); display: inline-block; flex-shrink: 0; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .related-grid { grid-template-columns: 1fr; } }
.rel-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(26,18,8,0.09); }
.rel-thumb { aspect-ratio: 16 / 9; background: var(--step-bg); overflow: hidden; flex-shrink: 0; }
.rel-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.rel-card:hover .rel-thumb img { transform: scale(1.05); }
.rel-thumb-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: linear-gradient(135deg, #EDE5D8 0%, #DDD4C2 100%); }
.rel-thumb-ph .rph-emoji { font-size: 1.6rem; font-family: 'FontAwesome'; color: var(--muted); opacity: 0.5; }
.rel-thumb-ph .rph-dim { font-size: 0.6rem; font-family: var(--font-mono); color: var(--muted); letter-spacing: 0.05em; }
.rel-body { padding: 0.8rem 0.9rem 1rem; flex: 1; display: flex; flex-direction: column; }
.rel-cat { font-size: 0.65rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ember); margin-bottom: 0.3rem; }
.rel-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--ink); flex: 1; }
.rel-meta { margin-top: 0.55rem; font-size: 0.7rem; font-family: var(--font-mono); color: var(--muted); display: flex; gap: 0.7rem; }

/* ── ANIMATIONS ── */
@media (prefers-reduced-motion: no-preference) {
  .step { opacity: 0; transform: translateY(16px); animation: fadeUp 0.5s forwards; }
  .step:nth-child(1) { animation-delay: 0.05s; }
  .step:nth-child(2) { animation-delay: 0.12s; }
  .step:nth-child(3) { animation-delay: 0.19s; }
  .step:nth-child(4) { animation-delay: 0.26s; }
  .step:nth-child(5) { animation-delay: 0.33s; }
  @keyframes fadeUp { to { opacity: 1; transform: none; } }
}

/* ── RESPONSIVE 767px ── */
@media only screen and (max-width: 767px) {
  .author-bar { flex-wrap: wrap; gap: 0.7rem; }
  .engage-stats { margin-left: 0; }
  .recipe-meta { gap: 0.9rem 1.6rem; padding: 1rem 1.2rem; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .storage-block { grid-template-columns: repeat(2, 1fr); }
  .step-image.portrait figure { max-width: 280px; }
  .rating-left { padding: 1.4rem 1.5rem; }
  .rating-score { font-size: 2.2rem; }
}

/* ── RESPONSIVE 479px ── */
@media only screen and (max-width: 479px) {
  h1.recipe-title { font-size: 1.75rem; }
  .recipe-intro { font-size: 0.97rem; }
  .recipe-meta { padding: 0.9rem 1rem; gap: 0.75rem 1.2rem; }
  .meta-label { font-size: 0.62rem; }
  .meta-value { font-size: 0.9rem; }
  .ingredients-list { grid-template-columns: 1fr; }
  .step-image.portrait figure { max-width: 100%; }
  .storage-block { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .rel-title { font-size: 0.85rem; }
  .author-bar { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .engage-stats { margin-left: 0; }
  .print-btn { align-self: flex-start; }
  .jump-bar { flex-direction: column; }
  .btn-jump { width: 100%; justify-content: center; }
  .rating-inner { flex-direction: column; }
  .rating-left { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem var(--side-pad); min-width: unset; }
  .rating-score { font-size: 2rem; }
  .rating-right { padding: 1rem var(--side-pad) 1.4rem; }
  .sp-star { font-size: 1.8rem; }
  .faq-q { font-size: 0.92rem; }
  .section-heading { font-size: 1.2rem; }
}