/* ==========================================================================
   Sign-in (Figma 144:212) and member area (Figma 145:460).

   Both frames open with the shared page-head device and close with the shared
   contact block, so everything here is the middle: the sign-in stack and the
   inspiration grid. Every design value is a 1440-canvas measurement expressed
   as a clamp - the design draws no mobile screens (F-5) and a 96px line on a
   375px phone is not a design decision, it is a bug (docs/06-do-not.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   The head's optional subtitle - only the member area draws one.
   145:532: 96px Fb Mega Regular in אפור גרפיט, y560 against a title box
   ending at 480, so 80px of air above it.
   -------------------------------------------------------------------------- */
.roya-page-head__subtitle {
	margin: clamp(1rem, 5.6vw, 5rem) 0 0;
	color: var(--roya-ink);
	font-size: clamp(1.5rem, 6.67vw, 6rem); /* 96px */
	font-weight: var(--roya-weight-regular);
	line-height: 1;
}

/* ==========================================================================
   Sign-in
   ========================================================================== */

.roya-signin__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 144:321, y816 against the head's closing rule at 686. */
.roya-signin__prompt {
	margin: 0 0 clamp(1rem, 2.6vw, 2.3125rem);
	color: var(--roya-ink);
	font-size: clamp(1.5rem, 6.67vw, 6rem); /* 96px */
	font-weight: var(--roya-weight-regular);
	line-height: 1;
}

.roya-signin__message {
	margin: 0 0 clamp(0.75rem, 1.7vw, 1.5rem);
	color: var(--roya-ink);
	font-size: var(--roya-text-body);
	font-weight: var(--roya-weight-light);
}

.roya-signin__message--error {
	color: var(--roya-graphite);
	font-weight: var(--roya-weight-regular);
}

/* --------------------------------------------------------------------------
   Google - 144:360. A wider pill than `.roya-button`'s default: the design
   pads it 160px a side and sets the label at 64px, not the button scale's 40.
   -------------------------------------------------------------------------- */
.roya-signin__google {
	gap: var(--roya-space-4); /* 32 */
	padding-block: var(--roya-space-2); /* 16 */
	padding-inline: clamp(var(--roya-space-4), 11.1vw, 10rem); /* 160 */
	font-size: var(--roya-text-label); /* 64 */
	text-decoration: none;
}

/*
 * 145:454 - a 51px שמנת circle. Its glyph (145:455) is inset 7.8% / 6.25%,
 * i.e. 43.07x44.61 inside the 51px box: outer box and inner leaf are sized
 * separately so neither is stretched.
 */
.roya-signin__google-mark {
	display: block;
	flex-shrink: 0;
	width: clamp(2rem, 3.54vw, 3.1875rem);  /* 51 */
	height: clamp(2rem, 3.54vw, 3.1875rem);
	background-color: var(--roya-cream);
	background-image: url("../img/icon-google.svg");
	background-repeat: no-repeat;
	background-position: center;
	/* 43.07/51 = 84.5%, 44.61/51 = 87.5% - the leaf's own aspect, not `cover`. */
	background-size: 84.5% 87.5%;
	border-radius: var(--roya-radius-circle);
}

/* --------------------------------------------------------------------------
   "או" - 144:384. One line, rules filling whatever the word leaves.
   -------------------------------------------------------------------------- */
.roya-signin__or {
	display: flex;
	align-items: center;
	gap: var(--roya-space-4); /* 32 */
	width: 100%;
	margin: clamp(1.25rem, 5.8vw, 5.1875rem) 0 clamp(1rem, 3.5vw, 3.1875rem);
	color: var(--roya-ink);
	font-size: var(--roya-text-label);
	font-weight: var(--roya-weight-light);
	line-height: 1;
}

.roya-signin__or::before,
.roya-signin__or::after {
	content: "";
	flex: 1;
	height: var(--roya-rule-width);
	background-color: var(--roya-rule);
}

/* --------------------------------------------------------------------------
   The two fields. `.roya-form__field` (global, contact.css) already draws the
   label-plus-rule line; only the flex behaviour of a bare input differs from
   CF7's wrapped one.
   -------------------------------------------------------------------------- */
.roya-signin__form {
	width: 100%;
	text-align: start;
}

.roya-signin__form .roya-form__field {
	margin-block-end: clamp(1.25rem, 5.6vw, 5rem); /* 1243 -> 1371 */
}

.roya-signin__form .roya-form__field input[type="email"],
.roya-signin__form .roya-form__field input[type="password"] {
	flex: 1;
	min-width: 0;
}

.roya-signin__submit {
	display: flex;
	justify-content: center;
	margin-block: clamp(1.5rem, 4vw, 3.625rem) clamp(1rem, 2.6vw, 2.375rem);
}

.roya-signin__submit .roya-button {
	padding-inline: clamp(var(--roya-space-4), 11.1vw, 10rem);
	font-size: var(--roya-text-label);
}

