/* Shared styles for: getting-started, tickets/support, training pages */

/* ── Shared hero ─────────────────────────────────────────────────────────── */
#gs-hero, #tk-hero, #tr-hero {
    background: var(--dark);
    padding: 80px 0 72px;
    border-bottom: 1px solid var(--border);
}
.gs-hero-inner, .tk-hero-inner, .tr-hero-inner { max-width: 760px; }
.gs-hero-title, .tk-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--white);
    margin: 0 0 20px;
    line-height: 1.1;
}
.tr-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--white);
    margin: 0 0 20px;
    line-height: 1.1;
}
.tr-hero-title span { color: var(--red); }
.gs-hero-sub, .tk-hero-sub, .tr-hero-sub {
    font-size: 1rem;
    color: var(--white);
    line-height: 1.7;
    margin: 0;
    max-width: 620px;
}
.tk-hero-stats {
    display: flex;
    gap: 48px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}
.tk-stat { display: flex; flex-direction: column; gap: 6px; }
.tk-stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.03em;
    line-height: 1;
}
.tk-stat-label { font-size: 0.78rem; color: var(--color-black); }

/* ── Shared section heading ──────────────────────────────────────────────── */
.gs-section-heading, .tk-section-heading, .tr-section-heading {
    font-family: var(--font-display);
    font-size: var(--fs-subheading);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--black);
    margin: 0 0 40px;
    line-height: 1.2;
}

/* ── Getting Started: guides ─────────────────────────────────────────────── */
#gs-guides {
    background: var(--ultra-light-blue);
    padding: var(--section-gap) 0;
    border-bottom: 1px solid var(--gray-200);
}
.gs-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.gs-guide-card {
    background: var(--white);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    box-shadow: 4px 4px 0 0 var(--red);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gs-guide-icon { width: 28px; height: 28px; color: var(--red); }
.gs-guide-icon svg { width: 100%; height: 100%; }
.gs-guide-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--black);
    margin: 0;
    line-height: 1.4;
}
.gs-guide-desc {
    font-size: 0.82rem;
    color: var(--color-black);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.gs-btn-sm { padding: 9px 18px; font-size: 0.75rem; }

/* ── Getting Started: Getting Started Videos ─────────────────────────────── */
#gs-videos {
    background: var(--off-white, #ffffff);
    padding: var(--section-gap) 0;
    border-bottom: 1px solid var(--gray-200);
}

/* ── Getting Started: video & playlist cards (shared grid) ───────────────── */
#gs-playlists { background: var(--white); padding: var(--section-gap) 0; border-bottom: 1px solid var(--gray-200); }
.gs-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}
.gs-video-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s;
}
.gs-video-card:hover { border-color: var(--red); }
.gs-video-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--gray-200);
}
.gs-video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-video-card__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: var(--white);
    border-radius: var(--radius);
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
}
.gs-video-card__play svg { width: 26px; height: 26px; margin-left: 2px; }
.gs-video-card:hover .gs-video-card__play { opacity: 1; transform: scale(1.05); }
.gs-video-card__title {
    padding: var(--space-md);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--black);
    line-height: 1.4;
}

/* ── Getting Started: Tutorials, Tips & Tricks (YouTube icon links) ──────── */
#gs-tutorials { background: var(--off-white, #ffffff); padding: var(--section-gap) 0; border-bottom: 1px solid var(--gray-200); }
.gs-yt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.gs-yt-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-xl);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: border-color 0.2s;
}
.gs-yt-link:hover { border-color: var(--red); }
.gs-yt-link img { width: 100%; max-width: 240px; height: auto; }

/* ── Getting Started: Go To (quick links) ────────────────────────────────── */
#gs-goto { background: var(--white); padding: var(--section-gap) 0; border-bottom: 1px solid var(--gray-200); }
.gs-goto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.gs-goto-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    padding: var(--space-xl);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gs-goto-link:hover { box-shadow: 4px 4px 0 0 var(--gray-400); }
.gs-goto-link__icon { width: auto; height: 56px; }
.gs-goto-link__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--black);
    transition: color 0.2s;
}
.gs-goto-link:hover .gs-goto-link__text { color: var(--red); }

