/* Responsive layer for core pages: home, afisha, feed, categories, search, event, articles, 404 + shared header/footer.
   Loaded last on index/afisha/feed/categories/search/event (event.html also renders 404/410, categories.html renders /articles).
   Breakpoints: phone <=600, small tablet 601-760, tablet 761-1100, desktop >1100. */

/* ---------- Typography: balanced headings, no orphans in short leads ---------- */
:is(.hero,.page-header,.section-heading,.weekend-heading,.feed-invite,.collections,.faq,.error-page,.evp-hero,.article-head) :is(h1,h2){text-wrap:balance}
:is(.page-header,.section-heading,.feed-invite,.error-page)>p,.event-card .card-title{text-wrap:pretty}

/* ---------- Header ---------- */
@media(max-width:1100px){
  /* app-ui.css forces nav links to display:block at <=760, which pins the text to the top of a 44px target */
  .header nav a{display:inline-flex!important;align-items:center}
  /* (!important also undoes site.css hiding the last link, О нас, at <=1100: the nav row scrolls, nothing has to disappear) */
  .header nav{scroll-padding-inline:16px}
}
@media(max-width:600px){
  /* Two compact rows instead of three: logo + actions, then city + scrollable menu */
  .header{gap:8px 10px;padding-block:10px}
  .header .logo{order:1;margin-right:auto;min-height:44px;display:flex;align-items:center}
  .header .header-tools{order:2;margin-left:0;gap:6px}
  .header .city{order:3;flex:0 1 auto;min-width:0;margin-right:4px;font-size:0;letter-spacing:0;gap:0}
  .header .city .choice-trigger{font-size:14px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;gap:8px;max-width:100%}
  .header .city .choice-trigger>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header nav{order:4;flex:1 1 96px;width:auto;min-width:0;align-self:center;align-items:center;gap:18px;padding:0 0 0 4px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .header nav a:last-child{padding-right:24px}
  .header .header-account{padding-inline:14px}
}
@media(max-width:350px){
  .header .brand-word{width:92px}
  .header .header-tools{gap:4px}
  .header .header-account{padding-inline:12px;font-size:13px}
  .header nav{gap:16px}
}

/* ---------- Home hero ---------- */
@media(min-width:761px) and (max-width:1100px){
  .hero .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 22px}
  .hero .hero-actions>.button{flex:0 0 auto}
}
@media(min-width:761px) and (max-width:1023px){
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
  .hero h1{font-size:clamp(56px,8.2vw,83px);letter-spacing:-.05em}
  .hero{min-height:0;padding-top:28px}
  .hero-art{height:380px}
}
@media(min-width:601px) and (max-width:760px){
  /* single-column hero: the «Тут что-то намечается» note must clear the action row */
  .hero-art{margin-top:40px}
}
@media(max-width:600px){
  .hero-description{text-wrap:balance}
  .feed-invite h2 br{display:none}
  .feed-invite h2 span{display:block}
  .hero .art-label{display:none}
}

