/* R6 + P7 (owner 11/06, a mockup: "我要大概是這樣排版"): P6's coach dialog laid out again in two columns. Only the dialog differs from R6 (same small cards,
   hero, closing). No title bar: the x button sits in the box's top-right corner. Left column (about 40%): the title "教練 <name>" (the name on a pale-cyan
   highlighter stroke), one big 4:5 photo in a pale-blue rounded frame (a round magnifier button at its bottom-right corner opens P6's big photo in a second
   small dialog; R6's thumbnails under it when there are 2 or more photos), then P6's facts table (board / language / certificate). Right column (about 60%):
   P6's white introduction card held by a strip of washi tape, then the "learn about the lessons" button on the right. No coach number. The box does not
   scroll as a whole: the body scrolls inside it; on a wide screen the left column stays in view (sticky) while a long introduction scrolls. Phones (<768):
   one column, title -> photo -> facts -> introduction -> button. Focus: no frame of any colour on click or touch; the keyboard only tints the ground pale
   cyan (a cyan halo on the photo, its buttons and the link). Built on coaches-rkit.css and coaches-r6.css; scoped to .cv-r6p7, classes cr6p7-. */

/* ---------------------------------------------------------------- the box: the x button in its top-right corner, one scrolling body under it */
.cr.cv-r6p7 .cr6p7-dlg { width: min(940px, calc(100% - 48px)); max-height: 85vh; max-height: 85dvh; border-radius: 22px; overflow: hidden; }
.cr.cv-r6p7 .cr6p7-dlg[open] { display: flex; flex-direction: column; animation: cv-r6p7-in .3s var(--cr-ease); }
.cr.cv-r6p7 .cr6p7-dlg[open]::backdrop { animation: cv-r6p7-fade .3s ease-out; }
@keyframes cv-r6p7-in { from { opacity: 0; scale: .96; } }
@keyframes cv-r6p7-fade { from { opacity: 0; } }
/* the kit's x button floats (sticky, pulled up over the content); here it is pinned to the box's corner, outside the scrolling body, so it never scrolls away */
.cr.cv-r6p7 .cr6p7-dlg > .cr-dialog__close { position: absolute; top: 12px; right: 12px; margin: 0; }

.cr.cv-r6p7 .cr6p7-body { flex: 1 1 auto; min-height: 0; padding: 16px 14px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cr-line-2) transparent; }
.cr.cv-r6p7 .cr6p7-side { min-width: 0; }
.cr.cv-r6p7 .cr6p7-main { display: flex; flex-direction: column; min-width: 0; margin-top: 14px; }

