/* ==========================================================================
   Blog (sections/blog.php): a descent past the posts, after azimuteresidencial.com.br's gallery. Pinned for
   --blg-l of scroll (set by assets/js/blog.js); the stage holds the backdrop (a picture that drifts), the helix of
   framed pictures (3D transforms), the opening title, the trail along the top and the bar along the bottom.
   The section keeps the reference's warm night: cream for numbers and lines, deep green for the buttons.
   ========================================================================== */
.blg {
  --cream: #DCC3A1; --paper-w: #F1E9DD; --btn: rgb(16 34 26 / .86); --btn-line: rgb(223 198 169 / .34);
  position: relative; z-index: 3; background: #07090B; color: var(--paper-w);
}
html.js:not(.gr-static) .blg { height: calc(100vh + var(--blg-l, 500vh)); height: calc(100svh + var(--blg-l, 500vh)); }
/* gates (app.js): where it arrives, and where the descent ends */
.blg__gate { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
.blg__gate--end { top: var(--blg-l, 0px); }
html:not(.js) .blg__gate, html.gr-static .blg__gate { display: none; }
.blg__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- the backdrop: opens from an inset as the section arrives (blog.js: clip-path) ---------- */
.blg__depth { position: absolute; inset: 0; overflow: hidden; background: #07090B; }
.blg__bg {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 62% 50%;
  will-change: transform;
}
[dir="rtl"] .blg__bg { scale: -1 1; object-position: 38% 50%; }   /* the hall on the inline-end side, the dark under the words */
.blg__veil, .blg__light { position: absolute; pointer-events: none; will-change: transform; animation: blg-drift 34s ease-in-out infinite alternate paused; }
.blg__veil { inset: -12%; opacity: .5; background: linear-gradient(var(--va, 117deg), rgb(37 50 50 / .62) 5%, transparent 38%, rgb(134 103 74 / .22) 57%, rgb(17 38 44 / .46) 86%); }
.blg__light { inset: -18%; opacity: .45; animation-duration: 26s; animation-direction: alternate-reverse; background: linear-gradient(var(--la, 109deg), transparent 18%, rgb(224 202 165 / .17) 48%, rgb(145 175 177 / .07) 61%, transparent 77%); }
[dir="rtl"] .blg__veil { --va: -117deg; } [dir="rtl"] .blg__light { --la: -109deg; }
.blg.is-live .blg__veil, .blg.is-live .blg__light { animation-play-state: running; }
@keyframes blg-drift { from { transform: translate3d(-1.6%, -1.2%, 0); } to { transform: translate3d(1.6%, 1.4%, 0); } }
.blg__shade {   /* dark under the words (inline-start), round the edges, and under the bar */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to var(--sd, left), rgb(7 9 11 / .72), rgb(7 9 11 / .2) 42%, transparent 70%),
    radial-gradient(120% 95% at 50% 46%, transparent 55%, rgb(5 7 8 / .55)),
    linear-gradient(rgb(7 9 11 / .55), transparent calc(var(--header-h) + 90px));
}
[dir="ltr"] .blg__shade { --sd: right; }

/* ---------- the helix ---------- */
.blg__scene { position: absolute; inset: 0; perspective: var(--persp, 1170px); perspective-origin: 50% var(--cy, 46%); pointer-events: none; }
.blg__helix { position: absolute; left: 50%; top: var(--cy, 46%); width: 0; height: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; will-change: transform; }
.blg__item { position: absolute; left: calc(var(--cw, 800px) / -2); top: calc(var(--ch, 480px) / -2); width: var(--cw, 800px); height: var(--ch, 480px); transform-style: preserve-3d; }
.blg__card {   /* the glass frame: a thin, bright rim round the picture */
  --rim: calc(var(--cw, 800px) * .011);
  position: relative; display: block; width: 100%; height: 100%; padding: var(--rim); border-radius: calc(var(--rim) * 1.15);
  color: inherit; text-decoration: none; pointer-events: auto;
  background: linear-gradient(135deg, rgb(255 255 255 / .6), rgb(205 214 218 / .2) 26%, rgb(255 255 255 / .07) 50%, rgb(226 206 176 / .36) 78%, rgb(255 255 255 / .52));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), inset 0 1.5px 0 rgb(255 255 255 / .8), 0 46px 80px -40px rgb(0 0 0 / .9);
}
.blg__card:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; }
.blg__pic { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--rim) * .4); background: #182024; box-shadow: 0 0 0 1px rgb(0 0 0 / .4); }
.blg__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blg__glaze { position: absolute; inset: var(--rim); overflow: hidden; border-radius: calc(var(--rim) * .4); pointer-events: none; }
.blg__glaze::before {   /* a light across the glass, moving as the frame turns (blog.js: --gx) */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 220%;
  background: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / .11) 46%, rgb(255 255 255 / .03) 52%, transparent 60%);
  transform: translateX(var(--gx, 0%)); will-change: transform;
}
.blg__ct { display: none; }
.blg__tag { display: block; color: var(--cream); font-size: 12px; font-weight: 650; margin-bottom: 4px; }

