/* The listing card: the same component serves the catalogue (collapsed:
   top services, truncated description, a review button) and the profile page
   (expanded: full services and description). Loads after gallery.css — the
   gallery-fit part below overrides the module inside the card. */

/*-------------------------------
		Card
-------------------------------*/

/*-------------------------------
		Ad preview
-------------------------------*/
.card {margin: 10px 0 20px; padding: 10px; background: var(--panel); border: 1px solid var(--border);}

.card-body {position: relative; display: flow-root;}

.card .details {width: 240px; float: right; margin-right: 20px;}

.card .details > a {color: var(--text-strong);}

.card .media {float: left; width: min(365px, 100% - 260px);}

@media only screen and (max-width: 620px) {
	.card {padding: 8px 5px;}
	/*
			Catalog
		*/
	.card .details {width: 200px; margin-right: 0px; font-size: 12px;}
	.card .media {width: min(365px, 100% - 200px);}
}

/* Tariff corner marks */

.vip {margin: -21px -21px 0 0; padding: 21px 21px 0 0; background: url("../img/vip.c6c1ddb08809.webp") no-repeat 100% 0%;}

.super-vip {margin: -56px -52px 0 0; padding: 56px 52px 0 0; background: url("../img/super-vip.0a84d976a343.webp") no-repeat 100% 0%;}

.top-vip {margin: -52px -46px 0 0; padding: 52px 46px 0 0; background: url("../img/top-vip.759e2bcb5781.webp") no-repeat 100% 0%;}

.vip .icon, .super-vip .icon, .top-vip .icon {display: none;}

@media only screen and (max-width: 620px) {
	.vip, .super-vip, .top-vip {margin: 0; padding: 0; background: none;}
	.vip .icon, .super-vip .icon, .top-vip .icon {display: block;}
	/* Same crown as on a wide screen, scaled by the browser: a separate file
		   held nothing the big one does not. */
	.super-vip .icon {position: absolute; top: -38px; right: -31px; width:50px; height: 45px;
			background: url("../img/super-vip.0a84d976a343.webp") no-repeat 100% 0%; background-size: contain;}
	.top-vip .icon {position: absolute; top: -35px; right: -27px; width:50px; height: 44px;
			background: url("../img/top-vip.759e2bcb5781.webp") no-repeat 100% 0%; background-size: contain;}
	.vip .icon {position: absolute; top: -16px; right: -10px; width:50px; height: 44px;
			background: url("../img/vip.c6c1ddb08809.webp") no-repeat 100% 0%; background-size: contain;}
}

/* Card contents */

.card .params {float: left; margin-left: 15px; color: var(--text-strong);
	display: grid; grid-template-columns: max-content max-content; gap: 0 4px;}

.card .params dt::after {content: ":";}

.card .params dd {margin: 0; color: var(--text);}

