/* /profile-photo-tips, v3 (2026-10-27): includes/site/v3/pages/profile-photo-tips.php.
   A phone with framing guides in the hero, the "not for your CV" note, nine "Try this / Instead of this" tips with
   inline SVG pictures (includes/site/photo-tips-data.php), the video interview section, a tick-as-you-go checklist
   (plain checkboxes, nothing saved) and links on. Everything else reuses v3.css (bands, lockups, chips, ticks, FAQ,
   the closing card). "Instead of this" is marked calmly in soft pink, "Try this" with a mint tick. */

.pt-hero { padding-bottom: clamp(28px, 4vw, 56px); }
.pt-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.pt-hero .v-sub__blob { top: -120px; width: min(48vw, 680px); }
.pt-h1 .v-lk__xl { font-size: clamp(54px, 6.6vw, 100px); }
.pt-hero .v-lede { margin-top: 22px; max-width: 50ch; }
.pt-ticks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.pt-ticks li { gap: 10px; font-size: 16px; }
.pt-ticks .v-ic { width: 26px; height: 26px; padding: 5px; }
.pt-hero__actions { margin-top: 28px; }
.pt-hero__art { position: relative; display: grid; place-items: center; min-height: 460px; }
.pt-hero__disc { position: absolute; inset: 6% 4% 2% 10%; }
.pt-hero__svg { position: relative; z-index: 1; display: block; width: min(290px, 72%); height: auto; transform: rotate(4deg); filter: drop-shadow(0 22px 26px rgba(30, 42, 90, .24)); }
.pt-hero__badge { --bs: 120px; position: absolute; z-index: 2; left: 2%; bottom: 6%; transform: rotate(-10deg); }

/* Not for your CV */
.pt-cv { padding: clamp(48px, 6vw, 80px) 0; }
.pt-cv__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; padding: clamp(24px, 3.4vw, 40px); background: var(--paper); border-radius: 28px; box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .1), 0 14px 32px rgba(30, 42, 90, .1); }
.pt-cv__ic { display: grid; place-items: center; width: 64px; height: 64px; color: var(--navy); background: var(--mint); border-radius: 50%; }
.pt-cv__ic .v-ic { width: 32px; height: 32px; }
.pt-cv__h { margin: 4px 0 12px; font-family: var(--display); font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; line-height: .92; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.pt-cv__body > p { margin: 0 0 10px; font-size: 17px; line-height: 1.6; color: var(--text); }
.pt-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.pt-where li { display: flex; align-items: flex-start; gap: 10px; padding: 14px; font-size: 15.5px; line-height: 1.45; color: var(--text); background: var(--cream); border-radius: 16px; }
.pt-where b { color: var(--navy); }
.pt-where__ic { display: grid; flex: none; place-items: center; width: 34px; height: 34px; color: var(--navy); background: var(--sun); border-radius: 50%; }
.pt-where__ic .v-ic { width: 18px; height: 18px; }

/* The tips */
.pt-intro { max-width: 720px; margin: 18px auto 0; font-size: 17px; line-height: 1.55; text-align: center; color: var(--text); }
.pt-jump .chips { justify-content: center; margin: 26px 0 clamp(30px, 3.6vw, 44px); }
.pt-chip-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; font-size: 12px; font-weight: 900; color: var(--navy); background: var(--sun-l); border-radius: 50%; }
.pt-list { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.pt-tip { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: start; padding: clamp(22px, 2.8vw, 34px); background: var(--paper); border-radius: 28px; box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .1), 0 12px 28px rgba(30, 42, 90, .08); scroll-margin-top: calc(var(--header-h) + 16px); }
.pt-tip:target { box-shadow: 0 0 0 3px var(--navy), 0 20px 40px rgba(30, 42, 90, .14); }
.pt-tip__head { position: relative; }
.pt-tip__n { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; padding-top: 4px; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--navy); background: var(--sun); border-radius: 50% 46% 52% 48%; -webkit-text-stroke: .02em currentColor; }
.pt-list > .pt-tip:nth-child(3n+2) .pt-tip__n { background: #FFD9BF; }
.pt-list > .pt-tip:nth-child(3n+3) .pt-tip__n { background: var(--sky); }
.pt-tip__title { margin: 0 0 10px; font-family: var(--display); font-size: clamp(36px, 3.4vw, 46px); font-weight: 400; line-height: .92; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.pt-tip__sum { margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--text); }
.pt-tip__more { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grey); }
.pt-tip__list { margin: 14px 0 0; padding: 0; gap: 9px; font-size: 15.5px; line-height: 1.5; color: var(--text); }

