.ptc-chamado {
	background: #2b201b;
}

/* Hero ---------------------------------------------------------------- */

.ptc-chamado-hero {
	position: relative;
	z-index: 1;
	aspect-ratio: 1920 / 1300;
	min-height: 720px;
	overflow: hidden;
	color: #fff;
}

/* The exported PSD background lost its dark treatment on the way to a
   flat photo — without this the white title/subtitle can land on the
   brightest part of the image (sunlight through the canopy) and become
   unreadable. A filter on the image itself (not a gradient ::before,
   darkest at the bottom) keeps the darkening even — a bottom-heavy
   gradient made the sliver of this photo revealed through
   .ptc-chamado-letter's own notch (see below) read as a noticeably
   darker patch poking into it. */
.ptc-chamado-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.72) saturate(1.05);
}

/* top: 50% + translateY(-50%) instead of a plain top: % — true vertical
   centering regardless of how tall the title + subtitle block ends up
   being, instead of just top-anchoring it partway down (which read as
   sitting low/cramped near the bottom edge once the title wrapped to
   two lines). */
.ptc-chamado-hero__copy {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 19%;
	max-width: 620px;
	transform: translateY(-50%);
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.ptc-chamado-hero__copy h1 {
	font-family: var(--ptc-font-display);
	font-size: clamp(2.3rem, 4.4vw, 5rem);
	font-style: italic;
	font-weight: 500;
	line-height: .85;
	letter-spacing: -.02em;
	margin: 0 0 22px;
}

.ptc-chamado-hero__copy p {
	font-family: var(--ptc-font-display);
	font-style: italic;
	font-size: clamp(1rem, 1.5vw, 1.4rem);
	line-height: 1.35;
	margin: 0;
}

/* Letter ---------------------------------------------------------------- */

/* Same -3.54vw overlap as Carta Aberta's .ptc-carta-letter (a vw, not a
   fixed px, so it scales with the photo's own 100%-width sizing at any
   viewport) — chamada_bg.png has the same kind of notch cutout at its
   own top edge as carta_bg.png, so it only needs a small nudge to tuck
   the seam under it, not a large cover-up overlap. A much bigger value
   was tried here before to dodge a dark patch in chamada_hero.jpg, but
   that's the wrong lever: it just changes which part of the hero photo
   ends up behind the notch, and fights the hero's own height on top of
   it. chamada_hero.jpg itself was recropped instead so its own bottom
   edge — right behind this small overlap — is no longer dark.
   Height is content-driven (like .ptc-carta-letter), not the photo's
   fixed 1920×2573 ratio: the real letter_body text (editable from the
   Customizer) is long, and a fixed-ratio box can't grow to fit it — the
   text would just overflow past the section into the footer's
   scroll-top button. .__bg (object-fit: cover) stretches to always
   fully cover whatever height .__text (sized from .__inner's real
   content, via the shared grid cell below) ends up needing. */
.ptc-chamado-letter {
	position: relative;
	z-index: 2;
	margin-top: calc(-3.54vw * var(--ptc-notch-x));
}

.ptc-chamado-letter__bg {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Holds the letter copy straight on top of the section photo — no paper
   texture and no scrim behind it. Both were removed: the texture distorted
   when stretched and the scrim, being a flat panel with a soft edge, read as
   a second sheet of paper laid over the photo.
   Neither is needed for legibility. Measured over the column the letter
   actually occupies, chamada_bg.png's photo peaks at a relative luminance of
   77/255, which puts white text at 8.5:1 against its brightest pixel —
   well clear of the 4.5:1 AA threshold, and that is the worst case, not the
   average (far higher on average). A plain in-flow block, so it is simply as tall
   as the text at any length. */
.ptc-chamado-letter__text {
	position: relative;
}

/* Normal in-flow content now (not %-positioned against the old fixed-
   ratio section), centered the same way Carta Aberta's __inner is.
   padding-top clears the seam notch/scroll-down button above;
   padding-bottom is generous specifically so
   the text never ends right up against the footer's scroll-top button,
   whatever its real length turns out to be. */
/* 78ch, not 62.1%/900px: on a wide screen that was a ~110-character
   measure, which is the main thing that made this letter hard to read.
   min() keeps it inside the narrower of the two on small screens. */
.ptc-chamado-letter__inner {
	position: relative;
	z-index: 2;
	width: min(88%, 78ch);
	margin: 0 auto;
	color: #fff;
	padding: 16vw 0 120px;
}

.ptc-chamado-letter__inner h2 {
	font-family: var(--ptc-font-body);
	font-size: clamp(1.15rem, 1.75vw, 1.8rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
	color: #fff;
	margin: 0 0 .2em;
}

.ptc-chamado-letter__subtitle {
	font-family: var(--ptc-font-body);
	font-size: clamp(.9rem, 1.15vw, 1.2rem);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	margin: 0 0 1.6em;
}

.ptc-chamado-letter__body p {
	/* line-height was 1.25 — tight enough that consecutive lines of white
	   text over a photo ran into each other. 1.75 is what actually makes
	   this readable now that the paper texture isn't there to separate
	   the copy from the image. */
	font-size: clamp(1rem, 1.2vw, 1.32rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 1.35em;
}

.ptc-chamado-letter__body p strong {
	font-weight: 700;
	color: #fff;
}

.ptc-chamado-letter__body h3 {
	font-family: var(--ptc-font-body);
	font-size: clamp(.95rem, 1.1vw, 1.2rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #fff;
	margin: 1em 0 1em;
}

.ptc-chamado-letter__body ul {
	list-style: none;
	margin: 0 0 .8em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .85em;
}

.ptc-chamado-letter__body ul li {
	position: relative;
	padding-left: 1.4em;
	font-size: clamp(1rem, 1.2vw, 1.32rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
}

.ptc-chamado-letter__body ul li::before {
	content: '•';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #fff;
}

.ptc-chamado-letter__body ul li strong {
	font-weight: 700;
	color: #fff;
}

/* The seam "detail": a small rounded notch is baked into the photo's own
   top edge (meant to sit over the hero), with a scroll-down button
   nested in it — same idea as the footer seam notch, just right-side-up
   and pointing down instead of up. */
.ptc-chamado-letter__scroll {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ptc-white);
	color: var(--ptc-terracotta);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.ptc-chamado-letter__scroll svg {
	width: 20px;
	height: 20px;
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 880px) {
		/* The notch that used to be cut into the artwork itself. The phone
		   crops the client supplied are flat JPEGs with no transparency, so
		   the seam lost its relief; this cuts the same shape back in with a
		   mask. Two layers: the notch sheet across the top (or bottom) strip,
		   plus a solid block covering the rest of the image, unioned by the
		   default add compositing — a single-layer mask would hide everything
		   the sheet doesn't reach. 6.25vw is the sheet's own 120/1920 height,
		   scaled by the same --ptc-notch-x the seams use. */
	.ptc-chamado-letter__bg {
		-webkit-mask-image: url('../images/decor/notch-top.svg'), linear-gradient(#000, #000);
		-webkit-mask-repeat: no-repeat, no-repeat;
		-webkit-mask-position: top center, bottom center;
		-webkit-mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw);
		mask-image: url('../images/decor/notch-top.svg'), linear-gradient(#000, #000);
		mask-repeat: no-repeat, no-repeat;
		mask-position: top center, bottom center;
		mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw);
	}

	/* Mobile keeps the same photo-with-overlaid-text layout as desktop
	   (an earlier version split this into a stacked photo-then-caption
	   flow instead — rejected, since it no longer read as a background
	   photo at all). The photo (__bg) stays position: absolute; inset: 0
	   with its existing height: 100% — that resolves fine against a
	   content-driven parent height because the CSS percentage-height
	   rule specifically carves out absolutely positioned children (only
	   non-absolute children fall back to "auto" against an auto-height
	   containing block). The copy block becomes a normal in-flow
	   element (instead of also being absolutely positioned) so it can
	   actually establish that parent height, and the section's fixed
	   aspect-ratio is dropped so it can grow to fit. Mobile wraps this
	   copy onto far more lines than desktop ever has to make room for,
	   so the photo now crops tighter to fill the resulting taller,
	   narrower box — the accepted trade-off for keeping the text on
	   the photo instead of below it. */
	.ptc-chamado-hero {
		aspect-ratio: auto;
		/* The banners now carry a 9:16 phone crop (see ptc_section_photo),
		   but the section's height still came only from the copy inside it —
		   about 427px, which squeezed a portrait photo into a letterbox and
		   left no room for the carved notch the scroll-down button sits in.
		   85svh gives the banner its own height: most of the screen, the
		   photo close to its real proportions, and space under the text for
		   that notch. svh (not vh) because on iOS vh measures the viewport
		   with the browser bars collapsed, so a vh-sized banner is always
		   taller than what's actually visible when the page loads. */
		min-height: 85vh;
		min-height: 85svh;
	}

	/* padding-top clears .ptc-site-header, which floats position: absolute
	   over this hero at every width (transparent background, 193px tall
	   on a phone with its nav toggle) — the site-wide 48px this used to
	   inherit left the title rendering underneath/behind it. */
	.ptc-chamado-hero__copy {
		position: relative;
		top: auto;
		left: auto;
		max-width: none;
		margin-bottom: 0;
		padding: 220px 24px 48px;
		transform: none;
	}

	.ptc-chamado-letter__inner {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 70px 24px 80px;
	}
}