/* ---------- the title that opens the section (fades as the descent starts: blog.js) ---------- */
.blg__copy { position: absolute; z-index: 4; top: 20%; inset-inline-start: var(--gutter); max-width: min(64%, 920px); pointer-events: none; text-shadow: 0 3px 30px rgb(6 12 10 / .85); will-change: opacity, transform; }
.blg__eyebrow { margin-bottom: 22px; color: var(--cream); font-size: 13px; font-weight: 600; word-spacing: .55em; }
.blg__title { font-size: clamp(46px, 6.3vw, 112px); font-weight: 250; line-height: 1.12; }
.blg__title em { font-style: normal; font-weight: 200; color: var(--cream); }
.blg__lead { margin-top: 24px; max-width: 30em; color: rgb(241 233 221 / .74); font-size: 15px; line-height: 1.9; }
.blg__cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--cream); font-size: 12.5px; font-weight: 600; }
.blg__down { width: 18px; height: 18px; animation: blg-bob 2.2s ease-in-out infinite; }
@keyframes blg-bob { 50% { transform: translateY(5px); } }

/* ---------- along the top ---------- */
.blg__top {
  position: absolute; z-index: 4; top: calc(var(--header-h) + 2.4vh); inset-inline: var(--gutter); display: flex; justify-content: space-between; align-items: center;
  color: rgb(239 228 210 / .86); font-size: 12px; font-weight: 600; pointer-events: none;
}
.blg__all { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; color: inherit; text-decoration: none; pointer-events: auto; box-shadow: inset 0 -1px 0 rgb(220 195 161 / .5); transition: color .25s; }
.blg__all:hover { color: var(--cream); }
.blg__all:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.blg__ne { width: 15px; height: 15px; flex: none; }
[dir="rtl"] .blg__ne { transform: scaleX(-1); }

