/* rm-page-index.css - the start page's own layout (index.css until Step 4, 5 Oct 2026) */

/* All elements of our main page */
.header { grid-area: header; }
.video-tour { grid-area: video-tour; }
.try-our-service { grid-area: try-our-service; }
.video-introductions { grid-area: video-introductions; }
.video-tutorials { grid-area: video-tutorials; }
.adaptive-filtering { grid-area: adaptive-filtering; }
.scalability { grid-area: scalability; }
.technology-and-ai { grid-area: technology-and-ai; }
.film-types { grid-area: film-types; }
.white-label { grid-area: white-label; }
.screenshots { grid-area: screenshots; }
.our-service { grid-area: our-service; }
.important-message { grid-area: important-message; }
.important-message:not(:has(*)) { display: none; }		/* no message (commented out in index.php): no grid item, so no implicit tracks for an area the templates leave out */

/* The lead paragraph under the start page's H1 (SEO review #4, 15 Oct 2026: the sentence was the H1) */
.rm-index__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}
@media (min-width: 768px) {
	.rm-index__lead { font-size: 1.25rem; }
}

.caption {
	margin-top: var(--rm-space-2);
	color: var(--rm-white);
}

.grid-container-index {
	display: grid;
	grid-template-areas:
		/*'important-message'*/
		'header'
		'try-our-service'
		'video-introductions'
		'video-tutorials'
		'screenshots'
		'our-service'
		'adaptive-filtering'
		'scalability'
		'technology-and-ai'
		'film-types';
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap: 50px;
	padding: 0;
}

.video-media-before { grid-area: video-media-before; }
.video-media-after { grid-area: video-media-after; }

/*.grid-try-our-service {
	display: grid;
	grid-template-areas:
		'video-media-before'
		'video-media-after';
	grid-template-columns: 100%;
	grid-template-rows: auto;
}*/

/* Small devices (landscape phones, 544px and up) */
/*@media (min-width: 544px) {
}*/

/* Medium devices (tablets, 768px and up) */
/*@media (min-width: 768px) {
}*/

/* Large devices (desktops, 992px and up) */
/*@media (min-width: 992px) {
}*/

/* Extra large devices (large desktops, 1200px and up) */

/* Extra large devices (large desktops, 1720px and up) */
@media (min-width: 1720px) {
	.grid-container-index {
		display: grid;
		grid-template-areas:
			/*'important-message important-message important-message important-message'*/
			'header header header header'
			'try-our-service try-our-service try-our-service try-our-service'
			'video-introductions video-introductions video-tutorials video-tutorials'
			'screenshots screenshots our-service our-service'
			'adaptive-filtering adaptive-filtering scalability scalability'
			'technology-and-ai technology-and-ai technology-and-ai technology-and-ai'
			'film-types film-types film-types film-types';
		grid-template-columns: 18vw 18vw 18vw 18vw;
		grid-template-rows: auto;
		grid-column-gap: 5vw;
		grid-row-gap: 3vw;
		padding: 0;
	}
}

.try-box-frame-restoration:hover {
	cursor: pointer;
	background-color: var(--rm-dark);
}

.try-box-frame-colorization:hover {
	cursor: pointer;
	background-color: var(--rm-dark);
}


/* ---- Step 7 (6 Oct 2026): the classes of the former style="..." attributes (index) ---- */
.rm-index__card-title:not(#rm-inline) { font-size: 125%; color: var(--rm-black); }
.rm-index__file-name:not(#rm-inline) { font-size: 1.5rem; overflow-wrap: anywhere; }		/* (a long name scrolled a 320 px phone sideways: W-189) */
.rm-index__format-logo:not(#rm-inline) { width: 10vw; margin: 1.5vw; }
.rm-index__customer-logo { height: auto; }		/* (SEO review #8: the logos' width/height attributes give the space only - the CSS width rules) */
.rm-index__logo--down-10:not(#rm-inline) { transform: translate(0, 10%); }
.rm-index__logo--down-15:not(#rm-inline) { transform: translate(0, 15%); }
.rm-index__logo--down-5:not(#rm-inline) { transform: translate(0, 5%); }

/* The feature list in its framed box: below 480 px it starts 10 px further left, in its column's padding (at 320 px "Multiple projects
   simultaneously." ended 4 px beyond the box's right border - J-31); every line stays on one line */
@media (max-width: 479.98px) {
	.rm-index__features { margin-left: -10px; margin-right: -15px; }
}