/* --------------------------------------------------------------------------
   Remember / forgot - 145:431 and 145:437.

   RTL: the first flex child lands at the visual RIGHT, which is where the
   design puts "זכור אותי"; "שכחתי סיסמה?" is at the visual left. Do not
   reorder these without re-reading the frame (see the RTL note in D-19).
   -------------------------------------------------------------------------- */
.roya-signin__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--roya-space-3);
	width: 100%;
	font-size: var(--roya-text-body); /* 45 */
	font-weight: var(--roya-weight-light);
}

.roya-signin__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--roya-space-1);
	color: var(--roya-graphite);
	cursor: pointer;
}

/* 145:426 - 44px, radius 12, a 4px חום בינוני border on שמנת. */
.roya-signin__remember input {
	width: clamp(1.5rem, 3.06vw, 2.75rem);
	height: clamp(1.5rem, 3.06vw, 2.75rem);
	flex-shrink: 0;
	margin: 0;
	background-color: var(--roya-cream);
	border: 4px solid var(--roya-brown);
	border-radius: 12px;
	appearance: none;
	cursor: pointer;
}

.roya-signin__remember input:checked {
	background-color: var(--roya-accent);
}

.roya-signin__remember input:focus-visible,
.roya-signin__forgot:focus-visible {
	outline: 2px solid var(--roya-accent);
	outline-offset: 3px;
}

.roya-signin__forgot {
	color: var(--roya-graphite);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.roya-signin__forgot:hover {
	color: var(--roya-accent);
}

/* ==========================================================================
   Member area - the region the design leaves empty (D-37)
   ========================================================================== */

.roya-inspirations__upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--roya-space-2);
	text-align: center;
}

/*
 * Visually hidden, NOT display:none - a hidden input cannot be focused, and
 * the label is the only control on screen.
 */
.roya-inspirations__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.roya-inspirations__pick {
	cursor: pointer;
}

/* The label is the visible control, so it has to show the input's focus. */
.roya-inspirations__input:focus-visible + .roya-inspirations__pick {
	outline: 2px solid var(--roya-graphite);
	outline-offset: 3px;
}

.roya-inspirations__chosen,
.roya-inspirations__hint,
.roya-inspirations__empty,
.roya-inspirations__message {
	margin: 0;
	color: var(--roya-ink);
	font-size: var(--roya-text-meta);
	font-weight: var(--roya-weight-light);
}

.roya-inspirations__empty,
.roya-inspirations__message {
	margin-block-start: clamp(1rem, 2.8vw, 2.5rem);
	font-size: var(--roya-text-body);
	text-align: center;
}

.roya-inspirations__message--error {
	color: var(--roya-graphite);
	font-weight: var(--roya-weight-regular);
}

/*
 * Staff looking at a client's gallery (?roya-client=<id>). Sits where the
 * uploader would be, in the same meta type, so the grid keeps its place.
 */
.roya-inspirations__staff {
	margin: 0;
	color: var(--roya-graphite);
	font-size: var(--roya-text-meta);
	font-weight: var(--roya-weight-light);
	text-align: center;
}

.roya-inspirations__staff a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.roya-inspirations__staff a:hover {
	color: var(--roya-accent);
}

/* --------------------------------------------------------------------------
   The grid. The project mosaic's card language - radius 30, box shadow - at
   one uniform size, because these are the client's own reference photographs
   and no one of them outranks another.
   -------------------------------------------------------------------------- */
.roya-inspirations__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(var(--roya-space-1), 0.83vw, 0.75rem); /* 12, the mosaic's gap */
	margin: clamp(1.5rem, 4vw, 3.625rem) 0 0;
	padding: 0;
	list-style: none;
}

.roya-inspirations__cell {
	position: relative;
	aspect-ratio: 1;
}

.roya-inspirations__tile {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: var(--roya-media-placeholder);
	border: 0;
	border-radius: 30px;
	box-shadow: var(--roya-shadow-box);
	cursor: zoom-in;
}

.roya-inspirations__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roya-inspirations__remove {
	position: absolute;
	inset-block-start: var(--roya-space-1);
	inset-inline-end: var(--roya-space-1);
	margin: 0;
}

.roya-inspirations__remove-button {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background-color: var(--roya-cream);
	border: var(--roya-border-width) solid var(--roya-border);
	border-radius: var(--roya-radius-circle);
	box-shadow: var(--roya-shadow-soft);
	color: var(--roya-graphite);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--roya-transition), color var(--roya-transition);
}

.roya-inspirations__remove-button:hover,
.roya-inspirations__remove-button:focus-visible {
	background-color: var(--roya-accent);
	color: var(--roya-on-accent);
}

.roya-inspirations__logout {
	margin: clamp(1.5rem, 4vw, 3.625rem) 0 0;
	font-size: var(--roya-text-body);
	font-weight: var(--roya-weight-light);
	text-align: center;
}

.roya-inspirations__logout a {
	color: var(--roya-graphite);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.roya-inspirations__logout a:hover {
	color: var(--roya-accent);
}