/* Get in Touch (contact-option) — SRS UMobile_SRS_Widgets_Part3_v0.2.md §3.1.5, PBI 97364.
   New UI, no navy banner or photo (user decision 01/10). Figma: desktop 3736-75341 (section) +
   3736-74698 (cards), mobile 3736-79588 (page) + 3736-82098 (cards). */

/* Figma 3736-75341: the widget frame is transparent (page grey shows through), 1248 of content at 1440
   (96 + 1248 + 96), flex column with 24 from the section title to the cards.
   Side gutter — Figma 3736-79588: 20px each side on mobile. Nothing around the widget supplies one (it
   renders straight into .page-content--widgets, or into body on AEM pages), so the widget carries it:
   1248 + 2 × 20 = 1288, which puts the content at x=96 at 1440.
   Vertical — the site's 40px page rhythm (layout-shell.css, same `margin: 40px` mechanism as rule
   (2b), page edge = 40 per user 25/08): the gap to a neighbouring widget is set there (rules (1) and
   (2) win over these margins), and at the page edge (the widget is the last block before the footer
   on every SIT page) this margin is the 40. The page supplies nothing itself — measured without it:
   0 above and 0 to the footer on add-ons. Figma draws 64 between sections; that is a page-layout
   decision still open, not a widget one. No title margin, no spacer element. */
.git-widget {
	box-sizing: border-box;
	width: 100%;
	max-width: 1288px;
	margin: 40px auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Pure-ABP shell (_Layout.cshtml `.layout-content.container`): Bootstrap's container already gives the
   gutter, so the widget's own 20px would double it. contact-option is RequiresAbpCss=false, which makes
   PageRenderer set HasAemWidgets and skip that container today; this keeps the gutter single if it
   ever renders inside one. */
.layout-content.container .git-widget {
	max-width: 1248px;
	padding-left: 0;
	padding-right: 0;
}

/* Section Title "Desktop" (Figma 3736-75341): 800 wide, centred, UMobile Display 600 28/36, #000,
   no letter-spacing. Title and description are two lines (Figma), on every breakpoint. */
.git-widget__title {
	text-align: center;
}

.git-widget__title h2 {
	max-width: 800px;
	margin: 0 auto;
	font-family: 'UMobile Display', 'Unbeatable', sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: 0;
	color: #000;
}

/* The view puts a <br /> between title and description, but WidgetTitleHtml already emits each as
   <span style="display:block…"> (plain text and rewritten <p>/<div> alike), so that <br> became an
   empty third line (28px mobile, 36px desktop). Hide it only after a block span: a title that is
   inline-only markup (<b>…</b>, never wrapped) still needs it, and a <br> inside the author's own
   text is not a child of the h2, so it is untouched. */
.git-widget__title h2 > span[style*="display:block"] + br {
	display: none;
}

/* Holds the category tabs and panels; align-items (desktop flex-start, mobile center) only places the
   tab row, which is unchanged — the card list is width 100%. */
.git-widget__cards {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Category tabs (widget config — not in card SRS) */
.git-tabs {
	margin-bottom: 20px;
	text-align: center;
}

.git-tabs button {
	border: none;
	background: #eee;
	padding: 10px 20px;
	border-radius: 20px;
	margin: 0 6px;
	cursor: pointer;
	font-weight: 600;
}

.git-tabs button.active {
	background: #ff6a00;
	color: #fff;
}

.git-tabs--underline {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-bottom: 20px;
}

.git-tabs--underline button {
	padding-bottom: 10px;
	border: none;
	background: transparent;
	border-radius: 0;
	margin: 0;
	font-weight: 600;
	color: #666;
}

.git-tabs--underline button.active {
	color: #ff6a00;
	border-bottom: 2px solid #ff7300;
}

.git-tab-panel {
	display: none;
	width: 100%;
}

.git-tab-panel.active {
	display: block;
}

.git-sub-panel {
	display: none;
}

.git-sub-panel.active {
	display: block;
}

/* Card list — Figma 3736-74698: 2 columns of (1248 − 24) / 2 = 612, 24 apart, left-aligned. One grid
   (not rows of two) so a 3rd card lands in column 1 at full column width (AC GIT-02: 2 + 1, F-008) and
   4 cards make an even 2 × 2 (F-009). Cards in a row stretch to the same height. */
.git-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

/* Exactly one card in the list — centred (AC GIT-02, F-006), 310 wide (Figma 2631-51807, F-019). */
.git-cards[data-git-card-count="1"] {
	grid-template-columns: minmax(0, 310px);
	justify-content: center;
}

/* Card — Figma 3736-74698: #fff, radius 8, shadow 0 0 12px rgba(0,0,0,.04), no border, padding 10 × 20,
   row, centred, 24 from icon to text. 100 tall: in Figma the WhatsApp icon's 80 frame sets the row
   height and card 1 stretches to it (test 110246 CARD_LAYOUT 612 × 100). */
.git-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	min-width: 0;
	min-height: 100px;
	padding: 10px 20px;
	background: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}

/* Icon — Figma 3736-74698 / 3736-82098: 48 × 48 frame (the phone glyph is 36 inside it). */
.git-card__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	line-height: 0;
}

.git-card__icon img {
	display: block;
	width: 48px !important;
	height: 48px !important;
	max-width: 48px;
	max-height: 48px;
	object-fit: contain;
}

/* Text block — Figma: flex 1, column, 8 from the method name to the numbers. */
.git-card__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Method name — Figma 700 20/26, #000, left. Long names wrap inside the card (F-019). */
.git-card__title {
	margin: 0;
	font-family: 'UMobile Display', 'Unbeatable', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0;
	color: #000;
	text-align: left;
	overflow-wrap: break-word;
}

/* Numbers — Figma 3736-74698: one row, 48 apart (8 between lines if a narrow card wraps them).
   Holds description lines and CTAs together so both sources line up the same way. */
.git-card__phones {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 48px;
}

/* Each number — Figma 700 18/24, Hyper Orange 500 #FF7300 (F-015). No underline, no chevron and no
   hover change (F-016, AC GIT-05). A value without a link renders as plain text in the same type. */
.git-card__text,
.git-card__cta-link,
.git-card__cta-link:hover,
.git-card__cta-link:focus {
	margin: 0;
	font-family: 'UMobile Display', 'Unbeatable', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: #ff7300;
	text-decoration: none;
}

.git-card__text p {
	margin: 0;
	font: inherit;
	color: inherit;
}

.git-card__text a {
	color: inherit;
	text-decoration: none;
}

/* ── Mobile (Figma 393: 3736-79588 / 3736-82098) ── */
@media (max-width: 767px) {
	/* Section Title "Mobile": 600 24/28, full width; title and description stay two blocks */
	.git-widget__title h2 {
		max-width: none;
		font-size: 24px;
		line-height: 28px;
	}

	.git-widget__cards {
		align-items: center;
	}

	/* One card per row, full width, 24 apart (F-010, F-011) */
	.git-cards,
	.git-cards[data-git-card-count="1"] {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Padding 20 all round; height from the content: 156 with two numbers, 124 with one */
	.git-card {
		min-height: 0;
		padding: 20px;
	}

	/* Numbers stack, 8 apart */
	.git-card__phones {
		flex-direction: column;
		gap: 8px;
	}
}