/* ---------------------------------------------------------------- left: the title "教練 <name>", the name on a highlighter stroke (room on the right for the x button) */
.cr.cv-r6p7 .cr6p7-title { padding-right: 50px; font-size: 28px; line-height: 1.3; color: var(--cr-ink); overflow-wrap: anywhere; }
.cr.cv-r6p7 .cr6p7-name {
  margin-left: .2em; padding: 0 .14em; border-radius: .14em;
  background: linear-gradient(transparent 40%, rgba(78, 220, 233, .4) 40%, rgba(78, 220, 233, .4) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------------------------------------------------------------- left: one big photo in a pale-blue frame; R6's album when there are 2 or more photos */
.cr.cv-r6p7 .cr6p7-photo { margin-top: 12px; padding: 12px; border-radius: 18px; }
.cr.cv-r6p7 .cr6p7-photo:empty { display: none; }
.cr.cv-r6p7 .cr6p7-view { position: relative; }
/* the stage is a strip of 4:5 photos that snaps one by one (swipe on a phone, arrow keys when focused); a click on it opens the photo in view, big */
.cr.cv-r6p7 .cr6p7-stage {
  display: flex; width: 100%; aspect-ratio: 4 / 5; overflow-x: auto; overflow-y: hidden; border-radius: 12px; background: var(--cr-ice);
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.cr.cv-r6p7 .cr6p7-stage::-webkit-scrollbar { display: none; }
.cr.cv-r6p7 .cr6p7-stage > img {
  display: block; flex: 0 0 100%; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% var(--oy, 35%);
  scroll-snap-align: start; scroll-snap-stop: always;
}
/* the round magnifier at the photo's bottom-right corner (a real button: the keyboard reaches it) */
.cr.cv-r6p7 .cr6p7-zoom {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317375a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  box-shadow: 0 4px 10px -4px rgba(23, 55, 90, .55); cursor: zoom-in; transition: background-color .3s; -webkit-tap-highlight-color: transparent;
}
.cr.cv-r6p7 .cr6p7-zoom:hover { background-color: var(--cr-ice); }
/* thumbnails (made by the script when there are 2 or more photos): they fade to the chosen photo; the chosen one has a cyan frame on a pale cyan ground */
.cr.cv-r6p7 .cr6p7-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.cr.cv-r6p7 .cr6p7-th {
  display: block; width: 56px; height: 56px; margin: 0; padding: 3px; border: 0; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--cr-line-2); cursor: pointer; transition: background-color .3s, box-shadow .3s; -webkit-tap-highlight-color: transparent;
}
.cr.cv-r6p7 .cr6p7-th:hover { background: var(--cr-ice); }
.cr.cv-r6p7 .cr6p7-th img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% var(--oy, 35%); border-radius: 11px; }
.cr.cv-r6p7 .cr6p7-th[aria-pressed="true"] { background: var(--cr-cyan-soft); box-shadow: inset 0 0 0 2.5px var(--cr-cyan); }

/* ---------------------------------------------------------------- left: P6's facts table (round icon, label, the card's own tags) in a pale rounded frame */
.cr.cv-r6p7 .cr6p7-facts { margin-top: 12px; border: 1.5px solid var(--cr-line); border-radius: 18px; background: var(--cr-band); }
.cr.cv-r6p7 .cr6p7-fact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px; }
.cr.cv-r6p7 .cr6p7-fact + .cr6p7-fact { border-top: 1.5px solid var(--cr-line); }
.cr.cv-r6p7 .cr6p7-k { flex: 0 0 auto; width: 2.8em; font-weight: 700; line-height: 28px; color: var(--cr-ink); }
.cr.cv-r6p7 .cr6p7-v { flex: 1 1 auto; min-width: 0; }
.cr.cv-r6p7 .cr6p7-v .cr-tags { min-height: 28px; align-content: center; gap: 6px; }
.cr.cv-r6p7 .cr6p7-v .cr-tag--line svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- right: the introduction (a white card, washi tape on its top-left corner), then the button */
.cr.cv-r6p7 .cr6p7-bio { flex: 1 1 auto; padding: 22px 20px 20px; border-radius: 18px; }
.cr.cv-r6p7 .cr6p7-bio__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.cr.cv-r6p7 .cr6p7-bio__t { font-size: 18px; line-height: 1.5; }
.cr.cv-r6p7 .cr6p7-kalam { font-size: 20px; line-height: 1.2; }
.cr.cv-r6p7 .cr6p7-bio__txt { margin-top: 8px; }
.cr.cv-r6p7 .cr6p7-bio__txt p + p { margin-top: .75em; }
.cr.cv-r6p7 .cr6p7-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 16px; }
.cr.cv-r6p7 .cr6p7-go { min-height: 48px; padding: 8px 22px; font-size: 16px; }