.card ul {list-style-type: square; color: #A49270;}

.card ul li::marker {color: #3a352a;}

.card ul li {margin: 3px 0;}

.card li span {color: var(--text-strong);}

/*-------------------------------
		Colors
-------------------------------*/
.card .warn {color: var(--accent-border);}

.card h2 {font-size: 16px; margin: 12px 0 0; text-align: center;}

.card address {color: var(--text-strong);}

.card .about {color: var(--text-strong);}

.about p:has(> .more) {text-align: center; line-height: 3px; margin-bottom: 10px;}

/* The "more" control is not a link: the card heading already carries the same address,
   and a crawler has no use for a second one. goto.js performs the jump. */
.more {color: var(--gold); text-decoration: underline;}

.card .phone-box {background: var(--panel); border: 1px solid var(--border); border-width: 1px 0;
	padding: 12px 0 10px; text-align: center;}

.card .picture-box {text-align: center;}

.card .picture-box .pic-count {margin: 4px 0;}

.card .picture-box img {background: var(--panel); border: 1px solid var(--border-light); margin: 3px 10px 0;}

.card .report-button-box .counts span {display: block; color: var(--text-strong); text-decoration: underline;}

.card .report-button-box .counts span:hover {text-decoration: none;}

.card .report-button-box .counts {margin: 5px; font-size: 18px;
	font-family: Georgia, "Times New Roman", Times, serif; color: var(--link);}

.card .report-button-box {background: var(--panel); border: 1px solid var(--border); border-width: 1px 0;
	padding-bottom: 10px; text-align: center;}

@media only screen and (max-width: 620px) {
	.card .params {margin: 4px;}
	.card .picture-box .pic-count {font-size: 14px;}
	.card .picture-box img {margin: 2px 10px 2px 0; max-width: 232px;}
	.card .pricetable tr th {max-width: 50px;}
	.card .pricetable {font-size: 12px;}
	.card .button {font-size: 13px;}
}

/* The status strip above the card (owner view, cabinet) */
.card-status {display: flex; justify-content: space-between; align-items: flex-start;
	border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px;}

.card-status b {color: var(--text-strong);}

.card-status p {text-indent: 0; padding: 0;}

.card-status .state {text-align: left;}

.card-status form {display: inline;}

/*-------------------------------
		Gallery fit
-------------------------------*/

/* Fitting the gallery into the catalogue theme.

   ../../gallery/gallery.css is the module itself: it knows nothing about this
   page or its layout. Only page-dependent things live here — the size of the
   photo slot, variables the theme does not define, and undoing the styling the
   theme puts on every <img> inside the track. */
/* The photo slot fills the media column minus its side margins. The <img>
   sizes attribute must not understate the result: if it does, the browser
   picks a small step on its first guess, then fetches a larger one after
   layout, downloading the photo twice. */
.card .picture-box .gallery { margin: 3px 11px 0 }

@media only screen and (max-width: 620px) {
	.card .picture-box .gallery { margin: 2px 10px }
}

/* The track holds 3:4. Portrait photos are the most common in listings, and
   there is no cropping: a frame is shown whole and its margins are filled by
   the blurred copy. */
.card .picture-box .track { aspect-ratio: 3/4 }

/* The theme frames every card <img> with a border, a background and margins.
   Inside the track that gets in the way: the slide draws the bounds and the
   track sets the spacing. */
.card .picture-box .gallery img {
	margin: 0; border: 0; background: none; max-width: none;
}

/* The theme declares the back-to-top button at z-index:1000, and it would
   otherwise float above the fullscreen viewer. */
.lightbox { z-index: 1001 }

/*---------------------------------------------------------------
  Продакшн-состояния и починки
---------------------------------------------------------------*/


/* На узком экране фото должно быть шире инфоблока, как на живом легаси-сайте
   (`.profilebox .column-pic`/`.column-info`, ~247px/~200px — примерно 55/45):
   card.css даёт `.media` остаток через `min()`, а `.details`
   держит фиксированные 200px, из-за чего на реальных узких телефонах
   (~375px) инфоблок оказывается шире фото — обратная легаси пропорция.

   Ширину съедает не шрифт, а grid `max-content max-content` в .params:
   он выравнивает значения во вторую колонку и резервирует ширину самой
   длинной пары. Легаси (.fastdata) ничего не выравнивает — там простые
   строки «Рост: 170см», и потому в ту же ширину помещается больше. На узком
   экране повторяем легаси-вёрстку: dt и dd в строку, без выравнивания —
   шрифт остаётся обычным, а фото получает легасину долю ширины. */
/* Остаток времени: тарификация посекундная, и остаток тает, пока страница
   открыта. В прототипе этого поля нет — там показан только баланс. */

.card-status .left {font-variant-numeric: tabular-nums;}

.card-status .left.out {color: #ef3131;}

@media only screen and (max-width: 620px) {
  .card .media { width: 52%; }
  .card .details { width: 48%; margin-right: 0; }
  .card .params { display: block; float: left; margin: 0 0 0 4px; }
  .card .params dt,
  .card .params dd { display: inline; }
  .card .params dd { margin-left: 3px; }
  .card .params dd::after { content: ""; display: block; }
}

/* Маркер списка услуг — как легасишный dot.gif 5×5 (`.profilebox ul
   {list-style-image}` на живом сайте): маркер-«чекбокс» вплотную к тексту,
   а ::marker-квадрат из card.css рисуется в размер шрифта и
   оставляет широкий зазор. Ни gif, ни SVG не переносим — квадратик тех же
   пиксельных цветов (ободок #534a38, середина #121212) рисуется чистым
   CSS: рамка плюс фон у ::before. */
.card ul {list-style: none;}

.card ul li::before {content: ""; display: inline-block; width: 5px; height: 5px;
	box-sizing: border-box; margin-right: 4px; vertical-align: 1px;
	background: var(--panel); border: 1px solid #534a38;}

/* Кнопки «Изменить»/«Включить» в полосе состояния не сжимаются. Выше в этом
   листе `.card-status` — флекс со `space-between`, где обе стороны ужимаемы;
   в прототипе слева стояли три короткие строки, а у нас туда же
   попал перечень недостающего для готовности («Не хватает: не заполнены
   обязательные поля, …»). Он забирал всю ширину, и колонка кнопок съезжала
   до 32px — «Изменить» читалось по букве в столбик. */
.card-status .manage {flex-shrink: 0;}

.card-status .state {min-width: 0;}