/*
Theme Name: TK Classics
Theme URI: https://www.tkclassics.rs
Author: TK Classics
Description: Block theme za sajt Teniski kluba Classics — glina paleta, sistemski fontovi, bez zavisnosti. Naslednik starog Vue sajta.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tkclassics
Tags: block-patterns, full-site-editing, custom-colors
*/

/* ---------------------------------------------------------------------------
 * Content width — Bulma-style stepped container (as on the old site):
 * fluid on mobile, 960px @desktop, 1152px @widescreen, 1344px @fullhd.
 * WP constrained layout consumes the var; html body beats global-styles body.
 * ------------------------------------------------------------------------- */

html body {
	--wp--style--global--content-size: 960px;
}

@media screen and (min-width: 1216px) {
	html body {
		--wp--style--global--content-size: 1152px;
	}
}

@media screen and (min-width: 1408px) {
	html body {
		--wp--style--global--content-size: 1344px;
	}
}

/* ---------------------------------------------------------------------------
 * Full-bleed content: post-content wrapper must not inherit the container cap,
 * alignfull blocks (hero) need viewport width. Inner blocks stay constrained
 * via post-content's own layout.
 * ------------------------------------------------------------------------- */

.wp-block-post-content {
	max-width: none !important;
}

/* ---------------------------------------------------------------------------
 * Gallery thumbnails — uniform 3:2 crop in fixed columns (old: is-3by2,
 * is-4-desktop / is-6-tablet / is-12-mobile), overrides core "justified" flex.
 * ------------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: 100% !important;
}

@media (min-width: 769px) {
	.wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: calc(50% - 0.5 * var(--wp--style--block-gap, 0.5em)) !important;
	}
}

@media (min-width: 1024px) {
	.wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: calc(33.3333% - 0.6667 * var(--wp--style--block-gap, 0.5em)) !important;
	}
}

.wp-block-gallery.has-nested-images .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-gallery.has-nested-images .wp-block-image:hover img {
	transform: scale(1.03);
	box-shadow: 0 4px 16px rgba(203, 104, 67, 0.25);
}

/* ---------------------------------------------------------------------------
 * Header / footer chrome
 * ------------------------------------------------------------------------- */

.site-header {
	background: #fff;
	border-bottom: 2px solid #f5e6d3;
	box-shadow: 0 2px 8px rgba(203, 104, 67, 0.08);
}

.site-header .wp-block-site-title a {
	color: #a0563b;
	text-decoration: none;
	font-weight: 700;
}

.site-footer {
	background: linear-gradient(180deg, #f5e6d3 0%, #e69679 100%);
	color: #5a4a3a;
	margin-top: 4rem;
}

.site-footer a,
.site-footer strong {
	color: #a0563b;
}

/* ---------------------------------------------------------------------------
 * Navigation hover (base colors come from theme.json)
 * ------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--clay-primary);
}

/* ---------------------------------------------------------------------------
 * Hero — clay gradient + court line overlay (as on the old site)
 * ------------------------------------------------------------------------- */

.clay-hero {
	position: relative;
	overflow: hidden;
}

.clay-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, transparent, transparent 48%, rgba(255, 255, 255, 0.03) 49%, rgba(255, 255, 255, 0.03) 51%, transparent 52%),
		repeating-linear-gradient(0deg, transparent, transparent 48%, rgba(255, 255, 255, 0.03) 49%, rgba(255, 255, 255, 0.03) 51%, transparent 52%);
	opacity: 0.5;
	pointer-events: none;
	z-index: 1;
}

.clay-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.clay-hero .clay-hero-logo {
	height: 0.9em;
	vertical-align: -0.08em;
}

.clay-hero .wp-block-heading,
.clay-hero p {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------------------
 * Cards / media
 * ------------------------------------------------------------------------- */

.tkcs-card-shadow {
	box-shadow: 0 4px 14px rgba(203, 104, 67, 0.15);
}

.tkcs-promo img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

.tkcs-map iframe {
	max-width: 100%;
}

/* Responsive reservation iframe */
.tkcs-iframe iframe {
	display: block;
	width: 100%;
}

@media (max-width: 782px) {
	.tkcs-iframe iframe {
		height: 600px;
	}
}