/* ---------------------------------------------------------------- the big photo: P6's second small dialog (Esc closes it first, then the coach dialog) */
.cr.cv-r6p7 .cr6p7-lb { max-width: min(640px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 10px; border: 0; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(23, 55, 90, .6); }
.cr.cv-r6p7 .cr6p7-lb[open] { animation: cv-r6p7-in .25s var(--cr-ease); }
.cr.cv-r6p7 .cr6p7-lb::backdrop { background: rgba(23, 55, 90, .32); }
.cr.cv-r6p7 .cr6p7-lb form { margin: 0; }
.cr.cv-r6p7 .cr6p7-lb img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); margin: 0 auto; border-radius: 14px; background: var(--cr-ice); object-fit: contain; cursor: zoom-out; }
.cr.cv-r6p7 .cr6p7-lb__x {
  position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--cr-ink); box-shadow: inset 0 0 0 1.5px var(--cr-line-2), 0 6px 14px -8px rgba(23, 55, 90, .5); cursor: pointer; transition: background-color .3s; -webkit-tap-highlight-color: transparent;
}
.cr.cv-r6p7 .cr6p7-lb__x:hover { background: var(--cr-ice); }
.cr.cv-r6p7 .cr6p7-lb__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* ---------------------------------------------------------------- focus: never a frame (owner 11/06). The site's own *:focus-visible rule is !important, so these are too. */
.cr.cv-r6p7 .cr6p7-dlg:focus, .cr.cv-r6p7 .cr6p7-dlg:focus-visible, .cr.cv-r6p7 .cr6p7-lb:focus, .cr.cv-r6p7 .cr6p7-lb:focus-visible,
.cr.cv-r6p7 .cr6p7-dlg :is(a, button, img, [tabindex]):focus, .cr.cv-r6p7 .cr6p7-dlg :is(a, button, img, [tabindex]):focus-visible { outline: none !important; }
.cr.cv-r6p7 .cr6p7-go { -webkit-tap-highlight-color: transparent; }
.cr.cv-r6p7 .cr6p7-stage:focus-visible { box-shadow: 0 0 0 5px rgba(78, 220, 233, .4); }
.cr.cv-r6p7 .cr6p7-zoom:focus-visible { background-color: var(--cr-cyan-soft); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(78, 220, 233, .85); }
.cr.cv-r6p7 .cr6p7-th:focus-visible { box-shadow: inset 0 0 0 1.5px var(--cr-line-2), inset 0 0 0 999px rgba(78, 220, 233, .3); }
.cr.cv-r6p7 .cr6p7-th[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2.5px var(--cr-cyan), inset 0 0 0 999px rgba(78, 220, 233, .3); }
.cr.cv-r6p7 .cr6p7-go:focus-visible { box-shadow: 3px 4px 0 #c0d9ed, 0 0 0 5px rgba(78, 220, 233, .55); }
.cr.cv-r6p7 .cr6p7-lb__x:focus-visible { background: var(--cr-cyan-soft); box-shadow: inset 0 0 0 1.5px var(--cr-line-2), inset 0 0 0 999px rgba(78, 220, 233, .3), 0 6px 14px -8px rgba(23, 55, 90, .5); }

/* ---------------------------------------------------------------- sizes */
@media (max-width: 767px) {
  .cr.cv-r6p7 .cr6p7-dlg { width: calc(100% - 24px); max-height: 90vh; max-height: 90dvh; border-radius: 20px; }
  .cr.cv-r6p7 .cr6p7-photo { max-width: 400px; margin-inline: auto; }
}
@media (max-width: 599px) {
  .cr.cv-r6p7 .cr6p7-foot { justify-content: center; }
}
@media (max-width: 359px) {
  .cr.cv-r6p7 .cr6p7-title { font-size: 24px; }
  .cr.cv-r6p7 .cr6p7-fact { padding: 10px 12px; }
}
/* wide: two columns (about 40 / 60); the left one stays in view while a long introduction scrolls (and scrolls on its own if the screen is too short for it) */
@media (min-width: 768px) {
  .cr.cv-r6p7 .cr6p7-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; padding: 22px 24px 24px; }
  .cr.cv-r6p7 .cr6p7-side {
    position: sticky; top: 0; align-self: start; max-height: calc(85vh - 46px); max-height: calc(85dvh - 46px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--cr-line-2) transparent;
  }
  /* a short screen: the photo (4:5 kept) gets narrower so that the title, the photo and the facts still fit in the box (296 / 362 px = everything else in the column) */
  .cr.cv-r6p7 .cr6p7-view { max-width: max(200px, calc((85vh - 296px) * .8)); max-width: max(200px, calc((85dvh - 296px) * .8)); margin-inline: auto; }
  .cr.cv-r6p7 .cr6p7-photo:has(.cr6p7-thumbs) .cr6p7-view { max-width: max(200px, calc((85vh - 362px) * .8)); max-width: max(200px, calc((85dvh - 362px) * .8)); }
  .cr.cv-r6p7 .cr6p7-main { align-self: stretch; margin-top: 0; }
  .cr.cv-r6p7 .cr6p7-title { padding-right: 0; font-size: 30px; }
  .cr.cv-r6p7 .cr6p7-bio { padding: 24px 26px; }
  .cr.cv-r6p7 .cr6p7-bio__head { padding-right: 34px; }   /* the x button sits over the card's top-right corner */
  .cr.cv-r6p7 .cr6p7-bio__t { font-size: 20px; }
}
/* reduced motion: the kit already stops every transition and animation under .cr; the backdrops are outside that rule */
@media (prefers-reduced-motion: reduce) {
  .cr.cv-r6p7 .cr6p7-dlg[open]::backdrop { animation: none; }
}