/**
 * درباره ما و تماس با ما.
 *
 * One sheet for both: they share a measure, a heading scale and a card, and
 * splitting them would mean keeping two copies of the same three rules in
 * sync. Minimal and quiet by design — the roastery's own material is the
 * interesting part of the page, not the frame around it.
 */

.mim-about,
.mim-contact {
	--mim-about-ink: #25334E;
	--mim-about-accent: #BAAF91;
	--mim-about-muted: rgba(37, 51, 78, 0.62);
	--mim-about-line: #E7E1D6;

	padding: clamp(40px, 8vw, 96px) var(--mim-gutter, 20px);
	background-color: #F3EFE7;
	color: var(--mim-about-ink);
	font-family: var(--mim-font, inherit);
}

.mim-about *,
.mim-contact *,
.mim-about *::before,
.mim-contact *::before {
	box-sizing: border-box;
}

.mim-about__inner {
	max-width: 1120px;
	margin-inline: auto;
}

/* ── Head ─────────────────────────────────────────────────── */

.mim-about__head {
	max-width: 640px;
	margin: 0 auto clamp(30px, 5vw, 56px);
	text-align: center;
}

.mim-about__eyebrow {
	margin: 0 0 12px;
	font-family: var(--mim-font-latin, inherit);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mim-about-muted);
}

.mim-about__heading {
	margin: 0;
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.35;
}

.mim-about__sub {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--mim-about-muted);
}

/* ── Highlight cards ──────────────────────────────────────── */

.mim-about__highlights {
	--mim-about-cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--mim-about-cols), minmax(0, 1fr));
	gap: clamp(14px, 2.4vw, 24px);
	margin-bottom: clamp(48px, 8vw, 96px);
}

.mim-about__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 26px;
	overflow: hidden;
	background: #FFF;
	border: 1px solid var(--mim-about-line);
	border-radius: 22px;

	/* A staggered arrival, once, on the way in. Nothing loops — a page about a
	   quiet brand should not fidget. */
	animation: mim-about-rise 0.6s cubic-bezier(0.22, 1, 0.3, 1) both;
	animation-delay: var(--mim-about-delay, 0ms);
}

/* The hairline of accent along the top edge is the only ornament on the card;
   it is what makes three plain boxes read as a set. */
.mim-about__card::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--mim-about-accent);
}

@keyframes mim-about-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mim-about__card {
		animation: none;
	}
}

.mim-about__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	background: #F3EFE7;
	border-radius: 14px;
	color: var(--mim-about-ink);
}

.mim-about__glyph {
	width: 22px;
	height: 22px;
}

.mim-about__figure {
	margin: 0 0 6px;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--mim-about-ink);
}

.mim-about__card-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.mim-about__card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--mim-about-muted);
}

/* ── Story ────────────────────────────────────────────────── */

.mim-about__story-wrap {
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	gap: clamp(24px, 5vw, 56px);
	align-items: start;
}

.mim-about__story-wrap.is-textonly {
	grid-template-columns: 1fr;
	max-width: 760px;
	margin-inline: auto;
}

.mim-about__story-wrap--start .mim-about__figure-image {
	order: -1;
}

.mim-about__heading--story {
	margin-bottom: 18px;
	font-size: clamp(22px, 3.4vw, 30px);
	text-align: start;
}

.mim-about__story {
	color: rgba(37, 51, 78, 0.82);
}

.mim-about__story p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 2;
}

.mim-about__story p:last-child {
	margin-bottom: 0;
}

.mim-about__figure-image {
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	/* Sticks alongside a long story on a tall screen, and is simply ignored on
	   a short one — no media query needed. */
	position: sticky;
	top: 100px;
}

.mim-about__figure-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Signature ────────────────────────────────────────────── */

.mim-about__signature {
	margin-top: clamp(48px, 8vw, 96px);
	padding-top: clamp(32px, 5vw, 56px);
	border-top: 1px solid var(--mim-about-line);
	text-align: center;
}

.mim-about__mark {
	margin: 0;
	font-family: var(--mim-font-latin, inherit);
	font-size: clamp(30px, 6vw, 54px);
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.1;
}

.mim-about__slogan {
	margin: 10px 0 0;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--mim-about-muted);
}

.mim-about__slogan--latin {
	font-family: var(--mim-font-latin, inherit);
	font-size: 13px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.mim-about__cta,
.mim-about .mim-about__cta,
.mim-contact .mim-about__cta {
	display: inline-block;
	margin-top: 26px;
	padding: 13px 30px;
	background: var(--mim-about-ink);
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	color: #FFFFFF;
	text-decoration: none;
	transition: transform 0.16s ease;
}

/* Every state named explicitly. A theme that colours :visited links would
   otherwise paint the label the same as the button and leave it blank. */
.mim-about .mim-about__cta:hover,
.mim-about .mim-about__cta:focus,
.mim-about .mim-about__cta:active,
.mim-about .mim-about__cta:visited,
.mim-contact .mim-about__cta:hover,
.mim-contact .mim-about__cta:focus,
.mim-contact .mim-about__cta:active,
.mim-contact .mim-about__cta:visited {
	color: #FFFFFF;
}

.mim-about .mim-about__cta:hover,
.mim-contact .mim-about__cta:hover {
	transform: translateY(-2px);
}

/* ── Contact ──────────────────────────────────────────────── */

.mim-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 4vw, 44px);
	align-items: start;
}