/* ---------- the bar along the bottom (the next-section pill sits under its line, at the inline start) ---------- */
.blg__bar {
  position: absolute; z-index: 5; inset-inline: var(--gutter); bottom: 92px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 14px 34px; align-items: end;
}
.blg__bar::before { content: ""; position: absolute; z-index: -1; inset: -70px calc(-1 * var(--gutter)) -92px; background: linear-gradient(transparent, rgb(9 18 15 / .8) 46%, rgb(9 18 15 / .95)); pointer-events: none; }
.blg__cap { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 22px; min-width: 0; padding-bottom: 4px; }
.blg__count { flex: none; color: var(--cream); font-size: 12.5px; font-weight: 600; word-spacing: .25em; font-variant-numeric: tabular-nums; }
.blg__name { min-width: 0; overflow: hidden; color: var(--paper-w); font-size: clamp(19px, 1.75vw, 31px); font-weight: 300; line-height: 1.5; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s, transform .45s var(--ease-out); }
.blg__name.is-swap { opacity: 0; transform: translateY(8px); }
.blg__name:hover { color: #fff; }
.blg__name:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.blg__line { grid-column: 1; grid-row: 2; position: relative; display: block; height: 1px; background: rgb(232 210 179 / .2); }
.blg__line i { position: absolute; top: -.5px; inset-inline-start: 0; width: 100%; height: 2px; background: var(--cream); transform: scaleX(var(--p, 0)); transform-origin: var(--po, right); transition: transform .5s var(--ease-out); }
[dir="ltr"] .blg__line i { --po: left; }
.blg__acts { grid-column: 2; grid-row: 1; display: flex; gap: 8px; }
.blg__btn, .blg__pick, .blg__read {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 52px; min-width: 52px;
  border: 1px solid var(--btn-line); border-radius: 2px; background: var(--btn); color: #F4ECDF; box-shadow: inset 0 1px rgb(255 255 255 / .07);
  font: inherit; cursor: pointer; transition: background-color .25s, border-color .25s;
}
.blg__btn .arrow { width: 22px; height: 22px; }
[dir="rtl"] .blg__btn--prev .arrow { transform: none; }   /* back: toward the inline start */
[dir="ltr"] .blg__btn--prev .arrow { transform: scaleX(-1); }
.blg__btn:disabled { opacity: .32; cursor: default; }
.blg__btn:not(:disabled):hover, .blg__read:hover, .blg__pick:hover { background: rgb(42 62 50 / .95); border-color: rgb(234 211 182 / .8); }
.blg__btn:focus-visible, .blg__read:focus-visible, .blg__pick:focus-within { outline: 2px solid var(--cream); outline-offset: 4px; }
.blg__pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 15px; }
.blg__pick select option { color: #fff; background: #16231E; }
.blg__pickface { display: inline-flex; align-items: center; gap: 2px; color: var(--cream); font-size: 13px; font-weight: 600; pointer-events: none; }
.blg__pickface svg { width: 12px; height: 12px; }
.blg__read { gap: 10px; padding-inline: 20px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .blg__copy { top: 17%; max-width: none; inset-inline-end: var(--gutter); }
  .blg__title { font-size: clamp(38px, 12vw, 58px); }
  .blg__lead { font-size: 14px; }
  .blg__top { font-size: 11px; }
  .blg__bar { bottom: 84px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .blg__cap { flex-direction: column; gap: 4px; }
  .blg__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 18px; }
  .blg__acts { grid-column: 1; grid-row: 3; }
  .blg__btn, .blg__pick, .blg__read { height: 46px; min-width: 46px; }
  .blg__read { flex: 1; }
}

/* ---------- without the motion: the posts in a grid over the backdrop ---------- */
html:not(.js) .blg__stage, html.gr-static .blg__stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; padding: calc(var(--header-h) + 40px) var(--gutter) 120px; }
html:not(.js) .blg__top, html.gr-static .blg__top { order: 1; }
html:not(.js) .blg__copy, html.gr-static .blg__copy { order: 2; }
html:not(.js) .blg__scene, html.gr-static .blg__scene { order: 3; }
html:not(.js) .blg__copy, html.gr-static .blg__copy { position: relative; top: auto; max-width: 900px; inset: auto; margin-bottom: 40px; }
html:not(.js) .blg__cue, html.gr-static .blg__cue { display: none; }
html:not(.js) .blg__top, html.gr-static .blg__top { position: relative; top: auto; inset: auto; margin-bottom: 28px; }
html:not(.js) .blg__bar, html.gr-static .blg__bar { display: none; }
html:not(.js) .blg__scene, html.gr-static .blg__scene { position: relative; perspective: none; pointer-events: auto; }
html:not(.js) .blg__helix, html.gr-static .blg__helix { position: relative; left: auto; top: auto; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; transform: none; }
html:not(.js) .blg__item, html.gr-static .blg__item { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; }
html:not(.js) .blg__card, html.gr-static .blg__card { --cw: 340px; height: auto; display: grid; gap: 14px; background: rgb(241 236 226 / .94); }
html:not(.js) .blg__pic, html.gr-static .blg__pic { height: auto; aspect-ratio: 16 / 10; }
html:not(.js) .blg__glaze, html.gr-static .blg__glaze { display: none; }
html:not(.js) .blg__ct, html.gr-static .blg__ct { display: block; padding: 2px 6px 8px; color: var(--ink); font-size: 15.5px; font-weight: 650; line-height: 1.6; }
html:not(.js) .blg__tag, html.gr-static .blg__tag { color: #6B5232; }

/* ---------- a post's window: its picture in the glass frame, its text; the previous and the next post ---------- */
.bm {
  width: min(860px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); padding: 0; border: 0; border-radius: 22px;
  background: linear-gradient(#101915, #0B1210); color: var(--paper-w); overflow: hidden;
  box-shadow: 0 60px 140px -40px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(220 195 161 / .14);
}
.bm::backdrop { background: rgb(4 7 6 / .76); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bm[open] { animation: bm-in .6s var(--ease-out); }
.bm[open]::backdrop { animation: bm-fade .4s ease-out; }
@keyframes bm-in { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@keyframes bm-fade { from { opacity: 0; } }
.bm__item { max-height: inherit; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(220 195 161 / .3) transparent; }
.bm__item[hidden] { display: none; }
.bm__pic {   /* the same thin glass rim as on the helix */
  margin: 18px 18px 0; padding: 7px; border-radius: 14px;
  background: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(205 214 218 / .18) 26%, rgb(255 255 255 / .06) 50%, rgb(226 206 176 / .32) 78%, rgb(255 255 255 / .45));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4);
}
.bm__pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px; }
.bm__in { padding: 30px clamp(22px, 5vw, 56px) 34px; }
.bm__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: rgb(241 233 221 / .45); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bm__tag { color: var(--cream); font-size: 12.5px; }
.bm__title { margin-top: 10px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.45; }
.bm__lead { margin-top: 14px; padding-bottom: 22px; border-bottom: 1px solid rgb(220 195 161 / .14); color: rgb(241 233 221 / .86); font-size: 16px; line-height: 2; }
.bm__body p { margin-top: 18px; color: rgb(241 233 221 / .68); font-size: 15px; line-height: 2.1; }
.bm__note { margin-top: 26px; color: rgb(241 233 221 / .36); font-size: 11.5px; }
.bm__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(220 195 161 / .14); }
.bm__step {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-inline: 16px; border: 1px solid var(--btn-line); border-radius: 2px;
  background: var(--btn); color: #F4ECDF; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .25s, border-color .25s;
}
.bm__step .arrow { width: 18px; height: 18px; }
[dir="rtl"] .bm__step--prev .arrow { transform: none; }
[dir="ltr"] .bm__step--prev .arrow { transform: scaleX(-1); }
.bm__step:disabled { opacity: .3; cursor: default; }
.bm__step:not(:disabled):hover { background: rgb(42 62 50 / .95); border-color: rgb(234 211 182 / .8); }
.bm__step:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.bm__x { position: absolute; z-index: 2; top: 28px; inset-inline-end: 28px; }
.bm__x button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgb(8 12 11 / .62); color: var(--white); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); transition: transform .4s var(--ease-out), background-color .3s; }
.bm__x button:hover { background: rgb(8 12 11 / .85); transform: rotate(90deg); }
.bm__x svg { width: 18px; height: 18px; }
.bm__x button:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
@media (max-width: 760px) {
  .bm { border-radius: 18px; }
  .bm__pic { margin: 12px 12px 0; padding: 5px; }
  .bm__pic img { aspect-ratio: 16 / 10; }
  .bm__x { top: 20px; inset-inline-end: 20px; }
  .bm__lead { font-size: 15px; }
  .bm__body p { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .blg__veil, .blg__light, .blg__down { animation: none; }
  .bm[open], .bm[open]::backdrop { animation: none; }
}