/*
 * AlmarFit 3.66.0: the whole story of a client, in a window (includes/stories.php, assets/stories.js).
 * One dark panel with a thin gold edge: her photo on the left (on a phone above), the text straight on the panel,
 * without boxes inside it. The colours and the fonts are the theme's (v3.css, noir.css).
 */

/* ---------- "Citește povestea" on a card ---------- */
.af-sd-open {
	appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0 0 3px; margin: 0;
	display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
	font: 600 15px/1.2 var(--nx-sans, system-ui, sans-serif); color: var(--v3-gold2, #EBD58A); cursor: pointer;
	background-image: linear-gradient(90deg, var(--v3-gold, #D2B04C), var(--v3-gold, #D2B04C));
	background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size .5s cubic-bezier(.2, .8, .2, 1);
}
.af-sd-open i { font-style: normal; color: var(--v3-gold, #D2B04C); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.af-sd-open:hover, .af-sd-open:focus-visible { background-size: 100% 1px; outline: none; }
.af-sd-open:hover i, .af-sd-open:focus-visible i { transform: translateX(4px); }
html:not(.af-v3-js) .af-sd-open { display: none; }
[data-af-story] { cursor: pointer; }
.af-v3-rv .af-sd-open { margin-top: 2px; }
.af-v3-rvs.is-live .af-v3-rv:not(.is-on) .af-sd-open { display: none; }
.af-v3-st .af-sd-open { margin-top: 14px; }

/* "Rezultate" (3.67.0): the page starts with every story; their heading is the page's title. */
.af-sec.af-v3-stories-sec.af-sd-first { padding-top: 96px !important; }
.af-sec.af-v3-stories-sec.af-sd-first h1 {
	margin: 0 !important; max-width: 980px;
	font-family: var(--nx-serif, Georgia, serif); font-weight: 400; letter-spacing: -.014em; color: var(--v3-t1, #F3EFE8);
	font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem) !important; line-height: 1.05 !important;
}
.af-sec.af-v3-stories-sec.af-sd-first h1 em { font-style: italic; color: var(--v3-gold, #D2B04C); }

/* ---------- The window ---------- */
html.af-sd-lock { overflow: hidden; }
dialog.af-sd {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(8, 7, 9, 0); color: #F3EFE8; overflow: hidden;
	font-family: var(--nx-sans, system-ui, sans-serif);
	-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
	transition: background-color .5s cubic-bezier(.2, .8, .2, 1), backdrop-filter .5s cubic-bezier(.2, .8, .2, 1), -webkit-backdrop-filter .5s cubic-bezier(.2, .8, .2, 1);
}
dialog.af-sd[open] { display: grid; place-items: center; }
dialog.af-sd::backdrop { background: transparent; }
dialog.af-sd.is-in { background: rgba(8, 7, 9, .8); -webkit-backdrop-filter: blur(14px) saturate(.85); backdrop-filter: blur(14px) saturate(.85); }

.af-sd__panel {
	position: relative; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
	width: min(1120px, calc(100vw - 64px)); height: min(740px, calc(100dvh - 64px));
	border-radius: 30px; overflow: hidden;
	background: radial-gradient(640px circle at 100% 0%, rgba(235, 213, 138, .07), rgba(235, 213, 138, 0) 60%), #121114;
	box-shadow: 0 0 0 1px rgba(210, 176, 76, .32), 0 60px 160px rgba(0, 0, 0, .7);
	opacity: 0; transform: translateY(28px) scale(.975);
	transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}
.af-sd.is-in .af-sd__panel { opacity: 1; transform: none; }
.af-sd__panel:focus { outline: none; }
.af-sd__in { display: contents; }

/* The photo. */
.af-sd__ph { grid-column: 1; grid-row: 1 / span 2; position: relative; overflow: hidden; background: #1F1E21; transition: opacity .26s ease; }
.af-sd__ph img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1);
}
.af-sd.is-in .af-sd__ph img { transform: none; }
.af-sd__ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18, 17, 20, 0) 72%, rgba(18, 17, 20, .55)); }
.af-sd__mono {
	width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
	font: 400 34px/1 var(--nx-serif, Georgia, serif); color: #141316; background: linear-gradient(180deg, #F0DD98, #D2B04C);
	box-shadow: 0 0 50px rgba(210, 176, 76, .3);
}

/* The text, straight on the panel. */
.af-sd__txt { grid-column: 2; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; padding: 76px 68px 36px; transition: opacity .26s ease, transform .26s ease; scrollbar-width: thin; scrollbar-color: rgba(243, 239, 232, .18) transparent; }
.af-sd__txt > * { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.af-sd.is-in .af-sd__txt > * { opacity: 1; transform: none; }
.af-sd.is-in .af-sd__txt > :nth-child(1) { transition-delay: .12s; }
.af-sd.is-in .af-sd__txt > :nth-child(2) { transition-delay: .18s; }
.af-sd.is-in .af-sd__txt > :nth-child(3) { transition-delay: .24s; }
.af-sd.is-in .af-sd__txt > :nth-child(4) { transition-delay: .3s; }
.af-sd.is-in .af-sd__txt > :nth-child(5) { transition-delay: .36s; }
.af-sd.is-swap .af-sd__ph, .af-sd.is-swap .af-sd__txt { opacity: 0; }
.af-sd.is-swap[data-dir="next"] .af-sd__txt { transform: translateX(-10px); }
.af-sd.is-swap[data-dir="prev"] .af-sd__txt { transform: translateX(10px); }

.af-sd__eye {
	display: flex; align-items: center; gap: 14px; margin: 0;
	font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #D2B04C;
}
.af-sd__eye::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, #D2B04C, rgba(210, 176, 76, .2)); }
.af-sd .af-sd__name {
	margin: 18px 0 0; padding: 0; font: 400 56px/1.02 var(--nx-serif, Georgia, serif); letter-spacing: -.015em;
	color: #F3EFE8; text-transform: none;
}
.af-sd__res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 22px 0 0; }
.af-sd__res b { font: 400 60px/.95 var(--nx-serif, Georgia, serif); color: #EBD58A; }
.af-sd__res span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #D2B04C; }
.af-sd__story { margin: 34px 0 0; font-size: 16.5px; line-height: 1.8; color: #C9C4BD; }
.af-sd__story::before { content: ""; display: block; width: 48px; height: 1px; margin-bottom: 30px; background: linear-gradient(90deg, #D2B04C, rgba(210, 176, 76, 0)); }
.af-sd__story p { margin: 0 0 18px; }
.af-sd__story p:first-of-type { font: italic 400 21px/1.6 var(--nx-serif, Georgia, serif); color: #F3EFE8; }
.af-sd__story p:last-child { margin-bottom: 0; }
.af-sd__legal { margin: 30px 0 0; font-size: 12.5px; line-height: 1.6; color: #9A958F; }

/* The next and the previous story. */
.af-sd__nav {
	grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 12px;
	padding: 20px 68px 26px; border-top: 1px solid rgba(243, 239, 232, .10);
}
.af-sd__count { margin-right: auto; font-size: 13px; letter-spacing: .08em; color: #9A958F; }
.af-sd__count b { color: #F3EFE8; font-weight: 600; }
.af-sd.is-one .af-sd__nav { display: none; }

/* Close. */
.af-sd .af-sd__x {
	position: absolute; z-index: 3; top: 20px; right: 20px; width: 46px; height: 46px; min-width: 0; min-height: 0; padding: 0; margin: 0; border-radius: 50% !important; box-shadow: none;
	display: grid; place-items: center; cursor: pointer; color: #F3EFE8;
	background: rgba(18, 17, 20, .55); border: 1px solid rgba(243, 239, 232, .22);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: border-color .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.af-sd .af-sd__x:hover, .af-sd .af-sd__x:focus-visible { border-color: #D2B04C; transform: rotate(90deg); outline: none; }

/* Without a photo: one column, her initial in gold. */
.af-sd.is-mono .af-sd__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; width: min(780px, calc(100vw - 64px)); }
.af-sd.is-mono .af-sd__ph { grid-row: 1; background: none; overflow: visible; padding: 68px 68px 0; }
.af-sd.is-mono .af-sd__ph::after { display: none; }
.af-sd.is-mono .af-sd__txt { grid-column: 1; grid-row: 2; padding-top: 30px; }
.af-sd.is-mono .af-sd__nav { grid-column: 1; grid-row: 3; }

@media (max-width: 1100px) {
	.af-sd__panel { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
	.af-sd__txt { padding: 64px 44px 30px; }
	.af-sd__nav { padding: 18px 44px 22px; }
	.af-sd .af-sd__name { font-size: 46px; }
	.af-sd__res b { font-size: 50px; }
}

/* A phone: the whole screen, the photo above, everything scrolls under the × and above the arrows. */
@media (max-width: 781px) {
	dialog.af-sd[open] { place-items: stretch; }
	.af-sd__panel {
		display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 0;
		background: #121114; box-shadow: none; transform: translateY(40px);
	}
	.af-sd__in { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.af-sd__ph { height: 66svh; min-height: 360px; }
	.af-sd__ph::after { background: linear-gradient(180deg, rgba(18, 17, 20, .35) 0%, rgba(18, 17, 20, 0) 18%, rgba(18, 17, 20, 0) 42%, rgba(18, 17, 20, .86) 80%, #121114 100%); }
	.af-sd__txt { position: relative; z-index: 1; margin-top: -112px; overflow: visible; padding: 0 24px 34px; }
	.af-sd .af-sd__name { font-size: 42px; margin-top: 14px; }
	.af-sd__res { margin-top: 16px; }
	.af-sd__res b { font-size: 48px; }
	.af-sd__story { margin-top: 28px; font-size: 16px; line-height: 1.75; }
	.af-sd__story::before { margin-bottom: 24px; }
	.af-sd__story p:first-of-type { font-size: 19px; }
	.af-sd__nav { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgba(18, 17, 20, .94); }
	.af-sd .af-sd__x { top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; }
	.af-sd.is-mono .af-sd__ph { height: auto; min-height: 0; padding: calc(70px + env(safe-area-inset-top)) 24px 0; }
	.af-sd.is-mono .af-sd__txt { margin-top: 0; padding-top: 22px; }
	.af-sec.af-v3-stories-sec.af-sd-first { padding-top: 56px !important; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.af-sd, .af-sd__panel, .af-sd__ph, .af-sd__ph img, .af-sd__txt, .af-sd__txt > *, .af-sd__x, .af-sd-open, .af-sd-open i { transition: none !important; }
	.af-sd__panel, .af-sd__ph img, .af-sd__txt > * { transform: none !important; }
}