/* =Child-Theme: hero slider text
--------------------------------------------------------------
   Editorial treatment for the text layers of the home page slider
   (Revolution Slider, alias "slider_1"): a small tracked gold eyebrow,
   a large serif headline and a short paragraph, all sitting on a soft,
   blurred dark "backdrop" so they stay readable on any photo.

   Revolution Slider writes font-size / font-family / color as inline
   styles from its JS, so typography rules here carry !important.
   Position, size and animation are left to the slider.

   Which layer gets which look:
     - .rs-layer whose text is the main title (h1/h2 layer, or the first
       text layer of a slide)                      -> headline
     - a layer with the class  briant-eyebrow      -> small tracked label
     - a layer with the class  briant-lead / p     -> paragraph
   Add the classes in Slider Revolution > layer > Attributes > Classes,
   or leave them off: an untagged single text layer is styled as the
   headline.
-------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
	--briant-hero-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--briant-hero-sans: 'Work Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--briant-hero-gold: #c9a96a;
	--briant-hero-ink: #f5f1ea;
	/* başlığın kırılma genişliği: bu değerin altındaki kelimeler alt satıra iner */
	--briant-hero-measure: 8em;
}

/* ---------- 1. Darken the photo slightly towards the text ---------- */

.slider_wrap rs-slide::after,
.slider-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background:
			linear-gradient(180deg, rgba(10, 7, 5, 0.35) 0%, rgba(10, 7, 5, 0.05) 35%, rgba(10, 7, 5, 0.55) 100%);
}

.slider_wrap rs-slide rs-layer,
.slider_wrap rs-slide .rs-layer,
.slider-banner > * {
	z-index: 2; /* layers are already positioned by the slider */
}

.slider-banner {
	position: relative;
}

.slider-banner > * {
	position: relative;
}

/* ---------- 2. Headline ---------- */

.slider_wrap rs-layer,
.slider_wrap .rs-layer,
.slider-banner h1,
.slider-banner h2,
.slider-banner .slider-title {
	font-family: var(--briant-hero-serif) !important;
	font-weight: 600 !important;
	font-size: clamp(34px, 4.8vw, 68px) !important;
	line-height: 1.14 !important;
	letter-spacing: 0.005em !important;
	color: var(--briant-hero-ink) !important;
	text-align: center !important;   /* wrapped headlines centre line by line */
	text-shadow:
			0 1px 2px rgba(0, 0, 0, 0.35),
			0 8px 30px rgba(0, 0, 0, 0.28);
	white-space: normal !important;
	/* iki satır: kutu metin kadar genişler, ölçüyü aşınca kırılır.
	   text-wrap:balance satırları dengeli böler (Seçkin İsviçre / Terziliği) */
	width: max-content !important;
	max-width: min(var(--briant-hero-measure), 78vw) !important;
	text-wrap: balance;
}

/* Blurred backdrop pooled behind the headline (not a box: a soft glow) */
.slider_wrap rs-layer::before,
.slider_wrap .rs-layer::before,
.slider-banner h1::before,
.slider-banner h2::before,
.slider-banner .slider-title::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -0.5em -1.4em;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(8, 5, 3, 0.45), rgba(8, 5, 3, 0));
	filter: blur(26px);
	pointer-events: none;
}

/* Thin gold rule under the headline, like a signature line */
.slider_wrap rs-layer::after,
.slider_wrap .rs-layer::after,
.slider-banner h1::after,
.slider-banner h2::after,
.slider-banner .slider-title::after {
	content: '';
	display: block;
	width: 1.6em;
	height: 1px;
	/* centred under the rendered text (functions.php sets --briant-rule-left
	   to half the text width); falls back to the centre of the layer box */
	margin: 0.55em 0 0 calc(var(--briant-rule-left, 50%) - 0.8em);
	background: linear-gradient(90deg, rgba(201, 169, 106, 0), var(--briant-hero-gold), rgba(201, 169, 106, 0));
	opacity: 0.55;
}

/* ---------- 3. Eyebrow (small tracked label above the headline) ---------- */

.slider_wrap rs-layer.briant-eyebrow,
.slider_wrap .rs-layer.briant-eyebrow,
.slider-banner .slider-eyebrow,
.slider-banner h1 small,
.slider-banner h2 small {
	font-family: var(--briant-hero-sans) !important;
	font-size: clamp(10px, 0.95vw, 13px) !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.32em !important;
	text-transform: uppercase !important;
	color: var(--briant-hero-gold) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.45);
}

.slider_wrap rs-layer.briant-eyebrow::before,
.slider_wrap rs-layer.briant-eyebrow::after,
.slider_wrap .rs-layer.briant-eyebrow::before,
.slider_wrap .rs-layer.briant-eyebrow::after,
.slider-banner .slider-eyebrow::before,
.slider-banner .slider-eyebrow::after {
	content: none;
}

/* ---------- 4. Lead paragraph ---------- */

.slider_wrap rs-layer.briant-lead,
.slider_wrap .rs-layer.briant-lead,
.slider-banner p,
.slider-banner .slider-content {
	font-family: var(--briant-hero-sans) !important;
	font-size: clamp(14px, 1.15vw, 17px) !important;
	font-weight: 300 !important;
	line-height: 1.75 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: rgba(245, 241, 234, 0.88) !important;
	max-width: 34em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.4);
}

.slider_wrap rs-layer.briant-lead::before,
.slider_wrap .rs-layer.briant-lead::before,
.slider-banner p::before,
.slider-banner .slider-content::before {
	inset: -0.6em -1.4em;
	background: radial-gradient(closest-side, rgba(8, 5, 3, 0.5), rgba(8, 5, 3, 0));
	filter: blur(22px);
}

.slider_wrap rs-layer.briant-lead::after,
.slider_wrap .rs-layer.briant-lead::after,
.slider-banner p::after,
.slider-banner .slider-content::after {
	content: none;
}

/* ---------- 6. Headline level across slides ---------- */

/* Every headline layer is vertically "middle"-aligned by the slider inside a
   fixed 126px box (scaled with the 1240px grid). The enlarged serif headline
   overflows that box downward, and by a different amount per slide ("Swiss
   Tailoring" wraps to two lines, "Made-to-Measure" does not), so the visual
   centre of the text differed from slide to slide. functions.php now measures
   each headline's real text height and re-centres it inside the box with a
   margin-top / negative margin-bottom pair (the slider includes margins when
   it measures the layer, so the pair keeps its outer height unchanged), and
   does the same horizontally: the slider centres each layer's box, but the
   enlarged serif headline is left-aligned and wider than the box, so without
   the margin-left / negative margin-right pair each slide's text sat a
   different distance to the right ("Made-to-Measure" looked shifted left). */

/* ---------- 5. Phones ---------- */

@media (max-width: 767px) {
	.slider_wrap rs-layer,
	.slider_wrap .rs-layer,
	.slider-banner h1,
	.slider-banner h2,
	.slider-banner .slider-title {
		--briant-hero-measure: 7.4em;
		max-width: min(var(--briant-hero-measure), 84vw) !important;
	}

	.slider_wrap rs-layer::before,
	.slider_wrap .rs-layer::before,
	.slider-banner h1::before,
	.slider-banner h2::before {
		inset: -0.35em -0.8em;
		filter: blur(12px);
	}
}