/* ── Tickets: Process steps ──────────────────────────────────────────────── */
#tk-process {
    background: var(--ultra-light-blue);
    padding: var(--section-gap) 0;
}
.tk-steps { display: flex; flex-direction: column; gap: 2px; }
.tk-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-200);
    align-items: start;
}
.tk-step:last-child { border-bottom: none; }
.tk-step-num {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--red);
    padding-top: 3px;
}
.tk-step-body h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 8px;
}
.tk-step-body p {
    font-size: 0.85rem;
    color: var(--color-black);
    line-height: 1.65;
    margin: 0;
}

/* ── Tickets: Support types ──────────────────────────────────────────────── */
#tk-types {
    background: var(--ultra-light-blue);
    padding: var(--section-gap) 0;
    border-bottom: 1px solid var(--gray-200);
}
.tk-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
/* Static bordered card — matches the homepage "Special Offers" .promo-card
   exactly (gray-400 border, 2px radius, hard offset shadow, no hover). */
.tk-type-card {
    background: var(--white);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius);
    box-shadow: 4px 4px 0 0 var(--gray-400);
    padding: var(--space-xl);
}
.tk-type-icon { width: 28px; height: 28px; color: var(--red); margin-bottom: 20px; }
.tk-type-icon svg { width: 100%; height: 100%; }
.tk-type-card h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--black);
    margin: 0 0 12px;
}
.tk-type-card p { font-size: 0.82rem; color: var(--color-black); line-height: 1.65; margin: 0; }

/* ── Tickets: Request screen screenshot ──────────────────────────────────── */
#tk-screenshot {
    background: var(--ultra-light-blue);
    padding: var(--section-gap) 0;
    border-bottom: 1px solid var(--gray-200);
}
.tk-figure {
    margin: 0;
    max-width: 900px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}
.tk-figure a { display: block; }
.tk-figure img { display: block; width: 100%; height: auto; }

/* ── Tickets: CTA ────────────────────────────────────────────────────────── */
#tk-cta { background: var(--ultra-light-blue); padding: var(--section-gap) 0; }
.tk-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.tk-cta-heading {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--black);
    margin: 0 0 12px;
    line-height: 1.15;
}
.tk-cta-sub { font-size: 0.9rem; color: var(--color-black); margin: 0; line-height: 1.7; max-width: 480px; }
.tk-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Training: Courses ───────────────────────────────────────────────────── */
#tr-courses {
    background: var(--white);
    padding: var(--section-gap) 0;
    border-bottom: 1px solid var(--gray-200);
}
.tr-courses-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.tr-course-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
    align-items: start;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: var(--space-lg);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tr-course-card:hover { box-shadow: 4px 4px 0 0 var(--gray-400); }
.tr-course-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}
.tr-course-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}
.tr-course-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.tr-course-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.tr-course-title a { color: var(--black); text-decoration: none; }
.tr-course-title a:hover { color: var(--red); }
.tr-course-desc {
    font-size: var(--fs-body);
    color: var(--color-black);
    line-height: 1.75;
    margin: 0;
}
.tr-course-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-xs); }
.tr-course-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
}
.tr-course-more svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.tr-course-more:hover svg { transform: translateX(4px); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .gs-guides-grid { grid-template-columns: 1fr; }
    .tk-types-grid { grid-template-columns: 1fr; }
    .gs-yt-grid { grid-template-columns: repeat(2, 1fr); }
    .tk-cta-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
}
@media (max-width: 640px) {
    .tr-course-card { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .gs-video-grid { grid-template-columns: 1fr; }
    .gs-yt-grid { grid-template-columns: 1fr; }
    .gs-goto-grid { grid-template-columns: 1fr; }
    .tk-hero-stats { gap: 32px; }
}