/* Info pages (RG, Cruks, payments, promotions, FAQ, contact, studios, legal). */

.info { padding-bottom: var(--space-section); }
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.info-aside { position: sticky; top: 20px; display: grid; gap: 16px; }

.slogan { font: 400 clamp(48px, 8vw, 124px)/.86 var(--font-display); text-transform: uppercase; }
.slogan em { font-style: normal; color: var(--color-brand); }

.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.icard { border: 2px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-surface); padding: 20px; display: grid; gap: 8px; align-content: start; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.icard:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-lg); }
.icard__no { font: 400 34px/1 var(--font-display); color: var(--color-brand-ink); }
.icard h3 { font: 400 24px/1 var(--font-display); text-transform: uppercase; }
.icard p { color: var(--color-text-2); font-size: 15px; }
.icard .icon { width: 28px; height: 28px; color: var(--color-teal); }
.icard--dark { background: var(--color-ink); color: var(--color-on-ink); }
.icard--dark p { color: var(--color-on-ink-2); }
.icard--dark .icard__no { color: var(--color-mustard); }

.studios { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.studio { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px; border: 2px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-surface); position: relative; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.studio:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.studio__img { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--color-ink); }
.studio__img img { width: 100%; height: 100%; object-fit: cover; }
.studio strong { font: 400 20px/1.05 var(--font-display); text-transform: uppercase; display: block; }
.studio a::before { content: ""; position: absolute; inset: 0; }
.studio span { font-size: 13px; color: var(--color-text-2); }

.faq-cats { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq-cats__nav { position: sticky; top: 20px; display: grid; gap: 2px; border: 2px solid var(--color-ink); border-radius: var(--radius-lg); padding: 10px; background: var(--color-surface); }
.faq-cats__nav a { padding: 8px 10px; border-radius: var(--radius-md); font-weight: 700; font-size: 15px; }
.faq-cats__nav a:hover { background: var(--color-bg-2); }
.faq-group { scroll-margin-top: 20px; }
.faq-group + .faq-group { margin-top: var(--space-48); }
.faq-group h2 { font: 400 clamp(28px, 3vw, 40px)/1 var(--font-display); text-transform: uppercase; margin-bottom: 12px; }

.promo { display: grid; grid-template-columns: 240px 1fr; border: 2px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.promo__stub { background: var(--color-ink); color: var(--color-on-ink); padding: 20px; display: grid; gap: 6px; align-content: start; border-right: 2px dashed var(--color-on-ink); }
.promo__stub b { font: 400 28px/1 var(--font-display); text-transform: uppercase; }
.promo__body { padding: 20px; display: grid; gap: 10px; }
.promo__body h2 { font: 400 32px/1 var(--font-display); text-transform: uppercase; }

@media (max-width: 1100px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-aside { position: static; }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .faq-cats { grid-template-columns: 1fr; }
  .faq-cats__nav { position: static; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cards3 { grid-template-columns: 1fr; }
  .promo { grid-template-columns: 1fr; }
  .promo__stub { border-right: 0; border-bottom: 2px dashed var(--color-on-ink); }
}
@media (max-width: 560px) {
  .cards4 { grid-template-columns: 1fr; }
}
.studio strong a { display: block; }
@media (max-width: 860px) { .faq-cats__nav { display: block; columns: 2 150px; } .faq-cats__nav a { display: block; break-inside: avoid; } }
.slogan em { display: inline-block; }
.faq-cats__nav a:focus { outline: 3px solid var(--color-teal); outline-offset: -3px; }