/*
 * Index Brands — single brand profile, §4.
 *
 * Loads after index.css, which supplies the shared card, chip and button
 * shapes. Logical properties throughout: the sidebar sits at the inline start,
 * which is the right in Arabic and the left in English, with no separate rule.
 */

/* ---------------------------------------------------------------- layout */

.ib-profile__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	padding-block: 30px 80px;
	align-items: start;
}

/*
 * §4: below 900px the sidebar becomes a stacked block above the main content,
 * so it is a single column until then and only becomes sticky once there is
 * room beside the content for it.
 */
@media (min-width: 900px) {
	.ib-profile__grid {
		grid-template-columns: var(--sidebar-profile) minmax(0, 1fr);
		gap: 46px;
	}

	.ib-profile .ib-side {
		position: sticky;
		top: 84px;
	}
}

.ib-profile .ib-main {
	min-width: 0;
}

/* --------------------------------------------------------------- sidebar */

.ib-profile .ib-side {
	background: var(--white);
	border: 1px solid var(--border-soft);
	border-radius: 22px;
	overflow: hidden;
	padding-bottom: 20px;
}

.ib-profile .ib-side__bar {
	position: relative;
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ib-profile .ib-side__ghost {
	opacity: .22;
	line-height: 1;
	white-space: nowrap;
	max-width: 86%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ib-profile .ib-side__avatar {
	width: 84px;
	height: 84px;
	margin: -42px auto 0;
	position: relative;
	border-radius: var(--r-pill);
	background: var(--white);
	border: 1px solid var(--border);
	box-shadow: 0 8px 22px rgba(11, 59, 46, .09);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 8px;
	text-align: center;
}

.ib-profile .ib-side__name {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: var(--ls-h2);
	text-align: center;
	margin: 16px 20px 10px;
}

.ib-profile .ib-side__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 20px 18px;
}

.ib-profile .ib-scallop {
	display: inline-flex;
	color: var(--verified-blue);
}

.ib-profile .ib-unclaimed {
	display: inline-flex;
}

.ib-profile .ib-side__statusText {
	font-size: 16.5px;
	font-weight: 500;
	color: var(--ink);
}

.ib-profile .ib-side__acts {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0 20px 18px;
}

.ib-profile .ib-btn-soft,
.ib-profile .ib-btn-grey {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: 20px;
	border-radius: var(--r-pill);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

/* The one action on the profile, so it carries the action colour. A pale
   green fill here read as a disabled state sitting next to a grey one. */
.ib-profile .ib-btn-soft {
	background: var(--lime);
	color: var(--lime-ink);
}

.ib-profile .ib-btn-soft:hover {
	background: var(--lime-hover);
}

/* Secondary is outlined rather than filled: two filled buttons stacked in a
   white card compete, and the fill was the only thing telling them apart. */
.ib-profile .ib-btn-grey {
	background: var(--white);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--border);
}

.ib-profile .ib-btn-grey:hover {
	background: var(--grey-soft);
	box-shadow: inset 0 0 0 1px var(--border-strong);
}

.ib-profile .ib-side__desc {
	font-size: 14px;
	line-height: var(--lh-body);
	color: var(--muted);
	margin: 0 20px 14px;
	text-wrap: pretty;
}

.ib-profile .ib-side__domain {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 20px 14px;
	font-size: 13.5px;
	color: var(--muted);
	text-decoration: none;
	min-height: 44px;
}

.ib-profile .ib-side__domain:hover {
	color: var(--ink);
}

.ib-profile .ib-side__socials {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 20px 16px;
}

.ib-profile .ib-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--faint);
	border-radius: var(--r-pill);
}

.ib-profile .ib-social:hover {
	color: var(--ink);
	background: var(--grey-soft);
}

.ib-profile .ib-side__share {
	margin: 0 20px 18px;
	padding-top: 16px;
	border-top: 1px solid var(--border-soft);
	font-size: 13.5px;
	color: var(--muted);
}

.ib-profile .ib-share {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: var(--green-ink);
	cursor: pointer;
}

