/* ============================================================================
   Strawberry for Beauty — contact page.

   Every selector sits under `.sfb-contact`, so this file cannot reach the home
   page, the shop or the 3D templates. The palette, the three fonts, .sfb-sec,
   .sfb-head, .sfb-hair, .btn and the .rv reveal all arrive from
   hall/hall-home.css through the shared `.sfb-page` wrapper — nothing is
   redeclared here, so restyling the hall restyles this page with it.

   #DE2227 (--red) is the only accent. Transform and opacity are the only
   animated properties.
   ========================================================================== */

/* the intro carries the h1, so it gets the hall's headline scale */
.sfb-contact .contact-intro { padding-block-end: clamp(30px, 4vw, 48px); }

.sfb-contact .contact-intro h1 {
	margin: 0;
	font-family: var(--sfb-cairo);
	font-weight: 600;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.32;
	color: #fff;
}

/* ------------------------------------------------------------- the channels -- */

/* three, on a 3-col → 1-col grid; the 1px gap over --line draws the hairlines */
.sfb-contact .ways-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	margin-top: clamp(34px, 4vw, 52px);
	border-block: 1px solid var(--line);
}

.sfb-contact .way {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: clamp(30px, 3.4vw, 44px) clamp(22px, 2.4vw, 32px) clamp(34px, 3.8vw, 46px);
	background: var(--void);
	text-decoration: none;
	color: inherit;
	transition: background .34s cubic-bezier(.16, 1, .3, 1);
}

/* drawn from the right, because the reading order is RTL */
.sfb-contact .way::before {
	content: "";
	position: absolute; inset-block-start: 0; inset-inline: 0;
	block-size: 2px; background: var(--red);
	transform: scaleX(0); transform-origin: 100% 50%;
	transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
.sfb-contact .way:hover,
.sfb-contact .way:focus-visible { background: #0C0B10; }
.sfb-contact .way:hover::before,
.sfb-contact .way:focus-visible::before { transform: scaleX(1); }

.sfb-contact .way-n {
	position: absolute;
	inset-block-start: 14px; inset-inline-start: 16px;
	font-family: var(--sfb-cairo); font-size: 11px; font-weight: 500;
	letter-spacing: .16em; color: var(--dim);
	font-variant-numeric: tabular-nums;
	transition: color .3s ease;
}
.sfb-contact .way:hover .way-n { color: var(--red); }

.sfb-contact .way-ic {
	display: grid; place-items: center;
	inline-size: 46px; block-size: 46px;
	margin-bottom: 8px;
	border: 1px solid var(--line);
	border-radius: 2px;
	color: var(--cream);
	transition: color .3s ease, border-color .3s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
}
/* sfb_icon_svg() ships no width/height — only .sfb-social sizes it, and that
   rule does not reach here, so an unsized <svg> would lay out at 300×150. */
.sfb-contact .way-ic svg { inline-size: 21px; block-size: 21px; }
.sfb-contact .btn .sfb-i { inline-size: 17px; block-size: 17px; flex: 0 0 auto; }
.sfb-contact .way:hover .way-ic {
	color: var(--red);
	border-color: var(--red);
	transform: translateY(-3px);
}

.sfb-contact .way-k {
	font-family: var(--sfb-cairo); font-weight: 600;
	font-size: 18px; line-height: 1.5; color: #fff;
}

/* the number itself always reads left-to-right, inside an RTL page */
.sfb-contact .way-v {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--sfb-cairo);
	font-size: 15px; letter-spacing: .04em; color: var(--cream);
	transition: color .3s ease;
}
.sfb-contact .way:hover .way-v { color: var(--red); }

/* the address is the long one — let it shrink rather than overflow the card */
.sfb-contact .way-mail { font-size: 13.5px; letter-spacing: .01em; word-break: break-all; }

.sfb-contact .way-note {
	font-size: 12.5px; line-height: 1.9; font-weight: 300; color: #A29BA3;
}

/* the WhatsApp card is the one we want pressed, so it starts lit */
.sfb-contact .way-hot { background: #0A0910; }
.sfb-contact .way-hot::before { transform: scaleX(1); opacity: .45; }
.sfb-contact .way-hot:hover::before { opacity: 1; }
.sfb-contact .way-hot .way-ic { color: var(--red); border-color: rgba(222, 34, 39, .45); }

/* ------------------------------------------------------------ address block -- */

.sfb-contact .where-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(30px, 5vw, 76px);
	align-items: start;
}

.sfb-contact .where-copy .tick,
.sfb-contact .where-social .tick {
	display: block; font-family: var(--sfb-cairo); font-size: 10px; font-weight: 500;
	letter-spacing: .42em; color: var(--red); margin-bottom: 15px;
}
.sfb-contact .where-copy h2,
.sfb-contact .where-social h2 {
	margin: 0; font-family: var(--sfb-cairo); font-weight: 600;
	font-size: clamp(24px, 3vw, 36px); line-height: 1.4; color: #fff;
}
.sfb-contact .where-social p {
	margin: 18px 0 0; font-size: 14px; line-height: 2; color: #A29BA3;
	font-weight: 300; max-width: 44ch;
}

.sfb-contact .where-addr {
	margin: 20px 0 26px;
	font-style: normal;
	font-size: 15px; line-height: 2.05; color: var(--cream); font-weight: 300;
	max-width: 34ch;
}

/* the shared social row is built for the footer's dark strip; on a full-width
   section it needs to sit left and breathe */
.sfb-contact .where-social .sfb-social {
	justify-content: flex-start;
	margin-top: 24px;
}

/* ------------------------------------------------------------------ mobile -- */

@media (max-width: 900px) {
	.sfb-contact .ways-grid { grid-template-columns: 1fr; }
	.sfb-contact .where-grid { grid-template-columns: 1fr; }
	.sfb-contact .contact-intro h1 { font-size: 27px; line-height: 1.45; }
	.sfb-contact .where-copy h2,
	.sfb-contact .where-social h2 { font-size: 21px; line-height: 1.5; }
	.sfb-contact .way { padding: 30px 22px 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.sfb-contact .way,
	.sfb-contact .way::before,
	.sfb-contact .way-ic { transition: none; }
}