/*
Theme Name: Fotoholic Studio (Classic)
Theme URI: https://example.com/fotoholic-studio
Author: 22Fotoholic Studio
Author URI: https://example.com
Description: An editorial, minimalist photography-studio theme — the classic (PHP template) edition of Fotoholic Studio. Same design, palette and nine bundled font families as the block theme, rebuilt with traditional templates (header.php / footer.php / page templates) for sites that prefer the Classic Editor and the Customizer over Full Site Editing.
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fotoholic-studio-classic
Tags: photography, portfolio, blog, one-column, custom-colors, custom-logo, editor-style, featured-images, custom-menu, threaded-comments, translation-ready
*/

/* The full design lives in assets/css/theme.css (enqueued via functions.php).
   This stylesheet carries the required theme header plus the small overrides below. */

/* Real images dropped into the grey placeholders (.ph) via ACF image fields.
   The <img> fills and is clipped by the existing position:relative/overflow:hidden
   .ph box; the placeholder labels are hidden once an image is present. The image
   inherits any zoom transform applied to its parent .ph. */
.ph-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ph.has-img > .ph-label,
.ph.has-img > .ph-center,
.ph.has-img > .ph-num {
	display: none;
}

/* Mobile: three section grids set their column count via inline styles in the
   templates (so theme.css's responsive rules can't reach them) and stayed fixed
   on phones — causing horizontal overflow. Override the inline columns here so
   they collapse. !important is required only because the values are inline.
     - .pv-pkg-grid : Featured “two options” (was 2-col → caused 80px overflow)
     - .st-values   : About core values   (was 4-col → caused 20px overflow)
     - .ct-studios  : Contact “find us”    (2-col → cramped on phones) */
@media (max-width: 900px) {
	.st-values { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
	.pv-pkg-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
	.st-values,
	.ct-studios { grid-template-columns: 1fr !important; }
}

/* Gallery collection cards are links to their collection page. */
a.spread-sub { text-decoration: none; color: inherit; }

/* Album lightbox (collection pages). Built in assets/js/site.js. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 10, 0.94);
}
.lightbox.on { display: flex; }
.lightbox .lb-img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox .lb-close {
	position: absolute;
	top: 16px;
	right: 22px;
	background: none;
	border: none;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}
.lightbox .lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}
.lightbox .lb-prev { left: 18px; }
.lightbox .lb-next { right: 18px; }
.lightbox .lb-nav:hover,
.lightbox .lb-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.lightbox .lb-count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: 0.2em;
}
@media (max-width: 560px) {
	.lightbox .lb-nav { width: 40px; height: 40px; }
}

/* WP 7.0 View Transitions */
main {
	view-transition-name: page;
}
html, body {
	/* Ensure body never forms a containing block that breaks fixed positioning */
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	view-transition-name: none !important;
	/* Horizontal-overflow backstop. Use `clip`, NOT `hidden`: `hidden` would
	   create a scroll container and break the sticky .nav-wrapper above; `clip`
	   contains stray overflow without forming a scroll container. */
	overflow-x: clip;
}

/* 
 * Frontend Design: Editorial Brutalism & Structural Spacing
 * We migrate to position: sticky to guarantee stickiness across all browser rendering contexts.
 * By using a zero-height wrapper, we flawlessly collapse its flow footprint without guessing heights.
 * This ensures the immersive hero images (which anchor the aesthetic) remain 
 * flush with the viewport top, while the nav floats gracefully over them.
 */
.nav-wrapper {
	position: sticky !important;
	top: 0;
	height: 0;
	z-index: 80;
	/* overflow: visible by default, allows nav to render visibly while taking 0px flow space */
}
.nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.wp-admin {
	view-transition-name: none;
}