/* ============ BLOG / CONTENT PAGE ============ */

/* hero + search */
.blog-hero{padding:60px 0 30px;}
.blog-search{max-width:560px;margin:1.8rem auto 0;position:relative;}
.blog-search input{width:100%;font-family:var(--font-body);font-size:1.05rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:1em 1.3em 1em 3.1em;box-shadow:var(--shadow-sm);transition:border-color .15s, box-shadow .15s;}
.blog-search input:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(25,194,207,.16);}
.blog-search .si{position:absolute;left:1.15em;top:50%;transform:translateY(-50%);font-size:1.2rem;opacity:.5;pointer-events:none;}

/* toolbar: filters + studio */
.blog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:30px;}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;}
.filter-chip{font-family:var(--font-body);font-size:.92rem;font-weight:600;color:var(--ink-soft);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:.55em 1.1em;cursor:pointer;transition:all .15s ease;white-space:nowrap;}
.filter-chip:hover{border-color:var(--aqua);color:var(--ink);}
.filter-chip.active{background:var(--aqua-deep);border-color:var(--aqua-deep);color:#fff;}
.studio-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--ink-faint);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:.55em 1.05em;cursor:pointer;transition:all .15s ease;}
.studio-btn:hover{color:var(--ink);border-color:var(--ink-soft);}

/* grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .22s ease, box-shadow .22s ease;display:flex;flex-direction:column;text-align:left;padding:0;font-family:inherit;}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.pc-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--lav);}
.pc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-card:hover .pc-cover img{transform:scale(1.04);}
.pc-cover .pc-vid-badge{position:absolute;top:13px;right:13px;background:rgba(20,28,34,.7);backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:.35em .8em;font-size:.76rem;font-weight:700;display:flex;align-items:center;gap:.4em;}
.pc-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.pc-meta{display:flex;align-items:center;gap:.7em;font-size:.8rem;color:var(--ink-faint);font-weight:600;}
.pc-cat{color:var(--pink-deep);text-transform:uppercase;letter-spacing:.06em;}
.pc-dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}
.pc-body h3{font-size:1.42rem;line-height:1.14;}
.pc-excerpt{color:var(--ink-soft);font-size:.97rem;line-height:1.55;flex:1;}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;}
.pc-read{font-weight:600;color:var(--aqua-deep);font-size:.92rem;display:inline-flex;align-items:center;gap:.3em;transition:gap .18s;}
.post-card:hover .pc-read{gap:.6em;}
.pc-comments{display:inline-flex;align-items:center;gap:.35em;font-size:.88rem;color:var(--ink-faint);font-weight:600;}

/* empty state */
.blog-empty{text-align:center;padding:70px 20px;color:var(--ink-faint);display:none;}
.blog-empty.show{display:block;}
.blog-empty .be-emo{font-size:2.6rem;margin-bottom:.6rem;}
.blog-empty h3{font-family:var(--font-display);font-size:1.6rem;color:var(--ink-soft);font-weight:500;margin-bottom:.4rem;}

/* share + comments */
.share-btn{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--ink-soft);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:.6em 1.3em;cursor:pointer;transition:border-color .15s,color .15s,transform .15s;}
.share-btn:hover{border-color:var(--aqua-deep);color:var(--aqua-deep);transform:translateY(-1px);}
.comment-jump{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.95rem;color:var(--ink-soft);text-decoration:none;}
.comment-jump:hover{color:var(--ink);}