/* ---------- Event cards and grids ---------- */
@media(min-width:700px) and (max-width:900px){
  .event-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 14px}
}
.card-ticket{white-space:nowrap}
@media(max-width:600px){
  .card-overlay .card-ticket{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .card-overlay .like{flex:none}
}
@media(max-width:359px){
  /* 2 columns on a 320 screen leave ~120px per cover: the heart moves to the free top-right corner so the ticket keeps its words */
  .card-overlay{top:8px;align-items:flex-end}
  .card-overlay .like{position:absolute;top:0;right:0}
  .card-overlay .card-ticket{max-width:100%;padding-inline:12px}
}

/* ---------- Home sections ---------- */
/* Mood cards: base layout used to put the cat absolutely over the title. Here it lives in its own grid cell. */
body:has(.hero) .mood{--mood-img:175px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;align-content:stretch;text-align:left}
body:has(.hero) .mood .mood-number{grid-column:1/-1;grid-row:1}
body:has(.hero) .mood h3{grid-column:1/-1;grid-row:2;overflow-wrap:break-word}
body:has(.hero) .mood img{grid-column:2;grid-row:3;position:static;width:var(--mood-img);height:var(--mood-img);align-self:end;justify-self:end}
body:has(.hero) .mood .mood-link{grid-column:1;grid-row:3;position:static;align-self:end;min-height:24px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
@media(min-width:1024px) and (max-width:1279px){body:has(.hero) .mood{--mood-img:140px}}
@media(min-width:601px) and (max-width:1023px){
  body:has(.hero) .mood{--mood-img:140px;min-height:0;grid-template-rows:auto auto 1fr auto}
  body:has(.hero) .mood img{grid-column:1/-1;margin-top:-8px}
  body:has(.hero) .mood .mood-link{grid-row:4;margin-top:4px}
}
/* Home, 3-column widths: 8 / 4 cards would leave an orphan row; show full rows when "Вся афиша" leads further */
@media(min-width:700px) and (max-width:1100px){
  body:has(.hero) #event-grid:has(~#more:not([hidden]))>.event-card:nth-child(n+7),
  body:has(.hero) #weekend-grid>.event-card:nth-child(4){display:none}
}
@media(max-width:600px){
  .category-teaser .section-heading{align-items:flex-start;text-align:left}
  .weekend-heading{flex-direction:column;align-items:flex-start;gap:12px}
}

@media(max-width:600px){
  /* Mood cards: number and title on top, cat beside the title instead of sitting on it */
  body:has(.hero) .mood{min-height:0;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:auto auto 1fr;column-gap:8px;padding:20px 16px 20px 20px}
  body:has(.hero) .mood .mood-number{grid-column:1/-1}
  body:has(.hero) .mood h3{grid-column:1;grid-row:2;margin:12px 0 16px;font-size:22px;letter-spacing:-.5px}
  body:has(.hero) .mood img{grid-row:2/4;width:112px;height:112px}
  /* App promo: the CTA must stay inside the card */
  .app-promo{padding:24px 20px}
  .app-promo .button{white-space:normal;width:100%;justify-content:space-between;text-align:left}
}

/* ---------- Footer ---------- */
@media(max-width:600px){
  /* first link group runs down the left column, the two short ones stack on the right */
  .footer-top>div:nth-of-type(1){grid-row:span 2}
  .footer-top a{min-height:44px}
  .footer-top>div{gap:0}
}
/* ---------- /afisha ---------- */
@media(max-width:1100px){
  .afisha-page{padding-top:clamp(20px,4vw,44px)}
  .afisha-page>.section-heading h1{margin-top:0}
}

/* ---------- /feed ---------- */
@media(max-width:900px){
  /* app-ui hides .header .saved on the feed, which also took away the account link (it shares the class) */
  body:has(.feed-list-page) .header .header-account{display:inline-flex;align-items:center}
  /* keyboard hint floats above the Мимо / Хочу row instead of covering it */
  .feed-hint{bottom:calc(100px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
}
@media(min-width:601px) and (max-width:900px){
  /* tablet portrait: the cover gets half the card, so the copy no longer floats in an empty middle */
  .feed-list-page .feed-item-media{flex-basis:50%}
  .feed-list-page .feed-item-desc{-webkit-line-clamp:3}
  .feed-list-page .feed-item h2{font-size:clamp(28px,4.4vw,38px)}
}

/* ---------- /categories (and /articles, built from the same shell) ---------- */
@media(max-width:900px){
  .directory-tools{flex-wrap:wrap;align-items:center}
  .directory-tools>input{flex:1 1 240px;min-width:0;min-height:48px}
  .directory-tools>span{flex:0 0 auto}
}
@media(max-width:900px) and (pointer:coarse),(max-width:600px){
  .directory-subs a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- /events/<id> (overrides event-page.css) ---------- */
/* the dashed perforation sits at a fixed height: keep the price on one line by sizing it to the ticket width */
.evp-ticket{container-type:inline-size}
.evp-ticket-price{font-size:min(32px,7.4cqi)}
@media(min-width:700px) and (max-width:1100px){
  #related-grid>.event-card:nth-child(4){display:none}
}
@media(max-width:900px){
  /* the floating «Купить билет» bar must not cover the footer's last row */
  body:has(.evp-sticky) .site-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* empty states (/articles without materials, afisha with no results) */
.empty{margin-bottom:clamp(40px,6vw,80px)}
@media(max-width:600px){
  .empty h2,.empty h3{font-size:clamp(24px,7vw,32px);line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
  .empty{padding-inline:20px}
}

/* ---------- Sheets (dialog.product-sheet: city / sort / date choices, feed filters) ---------- */
@media(max-width:600px){
  /* on a phone the sheet rises from the bottom edge, within thumb reach, like iOS */
  .product-sheet{margin:auto 0 0;width:100%;max-width:100%;max-height:calc(100dvh - 40px);border-width:1px 0 0;border-radius:28px 28px 0 0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom));animation:core-sheet-in .34s cubic-bezier(.32,.72,0,1)}
  .product-sheet.is-closing{opacity:1;animation:core-sheet-out .16s cubic-bezier(.32,.72,0,1) forwards}
  .product-sheet h2{margin-top:6px}
  .product-sheet .sheet-actions{bottom:calc(-20px - env(safe-area-inset-bottom));padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
@keyframes core-sheet-in{from{transform:translateY(100%)}}
@keyframes core-sheet-out{to{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){
  .product-sheet,.product-sheet.is-closing{animation:none}
}