/* Ask Brandagy card, §4.1.8 */
.ib-profile .ib-ask {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 20px;
	padding: 18px;
	border: 1px dashed var(--border-dash);
	border-radius: 18px;
	background: linear-gradient(160deg, var(--lime-bg-2), var(--white) 70%);
}

.ib-profile .ib-ask__kicker {
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--green-ink);
}

.ib-profile .ib-ask__title {
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.ib-profile .ib-ask__note {
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
	text-wrap: pretty;
}

.ib-profile .ib-ask__cta {
	margin-top: 8px;
	align-self: flex-start;
}

/* -------------------------------------------------------------- sections */

.ib-profile .ib-sec {
	margin-bottom: 46px;
}

.ib-profile .ib-sec__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ib-profile .ib-sec__h {
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: var(--ls-h2);
	margin: 0;
	text-wrap: balance;
}

.ib-profile .ib-quiet {
	font-size: 14.5px;
	color: var(--faint);
	margin: 0;
}

.ib-profile .ib-improve {
	font-size: 14.5px;
	line-height: var(--lh-body);
	color: var(--muted);
	background: var(--lime-bg-2);
	border: 1px solid var(--lime-border);
	border-radius: 16px;
	padding: 16px 18px;
	margin: 0 0 34px;
	text-wrap: pretty;
}

.ib-profile .ib-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding-inline: 24px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: var(--lime-ink);
	background: var(--lime);
	border: 0;
	border-radius: var(--r-pill);
	text-decoration: none;
	cursor: pointer;
}

/* Wise's primary is the only place the bright green fills a surface, so its
   hover deepens rather than changes hue. */
.ib-profile .ib-btn-dark:hover {
	background: var(--lime-hover);
}

.ib-profile .ib-btn-dark--sm {
	min-height: 44px;
	font-size: 14px;
	padding-inline: 18px;
}

/* ----------------------------------------------------------- asset cards */

.ib-profile .ib-assets {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.ib-profile .ib-assets {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ib-profile .ib-asset {
	margin: 0;
	border: 1px solid var(--border-soft);
	border-radius: 18px;
	overflow: hidden;
	background: var(--white);
}

.ib-profile .ib-asset__well {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 22px;
}

.ib-profile .ib-asset__well img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ib-profile .ib-asset__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 15px;
	border-top: 1px solid var(--border-soft);
	background: var(--bg-alt);
	font-size: 12.5px;
	color: var(--muted);
}

.ib-profile .ib-asset__fmt {
	font-weight: 600;
	color: var(--ink);
}

/* --------------------------------------------------------- palette table */

.ib-profile .ib-pal-acts {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ib-profile .ib-pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 18px;
	border-radius: var(--r-pill);
	border: 1px solid var(--border);
	background: var(--white);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.ib-profile .ib-pill:hover {
	border-color: var(--ink);
}

/* Wide content scrolls inside its own container, never the page body. */
.ib-profile .ib-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border-soft);
	border-radius: 16px;
	background: var(--white);
}

.ib-profile .ib-pal {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.ib-profile .ib-pal th {
	text-align: start;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--faint);
	padding: 14px 16px;
	border-bottom: 1px solid var(--border-soft);
	white-space: nowrap;
}

.ib-profile .ib-pal td {
	padding: 8px 16px;
	border-bottom: 1px solid var(--border-soft);
	vertical-align: middle;
}

.ib-profile .ib-pal tr:last-child td {
	border-bottom: 0;
}

.ib-profile .ib-swatch {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 16px;
	border: 0;
	border-radius: var(--r-pill);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	white-space: nowrap;
}

.ib-profile .ib-cell {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--ink-2);
	cursor: pointer;
	text-align: start;
}

