/* blog-post.css
   Rediseño moderno para la vista de post: grid principal + sidebar,
   tipografía legible, tarjetas con sombras y comportamiento responsivo. */

:root{
  --bg:#ffffff;
  --muted:#777777;
  --title:#222222;
  --card-bg:#ffffff;
  --accent:#71818a;
}

main{ color:var(--title); }

/* Header */
main > header{ background:transparent; padding:18px 20px 10px; position:relative; }
main > header > div#title{ max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
main > header .name{ font-size:1.9rem; font-weight:800; margin:0; color:var(--title); }

/* Header share box (toggle with #shareBox.show) */
main > header #share{ position:absolute; right:50px; top:40%; transform:translateY(-50%); cursor:pointer; z-index:20; }
main > header #share img{ width:35px; height:35px; display:block; }
main > header #share #shareBox{ position:absolute; left:-20px; top:50px; display:none; background:#fff; border:1px solid #e6eef0; border-radius:8px; padding:10px 14px; box-shadow:0 8px 30px rgba(9,30,66,0.08); min-width:180px; }
main > header #share #shareBox.show{ display:block; }
main > header #share #shareBox:before{ content:""; position:absolute; top:-10px; left:30px; border-width:8px; border-style:solid; border-color:transparent transparent #fff transparent; }
main > header #share #shareBox ul{ padding:0; margin:0; list-style:none; display:flex; gap:8px; align-items:center; }
main > header #share #shareBox li{ list-style:none; padding:6px; border-radius:6px; cursor:pointer; transition:background .12s ease; }
main > header #share #shareBox li:hover{ background:#f2f6f7; }

/* Small helper */
.muted{ color:var(--muted); }

/* Container / Grid */
.post-container{ max-width:1200px; margin:0 auto; padding:20px; }
.post-grid{ display:grid; grid-template-columns: 1fr 320px; gap:28px; align-items:start; }
.post-main{ width:100%; }
.post-sidebar{ width:100%; }

.image img, .photo {
  max-width: 100%;
}

/* Featured image */
#blog img.photo{ width:100%; height:420px; object-fit:cover; object-position:center; border-radius:10px; box-shadow:0 8px 30px rgba(9,30,66,0.06); }

/* Post body card */
#body{ background:var(--card-bg); border-radius:14px; padding:28px; margin-top:18px; border:1px solid #ececec; box-shadow:0 12px 40px rgba(9,30,66,0.06); }

#description-text{ line-height:1.85rem; color:#333; font-size:1.02rem; }

.post-meta{ font-size:0.9rem; color:var(--muted); text-align:right; margin-bottom:8px; }
.post-meta svg{ vertical-align:middle; height:20px; margin-right:6px; }

