/* Colours resolve against Impreza's palette first and fall back to literals,
   so the card inherits the theme instead of hard-coding brand values. */
.tsf-branches {
	--tsf-accent: var(--color-content-primary, #c8931f);
	--tsf-text: var(--color-content-text, #2c2c2c);
	--tsf-surface: var(--color-content-bg-alt, #fdf7ec);
	--tsf-radius: 14px;
	--tsf-gap: 1.25rem;

	display: grid;
	grid-template-columns: repeat(var(--tsf-cols, 1), minmax(0, 1fr));
	gap: var(--tsf-gap);
}

.tsf-branch-card {
	background: var(--tsf-surface);
	border-radius: var(--tsf-radius);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	color: var(--tsf-text);
}

.tsf-branch-card__main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.tsf-branch-card__body {
	flex: 1 1 min(100%, 22rem);
	min-width: 0;
}

.tsf-branch-card__title {
	margin: 0 0 0.6em;
	line-height: 1.2;
}

.tsf-branch-card__title a {
	color: inherit;
	text-decoration: none;
}

.tsf-branch-card__title a:hover {
	color: var(--tsf-accent);
}

.tsf-branch-card__meta {
	margin: 0 0 0.35em;
	line-height: 1.55;
	/* Long Turkish street names must not force a horizontal scrollbar. */
	overflow-wrap: anywhere;
}

.tsf-branch-card__label {
	font-weight: 600;
}

.tsf-branch-card__meta a {
	color: var(--tsf-accent);
	text-decoration: none;
}

.tsf-branch-card__meta a:hover {
	text-decoration: underline;
}

.tsf-branch-card__actions {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
}

.tsf-branch-card__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* the minimum comfortable tap target */
	height: 44px;
	border-radius: 50%;
	background: var(--tsf-accent);
	color: #fff;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.tsf-branch-card__action:hover,
.tsf-branch-card__action:focus {
	color: #fff;
	opacity: 0.85;
}

.tsf-branch-card__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.tsf-branch-card__thumb {
	display: block;
	width: clamp(84px, 22vw, 128px);
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.tsf-branch-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsf-branch-card__hours {
	margin-top: 1.25rem;
	border-collapse: collapse;
	width: auto;
	max-width: 22rem;
}

.tsf-branch-card__hours th,
.tsf-branch-card__hours td {
	padding: 0.3rem 1.25rem 0.3rem 0;
	text-align: left;
	border: 0;
	font-weight: 400;
}

.tsf-branch-card__hours th {
	font-weight: 600;
}

@media (max-width: 767px) {
	.tsf-branches {
		grid-template-columns: 1fr;
	}

	.tsf-branch-card__main {
		flex-direction: column;
	}

	/* Circles, not full-width bars: an icon-only button stretched across the
	   card reads as a heavy block with no content. 48px stays a comfortable
	   tap target while keeping the visual weight proportionate. */
	.tsf-branch-card__actions {
		gap: 0.6rem;
	}

	.tsf-branch-card__action {
		width: 48px;
		height: 48px;
	}
}

.tsf-branch-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsf-branch-list li {
	margin: 0 0 0.4em;
}

.tsf-branch-list a {
	color: var(--color-content-link, #c8931f);
	text-decoration: none;
}

.tsf-branch-list a:hover {
	text-decoration: underline;
}

.tsf-branch-list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.25em;
}

.tsf-branch-list--inline li {
	margin: 0;
}

.tsf-branch-contact {
	margin: 0 0 1em;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.tsf-branch-contact a {
	color: var(--color-content-link, #c8931f);
	text-decoration: none;
}

.tsf-branch-contact a:hover {
	text-decoration: underline;
}

/* ---------- Gallery grid ---------- */
.tsf-gallery {
	display: grid;
	grid-template-columns: repeat(var(--tsf-gallery-cols, 3), minmax(0, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.tsf-gallery__item {
	display: block;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
}

.tsf-gallery__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.tsf-gallery__item:hover img {
	transform: scale(1.03);
}

@media (max-width: 900px) {
	.tsf-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

/* ---------- Standalone action buttons ---------- */
.tsf-branch-actions {
	display: flex;
	gap: 0.75rem;
}

.tsf-branch-actions .tsf-branch-card__action {
	background: var(--color-content-primary, #c8931f);
}

/* ---------- Lightbox ---------- */
body.tsf-lb-open {
	overflow: hidden;
}

.tsf-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 11, 11, 0.92);
	padding: clamp(1rem, 4vw, 3rem);
}

.tsf-lb[hidden] {
	display: none;
}

.tsf-lb__figure {
	margin: 0;
	max-width: min(100%, 1100px);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.tsf-lb__img {
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 6px;
}

.tsf-lb__caption,
.tsf-lb__count {
	color: #fff;
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.85;
	text-align: center;
}

.tsf-lb__count {
	position: absolute;
	bottom: clamp(0.75rem, 3vw, 1.5rem);
	left: 0;
	right: 0;
}

.tsf-lb__close,
.tsf-lb__nav {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 0.5rem;
	opacity: 0.8;
	transition: opacity 0.15s ease;
}

.tsf-lb__close:hover,
.tsf-lb__nav:hover {
	opacity: 1;
}

.tsf-lb__close {
	top: clamp(0.5rem, 2vw, 1.5rem);
	right: clamp(0.5rem, 2vw, 1.5rem);
	font-size: 2.5rem;
}

.tsf-lb__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 3.5rem;
	/* Comfortable tap target without a visible box. */
	min-width: 56px;
	min-height: 56px;
}

.tsf-lb__nav--prev { left: clamp(0.25rem, 2vw, 1.5rem); }
.tsf-lb__nav--next { right: clamp(0.25rem, 2vw, 1.5rem); }

@media (max-width: 600px) {
	.tsf-lb__nav {
		font-size: 2.5rem;
		top: auto;
		bottom: 3.5rem;
		transform: none;
	}
}