.ib-profile .ib-cell:hover .ib-cell__t {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------ typography */

.ib-profile .ib-fonts {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.ib-profile .ib-fonts {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ib-profile .ib-font {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px;
	border: 1px solid var(--border-soft);
	border-radius: 18px;
	background: var(--white);
}

.ib-profile .ib-font__spec {
	font-size: 64px;
	/* A specimen wraps only in Arabic, where it is أبجد هوز rather than Aa —
	   so it takes the same floor every Arabic heading takes. */
	line-height: var(--lh-head);
	letter-spacing: -0.03em;
	color: var(--ink);
	margin-bottom: 10px;
}

.ib-profile .ib-font__name {
	font-size: 16px;
	font-weight: 600;
}

.ib-profile .ib-font__role {
	font-size: 12.5px;
	color: var(--faint);
}

.ib-profile .ib-font__sample {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--muted);
	margin-top: 10px;
}

/* ----------------------------------------------------------------- about */

.ib-profile .ib-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 26px;
	background: var(--bg-alt);
	border-radius: var(--r-card-lg);
}

@media (min-width: 800px) {
	.ib-profile .ib-about {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 34px;
	}

	/* The vertical divider sits on the inline start of the fact list, so it
	   lands between the columns in both directions. */
	.ib-profile .ib-about__facts {
		border-inline-start: 1px solid var(--border);
		padding-inline-start: 34px;
	}
}

.ib-profile .ib-about__prose p {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ink-2);
	margin: 0 0 14px;
	text-wrap: pretty;
}

.ib-profile .ib-about__prose p:last-child {
	margin-bottom: 0;
}

.ib-profile .ib-about__facts {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ib-profile .ib-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ib-profile .ib-fact dt,
.ib-profile .ib-fact__l {
	font-size: 12px;
	color: var(--faint);
}

.ib-profile .ib-fact dd,
.ib-profile .ib-fact__v {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

/* --------------------------------------------------- domain intelligence */

.ib-profile .ib-di {
	border: 1px solid var(--border-soft);
	border-radius: var(--r-card-lg);
	background: var(--white);
	padding: 24px 26px;
}

.ib-profile .ib-di__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 30px;
}

@media (min-width: 620px) {
	.ib-profile .ib-di__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ib-profile .ib-di__acts {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
}

.ib-profile .ib-di__act {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--green-ink);
	text-decoration: none;
}

.ib-profile .ib-di__act:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------- acquisition */

.ib-profile .ib-acq {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--lime-border);
	border-radius: var(--r-card-lg);
	padding: 24px 26px;
}

.ib-profile .ib-acq__t {
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--green-ink);
}

.ib-profile .ib-acq__row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
}

.ib-profile .ib-acq__name {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.026em;
}

.ib-profile .ib-acq__price {
	font-size: 21px;
	font-weight: 700;
	color: var(--green-ink);
}

.ib-profile .ib-acq__note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 8px;
	max-width: 52ch;
}

/* --------------------------------------------------------------- related */

.ib-profile .ib-rel {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.ib-profile .ib-rel {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ib-profile .ib-rel__card {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px;
	border: 1px solid var(--border-soft);
	border-radius: 16px;
	background: var(--white);
	text-decoration: none;
	color: var(--ink);
	min-width: 0;
}

.ib-profile .ib-rel__card:hover {
	border-color: var(--border-strong);
}

.ib-profile .ib-rel__mark {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.ib-profile .ib-rel__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ib-profile .ib-rel__row {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.ib-profile .ib-rel__name {
	font-size: 14.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ib-profile .ib-rel__domain {
	font-size: 12px;
	color: var(--faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------- tags and breadcrumb */

.ib-profile .ib-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.ib-profile .ib-tag {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding-inline: 14px;
	border-radius: var(--r-pill);
	background: var(--grey-soft);
	font-size: 13px;
	color: var(--ink-2);
}

.ib-profile .ib-crumb {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--border-soft);
	font-size: 13px;
	color: var(--muted);
}

.ib-profile .ib-crumb a {
	color: var(--muted);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.ib-profile .ib-crumb a:hover {
	color: var(--ink);
}

.ib-profile .ib-crumb__sep {
	color: var(--faint);
}

/* The chevron points the way the language reads. */
.ib-profile[dir='ltr'] .ib-crumb__sep {
	transform: scaleX(-1);
	display: inline-block;
}