/* ============ post detail overlay ============ */
.post-view{position:fixed;inset:0;z-index:100;background:var(--cream);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.post-view.open{opacity:1;pointer-events:auto;}
.pv-top{position:sticky;top:0;z-index:5;background:rgba(250,245,238,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.pv-top .nav-inner{height:64px;}
.pv-article{max-width:760px;margin:0 auto;padding:40px 28px 90px;}
.pv-meta{display:flex;align-items:center;gap:.7em;font-size:.86rem;color:var(--ink-faint);font-weight:600;margin-bottom:1rem;}
.pv-article h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.08;margin-bottom:1.4rem;}
.pv-cover{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:7px solid #fff;margin-bottom:2rem;}
.pv-cover img{width:100%;display:block;object-fit:cover;max-height:460px;}
.pv-video{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:2rem;background:#000;}
.pv-video iframe,.pv-video video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pv-body{font-size:1.14rem;line-height:1.8;color:var(--ink);}
.pv-body p{margin:0 0 1.3rem;}
.pv-body h1,.pv-body h2,.pv-body h3{font-family:var(--font-display);font-weight:600;margin:2rem 0 .9rem;line-height:1.2;}
.pv-body h1{font-size:2.1rem;}
.pv-body h2{font-size:1.6rem;}
.pv-body h3{font-size:1.3rem;}
.pv-body strong{font-weight:700;}
.pv-body em{font-style:italic;}
.pv-actions{display:flex;align-items:center;gap:1.2rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line);}

/* ============ admin / studio overlay ============ */
.admin-view{position:fixed;inset:0;z-index:110;background:rgba(39,49,58,.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s ease;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 18px;}
.admin-view.open{opacity:1;pointer-events:auto;}
.admin-panel{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:680px;overflow:hidden;}
.admin-head{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(25,194,207,.1),rgba(229,138,160,.1));}
.admin-head h2{font-size:1.5rem;}
.admin-head .ah-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:.1em .3em;border-radius:8px;}
.admin-head .ah-close:hover{background:rgba(0,0,0,.05);color:var(--ink);}
.admin-mode{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;}
.admin-mode.live{background:rgba(143,214,42,.2);color:#4e7a12;}
.admin-mode.local{background:rgba(239,201,76,.22);color:#7a5c12;}
.admin-body{padding:26px 28px 30px;}

/* login */
.admin-login p{color:var(--ink-soft);font-size:.98rem;margin:0 0 1.2rem;line-height:1.55;}
.admin-error{color:var(--pink-deep);font-size:.9rem;font-weight:600;margin-top:.7rem;min-height:1.2em;}
.admin-import{background:linear-gradient(120deg,#fff6ef,#edf9fa);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.admin-import .ai-text{flex:1 1 240px;display:flex;flex-direction:column;gap:3px;}
.admin-import .ai-text b{font-size:.98rem;color:var(--ink);}
.admin-import .ai-text span{font-size:.88rem;color:var(--ink-soft);line-height:1.45;}
.admin-import .ai-msg{flex:1 1 100%;font-size:.88rem;color:var(--aqua-deep);font-weight:600;min-height:0;}
.admin-or{text-align:center;color:var(--ink-faint);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin:1rem 0 .85rem;}
.admin-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;}
.admin-google .g-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);font-family:var(--font-display);font-weight:700;color:#4285F4;font-size:.95rem;line-height:1;}

/* editor form */
.editor .field{margin-bottom:18px;}
.editor label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.45rem;color:var(--ink);}
.editor label .opt{font-weight:500;color:var(--ink-faint);font-size:.85rem;}
.editor input[type=text],.editor input[type=url],.editor input[type=password],.editor textarea,.editor select{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.8em 1em;transition:border-color .15s, box-shadow .15s;}
.editor input:focus,.editor textarea:focus,.editor select:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(25,194,207,.16);}
.editor textarea{resize:vertical;min-height:200px;line-height:1.6;}
.editor .hint{font-size:.82rem;color:var(--ink-faint);margin-top:.4rem;line-height:1.5;}
.cover-drop{border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:0;overflow:hidden;background:var(--cream);position:relative;}
.cover-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.cover-drop .cd-empty{padding:26px;text-align:center;color:var(--ink-faint);font-size:.95rem;}
.cover-drop .cd-empty .cd-emo{font-size:1.8rem;display:block;margin-bottom:.4rem;}
.cover-drop img{width:100%;max-height:220px;object-fit:cover;display:block;}
.cover-drop.has-img{border-style:solid;border-color:var(--aqua);}
.editor-actions{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap;}
.editor-actions .btn-primary{flex:1;justify-content:center;min-width:160px;}
.btn-danger{background:transparent;color:var(--pink-deep);border:1.5px solid rgba(194,94,120,.4);}
.btn-danger:hover{background:rgba(229,138,160,.12);}

/* comments section */
.pv-comments{margin-top:2.6rem;}
.pv-comments h3{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--ink);margin-bottom:1.2rem;}
.pv-comments h3 span{color:var(--ink-faint);font-weight:500;font-size:1rem;}
.comment-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.6rem;}
.cm-empty{color:var(--ink-faint);font-size:.95rem;}
.comment{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md,12px);padding:1rem 1.2rem;}
.comment-head{display:flex;align-items:baseline;gap:.6em;margin-bottom:.35rem;}
.comment-name{font-weight:700;color:var(--ink);font-size:.95rem;}
.comment-date{font-size:.82rem;color:var(--ink-faint);}
.comment-text{font-size:.98rem;color:var(--ink-soft);line-height:1.55;white-space:pre-wrap;}
.comment-form{display:flex;flex-direction:column;gap:.7rem;max-width:520px;}
.comment-form input,.comment-form textarea{font-family:var(--font-body);font-size:.98rem;padding:.7em .9em;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);}
.comment-form textarea{min-height:90px;resize:vertical;}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--aqua-deep);}
.comment-form button{align-self:flex-start;}

