/* ==========================================================================
   Blog — Urban Observer design, ported to static HTML
   --------------------------------------------------------------------------
   Layout/typography recreated from the tagDiv "Urban Observer" demo. Every
   value below was read off the live demo's own computed styles (see
   "blog theme/urban-observer-extracted/"), not eyeballed:

     base #000 · light #EDEDED · grid 1332px content + 24px gutters
     display  Big Shoulders Text  (module titles 800, section titles italic)
     serif    Roboto Slab         (excerpts, 15/21)
     body     Work Sans
     category labels   Big Shoulders Text 16px 700 UPPERCASE, wrapped in pipes
     module dividers   1px solid #000 on .td-module-container's right edge
     boxed headline    inline h3, #fff, 1px solid #000, 0 3px 0 #000,
                       2px 12px padding, box-decoration-break: clone,
                       line-height 1.36 (that's what spaces the stacked boxes)
     ruled title       repeating-linear-gradient(#000, #000 1px, #fff 0, #fff 12px)

   The demo's red is swapped for Bora Doutor green throughout — one variable,
   --uo-accent. Self-contained: no tagDiv CSS/JS. The site header + footer
   keep Bora Doutor's own branding (from base.css); only the blog uses this.

   Two consumers, one scope:
     blog/index.html         — the hub, uses the .uo-row / .uo-mod system below
     blog/<article>.html     — uses .uo-post*, .uo-card, .uo-grid, .uo-side*
   ========================================================================== */

.blog-uo {
  --uo-accent: #00D1FF;
  --uo-accent-soft: #00ABD1;
  /* Same accent darkened for text: #00D1FF on this light ground is only
     1.8:1. Rules and fills keep --uo-accent; anything readable uses these. */
  --uo-accent-ink: var(--color-primary-strong);
  --uo-accent-ink-hover: var(--color-primary-dark);
  --uo-base: #000000;
  --uo-light: #EDEDED;
  --uo-muted: #767676;
  --uo-font-display: 'Big Shoulders Text', 'Arial Narrow', sans-serif;
  --uo-font-serif: 'Roboto Slab', Georgia, serif;
  --uo-font-body: 'Work Sans', system-ui, sans-serif;

  font-family: var(--uo-font-body);
  color: var(--uo-base);
}

.blog-uo .uo-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- shared bits ------------------------------------------------------- */

.uo-kicker {
  font-family: var(--uo-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--uo-accent-ink);
  /* 13px line-height alone left a ~13px tap target, under WCAG 2.5.8's 24x24
     floor. Padding lifts the hit area; the negative margin cancels it so the
     kicker sits exactly where it did. */
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}
.uo-kicker:hover { color: var(--uo-accent-ink-hover); }

.uo-section-title {
  font-family: var(--uo-font-body);
  font-size: 21px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--uo-base);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--uo-base);
}
@media (max-width: 767px) { .uo-section-title { font-size: 16px; } }

.uo-byline {
  font-size: 13px;
  font-weight: 400;
  color: var(--uo-muted);
}
.uo-byline strong { font-weight: 600; color: var(--uo-base); }

/* Title underline that sweeps in on hover — Urban Observer's signature.
   Uses inset box-shadow so it hugs the text across line wraps. */
.uo-title-link {
  color: var(--uo-base);
  box-shadow: inset 0 0 0 0 var(--uo-base);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.uo-card:hover .uo-title-link,
.uo-title-link:hover { box-shadow: inset 0 -2px 0 0 var(--uo-base); }

/* --- card grid (article pages: "related articles") --------------------- */

.uo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 1018px) { .uo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .uo-grid { grid-template-columns: 1fr; } }

.uo-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .uo-grid-2 { grid-template-columns: 1fr; } }

.uo-card { display: flex; flex-direction: column; }
.uo-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 14px; }
.uo-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.uo-card:hover .uo-card-media img { transform: scale(1.04); }

.uo-card-title {
  font-family: var(--uo-font-display);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 8px 0;
}
.uo-card-excerpt { font-size: 0.94rem; color: var(--uo-muted); margin: 8px 0 0; }

/* --- single post ------------------------------------------------------- */

