/*
 * トップページのspaceコーナー（画像帯）。営業状態バナーとnow見出しの間に
 * 配置する、クリック・ホバーインタラクションを持たない雰囲気演出のみの要素
 * （front-page.php参照）。ヒーロー画像・スライダーではなく、写真の連続した
 * 帯をビューポートが切り取っている、という見え方を目指す。
 *
 * 実際の並び・枚数・高さの計算はすべてassets/js/photo-strip.jsが行う
 * （ページロード時のランダムな組み合わせ・ビューポート幅に応じた枚数の
 * 自動調整のため）。ここでは静的なレイアウトの骨組みだけを定義する。
 */
/*
 * margin-topは、spaceページ1枚目の画像の上辺の位置に揃えた実測値
 * （PC 1400px幅: space側top=239px, 画像帯top=224px→差15px。タブレット
 * 1000px幅: space側266px, 画像帯251px→差15px。スマホ375px幅: space側288px,
 * 画像帯266px→差22px。var(--gk-unit)ベースの計算では割り切れず、絶対値としては
 * どの幅でも38〜39pxとほぼ一定だったため、固定pxにしている）。
 */
/*
 * 初回表示は、ページ読み込み直後は非表示にしておき、一呼吸おいてから
 * フェードインで現れる（老舗店舗のサイトなどで見られる、コンテンツを
 * 静かに登場させる手法を参考にしている）。opacityの変化のみで、
 * scale/blur/slideなどは加えない。is-revealedはassets/js/photo-strip.jsが
 * 一定時間後に付与する。ヘッダー・ナビ・他のテキストコンテンツには
 * この演出を適用しない（画像帯のみ）。スクロール等によるその後の
 * 並び替えにはこの演出を使わない（即座に切り替わる、従来通りの挙動）。
 */
.gk-photo-strip {
	margin-top: 39px;
	margin-bottom: calc(var(--gk-unit) * 2);
	opacity: 0;
	transition: opacity var(--transition-image);
}

.gk-photo-strip.is-revealed {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gk-photo-strip {
		transition: none;
	}
}

/*
 * スマホ幅の上部の余白比率: [info]ナビ→営業状態バナー（.site-headerの
 * padding-bottom、var(--gk-unit-mobile)=16px）を「1」、営業状態バナー→
 * 画像帯（この値）を「2」とする、1:2の比率を基準にしている。どちらも
 * サイト全体の基本単位（--gk-unit-mobile=16px）の整数倍（16px/32px）。
 * 「実測して崩れたら別の比率に調整してよい」という前提での目安値。
 * 他ページのモバイル用の余白も、この32pxを出発点として個別に見直している
 * （各ファイル側のコメント参照。以前のような「now画像の位置に無理に
 * 揃える」連動はやめ、ページごとに意図を持った値にした）。
 */
@media (max-width: 767px) {
	.gk-photo-strip {
		margin-top: calc(var(--gk-unit-mobile) * 2);
	}
}

/*
 * trackはビューポート幅いっぱいの固定フレーム（overflow: hidden）。中身の
 * .gk-photo-strip__rowを中央寄せにすることで、rowがtrackより広い（＝画面に
 * 収まらない）場合、左右均等にはみ出した分が切れる（左右どちらかだけでなく、
 * 中心を基準に左右対称に切れる）。
 */
.gk-photo-strip__track {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 100%;
}

.gk-photo-strip__row {
	display: flex;
	flex: 0 0 auto;
}

/*
 * 画像帯の下に24px空けて右揃え。右端はビューポートの端ではなく、
 * ヘッダーのcontact等と同じ内側の余白（var(--gk-unit)）に揃える。
 * テキスト（"… to space"）自体は非表示にするが、下の要素がその分
 * 詰まって上に来ないよう、visibility: hiddenで高さ（margin-top +
 * 行の高さ）だけは残す。
 */
.gk-photo-strip__more {
	display: block;
	margin-top: 12px;
	padding-right: var(--gk-unit);
	text-align: right;
	visibility: hidden;
}

.gk-photo-strip__item {
	flex: 0 0 auto;
}

.gk-photo-strip__item img {
	display: block;
	-webkit-user-drag: none;
	user-select: none;
}