/* ==========================================================================
   Samsung-Elite — Content pages: blog, articles, FAQ, areas, services,
   about, contact, warranty and legal pages. Loaded together with guide.css.
   ========================================================================== */

/* ---------- Blog hub ---------- */
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; list-style: none; padding: 0; }
.blog-filter button {
  padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: #fff;
  font: inherit; font-size: var(--fs-sm); color: var(--c-ink-2); cursor: pointer; transition: all var(--t-fast);
}
.blog-filter button:hover { border-color: var(--c-primary-100); color: var(--c-primary-600); }
.blog-filter button[aria-pressed='true'] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.post-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.post-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--c-line); transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--c-primary-100); }
.post-card[hidden] { display: none; }
.post-card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; overflow: hidden;
  background: var(--g-dark); color: #fff;
}
.post-card__media::before {
  content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(125, 155, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 155, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}
.post-card__media .icon { position: relative; width: 54px; height: 54px; color: #8fb4ff; transition: transform var(--t) var(--ease); }
.post-card:hover .post-card__media .icon { transform: scale(1.1) rotate(-4deg); }
.post-card__tag { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--fs-xs); color: #dfe8ff; backdrop-filter: blur(6px); }
.post-card__body { display: grid; align-content: start; gap: 10px; padding: 20px; }
.post-card__title { font-size: 1.15rem; line-height: 1.45; }
.post-card__title a::after { content: ''; position: absolute; inset: 0; }
.post-card__desc { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.75; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: var(--fs-xs); color: var(--c-muted); }
.post-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.post-card__meta .icon { width: 15px; height: 15px; color: var(--c-primary); }

/* ---------- Article ---------- */
.article-body { min-width: 0; }
.article-body .prose { line-height: 1.95; }
.article-body .prose h2 { scroll-margin-top: calc(var(--header-h) + 20px); }
.article-body .prose ul li::marker { color: var(--c-primary); }
.article-callout {
  display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--c-primary-50);
  border: 1px solid var(--c-primary-100); color: var(--c-ink-2); line-height: 1.85;
}
.article-callout > .icon { flex-shrink: 0; color: var(--c-primary); width: 24px; height: 24px; margin-top: 3px; }
.article-callout--warn { background: #fff8eb; border-color: #f6dfb0; color: #6b4300; }
.article-callout--warn > .icon { color: var(--c-warn); }
.article-links { display: grid; gap: 10px; margin-top: 8px; }

/* ---------- FAQ page ---------- */
.faq-cats { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 10px; margin-bottom: 28px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--c-line); backdrop-filter: blur(10px); scrollbar-width: none; }
.faq-cats::-webkit-scrollbar { display: none; }
.faq-cats a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--c-ink-2); background: var(--c-surface); white-space: nowrap; transition: all var(--t-fast); }
.faq-cats a:hover, .faq-cats a.is-active { background: var(--c-ink); color: #fff; }
.faq-cats .icon { width: 16px; height: 16px; }
.faq-group { scroll-margin-top: calc(var(--header-h) + 90px); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.faq-group__head .card__icon { margin: 0; width: 46px; height: 46px; border-radius: 14px; }
.faq-group__head h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.faq-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-sm); color: var(--c-primary-600); font-weight: 500; }
.faq-src .icon { width: 16px; height: 16px; }