.uo-post { padding: 48px 0 0; }
.uo-post-head { max-width: 860px; }
.uo-post-title {
  font-family: var(--uo-font-display);
  font-size: 64px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--uo-base);
  margin: 12px 0 16px;
  /* A title is one long word away from pushing the whole page sideways: the H1
     box stays put but the text renders past it, and that still counts toward
     scrollWidth. This is the guard for any future headline; the size step below
     is what keeps today's from needing it. */
  overflow-wrap: break-word;
}
@media (max-width: 1018px) { .uo-post-title { font-size: 54px; } }
@media (max-width: 767px) { .uo-post-title { font-size: 42px; } }
/* "Acompanhamento" — the longest word in any of the 13 titles — is 287px at
   42px, wider than the 272px of content a 320px phone has, so the article page
   scrolled sideways by 6px. 34px puts it at ~232px. Deliberately below the
   common phone widths: a real 360px device has 312px of content and does not
   need this. */
@media (max-width: 380px) { .uo-post-title { font-size: 34px; } }

.uo-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--uo-light);
  border-bottom: 1px solid var(--uo-light);
  margin-bottom: 32px;
}
.uo-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--uo-light); padding: 6px; }
.uo-post-meta-text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }

.uo-share { display: flex; gap: 8px; }
.uo-share a, .uo-share button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--uo-light);
  color: var(--uo-base);
  background: #fff;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.uo-share svg { width: 16px; height: 16px; }
.uo-share a:hover, .uo-share button:hover,
.uo-share button.is-copied { background: var(--uo-accent); border-color: var(--uo-accent); color: #fff; }

.uo-post-featured { margin-bottom: 40px; }
.uo-post-featured img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* 8/4 split with sticky sidebar — the demo's single-post layout */
.uo-post-body-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; padding-bottom: 80px; }
@media (max-width: 1018px) { .uo-post-body-wrap { grid-template-columns: 1fr; gap: 48px; } }

.uo-post-content { font-family: var(--uo-font-body); font-size: 1.05rem; line-height: 1.75; }
.uo-post-content h2 {
  font-family: var(--uo-font-serif);
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--uo-base);
  margin: 40px 0 14px;
}
.uo-post-content p { margin: 0 0 20px; color: #333; }
.uo-post-content ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.uo-post-content li { position: relative; padding-left: 22px; color: #333; }
.uo-post-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--uo-accent);
}