/* Author box */
.author-box{ display:flex; gap:12px; align-items:center; background:#fff; border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(9,30,66,0.04); margin-bottom:16px; }
.author-avatar img{ width:64px; height:64px; object-fit:cover; border-radius:8px; }
.author-info .author-name{ font-weight:700; color:var(--title); }
.author-info .author-bio{ color:var(--muted); font-size:0.95rem; margin-top:4px; }
.author-meta{ color:#9aa3a8; font-size:0.85rem; margin-top:6px; }

/* Sidebar */
.sidebar-section{ background:#fff; border-radius:10px; padding:12px; margin-bottom:16px; box-shadow:0 6px 18px rgba(9,30,66,0.04); }
.sidebar-section h3{ margin:0 0 10px; font-size:1.05rem; }

/* Related Sites */
.related-cards {
	display: grid;
	grid-template-columns: 1fr; /* Changed from auto-fill for single column sidebar */
	gap: 20px;
}

.related-card {
	display: block;
	text-decoration: none;
	background: white;
	border-radius: 10px; /* var(--radius-md) */
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* var(--shadow-sm) */
	transition: transform 0.3s, box-shadow 0.3s;
	border: 1px solid #e6edf0; /* var(--border-color) */
}

.related-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* var(--shadow-md) */
}

.card-image { height: 160px; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.related-card:hover .card-image img { transform: scale(1.05); }
.card-content { padding: 15px; }
.card-title { margin: 0 0 10px 0; font-size: 1.1rem; color: var(--title); font-weight: 700; }
.card-distance { display: flex; align-items: center; gap: 5px; color: #888; font-size: 0.9rem; }
.card-distance img { width: 14px; height: 14px; opacity: 0.6; }

/* Ads blocks */
.block-wide{ margin-top:18px; }
.sidebar-ads{ display:flex; justify-content:center; align-items:center; min-height:80px; }

/* Responsive adjustments */
@media (max-width: 960px){ .post-grid{ grid-template-columns: 1fr 300px; } }
@media (max-width: 760px){ .post-grid{ grid-template-columns: 1fr; } #blog img.photo{ height:320px; } }
@media (max-width: 480px){ #blog img.photo{ height:220px; } .author-avatar img{ width:48px; height:48px; } }

/* Share buttons */
.post-share{ display:flex; gap:10px; align-items:center; margin:18px 0; }
.post-share .share-label{ font-weight:700; font-size:1.05rem; color:var(--title); }
.share-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#f5f7f8; border:1px solid #e6edf0; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none; }
.share-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(9,30,66,0.06); }
.share-btn .icon{ height:20px; width:20px; display:flex; align-items:center; justify-content:center; }
.share-btn .icon img{ display:block; width:100%; height:100%; }
.share-btn.facebook{ background:#1877f2; border-color:rgba(0,0,0,0.03); }
.share-btn.twitter{ background:#1da1f2; }
.share-btn.whatsapp{ background:#25d366; }
.share-btn.mail{ background:#777; }
.share-btn.facebook img, .share-btn.twitter img, .share-btn.whatsapp img, .share-btn.mail img { filter: brightness(0) invert(1); }
.share-count{ font-size:0.85rem; color:var(--muted); margin-left:6px; }

/* Floating share for mobile */
.floating-share{ position:fixed; right:14px; bottom:14px; z-index:60; display:none; gap:8px; flex-direction:column; }

/* Make sidebar sticky where desired */
.post-sidebar .sticky{ position:sticky; top:90px; }
.post-sidebar{ padding-top:6px; }

/* Sidebar interactions */
.sidebar-recent .recent-item:hover{ background:#fbfeff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(9,30,66,0.03); }
.sidebar-tags a:hover{ background:#eef8fb; border-color:#e0edf1; }

/* Ensure floating share shows on small screens */
@media (max-width:760px){ .floating-share{ display:flex; } }

/* Post navigation (prev/next) */
.post-navigation{ display:flex; gap:12px; margin-top:26px; }
.post-navigation .nav-card{ flex:1; display:flex; gap:12px; align-items:center; padding:12px; border-radius:10px; border:1px solid #ececec; background:var(--card-bg); box-shadow:0 8px 24px rgba(9,30,66,0.04); text-decoration:none; color:inherit; }
.post-navigation .nav-card .thumb{ width:92px; height:62px; border-radius:8px; overflow:hidden; }
.post-navigation .nav-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-navigation .nav-card .meta{ font-size:0.95rem; }
.post-navigation .nav-card .meta .label{ font-size:0.8rem; color:var(--muted); margin-bottom:6px; display:block; }
.post-navigation .nav-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(9,30,66,0.06); }

/* Sidebar widgets extra */
.sidebar-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-tags a{ padding:6px 10px; background:#f7f9fa; color:var(--accent); border-radius:999px; font-size:0.9rem; text-decoration:none; border:1px solid #eef2f3; }
.sidebar-follow{ display:flex; gap:8px; align-items:center; justify-content:space-between; }

/* Recent posts list */
.sidebar-recent .recent-item{ display:flex; gap:10px; align-items:center; padding:8px 6px; border-radius:8px; text-decoration:none; color:inherit; }
.sidebar-recent .recent-item img{ width:64px; height:48px; object-fit:cover; border-radius:6px; }
.sidebar-recent .recent-item .title{ font-weight:700; font-size:0.95rem; }

/* Comments call-to-action */
.post-cta{ margin-top:18px; padding:12px; border-radius:10px; background:linear-gradient(180deg,#fff,#fbfeff); border:1px solid #edf4f6; }

/* Accessibility */
.share-btn:focus, .nav-card:focus{ outline:3px solid rgba(113,140,150,0.18); outline-offset:2px; }

/* Responsive tweaks for share/nav */
@media (max-width:760px){
  .post-navigation{ flex-direction:column; }
  .post-navigation .nav-card{ align-items:flex-start; }
  .post-share{ flex-wrap:wrap; }
  .floating-share{ display:flex; }
}

/* Small utilities kept from original */
.post-meta svg{ height:22px; }

/* Shimmer Loading Effect */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.is-loading .card-image,
.is-loading .card-title,
.is-loading .cardstyle-info-name,
.is-loading .card-distance {
  background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
  background-size: 2000px 104px;
  animation: shimmer 1.5s linear infinite;
  color: transparent; /* Hide text */
}

.is-loading .card-image {
  background-color: #f0f0f0;
}

.is-loading .card-title,
.is-loading .cardstyle-info-name {
  width: 80%;
  height: 1.1rem;
  border-radius: 4px;
  margin-bottom: 10px;
}

.is-loading .card-distance {
  width: 50%;
  height: 0.9rem;
  border-radius: 4px;
}