.mim-contact__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mim-contact__card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 22px;
	background: #FFF;
	border: 1px solid var(--mim-about-line);
	border-radius: 22px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, border-color 0.18s ease;
}

a.mim-contact__card:hover {
	transform: translateY(-2px);
	border-color: var(--mim-about-accent);
	color: inherit;
}

.mim-contact__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: #F3EFE7;
	border-radius: 13px;
}

.mim-contact__glyph {
	width: 20px;
	height: 20px;
}

.mim-contact__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mim-contact__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mim-about-muted);
}

.mim-contact__value {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.mim-contact__value--ltr {
	direction: ltr;
	text-align: start;
	font-family: var(--mim-font-latin, inherit);
	letter-spacing: 0.03em;
}

.mim-contact__panel {
	padding: 22px;
	background: #FFF;
	border: 1px solid var(--mim-about-line);
	border-radius: 22px;
}

.mim-contact__panel-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
}

.mim-contact__hours {
	margin: 0;
}

.mim-contact__hours-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--mim-about-line);
	font-size: 14px;
}

.mim-contact__hours-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mim-contact__hours dt {
	color: var(--mim-about-muted);
}

.mim-contact__hours dd {
	margin: 0;
	font-weight: 700;
}

.mim-contact__map {
	position: relative;
	height: 380px;
	overflow: hidden;
	background: #E7E1D6;
	border-radius: 22px;
}

.mim-contact__map iframe,
.mim-contact__map img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.mim-contact__cta {
	align-self: stretch;
	margin-top: 14px;
	text-align: center;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
	.mim-about__highlights {
		--mim-about-cols: 1;
	}

	.mim-about__story-wrap,
	.mim-contact__grid {
		grid-template-columns: 1fr;
	}

	/* On one column the image belongs after the text it illustrates, whichever
	   side it was assigned on a wide screen. */
	.mim-about__story-wrap--start .mim-about__figure-image {
		order: 0;
	}

	.mim-about__figure-image {
		position: static;
	}

	.mim-contact__map {
		height: 240px;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.mim-about__highlights {
		--mim-about-cols: 2;
	}
}

/* ═══════════════════════════════════════════════════════════
   Contact — two postures

   The page version is a masthead with room to breathe. The compact one is a
   block that has to fit in a footer column, so it drops the vertical padding
   entirely and lets the container decide its height.
   ═══════════════════════════════════════════════════════════ */

.mim-contact--compact {
	padding: 0;
	background: none;
}

.mim-contact--compact .mim-about__inner {
	max-width: none;
}

.mim-contact--compact .mim-about__head {
	max-width: none;
	margin: 0 0 14px;
	text-align: start;
}

.mim-contact--compact .mim-contact__heading {
	font-size: 17px;
}

.mim-contact--compact .mim-contact__grid {
	grid-template-columns: 1fr;
	gap: 12px;
}

.mim-contact--compact .mim-contact__card {
	padding: 12px 14px;
	gap: 10px;
	border-radius: 14px;
}

.mim-contact--compact .mim-contact__icon {
	width: 34px;
	height: 34px;
	border-radius: 11px;
}

.mim-contact--compact .mim-contact__value {
	font-size: 13.5px;
	line-height: 1.7;
}

.mim-contact--compact .mim-contact__panel {
	padding: 14px 16px;
	border-radius: 14px;
}

.mim-contact--compact .mim-contact__map {
	height: 160px;
	border-radius: 14px;
}

/* ── Map ──

   `cover` is the default now: an embedded map that letterboxes inside its
   frame looks like a mistake, and a photograph fallback should fill the strip
   the same way the iframe does. */
.mim-contact__map iframe,
.mim-contact__map img {
	object-fit: cover;
	object-position: center;
}

.mim-contact__map--contain iframe,
.mim-contact__map--contain img {
	object-fit: contain;
	background: #E7E1D6;
}

/* An iframe cannot be object-fitted — it has no intrinsic size to fit. Scaling
   it larger than its frame and clipping is the equivalent, and it is what
   makes an embedded map fill the corners instead of showing its own margins. */
.mim-contact__map--cover {
	position: relative;
	overflow: hidden;
}

.mim-contact__map--cover iframe {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	width: 130%;
	height: 130%;
	transform: translate(50%, -50%);
	border: 0;
}

[dir="ltr"] .mim-contact__map--cover iframe {
	transform: translate(-50%, -50%);
}

/* The whole map frame clips, whatever is inside it. */
.mim-contact__map {
	position: relative;
	overflow: hidden;
}

.mim-contact__map--cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}