.uo-sidebar { align-self: start; position: sticky; top: 24px; }
.uo-side-list { display: flex; flex-direction: column; gap: 20px; }
.uo-side-item { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.uo-side-item img { width: 92px; height: 66px; object-fit: cover; }
.uo-side-title {
  font-family: var(--uo-font-display);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 800;
  margin: 4px 0 0;
}

.uo-related { padding: 56px 0 88px; border-top: 1px solid var(--uo-light); }


/* ==========================================================================
   HUB — the Urban Observer front page, row by row
   --------------------------------------------------------------------------
   Everything below is used only by blog/index.html. Vocabulary:

     .uo-row      one horizontal band; --ruled draws the black rule under it
     .uo-cols     the column split inside a row (3-6-3, 6-6, 4-4-4)
     .uo-block    a run of modules sharing one layout (--3, --4, --rowlist…)
     .uo-mod      one article. Variants:
                    --hero     boxed headline riding over the image
                    --feature  same, larger (column features / sliders)
                    --plate    white plate overlapping the image, no box
                    --row      thumb beside text (--rev flips the sides)
                    --text     title only, no image
                    --overlay  title reversed out over the image
     .uo-title    section heading: --bar, --ruled, --plain, --slim
   ========================================================================== */

/* Hub grid tracks the site header/footer (base.css --container-width:1280px)
   rather than the demo's own 1332px, so rows line up with the Bora Doutor
   chrome instead of overhanging it by ~50px a side. */
.blog-uo .uo-row > .uo-container { max-width: 1280px; }

.uo-row { padding: 22px 0; }
.uo-row--ruled { border-bottom: 1px solid var(--uo-base); }
.uo-row--last { padding-bottom: 72px; }

/* --- column splits ------------------------------------------------------ */

.uo-cols { display: grid; gap: 0; }
.uo-cols--3-6-3 { grid-template-columns: 3fr 6fr 3fr; }
.uo-cols--6-6   { grid-template-columns: 1fr 1fr; }
.uo-cols--4-4-4 { grid-template-columns: repeat(3, 1fr); }

/* min-width:0 keeps long pt-BR headlines from blowing the tracks out */
.uo-col { min-width: 0; padding: 0 20px; }
.uo-col:first-child { padding-left: 0; }
.uo-col:last-child { padding-right: 0; }
.uo-col--divided { border-left: 1px solid var(--uo-base); }

/* --- module blocks ------------------------------------------------------ */

.uo-block { display: grid; gap: 0; }
.uo-block--3 { grid-template-columns: repeat(3, 1fr); }
.uo-block--4 { grid-template-columns: repeat(4, 1fr); }
.uo-block--2 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
.uo-block--1 { grid-template-columns: 1fr; row-gap: 28px; }
/* grid-auto-rows:1fr makes every item in a list match the tallest one, so the
   hairline separators land on an even rhythm. Without it the pt-BR titles wrap
   to 1-3 lines and the rules come out at 75/100/124px — visibly ragged. */
.uo-block--ranked,
.uo-block--rowlist,
.uo-block--textlist { grid-template-columns: 1fr; grid-auto-rows: 1fr; }

/* The demo's divider is a right border on the module itself, not a gap. */
.uo-block--3 > .uo-mod,
.uo-block--4 > .uo-mod,
.uo-block--2 > .uo-mod { padding: 0 20px; border-right: 1px solid var(--uo-base); }
.uo-block--3 > .uo-mod:last-child,
.uo-block--4 > .uo-mod:last-child,
.uo-block--2 > .uo-mod:nth-child(2n),
.uo-block--2 > .uo-mod:last-child { border-right: 0; }
.uo-block--2 > .uo-mod:nth-child(-n+2) { padding-bottom: 28px; }

/* --- module: shared ----------------------------------------------------- */

.uo-mod { position: relative; display: flex; flex-direction: column; min-width: 0; }
.uo-mod-thumb { display: block; position: relative; overflow: hidden; }
.uo-mod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.uo-mod:hover .uo-mod-thumb img { transform: scale(1.04); }
.uo-mod-meta { min-width: 0; position: relative; z-index: 1; }

.uo-mod-title { margin: 0; font-family: var(--uo-font-display); font-weight: 800; }
.uo-mod-title a { color: inherit; }

.uo-mod-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 8px;
  font-family: var(--uo-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
/* Padding+negative margin again: lifts the row past the 24px tap floor
   without moving the text. */
.uo-cat { color: var(--uo-accent-ink); display: inline-block; padding: 4px 5px; margin: -4px 0; }
.uo-cat::before { content: '|'; margin-right: 5px; }
.uo-cat::after  { content: '|'; margin-left: 5px; }
.uo-cat:hover { color: var(--uo-accent-ink-hover); }
.uo-date { color: var(--uo-muted); font-family: var(--uo-font-serif); font-size: 13px; font-weight: 400; text-transform: none; }

.uo-mod-excerpt {
  font-family: var(--uo-font-serif);
  font-size: 15px;
  line-height: 21px;
  color: var(--uo-base);
  margin: 15px 0 0;
}

/* --- module: boxed headline (--hero / --feature) ------------------------ */
/* The signature element. The h3 is inline so the white box wraps each line
   separately (box-decoration-break: clone); line-height 1.36 is what opens
   the gap between the stacked boxes. Pulling .uo-mod-meta up by 25px is what
   makes it ride over the image — no absolute positioning involved. */

.uo-mod--hero .uo-mod-thumb,
.uo-mod--feature .uo-mod-thumb { aspect-ratio: 3 / 2; }

.uo-mod--hero .uo-mod-meta,
.uo-mod--feature .uo-mod-meta { margin: -25px 20px 0; text-align: center; }

.uo-mod--hero .uo-mod-title,
.uo-mod--feature .uo-mod-title {
  display: inline;
  background: #fff;
  border: 1px solid var(--uo-base);
  box-shadow: 0 3px 0 var(--uo-base);
  padding: 2px 12px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.uo-mod--hero .uo-mod-title { font-size: 32px; line-height: 1.36; }
.uo-mod--feature .uo-mod-title { font-size: 45px; line-height: 1.32; }

.uo-mod--hero .uo-mod-info,
.uo-mod--feature .uo-mod-info { justify-content: center; margin-top: 16px; }
.uo-mod--hero .uo-mod-excerpt,
.uo-mod--feature .uo-mod-excerpt { text-align: center; }
.uo-mod--feature .uo-mod-excerpt { font-size: 17px; line-height: 23.8px; }

/* --- module: white plate (--plate) -------------------------------------- */

.uo-mod--plate .uo-mod-thumb { aspect-ratio: 5 / 4; }
.uo-mod--plate .uo-mod-meta {
  background: #fff;
  padding: 10px 10px 0;
  margin: -22px 22px 0;
  text-align: center;
}
.uo-mod--plate .uo-mod-title { font-size: 22px; line-height: 1.2; }
.uo-mod--plate .uo-mod-info { justify-content: center; }

/* --- module: thumb beside text (--row) ---------------------------------- */

/* Which side the thumb lands on is decided by markup order, not a modifier:
   (thumb, meta) puts it left, (meta, thumb) puts it right. The padding rules
   below are order-agnostic so both read correctly. */
/* align-items:center, not flex-start: rows are stretched to a uniform height by
   grid-auto-rows, so centring balances the space above and below the text
   instead of pooling it all under the shorter titles. */
.uo-mod--row { flex-direction: row; align-items: center; gap: 0; padding: 14px 0; border-bottom: 1px solid var(--uo-base); }

.uo-mod--row .uo-mod-thumb { flex: 0 0 34%; aspect-ratio: 5 / 3; }
.uo-mod--row .uo-mod-meta { flex: 1 1 auto; min-width: 0; padding: 0 16px; }
.uo-mod--row > .uo-mod-meta:first-child { padding-left: 0; }
.uo-mod--row > .uo-mod-meta:last-child { padding-right: 0; }
.uo-mod--row .uo-mod-title { font-size: 22px; line-height: 1.2; }

.uo-mod--lg .uo-mod-title { font-size: 28px; line-height: 1.1; }
/* 42%, not 48%: this variant's title is 28px (vs 22px on the other lists), so
   it needs more text column, not less. At 48% long pt-BR words like
   "telemedicina:" took a line each. */
.uo-mod--stack .uo-mod-thumb { flex: 0 0 42%; aspect-ratio: 5 / 4; }
.uo-mod--stack .uo-mod-title { font-size: 28px; line-height: 1.1; }

/* Top-5 list: small thumb, ghost numeral behind the text at the right edge.
   The numeral is taken out of flow — as a flex item it stole ~50px from an
   already narrow column and forced every title to wrap to 5-6 lines. */
.uo-mod--rank { align-items: center; }
.uo-mod--rank .uo-mod-thumb { flex: 0 0 88px; aspect-ratio: 4 / 3; }
/* 24px, not 42: the text column here is only ~150px wide, and over-reserving
   for the numeral pushed these titles to five lines. The numeral sits behind
   the text, so a little overlap is by design. */
.uo-mod--rank .uo-mod-meta { padding-right: 24px; }
.uo-mod--rank .uo-mod-title { font-size: 18px; line-height: 1.15; }
.uo-rank {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: var(--uo-font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--uo-light);
  pointer-events: none;
}
.uo-mod--text .uo-mod-title { font-size: 22px; line-height: 1.1; }
.uo-mod--overlay .uo-mod-thumb { aspect-ratio: 8 / 5; }
.uo-mod--overlay .uo-mod-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  color: #fff;
}
.uo-mod--overlay .uo-mod-title { font-size: 20px; line-height: 1.15; color: #fff; }
.uo-mod--overlay .uo-date { color: rgba(255, 255, 255, 0.8); }

/* --- section titles ----------------------------------------------------- */

.uo-title { margin: 0 0 20px; }
.uo-title h2 {
  font-family: var(--uo-font-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* solid accent bar, white knockout text */
.uo-title--bar { background: var(--uo-accent); text-align: center; padding: 10px 12px 7px; }
.uo-title--bar h2 { font-size: 24px; line-height: 1.2; font-weight: 700; color: #fff; }

/* boxed title floating on ruled paper */
.uo-title--ruled {
  background-image: repeating-linear-gradient(var(--uo-base), var(--uo-base) 1px, #fff 0, #fff 12px);
  text-align: center;
  margin: 14px 0 24px;
}
.uo-title--ruled h2 {
  display: inline-block;
  font-size: 54px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--uo-base);
  background: #fff;
  border: 1px solid var(--uo-base);
  padding: 3px 35px 0 25px;
}
.uo-title--ruled.uo-title--accent h2 { color: var(--uo-accent-ink); }

/* plain category heading with a rule under it */
.uo-title--plain { border-bottom: 1px solid var(--uo-base); padding-bottom: 12px; margin-bottom: 22px; }
.uo-title--plain h2 { font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--uo-base); }
.uo-title--plain.uo-title--accent h2 { color: var(--uo-accent-ink); }

/* sidebar heading, upright Work Sans */
.uo-title--slim { text-align: center; margin: 28px 0 14px; }
.uo-title--slim h2 {
  font-family: var(--uo-font-body);
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--uo-base);
}

/* --- CTA strip (stands in for the demo's 980x90 ad slots) --------------- */

.uo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  background: var(--uo-accent);
  padding: 22px 24px;
  min-height: 90px;
}
.uo-strip-text {
  font-family: var(--uo-font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.uo-strip-btn {
  font-family: var(--uo-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff;
  color: var(--uo-base);
  padding: 12px 22px;
  border: 1px solid var(--uo-base);
  box-shadow: 0 3px 0 var(--uo-base);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.uo-strip-btn:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--uo-base); }

.uo-strip--stacked { flex-direction: column; text-align: center; margin-bottom: 28px; }

/* --- brand / newsletter promo box --------------------------------------- */

.uo-promo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  border: 3px solid var(--uo-base);
  padding: 30px 34px;
}
.uo-promo-body { min-width: 0; padding-right: 34px; border-right: 1px solid var(--uo-base); }
.uo-promo-logo { height: 42px; width: auto; margin-bottom: 12px; }
.uo-promo-rule { display: block; width: 74px; height: 3px; background: var(--uo-accent); margin-bottom: 16px; }
.uo-promo-body p { font-family: var(--uo-font-serif); font-size: 15px; line-height: 22px; color: var(--uo-base); margin: 0; }
.uo-promo-btn {
  display: inline-block;
  font-family: var(--uo-font-display);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--uo-accent);
  padding: 16px 30px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.uo-promo-btn:hover { background: var(--uo-accent-soft); }

/* --- sidebar newsletter form -------------------------------------------- */

.uo-newsletter { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.uo-newsletter-label { font-family: var(--uo-font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.uo-newsletter-input { font: inherit; font-size: 15px; padding: 13px 14px; border: 1px solid #d5d5d5; background: #fff; color: var(--uo-base); }
.uo-newsletter-input:focus { outline: 2px solid var(--uo-accent); outline-offset: -2px; }
/* Same iOS zoom-on-focus rule as the booking form — see css/calendar.css. */
@media (pointer: coarse) { .uo-newsletter-input { font-size: 16px; } }
.uo-newsletter-btn {
  font-family: var(--uo-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--uo-accent);
  padding: 15px 18px;
  transition: background-color 0.2s ease;
}
.uo-newsletter-btn:hover { background: var(--uo-accent-soft); }
/* The whole label toggles the checkbox, so it is the tap target — at 13px/1.4
   it measured 19px tall, under the 24px floor. Padding cancelled by an equal
   negative margin, so it grows the hit area without moving anything. */
.uo-newsletter-consent { display: flex; align-items: flex-start; gap: 8px; font-family: var(--uo-font-serif); font-size: 13px; line-height: 1.4; color: var(--uo-muted); padding: 4px 0; margin: -4px 0; }
.uo-newsletter-consent a { color: var(--uo-accent-ink); display: inline-block; padding: 5px 0; margin: -5px 0; }

/* --- sliders ------------------------------------------------------------ */

.uo-slider { position: relative; }
.uo-slider-track { display: grid; }
/* Slides stack in one cell so the block keeps the tallest slide's height and
   nothing reflows when you page through. */
.uo-slider .uo-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.25s ease; }
.uo-slider .uo-slide.is-active { visibility: visible; opacity: 1; }

.uo-slider-nav { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.uo-slider--compact .uo-slider-nav { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2; }
.uo-slider-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--uo-base);
  background: #fff;
  border: 1px solid #d5d5d5;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.uo-slider-btn:hover { background: var(--uo-accent); border-color: var(--uo-accent); color: #fff; }

/* --- responsive ---------------------------------------------------------- */
/* Demo breakpoints: 1140 / 1018 / 767. */

@media (max-width: 1140px) {
  .uo-mod--hero .uo-mod-title { font-size: 26px; }
  .uo-mod--feature .uo-mod-title { font-size: 34px; }
  .uo-title--ruled h2 { font-size: 44px; }
  .uo-mod--stack .uo-mod-title,
  .uo-mod--lg .uo-mod-title { font-size: 22px; }
}

@media (max-width: 1018px) {
  .uo-cols--3-6-3,
  .uo-cols--4-4-4 { grid-template-columns: 1fr 1fr; }
  /* Third column drops to a full-width band under the first two. */
  .uo-cols--3-6-3 > .uo-col:nth-child(3),
  .uo-cols--4-4-4 > .uo-col:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--uo-base);
    padding: 22px 0 0;
    margin-top: 22px;
  }
  .uo-block--4 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .uo-block--4 > .uo-mod:nth-child(2n) { border-right: 0; }
  .uo-title--ruled h2 { font-size: 36px; padding: 3px 22px 0 16px; }
}

@media (max-width: 767px) {
  .uo-row { padding: 18px 0; }
  .uo-cols--3-6-3,
  .uo-cols--6-6,
  .uo-cols--4-4-4 { grid-template-columns: 1fr; }
  .uo-cols > .uo-col { padding: 0; border-left: 0; }
  .uo-cols > .uo-col + .uo-col {
    border-top: 1px solid var(--uo-base);
    padding-top: 22px;
    margin-top: 22px;
  }
  .uo-cols--3-6-3 > .uo-col:nth-child(3),
  .uo-cols--4-4-4 > .uo-col:nth-child(3) { margin-top: 22px; }

  .uo-block--3,
  .uo-block--4,
  .uo-block--2 { grid-template-columns: 1fr; row-gap: 28px; }
  .uo-block--3 > .uo-mod,
  .uo-block--4 > .uo-mod,
  .uo-block--2 > .uo-mod { padding: 0; border-right: 0; }
  .uo-block--2 > .uo-mod:nth-child(-n+2) { padding-bottom: 0; }

  .uo-mod--hero .uo-mod-title { font-size: 24px; }
  .uo-mod--feature .uo-mod-title { font-size: 26px; }
  .uo-title--ruled h2 { font-size: 28px; }
  .uo-title--plain h2 { font-size: 26px; }
  .uo-strip-text { font-size: 20px; }

  /* Side-by-side rows get cramped below ~480px of column width. */
  .uo-mod--stack { flex-direction: column; }
  .uo-mod--stack .uo-mod-thumb { flex: none; width: 100%; }
  .uo-mod--stack .uo-mod-meta { padding: 12px 0 0; }

  .uo-promo { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .uo-promo-body { border-right: 0; padding-right: 0; }
}


/* ==========================================================================
   WordPress-only additions
   --------------------------------------------------------------------------
   This file is the static css/blog.css plus what the WP templates need on top.
   Keep it a superset: single-artigo_cholo.php still uses the .uo-card/.uo-boxed
   vocabulary, and cholo_the_thumbnail() emits a letter tile when a post has no
   featured image — without the rule below that tile is an unstyled bare letter.
   ========================================================================== */

/* Fallback tile for posts with no featured image. The boxed-headline treatment
   rides over the image, so an empty thumb would collapse the whole module. */
.blog-uo .uo-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--uo-light);
  color: var(--uo-base);
  font-family: var(--uo-font-display);
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* Related-articles cards on single-artigo_cholo.php use the boxed headline
   directly on the link, rather than the .uo-mod-title wrapper the hub uses. */
.blog-uo .uo-boxed {
  display: inline;
  padding: 2px 12px;
  border: 1px solid var(--uo-base);
  box-shadow: 0 3px 0 var(--uo-base);
  background: #fff;
  color: var(--uo-base);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 0.2s ease;
}
.blog-uo .uo-card:hover .uo-boxed { color: var(--uo-accent); }
.blog-uo .uo-card-featured .uo-boxed { color: var(--uo-accent); }
.blog-uo .uo-card-featured:hover .uo-boxed { color: var(--uo-base); }

.blog-uo .uo-card-author { font-size: 13px; font-weight: 600; color: var(--uo-base); }

/* Meta line: | CATEGORIA |  Autor */
.blog-uo .uo-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.blog-uo .uo-card-meta .uo-kicker::before { content: '| '; }
.blog-uo .uo-card-meta .uo-kicker::after  { content: ' |'; }

/* Empty state — shown only when there are no published articles at all. */
.blog-uo .uo-empty {
  font-family: var(--uo-font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--uo-muted);
  text-align: center;
  padding: 64px 0;
  margin: 0;
}

/* A column standing alone in a row stretches to the full 1232px container. For
   text that is fine, but an image-led module's width drives its height — a 3:2
   thumb becomes an ~800px slab. Cap those; leave strips and forms full width. */
.blog-uo .uo-cols > .uo-col:only-child .uo-mod--hero,
.blog-uo .uo-cols > .uo-col:only-child .uo-mod--feature,
.blog-uo .uo-cols > .uo-col:only-child .uo-mod--overlay,
.blog-uo .uo-cols > .uo-col:only-child .uo-slider { max-width: 520px; }