/* sms-seks.com "Pink field": the profile page, the SMS panel and its results, the disclaimer.
   Spec: docs/superpowers/specs/2026-11-01-sms-seks-pinkfield-design.md (Pages: Profile) */

/* ---------- Layout: photo | name, facts, O meni | SMS panel ---------- */
#p .profileReader {
  --pad: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 424px);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3vw, 44px);
}
#p .media { grid-column: 1; grid-row: 1 / 3; padding-block: var(--pad); max-width: 340px; }
#p .info { grid-column: 2; grid-row: 1; padding-top: var(--pad); min-width: 0; container-type: inline-size; }
#p .description { grid-column: 2; grid-row: 2; padding: 28px 0 var(--pad); min-width: 0; }
#p .smsContainer { grid-column: 3; grid-row: 1 / 3; }

/* ---------- Photo ---------- */
#p .media figure { margin: 0; border: 1px solid #000; background: #000; }
#p .media img { width: 100%; background: #151515; }

/* ---------- Name and facts ---------- */
#p .info h1 {
  display: inline-block; max-width: 100%;
  padding: .06em 0 .08em; border-bottom: 6px solid var(--pink);
  font: italic 900 64px/1.1 var(--disp);
  /* --len = letters in the name (set by profile.php) so a long name stays on one line */
  font-size: clamp(30px, calc(100cqi / (var(--len, 6) * .9 + .5)), 68px);
  text-transform: uppercase; color: #fff; overflow-wrap: anywhere;
}
#p dl.data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 28px; background: #000; }
#p dl.data .itm { min-height: 76px; padding: 14px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
#p dl.data .itm:nth-child(odd) { border-right: 1px solid var(--line); }
#p dl.data .itm:nth-last-child(-n+2) { border-bottom: 0; }
#p dl.data dt { font: 600 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
#p dl.data dd { margin-top: 4px; font: 700 19px/1.3 var(--font); color: #fff; overflow-wrap: anywhere; }

/* ---------- O meni ---------- */
#p .description h2.label {
  margin-bottom: 10px;
  font: italic 800 16px/1.2 var(--disp); text-transform: uppercase; letter-spacing: .1em; color: var(--pink-hi);
}
#p .description .value p { max-width: 60ch; font-size: 17px; line-height: 1.65; color: #dcdcdc; overflow-wrap: anywhere; }

/* ---------- SMS panel: solid pink, running to the right window edge ---------- */
#p .smsContainer {
  background: var(--pink); color: #000;
  padding: var(--pad) 0 var(--pad) clamp(24px, 3vw, 40px);
  box-shadow: 0 0 0 100vmax var(--pink); clip-path: inset(0 -100vmax 0 0);
}
#p .smsWrapper { container-type: inline-size; }
#p .smsWrapper h2.headline {
  margin-bottom: 22px;
  font: italic 900 27px/1.1 var(--disp);
  font-size: clamp(20px, 7cqi, 27px);
  color: #000; text-wrap: balance;
}

/* ---------- Results (shown by jquery.send.sms.js with .show(): plain blocks) ---------- */
.fallbackMSG .msg_respond { display: none; margin-top: 16px; padding: 20px; background: #000; color: #fff; }
.fallbackMSG .msg_respond h5 { margin: 0 0 8px; font: italic 800 20px/1.2 var(--disp); color: #fff; }
.fallbackMSG .msg_respond.error h5 { color: var(--pink-hi); }
.fallbackMSG .msg_respond p { margin: 0; font: 400 15px/1.5 var(--font); }
.fallbackMSG .msg_respond p + p { margin-top: 8px; }
.fallbackMSG .msg_respond strong, .fallbackMSG .msg_respond a { color: #fff; font-weight: 700; }
.fallbackMSG .msg_respond a { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Disclaimer ---------- */
.footer_disclaimer { padding-top: clamp(32px, 4vw, 48px); }
.footer_disclaimer p { max-width: 110ch; font: 400 13px/1.6 var(--font); color: var(--muted); }
.footer_disclaimer a { color: var(--pink-hi); }

/* ---------- Breakpoints ---------- */
@media (max-width: 1180px) {
  #p .profileReader { grid-template-columns: minmax(0, 270px) minmax(0, 1fr) minmax(0, 372px); }
  #p dl.data dd { font-size: 17px; }
}
@media (max-width: 1000px) {
  /* photo | name and facts, then the SMS panel full width, then O meni */
  #p .profileReader { grid-template-columns: minmax(0, clamp(200px, 32vw, 300px)) minmax(0, 1fr); grid-template-rows: auto; }
  #p .media { grid-row: 1; padding-bottom: 32px; }
  #p .info { grid-row: 1; align-self: end; padding-bottom: 32px; }
  #p .smsContainer { grid-column: 1 / -1; grid-row: 2; padding: 36px 0 40px; clip-path: inset(0 -100vmax); }
  #p .description { grid-column: 1 / -1; grid-row: 3; padding: 32px 0 0; }
  #sendSMS { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  #sendSMS > .widget-textarea { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  /* the left column sets the height; the message stretches to it (a 0px basis: a 0% basis would fall back to the rows= height and stretch the grid) */
  #sendSMS > .widget-textarea #message { flex: 1 1 0px; min-height: 128px; }
  #sendSMS > .submit_container { grid-column: 1 / -1; }
  #p .smsWrapper h2.headline { font-size: clamp(22px, 3.6vw, 28px); }
}
@media (max-width: 560px) {
  #p .profileReader { grid-template-columns: minmax(0, 1fr); }
  #p .media { grid-column: 1; grid-row: 1; padding: 24px 0 0; }
  #p .info { grid-column: 1; grid-row: 2; align-self: auto; padding: 24px 0 32px; }
  #p .smsContainer { grid-row: 3; }
  #p .description { grid-row: 4; }
  #sendSMS { display: block; }
}

@media print {
  #p .smsContainer { background: #fff; box-shadow: none; }
}