/*
 * Entry-page grid. Based on __new.html; loaded after main.css (see $extraCss in _header.php).
 * Everything is scoped to .grid-main so the inner pages are not affected.
 * Colours/typography are the template's for now - to be tuned later.
 */

/* undo main.css's "floated 80% column next to the fixed nav" for this page */
main[role=main].grid-main {
	float: none;
	position: static;
	width: auto;
	box-sizing: border-box;
	padding: 2rem 1rem 0 1rem;
	margin: 0;
}

/* the grid's headline, and the page's own heading (its $title) inside the viewer */
.grid-main .grid-title,
.pv main[role=main].pv__content header[role=banner] h1 {
	display: block;           /* main.css hides the page headings; show them in the viewer */
	text-align: center;
	margin: 0 0 2rem 0;
	font-size: 1.75rem;
	font-weight: 300;
	color:#404040;
}

.grid-title, .pv__content h1 {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* viewer: spacing around the heading + the optional description under it */
.pv main[role=main].pv__content header[role=banner] {
	margin: 0 10pt;
	padding: 1.5rem 0 1rem 0;
	text-align: center;
}
.pv main[role=main].pv__content header[role=banner] h1 {
	margin: 0;
	overflow-wrap: anywhere;   /* long titles are joined with non-breaking spaces */
}
.pv main[role=main].pv__content .pv-description {
	max-width: 800px;
	margin: 0.5rem auto 0 auto;
	font-size: 1rem;           /* smaller than the heading */
	color: #404040;
}

/* CSS Grid container - as many columns as fit (no media queries), at most --cards-per-row */
.grid-container {
	--cards-per-row: 5;        /* cards in a row on a wide screen */
	--card-min: 280px;         /* narrowest a card gets before the row drops one */
	--card-gap: 16px;
	--card-ratio: 3 / 2;       /* card picture shape, width / height: 4 / 3 = taller, 16 / 9 = flatter */

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
	gap: var(--card-gap);
	/* overall width = exactly --cards-per-row cards plus the gaps between them (5 x 280 + 4 x 16 = 1464px) */
	max-width: calc(var(--cards-per-row) * var(--card-min) + (var(--cards-per-row) - 1) * var(--card-gap));
	margin: 0 auto;
}

/* One card = one menu item */
.grid-container .card {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid #999999;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-container .card:hover,
.grid-container .card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.grid-container .card-thumb {
	display: block;
	aspect-ratio: var(--card-ratio);
	background-color:#404040;
	overflow: hidden;
}

.grid-container .card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grid-container .card-title {
	display: block;
	padding: 4px 8px;
	font-size: 1rem;
	font-weight: 300;
	overflow-wrap: anywhere;   /* a long title wraps instead of being cut off */
	color:#404040;
}

/* text-only cards (Darija, News, CV, links...) keep the same height as image cards */
.grid-container .card-text {
	justify-content: center;
	aspect-ratio: var(--card-ratio);
	padding: 24px 0;           /* sides come from .card-title */
}

.grid-container .card-text .card-title {
	font-size: 1.25rem;
}

/* footer from _footer.php sits below the grid */
.grid-main footer[role=contentinfo] {
	margin: 40pt 0 25pt 0;
	text-align: center;
}


/* =====================================================================
 * Page viewer (a work opens on top of the grid)  -  markup: _footer.php, logic: js/viewer.js
 * Same top bar / counter / X / arrows as PhotoSwipe on this site, on a plain white backdrop
 * (the .pswp__* classes come from the PhotoSwipe skin that is already loaded).
 * ===================================================================== */

html.pv-lock,
html.pv-lock body { overflow: hidden; }

.pv {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1000;            /* PhotoSwipe itself is 1500, so an opened image goes on top */
	display: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.pv.pv--open { display: block; }
.pv.pv--visible { opacity: 1; }

.pv__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	/* The page covers the grid completely, in the site's own white (no grey).
	   To let the grid show through instead, use e.g.  background: rgba(255, 255, 255, 0.85);
	   or  background: transparent;  */
	background: #fff;
}

/* PhotoSwipe's controls are white (made for a dark/grey backdrop) - make them readable on white */
.pv .pswp__counter { color: #404040; opacity: 1; }
.pv .pswp__top-bar .pswp__button--close,
.pv .pswp__preloader { filter: invert(1); }

/* scrolling area below the 44px top bar; scrollbar always on so the image rows keep their width */
.pv__scroll {
	position: absolute;
	top: 44px; right: 0; bottom: 0; left: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	outline: none;
}

/* the page itself: a white sheet; keeps main.css's selectors (main[role=main] ...) working inside it */
.pv main[role=main].pv__content {
	float: none;
	position: static;
	width: auto;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10pt 0 20pt 0;
	box-sizing: border-box;
	min-height: 100%;
	background: #fff;
}

/* a page opened by link that has no card: no counter, no prev/next */
.pv--single .pswp__counter,
.pv--single .pswp__button--arrow--left,
.pv--single .pswp__button--arrow--right { display: none; }

/* thumbnails switched off ($showThumbnails in index.php): compact title-only cards */
.grid-container.no-thumbs .card-text {
	aspect-ratio: auto;
	padding: 18px 0;
}

/* touch screens: swipe instead of arrow buttons (as PhotoSwipe does) */
@media (hover: none) and (pointer: coarse) {
	.pv .pswp__button--arrow--left,
	.pv .pswp__button--arrow--right { display: none; }
}

@media only screen and (max-width: 760px) {
	.pv main[role=main].pv__content { max-width: none; }
}