.pt-shots { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 250px)); gap: 18px; justify-content: start; }
.pt-shot { position: relative; margin: 0; }
.pt-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 20px; box-shadow: 0 0 0 3px var(--mint), 0 8px 18px rgba(30, 42, 90, .1); }
.pt-shot--instead .pt-svg { box-shadow: 0 0 0 3px #F6D3DB, 0 8px 18px rgba(30, 42, 90, .08); }
.pt-shot figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--text); }
.pt-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; font-size: 13px; font-weight: 900; line-height: 1.2; letter-spacing: .02em; border-radius: 999px; box-shadow: 0 2px 6px rgba(30, 42, 90, .14); }
.pt-tag--try { color: var(--navy); background: var(--mint); }
.pt-tag--try .v-ic { width: 18px; height: 18px; padding: 3px; color: #fff; background: var(--teal); border-radius: 50%; stroke-width: 3.4; }
.pt-tag--instead { padding-left: 11px; color: #7E2A40; background: #FBE4E9; }

/* Video interviews */
.pt-call__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pt-call__h .v-lk__xl { font-size: clamp(56px, 7vw, 104px); }
.pt-call__copy > p { margin: 18px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--text); }
.pt-call__list { margin: 16px 0 0; padding: 0; gap: 10px; font-size: 16.5px; line-height: 1.5; }
.pt-call__more a, .pt-check a { font-weight: 800; color: var(--navy); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pt-call__more a:hover { text-decoration-color: var(--tang); }
.pt-call__art { position: relative; display: grid; place-items: center; min-height: 340px; }
.pt-call__disc { position: absolute; inset: 4% 2% 0 6%; }
.pt-call__svg { position: relative; z-index: 1; display: block; width: min(100%, 420px); height: auto; }

/* Checklist */
.pt-check { max-width: 980px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); color: var(--cream); background: var(--navy); border-radius: 30px; box-shadow: 0 18px 40px rgba(30, 42, 90, .2); }
.pt-check__h { margin: 0; font-family: var(--display); font-size: clamp(46px, 5.4vw, 72px); font-weight: 400; line-height: .9; text-transform: uppercase; color: var(--cream); -webkit-text-stroke: .02em currentColor; }
.pt-check__intro { margin: 10px 0 22px; font-size: 16.5px; color: var(--on-navy); }
.pt-check__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.pt-check__item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--cream); background: rgba(255, 255, 255, .07); border-radius: 14px; cursor: pointer; }
.pt-check__item:hover { background: rgba(255, 255, 255, .12); }
.pt-check__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pt-check__box { display: grid; flex: none; place-items: center; width: 26px; height: 26px; margin-top: -1px; color: transparent; background: transparent; border: 2.5px solid var(--mint); border-radius: 8px; transition: background-color .15s ease; }
.pt-check__box .v-ic { width: 18px; height: 18px; stroke-width: 3.4; }
.pt-check__item input:checked + .pt-check__box { color: var(--navy); background: var(--mint); }
.pt-check__item input:checked ~ span:last-child { color: var(--on-navy); }
.pt-check__item input:focus-visible + .pt-check__box { outline: 3px solid var(--sun); outline-offset: 3px; }

/* Links on */
.pt-on__title { text-align: center; }
.pt-on__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.pt-on__card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; text-decoration: none; color: var(--text); background: var(--paper); border-radius: 22px; box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .1), 0 10px 24px rgba(30, 42, 90, .08); transition: transform .2s ease; }
.pt-on__card:hover { transform: translateY(-3px) rotate(-.5deg); }
.pt-on__card b { font-family: var(--display); font-size: 30px; font-weight: 400; line-height: .95; text-transform: uppercase; color: var(--navy); }
.pt-on__card > span:not(.pt-on__ic):not(.pt-on__pill) { font-size: 15.5px; line-height: 1.5; color: var(--grey); }
.pt-on__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; color: var(--navy); background: var(--sun); border-radius: 50%; }
.pt-on__ic .v-ic { width: 26px; height: 26px; }
.pt-on__pill { align-self: flex-start; margin-top: auto; padding: 4px 10px; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); background: var(--sun-l); border-radius: 999px; }

@media (max-width: 1100px) {
  .pt-tip { grid-template-columns: minmax(0, 1fr); }
  .pt-shots { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  .pt-on__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pt-hero__grid, .pt-call__grid { grid-template-columns: minmax(0, 1fr); }
  .pt-hero .v-sub__blob { top: -40px; right: -46vw; width: 100vw; }
  .pt-hero__art { min-height: 0; margin-top: 8px; padding: 12px 0 8px; }
  .pt-hero__svg { width: min(240px, 62%); }
  .pt-hero__badge { --bs: 104px; left: 4%; bottom: 4%; }
  .pt-where { grid-template-columns: minmax(0, 1fr); }
  .pt-call__art { min-height: 0; }
  .pt-call__svg { width: min(100%, 380px); }
}
@media (max-width: 760px) {
  .pt-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pt-shots--odd .pt-shot:first-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 300px); }
  .pt-check__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pt-h1 .v-lk__xl { font-size: clamp(44px, 12.5vw, 64px); }
  .pt-ticks { gap: 8px 16px; }
  .pt-ticks li { font-size: 15px; }
  .pt-cv__card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 18px; border-radius: 22px; }
  .pt-cv__ic { width: 52px; height: 52px; }
  .pt-cv__body > p { font-size: 16px; }
  .pt-jump .chips { flex-wrap: nowrap; justify-content: flex-start; margin: 22px -18px 24px; padding: 2px 18px 8px; overflow-x: auto; scrollbar-width: none; }
  .pt-jump .chips::-webkit-scrollbar { display: none; }
  .pt-jump .chip { white-space: nowrap; }
  .pt-tip { padding: 20px 16px; border-radius: 22px; }
  .pt-tip__n { width: 44px; height: 44px; font-size: 28px; }
  .pt-tip__sum { font-size: 17px; }
  .pt-tip__more { font-size: 15.5px; }
  .pt-svg { border-radius: 16px; }
  .pt-shot figcaption { margin-top: 10px; font-size: 14px; }
  .pt-tag { top: 8px; left: 8px; padding: 4px 9px 4px 7px; font-size: 12px; }
  .pt-tag--instead { padding-left: 9px; }
  .pt-check { padding: 26px 18px; border-radius: 22px; }
  .pt-check__item { font-size: 15.5px; }
  .pt-on__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-on__card, .pt-check__box { transition: none; }
}
@media print {
  .pt-jump, .pt-on, .v-cta, .pt-hero__art { display: none; }
  .pt-tip { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .pt-check { color: #000; background: #fff; border: 1px solid #ccc; box-shadow: none; }
  .pt-check__h, .pt-check__item, .pt-check__intro { color: #000; }
}