/* Kolkata Chicks — profile cards, "Poster" design. v2, 2026-09-08.
   Loaded AFTER theme-rose.css. Own class names only (kc-*), so no old .gridBox rule can touch it.

   How this stays right on every screen:
   the card sizes ITSELF from its own width (@container), not from the screen width.
   So a 160px card looks the same whether it is on a small phone or in a narrow
   3-across row on a tablet. No device is left out. */

.kc-grid-wrap {
  /* NO width:100% here. With width:100% the negative margins below stop working
     and the grid keeps a dead strip on the right on a phone. */
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.kc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.kc-grid > li {
  container-type: inline-size;   /* every card measures itself */
  container-name: kccard;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  background: none;
}
.kc-grid > li[hidden] { display: none; }

/* ---------- the card ---------- */
.kc-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--kc-slate, #1f2233);
  border: 1px solid rgba(31, 34, 51, .18);
  transition: transform .28s ease, box-shadow .28s ease;
}
.kc-shot:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(31, 34, 51, .26); }
.kc-shot:focus-within { box-shadow: 0 0 0 3px var(--kc-rose, #ff2d95); }

/* beat the old .gridBox img rules wherever this markup is reused */
.kc-shot img.kc-pic {
  position: static;
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
  max-width: 100%;
  max-height: none;
  min-height: 0;
  margin: 0;
  left: auto;
  right: auto;
  background: var(--kc-slate-2, #171927);
}

/* the whole photo is one big link; the two buttons sit above it and still work */
.kc-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: block; }

/* ---------- badges ---------- */
.kc-new, .kc-vip {
  position: absolute;
  top: 9px;
  z-index: 3;
  font-family: var(--kc-body, "Manrope", Arial, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  padding: 4px 8px;
  pointer-events: none;
}
.kc-new { left: 9px; background: var(--kc-rose, #ff2d95); color: #fff; }
.kc-vip { right: 9px; background: transparent; color: #f0c04a; border: 1px solid #f0c04a; }

/* ---------- text over the photo ---------- */
.kc-txt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 15px 15px;
  background: linear-gradient(to top, rgba(12, 13, 21, .93) 0%, rgba(12, 13, 21, .58) 58%, rgba(12, 13, 21, 0) 100%);
  color: #fff;
}
.kc-name {
  display: block;
  font-family: var(--kc-display, "Unbounded", Arial, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
}
.kc-name:hover, .kc-name:focus { color: #fff; text-decoration: none; }

.kc-rule { display: block; height: 2px; width: 26px; background: var(--kc-rose, #ff2d95); margin: 8px 0; transition: width .3s ease; }
.kc-shot:hover .kc-rule { width: 60px; }

.kc-tag {
  display: block;
  font-family: var(--kc-body, "Manrope", Arial, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
  /* a long tag must never push the card apart */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-stats {
  display: block;
  margin-top: 4px;
  font-family: var(--kc-body, "Manrope", Arial, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, .88);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kc-stats b { font-weight: 800; color: #fff; }
.kc-stats .kc-dot { opacity: .5; padding: 0 4px; }

/* ---------- Call / WhatsApp: folded until hover on a mouse, always open on touch ---------- */
.kc-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.kc-fold > div { overflow: hidden; min-height: 0; }
.kc-shot:hover .kc-fold, .kc-shot:focus-within .kc-fold { grid-template-rows: 1fr; }
@media (hover: none) { .kc-fold { grid-template-rows: 1fr; } }

.kc-acts { position: relative; z-index: 3; display: flex; gap: 8px; padding-top: 10px; }
.kc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  font-family: var(--kc-body, "Manrope", Arial, sans-serif);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.kc-act:hover, .kc-act:focus { color: #fff; text-decoration: none; }
.kc-act svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.kc-call:hover, .kc-call:focus { background: var(--kc-rose, #ff2d95); border-color: var(--kc-rose, #ff2d95); }
.kc-wa:hover, .kc-wa:focus { background: #1faf54; border-color: #1faf54; }

/* =========================================================================
   CARD-WIDTH RULES. These decide the look, so every screen is covered.
   ========================================================================= */

/* --- narrow card (about 216–249px): tablet, mini laptop, 2-up on a big phone --- */
@container kccard (max-width: 249px) {
  .kc-shot img.kc-pic { aspect-ratio: 2 / 3; }     /* taller, so the text has room */
  .kc-txt { padding: 18px 11px 11px; }
  .kc-name { font-size: 18px; }
  .kc-rule { width: 22px; margin: 7px 0; }
  .kc-tag { font-size: 9.5px; letter-spacing: .13em; }
  .kc-stats { font-size: 11.5px; margin-top: 3px; }
  .kc-acts { gap: 7px; padding-top: 8px; }
  .kc-act { height: 30px; padding: 0 10px; font-size: 11px; gap: 5px; }
  .kc-act svg { width: 13px; height: 13px; }
}

/* --- phone card (about 166–215px): the words would be cut, so use round icons --- */
@container kccard (max-width: 215px) {
  .kc-txt { padding: 14px 8px 8px; }
  .kc-name { font-size: 15px; letter-spacing: -.015em; }
  .kc-rule { width: 18px; margin: 5px 0; }
  .kc-tag { font-size: 8.5px; letter-spacing: .1em; }
  .kc-stats { font-size: 10.5px; margin-top: 2px; }
  .kc-new, .kc-vip { top: 7px; font-size: 8.5px; padding: 3px 6px; letter-spacing: .07em; }
  .kc-new { left: 7px; }
  .kc-vip { right: 7px; }

  .kc-acts { gap: 7px; padding-top: 7px; }
  .kc-act { width: 32px; height: 32px; padding: 0; border-radius: 50%; border-color: transparent; }
  .kc-act svg { width: 15px; height: 15px; }
  .kc-call { background: var(--kc-rose, #ff2d95); }
  .kc-wa { background: #1faf54; }
  /* the words stay in the page for screen readers, they are only not drawn */
  .kc-act .kc-lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* --- smallest card (under 166px): iPhone 5 / SE at 320px wide --- */
@container kccard (max-width: 165px) {
  .kc-txt { padding: 11px 6px 6px; }
  .kc-name { font-size: 13.5px; }
  .kc-rule { width: 14px; margin: 4px 0; }
  .kc-tag { font-size: 8px; letter-spacing: .07em; }
  .kc-stats { font-size: 9.5px; margin-top: 2px; }
  .kc-stats .kc-dot { padding: 0 3px; }
  .kc-per { display: none; }        /* "/ 1 hr" is dropped, the price alone is clear */
  .kc-new, .kc-vip { top: 5px; font-size: 7.5px; padding: 2px 5px; }
  .kc-new { left: 5px; }
  .kc-vip { right: 5px; }
  .kc-acts { gap: 6px; padding-top: 6px; }
  .kc-act { width: 29px; height: 29px; }
  .kc-act svg { width: 14px; height: 14px; }
}

/* browsers with no @container support fall back to these screen rules */
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .kc-shot img.kc-pic { aspect-ratio: 2 / 3; }
    .kc-txt { padding: 14px 8px 8px; }
    .kc-name { font-size: 15px; }
    .kc-tag { font-size: 8.5px; }
    .kc-stats { font-size: 10.5px; }
    .kc-act { width: 32px; height: 32px; padding: 0; border-radius: 50%; border-color: transparent; }
    .kc-act .kc-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .kc-call { background: var(--kc-rose, #ff2d95); }
    .kc-wa { background: #1faf54; }
  }
}

/* =========================================================================
   HOW MANY IN A ROW. Only this part looks at the screen width.
   ========================================================================= */

/* tablet + mini laptop: 3 in a row */
@media (max-width: 1000px) {
  .kc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* phone and small tablet: 2 in a row, tight edges */
@media (max-width: 767px) {
  .kc-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  /* width:auto lets the negative margin below really widen the box */
  .kc-grid-wrap { width: auto; padding-left: 6px; padding-right: 6px; }
  /* inside a bootstrap .container, pull back its 15px so only 6px is left at the edge.
     This matches by itself wherever a .container is above the grid, so no page needs a flag. */
  .container .kc-grid-wrap { margin-left: -15px; margin-right: -15px; }
  .kc-shot { border-radius: 3px; }
  .kc-shot:hover { transform: none; }
}

@media (max-width: 400px) {
  .kc-grid { gap: 6px; }
}

/* ---------- Load More + Select by Face, both in normal flow ---------- */
.kc-below {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 26px 0 6px;
}
.kc-more {
  font-family: var(--kc-body, "Manrope", Arial, sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  background: var(--kc-rose, #ff2d95);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 45, 149, .34);
}
.kc-more:hover { background: var(--kc-rose-deep, #d9127a); color: #fff; }
.kc-more:focus-visible { outline: 3px solid var(--kc-rose, #ff2d95); outline-offset: 3px; }
.kc-more[hidden] { display: none; }
.kc-more .kc-left { opacity: .82; font-weight: 700; }

/* the old Select-by-Face link was floating over the page; put it in the row instead */
.kc-below .escortbyface {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 13px 22px;
  margin: 0;
}
@media (max-width: 767px) {
  .kc-below { gap: 10px; padding: 18px 0 4px; }
  .kc-more, .kc-below .escortbyface { width: 100%; max-width: 320px; padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-shot, .kc-rule, .kc-fold, .kc-act { transition: none !important; }
}