/* Specialties — photo cards */
.tbw-specs__grid { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
.tbw-specs__grid--bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tbw-specs__grid--bento > .tbw-sc { grid-column: span 3; min-height: 380px; }
.tbw-specs__grid--bento > .tbw-sc:nth-child(-n+3) { grid-column: span 4; min-height: 440px; }
.tbw-specs__grid--grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tbw-specs__grid--grid > .tbw-sc { min-height: 380px; }

.tbw-sc {
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
	border-radius: var(--tb-radius-lg); background: linear-gradient(160deg, #0f6164, #0b3a40); color: #fff; box-shadow: var(--tb-shadow);
	transition: transform .6s var(--tb-ease-out), box-shadow .6s;
}
.tbw-sc:hover { transform: translateY(-6px); box-shadow: var(--tb-shadow-lg); }
.tbw-sc__media { position: absolute; inset: 0; z-index: -2; }
.tbw-sc__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--tb-ease-out); }
.tbw-sc:hover .tbw-sc__img { transform: scale(1.1); }
.tbw-sc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 42, 48, .05) 25%, rgba(6, 42, 48, .55) 55%, rgba(6, 42, 48, .92) 100%); transition: opacity .5s; }

.tbw-sc__icon {
	position: absolute; inset-inline-start: 1.1rem; top: 1.1rem; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px;
	background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
	transition: background-color .4s, color .4s;
}
.tbw-sc__icon .tbw-icon { width: 28px; height: 28px; }
.tbw-sc:hover .tbw-sc__icon { background: var(--tb-gold); color: #10282b; border-color: transparent; }
.tbw-sc__tag { position: absolute; inset-inline-end: 1.1rem; top: 1.1rem; padding: .4rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .9); color: #0b3a40; }
[dir="rtl"] .tbw-sc__tag { letter-spacing: 0; font-size: .8rem; }

.tbw-sc__body { padding: 1.5rem; padding-inline-end: 4.5rem; }
.tbw-sc__name { margin: 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.tbw-sc__name a { color: #fff; text-decoration: none; }
.tbw-sc__name a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.tbw-sc__alt { margin: .3rem 0 0; font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: .92rem; color: #e8d3a6; }
.tbw-sc__alt[lang="en"] { font-family: var(--tb-font-sans); font-weight: 600; font-size: .82rem; }
.tbw-sc__intro { margin: .7rem 0 0; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .78); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--tb-ease-out), opacity .5s; }
.tbw-sc:hover .tbw-sc__intro, .tbw-sc:focus-within .tbw-sc__intro { max-height: 6em; opacity: 1; }
.tbw-sc__go { position: absolute; inset-inline-end: 1.1rem; bottom: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: #fff var(--tb-arrow) center / 18px no-repeat; transform: rotate(-45deg); transition: transform .5s var(--tb-ease-out), background-color .3s; }
.tbw-sc:hover .tbw-sc__go { transform: none; background-color: var(--tb-gold); }
[dir="rtl"] .tbw-sc__go { transform: scaleX(-1) rotate(-45deg); }
[dir="rtl"] .tbw-sc:hover .tbw-sc__go { transform: scaleX(-1); }

@media (hover: none) { .tbw-sc__intro { max-height: 6em; opacity: 1; } }
@media (max-width: 1023.98px) {
	.tbw-specs__grid--bento > .tbw-sc, .tbw-specs__grid--bento > .tbw-sc:nth-child(-n+3) { grid-column: span 6; min-height: 360px; }
	.tbw-specs__grid--bento > .tbw-sc:last-child:nth-child(odd) { grid-column: span 12; }
}
/* Phones: horizontal snap rail */
@media (max-width: 639.98px) {
	.tbw-specs__grid--bento, .tbw-specs__grid--grid {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
		overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--tb-gutter)); padding: .5rem var(--tb-gutter) 1.5rem; scrollbar-width: none;
	}
	.tbw-specs__grid--bento > .tbw-sc, .tbw-specs__grid--bento > .tbw-sc:nth-child(-n+3), .tbw-specs__grid--bento > .tbw-sc:last-child:nth-child(odd) { grid-column: auto; min-height: 400px; scroll-snap-align: start; }
	.tbw-specs__grid--bento::-webkit-scrollbar { display: none; }
}