/* Serbisyo247PH shared featured/content media system */
.s247-media-frame{
  width:100%;
  aspect-ratio:1200 / 628;
  overflow:hidden;
  background:#0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
}
.s247-media-frame > img,
.s247-media-frame > video,
img.s247-media-fill,
video.s247-media-fill{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.s247-media-frame--article{
  max-width:100%;
  margin-inline:auto;
}
@media (max-width:700px){
  .s247-media-frame{aspect-ratio:1200 / 628;}
}

/* Discussion/community media is intentionally smaller than blog hero media. */
.s247-discussion-media{
  width:min(100%,520px);
  aspect-ratio:16 / 9;
  max-height:290px;
  overflow:hidden;
  border-radius:6px;
  background:#0b0b0b;
}
.s247-discussion-media > img,
.s247-discussion-media > video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


/* Respect Tailwind's hidden state even though this stylesheet loads later. */
.s247-media-frame.hidden,
.s247-media-frame > .hidden,
.s247-media-frame > video.hidden,
.s247-media-frame > img.hidden,
video.s247-media-fill.hidden,
img.s247-media-fill.hidden {
  display:none !important;
}

/* Crisp text-only fallback for posts without an attached image.
   Never stretch a small wordmark to fill an editorial media frame. */
.s247-media-frame > img[hidden] { display: none !important; }
.s247-media-frame > .s247-media-empty[hidden] { display: none !important; }
.s247-media-empty {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.2vw, 12px);
  padding: 1rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,209,102,0.12), transparent 65%), linear-gradient(145deg, #171717, #090909);
  border-bottom: 1px solid rgba(255,209,102,0.18);
}
.s247-media-empty__brand {
  color: #FFD166;
  font-size: clamp(0.85rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.13em;
  overflow-wrap: anywhere;
}
.s247-media-empty__label {
  color: #d1d5db;
  font-size: clamp(0.65rem, 1.3vw, 0.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Render authored Markdown pipe-tables as real readable tables on all screen sizes. */
.s247-article-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.1rem 0 1.6rem;
  border: 1px solid rgba(255,209,102,.22);
  border-radius: 6px;
  background: #131313;
  scrollbar-color: #b58f43 #181818;
}
.s247-article-table-scroll:focus-visible { outline: 2px solid #FFD166; outline-offset: 2px; }
.s247-article-table-scroll table {
  width: 100%;
  min-width: min(600px, 100%);
  border-collapse: collapse;
  color: #f3f4f6;
  font-size: clamp(.78rem, 1.4vw, .98rem);
  line-height: 1.5;
}
.s247-article-table-scroll th,
.s247-article-table-scroll td {
  padding: .75rem .85rem;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid rgba(255,209,102,.12);
  border-bottom: 1px solid rgba(255,209,102,.12);
  overflow-wrap: anywhere;
}
.s247-article-table-scroll th { background: rgba(255,209,102,.14); color: #FFD166; font-weight: 700; }
.s247-article-table-scroll tr:nth-child(even) td { background: rgba(255,255,255,.026); }
.s247-article-table-scroll tr:last-child td { border-bottom: none; }
.s247-article-table-scroll th:last-child,
.s247-article-table-scroll td:last-child { border-right: none; }
.s247-article-table-scroll a { color: #FFD166; text-decoration: underline; text-underline-offset: 2px; }
@media(max-width:640px){
  .s247-article-table-scroll th,
  .s247-article-table-scroll td { padding:.65rem .7rem; }
}