/* ---------- Areas ---------- */
.areas-hub { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.areas-hub__map { max-width: 520px; width: 100%; margin-inline: auto; }
.area-tiles { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.area-tile { position: relative; display: grid; gap: 10px; padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.area-tile:hover { border-color: var(--c-primary-100); box-shadow: var(--sh); transform: translateY(-3px); }
.area-tile__head { display: flex; align-items: center; gap: 10px; }
.area-tile__head .area-card__pin { flex-shrink: 0; }
.area-tile h2, .area-tile h3 { font-size: 1.2rem; }
.area-tile h2 a::after, .area-tile h3 a::after { content: ''; position: absolute; inset: 0; }
.area-tile p { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.75; }
.area-tile .link-arrow { position: relative; z-index: 1; justify-self: start; }

.area-facts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
.area-facts li { display: flex; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); }
.area-facts .card__icon { margin: 0; width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; }
.area-facts strong { display: block; margin-bottom: 3px; }
.area-facts p { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.7; }
.hood-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.hood-list li { padding: 7px 14px; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-ink-2); }
.device-tiles { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.device-tile { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.device-tile:hover { border-color: var(--c-primary-100); box-shadow: var(--sh); transform: translateY(-3px); }
.device-tile img { width: 76px; height: 90px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(10, 14, 25, 0.22)); }
.device-tile h3 { font-size: 1.08rem; margin-bottom: 4px; }
.device-tile h3 a::after { content: ''; position: absolute; inset: 0; }
.device-tile p { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.7; }
.device-tile__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.device-tile__links a { font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink-2); }
.device-tile__links a:hover { background: var(--c-primary); color: #fff; }

/* ---------- Generic blocks (services / about / contact) ---------- */
.feature-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.feature-grid .card h3 { font-size: 1.15rem; }
.feature-grid .card ul { display: grid; gap: 6px; margin-top: 12px; list-style: none; padding: 0; }
.feature-grid .card li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.7; }
.feature-grid .card li .icon { width: 16px; height: 16px; color: var(--c-ok); margin-top: 4px; flex-shrink: 0; }
.feature-grid .card .link-arrow { margin-top: 14px; }
.svc-block { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--c-line); }
.svc-block + .svc-block { margin-top: 18px; }
.svc-block__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.8; border-radius: var(--r-lg); background: var(--g-dark); overflow: hidden; }
.svc-block__media img { width: 52%; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5)); }
.svc-block h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-block: 10px 10px; }
.svc-block > div > p { color: var(--c-ink-2); line-height: 1.85; }
.svc-block__list { display: grid; gap: 8px; margin-block: 16px 20px; list-style: none; padding: 0; }
.svc-block__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--c-ink-2); line-height: 1.7; }
.svc-block__list .icon { width: 18px; height: 18px; color: var(--c-primary); margin-top: 4px; flex-shrink: 0; }

.values { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); counter-reset: v; list-style: none; padding: 0; }
.values li { counter-increment: v; position: relative; padding: 22px; padding-inline-start: 72px; border-radius: var(--r-lg); background: var(--d-surface); border: 1px solid var(--d-line); }
.values li::before { content: '0' counter(v); position: absolute; inset-inline-start: 22px; top: 22px; font-weight: 700; color: var(--c-accent); font-size: 1.1rem; }
.values h3 { color: #fff; font-size: 1.1rem; margin-bottom: 6px; }
.values p { color: var(--d-muted); line-height: 1.8; }

.contact-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.contact-card { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); }
.contact-card .card__icon { margin-bottom: 4px; }
.contact-card h2 { font-size: 1.2rem; }
.contact-card p { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.75; }
.contact-card__big { font-size: 1.5rem; font-weight: 700; color: var(--c-ink); }
.contact-card--wa .card__icon { color: var(--c-wa); background: #eafaf1; border-color: #c7efd8; }
.contact-card .btn { justify-self: start; margin-top: 6px; }

/* ---------- Legal / policy pages ---------- */
.legal { max-width: 860px; }
.legal__updated { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: var(--fs-sm); color: var(--c-muted); }
.legal__updated .icon { width: 16px; height: 16px; color: var(--c-primary); }
.legal .prose h2 { padding-top: 6px; scroll-margin-top: calc(var(--header-h) + 20px); }
.legal-note { margin-top: 32px; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .post-grid, .feature-grid, .area-tiles, .device-tiles, .area-facts, .contact-grid, .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid--3, .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .areas-hub { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .svc-block { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .svc-block:nth-child(even) .svc-block__media { order: 2; }
}