/* Сторінка «Таро»: сорочка й оберт карт, однаковий розмір карт у пробному розкладі, малюнки карт, безкоштовний висновок,
   пропозиція розбору під ним, фокус. */

/* Пробний розклад (без вкладок: фото свого розкладу додають лише під час замовлення) */
.tarot-free{margin-top:8px}

/* Видимий фокус там, де components.css прибирає обведення */
.reading-head h2:focus{outline:none}
.reading-head h2:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.manual-card .card-select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Пробний розклад: три однакові колонки. Сорочка, карта з малюнком і CSS-карта — одного розміру
   й однакових пропорцій (як малюнки колоди, 480×768) на будь-якій ширині. */
.card-spread{grid-template-columns:repeat(3,minmax(0,1fr))} /* довга назва не розширює свою колонку */
.spread-position{min-width:0}
.spread-position>p{text-align:center} /* «Що варто помітити» на вузькому екрані переноситься — обидва рядки по центру над картою */
/* Підписи позицій, карти й підписи під картами — у спільних рядках, тож усе стоїть на одній лінії,
   навіть коли «Що варто помітити» на телефоні займає два рядки */
@supports (grid-template-rows:subgrid){
  .card-spread{grid-template-rows:repeat(3,auto);row-gap:0}
  .spread-position{display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
  .spread-position>p{align-self:start}
}
.card-spread .tarot-card{aspect-ratio:480/768;min-height:0;align-self:start;container-type:inline-size}
.card-spread .tarot-card.revealed{animation:none} /* замість старого reveal-card — оберт нижче */

/* Карта з малюнком колоди Селени (і сорочка): сам малюнок, підпис — окремим рядком під картою */
.tarot-card.tarot-card--art{display:block;padding:0;background:none;border:0;outline:0;border-radius:0;box-shadow:none;color:var(--ink)}
.tarot-card--art::after{content:none}
.tarot-card--art .card-art{height:100%;box-shadow:7px 7px 0 var(--ink)}
/* Місце під підпис є ще до відкриття карт — нічого не стрибає, коли карти відкриваються */
.card-art-caption{min-height:2.6em;margin-top:16px;text-align:center;font-weight:800;font-size:15px;line-height:1.25;letter-spacing:-.01em;overflow-wrap:break-word}
.card-art-caption span{display:block}
.card-art-caption small{display:block;margin-top:4px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* Карта без малюнка: назва зменшується так, щоб найдовше слово вміщалося в карту цілим
   (--name-em — ширина цього слова в em, її міряє tarot.js) */
.card-spread .card-name>span{font-size:min(24px,calc(100cqi / var(--name-em,8)));overflow-wrap:normal}
.card-spread .card-name>small{font-size:min(12px,13cqi)}
.card-name-probe{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;font-size:100px}

/* Оберт карти: пів оберту, tarot.js міняє сорочку на карту, ще пів оберту (тривалість — як TURN у tarot.js) */
.card-spread .tarot-card.is-turning-out{animation:card-turn-out 170ms cubic-bezier(.55,0,1,.45) forwards}
.card-spread .tarot-card.is-turning-in{animation:card-turn-in 170ms cubic-bezier(0,.55,.45,1)}
.card-spread .card-art-caption:not(:empty){animation:card-caption-in .3s ease-out}
@keyframes card-turn-out{from{transform:perspective(900px) rotateY(0)}to{transform:perspective(900px) rotateY(90deg)}}
@keyframes card-turn-in{from{transform:perspective(900px) rotateY(-90deg)}to{transform:perspective(900px) rotateY(0)}}
@keyframes card-caption-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .card-spread .tarot-card,.card-spread .card-art-caption{animation:none!important}
}

/* Безкоштовний висновок «Що кажуть карти разом» */
.tarot-insight{margin-top:38px;padding:clamp(20px,4vw,34px);background:#fffdf8;border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.tarot-insight>h3{font-family:var(--font-display);font-size:clamp(21px,2.4vw,27px);line-height:1.2;letter-spacing:-.045em;margin-top:8px}
.tarot-insight .reading-text{margin-top:16px}
.tarot-insight .reading-text:empty{display:none}
.tarot-insight .reading-text>:first-child{margin-top:0}
.tarot-insight .reading-text>:last-child{margin-bottom:0}
.tarot-insight .reading-text h2,.tarot-insight .reading-text h3{font-size:18px;margin:22px 0 8px}
.tarot-insight--crisis{background:var(--mint)}
.tarot-insight-status{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:15px;font-weight:650;line-height:1.5;color:var(--dim)}

/* Пропозиція повного розбору під висновком: «Одне питання» на цих картах і менше посилання «Три питання» */
.reading-after .photo-offer{margin-top:34px}
.photo-offer .button{gap:14px}
.tarot-offer h3{text-wrap:balance}
.tarot-offer>.tarot-offer-actions{flex:0 1 300px;display:grid;gap:14px;justify-items:start}
.tarot-offer-more{margin:0;font-size:14px;line-height:1.55}
.tarot-offer-more .text-link{display:inline;line-height:1.6;font-weight:800}
.tarot-offer-more .text-link svg{display:inline-block;vertical-align:-3px;margin-left:6px}
.tarot-offer-more span{display:block;margin-top:4px;font-size:13px}
/* Старі посилання «?mode=photo»: підказка, де додати фото свого розкладу */
.tarot-photo-note{max-width:790px;margin:26px auto 0}
.tarot-photo-note>div:last-child{flex:0 1 auto}

@media(max-width:800px){
  .card-spread .card-name>span{font-size:min(23px,calc(100cqi / var(--name-em,8)))}
}
@media(max-width:620px){
  .tarot-card--art .card-art{box-shadow:3px 3px 0 var(--ink)}
  .card-art-caption{margin-top:10px;font-size:clamp(11px,3.35vw,13px);line-height:1.2} /* «Справедливість» уміщається в колонку й на 360 px */
  .card-art-caption small{font-size:11px;letter-spacing:.02em}
  .tarot-insight{box-shadow:4px 4px 0 var(--ink)}
  .reading-after .photo-offer,.tarot-photo-note{padding:20px;box-shadow:4px 4px 0 var(--ink)}
  .photo-offer .button{width:100%;white-space:normal;text-align:center;text-wrap:balance}
  .tarot-offer>.tarot-offer-actions{flex-basis:100%;justify-items:stretch}
}
@media(max-width:580px){
  /* Вужча карта на телефоні: менше повітря між символом і назвою, щоб усе вмістилося в пропорції малюнка */
  .card-spread .tarot-card:not(.tarot-card--art){padding:14px 7px;gap:12px}
  .card-spread .tarot-card.revealed svg{width:28px;height:28px}
  .card-spread .card-name>span{font-size:min(18px,calc(100cqi / var(--name-em,8)))}
  .card-spread .card-name>small{margin-top:6px}
}
/* Без subgrid підписи позицій вирівнюємо запасом висоти (на телефоні вони бувають у два рядки) */
@supports not (grid-template-rows:subgrid){
  @media(max-width:580px){.spread-position>p{min-height:52px}}
}

/* Посилання на бібліотеку значень: біля пробного розкладу й під кожною картою розкладу */
.tarot-library-link{margin-top:12px;font-size:14px}
.reading-list .reading-card-link{margin-top:14px;line-height:1.6}
.tarot-library-link .text-link,.reading-card-link .text-link{display:inline;line-height:1.6}
.tarot-library-link .text-link svg,.reading-card-link .text-link svg{display:inline-block;vertical-align:-3px;margin-left:6px}

/* Пари сусідніх карт під розкладом: посилання на підбір двох карт (/tarot/poiednannia/#id|id) */
.reading-pairs{margin-top:26px;padding:16px 20px 18px;background:var(--lilac);border:2px solid var(--ink)}
.reading-pairs .eyebrow{color:var(--blue)}
.reading-pairs ul{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.reading-pairs .text-link{display:inline;font-size:15px;line-height:1.6;color:var(--ink)}
.reading-pairs .text-link svg{display:inline-block;vertical-align:-3px;margin-left:6px}
@media(max-width:620px){.reading-pairs{margin-top:20px;padding:14px 16px 16px}.reading-pairs .text-link{font-size:14px}}

/* «Є конкретне питання?» унизу: під описом рядок про формати на кілька питань (selena_offers_tarot_more()) */
.tarot-paid-prompt h2+p{font-size:14px;max-width:510px}
.tarot-paid-prompt .tarot-paid-more{margin:12px 0 0;max-width:560px;font-size:14px;line-height:1.6}
.tarot-paid-more .text-link{display:inline;font-size:inherit;line-height:1.6;text-underline-offset:4px}

/* «Ще безкоштовно» (inc/hub.php): на цій сторінці весь текст по центру, а блок читається зліва */
.tarot-main .hub-more{margin-top:64px}