/* formatting toolbar above the story textarea */
.fmt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-bottom:.5rem;padding:.4rem;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);}
.fmt-btn{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--ink-soft);background:transparent;border:1.5px solid transparent;border-radius:7px;padding:.4em .7em;cursor:pointer;line-height:1;transition:background .15s,border-color .15s,color .15s;}
.fmt-btn:hover{background:var(--lav);color:var(--ink);}
.fmt-sep{width:1px;align-self:stretch;background:var(--line);margin:0 .2rem;}
.body-images{margin-top:.8rem;}
.body-images .bi-label{font-size:.82rem;font-weight:600;color:var(--ink-faint);margin-bottom:.5rem;}
.body-images .bi-row{display:flex;flex-wrap:wrap;gap:10px;}
.bi-thumb{position:relative;width:84px;height:64px;border-radius:8px;overflow:hidden;border:1.5px solid var(--line);background:var(--lav);flex-shrink:0;}
.bi-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.bi-thumb .bi-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(20,28,34,.72);color:#fff;font-size:.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;}
.bi-thumb .bi-remove:hover{background:rgba(194,94,120,.9);}

/* inline images within a published story */
.pv-inline-img{margin:2rem 0;}
.pv-inline-img img{width:100%;display:block;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:6px solid #fff;}
.pv-inline-img figcaption{margin-top:.6rem;font-size:.9rem;color:var(--ink-faint);text-align:center;}

/* manage list */
.manage-list{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.manage-row{display:flex;align-items:center;gap:.9em;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream);}
.manage-row img{width:54px;height:42px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--lav);}
.manage-row .mr-info{flex:1;min-width:0;}
.manage-row .mr-info b{display:block;font-size:.98rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.manage-row .mr-info span{font-size:.82rem;color:var(--ink-faint);}
.manage-row .mr-edit{font-weight:600;color:var(--aqua-deep);font-size:.9rem;background:none;border:none;cursor:pointer;padding:.3em .5em;}
.admin-tabs{display:flex;gap:.4rem;margin-bottom:20px;}
.admin-tab{flex:1;font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--ink-soft);background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.7em;cursor:pointer;transition:all .15s;}
.admin-tab.active{background:var(--aqua-deep);border-color:var(--aqua-deep);color:#fff;}

@media(max-width:920px){
  .blog-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-toolbar{gap:.8rem;}
  .filters{gap:.5rem;}
  .filter-chip{font-size:.86rem;padding:.5em .9em;}
  .pv-article{padding:30px 20px 70px;}
}