/* =====================================================================
   URCARE Blog page, 2026 redesign
   Aus Asia Online, October 2026
   Loaded only on the "Blog (2026 Redesign)" template (blog-v2.php).
   Builds on urcare-about-v2.css (.ucx) and urcare-services-v2.css (.ucs).
   ===================================================================== */

.ucb .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Shared bits ---------- */
.ucb .ucb-tag {
  align-self: flex-start; display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
  background: var(--x-teal-lt); color: var(--x-teal-dk);
  font: 700 12px/1.2 var(--x-body); letter-spacing: .02em;
}
.ucb .ucb-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 14px !important; line-height: 1.4 !important; color: var(--x-muted) !important; margin: 0;
}
.ucb .ucb-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.ucb .ucb-meta svg { width: 15px; height: 15px; color: var(--x-berry); }

/* ---------- Featured ---------- */
.ucb-latest { padding-bottom: 0; }
.ucb-feature {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--x-line);
  box-shadow: 0 34px 70px -38px rgba(11, 59, 79, .45);
  transition: transform .35s var(--x-ease), box-shadow .35s var(--x-ease);
}
.ucb-feature:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -36px rgba(11, 59, 79, .5); }
.ucb-feature__media {
  position: relative; overflow: hidden; isolation: isolate; min-height: 100%;
  display: flex; align-items: center; background: var(--x-teal-lt);
}
.ucb-feature__media::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: var(--ucb-bg) center / cover no-repeat;
  filter: blur(28px) saturate(1.15); opacity: .55;
}
.ucb-feature__media img {
  width: 100%; height: auto !important; aspect-ratio: 1024 / 538; object-fit: contain;
  transition: transform .9s var(--x-ease);
}
.ucb-feature:hover .ucb-feature__media img { transform: scale(1.04); }
.ucb-feature__badge {
  position: absolute; left: 20px; top: 20px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(135deg, var(--x-orange), var(--x-amber)); color: #fff;
  font: 800 12px/1 var(--x-body); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 12px 24px -12px rgba(248, 120, 24, .9);
}
.ucb-feature__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 52px); }
.ucb .ucb-feature__title {
  font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important;
  font-size: clamp(28px, 2.8vw, 38px) !important; line-height: 1.12 !important; letter-spacing: -.02em !important;
  color: var(--x-ink) !important; margin: 0 0 16px !important; text-transform: none !important;
}
.ucb .ucb-feature__title a { color: inherit !important; }
.ucb .ucb-feature__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 28px; }
.ucb .ucb-feature__title a:focus-visible { outline: none; }
.ucb .ucb-feature__title a:focus-visible::after { outline: 3px solid var(--x-amber); outline-offset: -3px; }
.ucb .ucb-feature__text { font-size: 16.5px; line-height: 1.7; margin: 18px 0 26px; }
.ucb-feature__cta { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--x-ink); }
.ucb-feature:hover .ucb-feature__cta { color: var(--x-berry); }
.ucb-feature:hover .ucs-card__arrow { background: linear-gradient(135deg, var(--x-orange), var(--x-amber)); color: #fff; transform: rotate(45deg); }

/* ---------- Tools ---------- */
.ucb-tools { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }
.ucb-search {
  position: relative; display: flex; align-items: center; max-width: 520px; margin: 0;
}
.ucb-search svg { position: absolute; left: 20px; width: 20px; height: 20px; color: var(--x-muted); pointer-events: none; }
.ucb .ucb-search input {
  width: 100%; height: 56px; padding: 0 22px 0 52px; margin: 0;
  border-radius: 999px; border: 1px solid var(--x-line); background: #fff;
  font: 500 16px/1 var(--x-body); color: var(--x-ink);
  box-shadow: 0 10px 24px -18px rgba(11, 59, 79, .4);
  transition: border-color .25s var(--x-ease), box-shadow .25s var(--x-ease);
}
.ucb .ucb-search input::placeholder { color: #9A96A3; }
.ucb .ucb-search input:focus { outline: none; border-color: var(--x-teal); box-shadow: 0 0 0 4px rgba(8, 152, 184, .15); }
.ucb .ucb-topics { margin-bottom: 0; }
.ucb .ucb-status { min-height: 24px; margin: 6px 0 18px; font-size: 15px; font-weight: 600; color: var(--x-teal-dk); }

/* ---------- Grid ---------- */
.ucb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ucb-card {
  position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--x-line); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(30, 26, 38, .05), 0 10px 30px -18px rgba(30, 26, 38, .18);
  transition: transform .35s var(--x-ease), box-shadow .35s var(--x-ease), border-color .35s var(--x-ease);
}
.ucb-card[hidden] { display: none; }
.ucb-card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 34px 60px -30px rgba(11, 59, 79, .4); }
.ucb-card__media { overflow: hidden; aspect-ratio: 1024 / 538; background: var(--x-teal-lt); }
.ucb-card__media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s var(--x-ease); }
.ucb-card:hover .ucb-card__media img { transform: scale(1.05); }
.ucb-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 22px; }
.ucb .ucb-card__title {
  font-family: var(--x-display) !important; font-weight: 700 !important; font-size: 20px !important;
  line-height: 1.25 !important; letter-spacing: -.015em !important; text-transform: none !important;
  margin: 0 0 10px !important; color: var(--x-ink) !important;
}
.ucb .ucb-card__title a { color: inherit !important; }
.ucb .ucb-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 22px; }
.ucb .ucb-card__title a:focus-visible { outline: none; }
.ucb .ucb-card__title a:focus-visible::after { outline: 3px solid var(--x-amber); outline-offset: -3px; }
.ucb-card:hover .ucb-card__title { color: var(--x-berry) !important; }
.ucb .ucb-card__text { font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.ucb-card .ucb-meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--x-line); }
.ucb-card__go {
  margin-left: auto; display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--x-sand); color: var(--x-berry);
  transition: background .3s var(--x-ease), color .3s var(--x-ease), transform .3s var(--x-ease);
}
.ucb .ucb-card__go svg { width: 15px; height: 15px; color: currentColor; }
.ucb-card:hover .ucb-card__go { background: linear-gradient(135deg, var(--x-orange), var(--x-amber)); color: #fff; transform: rotate(45deg); }

/* ---------- Empty + more ---------- */
.ucb-empty {
  padding: 48px 24px; text-align: center; border-radius: 22px; background: #fff; border: 1px dashed var(--x-line);
}
.ucb .ucb-empty h3 {
  font-family: var(--x-display) !important; font-weight: 700 !important; font-size: 22px !important;
  color: var(--x-ink) !important; margin: 0 0 8px !important; text-transform: none !important;
}
.ucb .ucb-empty p { max-width: none; margin: 0; }
.ucb .ucb-reset {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--x-berry); text-decoration: underline; text-underline-offset: 3px;
}
.ucb-more { display: flex; justify-content: center; margin-top: 40px; }
.ucb-more .uc-btn { border: 0; cursor: pointer; }
.ucb-more .uc-btn[hidden] { display: none; }

/* ---------- Reveal ---------- */
.ucx--anim .ucb-card { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--x-ease), transform .7s var(--x-ease), box-shadow .35s var(--x-ease), border-color .35s var(--x-ease); }
.ucx--anim .ucb-card.is-in { opacity: 1; transform: none; }
.ucx--anim .ucb-card.is-in:hover { transform: translateY(-5px); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .ucb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .ucb-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ucb-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ucb-feature { border-radius: 22px; }
  .ucb-feature__body { padding: 24px 22px 26px; }
  .ucb .ucb-feature__text { font-size: 16px; }
  .ucb-search { max-width: none; }
  .ucb-more .uc-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ucb-card, .ucb-card__media img, .ucb-feature, .ucb-feature__media img, .ucb-card__go { transition: none !important; }
}