/* Page section styles shared by all managed service pages.
   Promoted from /css/RadioDays.css (rdv2-*) with values unchanged.
   Brand: #3d1a6f (purple), #170a29 (dark), #fdb913 (yellow), #ed174c (red) */

/* Brand dots */
.svcblk-heading-dots {
    display: flex;
    gap: 8px;
    margin: 1rem 0 1.5rem;
}
.svcblk-heading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.svcblk-hdot-y { background: #fdb913; }
.svcblk-hdot-r { background: #ed174c; }
.svcblk-hdot-p { background: #3d1a6f; }

/* Sections */
.svcblk-section { padding: 5rem 0; }
.svcblk-section-alt { background: #f8f6fb; }
.svcblk-section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #170a29;
    margin-bottom: 0.5rem;
}
.svcblk-section p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
}

/* Pills */
.svcblk-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.svcblk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #170a29;
    background: #fff;
    box-shadow: 0 4px 16px rgba(61,26,111,0.1);
}
.svcblk-pill i { font-size: 0.5rem; }
.svcblk-pill-yellow i { color: #fdb913; }
.svcblk-pill-red i { color: #ed174c; }
.svcblk-pill-purple i { color: #3d1a6f; }

/* Cards */
.svcblk-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 20px rgba(61,26,111,0.08);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svcblk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(61,26,111,0.15);
}
.svcblk-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1.25rem;
}
.svcblk-icon-yellow { background: #fdb913; color: #170a29; }
.svcblk-icon-red { background: #ed174c; }
.svcblk-icon-purple { background: #3d1a6f; }
.svcblk-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #170a29;
    margin-bottom: 1rem;
}
.svcblk-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svcblk-card ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}
.svcblk-card ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #fdb913;
    font-size: 0.8rem;
    top: 2px;
}

/* Image + text */
.svcblk-imgtext {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.svcblk-imgtext img {
    max-width: 40%;
    height: auto;
    border-radius: 12px;
}
.svcblk-imgtext-right { flex-direction: row-reverse; }

/* On a phone the two columns stop being columns. BOTH variants stack the same
   way -- words first, picture after -- so a reader gets the point before the
   decoration, and an alternating left/right run down a page does not become a
   jumble of half-width images on a narrow screen. The markup puts the image
   first, so column-REVERSE is what lifts the text above it; that is the same
   technique the right-hand variant already uses across. */
@media (max-width: 768px) {
    .svcblk-imgtext,
    .svcblk-imgtext-right {
        flex-direction: column-reverse;
        gap: 1.25rem;
        align-items: stretch;
    }
    .svcblk-imgtext img {
        max-width: 100%;
        align-self: center;
    }
}

/* Call to action (values match the sitewide hv2-cta treatment) */
.svcblk-cta {
    background: #fdb913;
    color: #170a29;
    padding: 4rem 0;
    text-align: center;
}
.svcblk-cta h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
.svcblk-cta p {
    font-size: 1.1rem;
    max-width: 550px;
    margin: 0 auto 1.5rem;
}
.svcblk-btn-purple {
    background: #3d1a6f;
    color: #fff;
    border: 2px solid #3d1a6f;
    padding: 0.75rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.25s ease;
    display: inline-block;
}
.svcblk-btn-purple:hover { background: #170a29; border-color: #170a29; color: #fff; text-decoration: none; }

/* Logo strip */
.svcblk-logo-img { max-width: 70%; height: auto; }

/* Headline number tiles */
.svcblk-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}
.svcblk-stat-tile {
    flex: 1 1 160px;
    max-width: 220px;
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(61,26,111,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svcblk-stat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(61,26,111,0.15);
}
.svcblk-stat-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    color: #3d1a6f;
    margin-bottom: 0.4rem;
}
.svcblk-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #555;
}

/* Logo grid -- many logos, each with an optional name and link */
.svcblk-logogrid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}
.svcblk-logogrid-cell {
    flex: 1 1 150px;
    max-width: 200px;
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(61,26,111,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svcblk-logogrid-cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(61,26,111,0.15);
}
.svcblk-logogrid-link,
.svcblk-logogrid-link:hover {
    display: block;
    color: inherit;
    text-decoration: none;
}
.svcblk-logogrid-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 70px;
    height: auto;
    object-fit: contain;
}
.svcblk-logogrid-name {
    display: block;
    margin-top: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #555;
}
/* No logo: the name carries the tile on its own */
.svcblk-logogrid-name-only {
    margin-top: 0;
    font-size: 0.95rem;
    color: #3d1a6f;
}
/* The editor's empty image slot has to fit a small tile */
.svcblk-logogrid-cell .svcblk-img-empty {
    min-height: 80px;
    padding: 0.75rem;
    font-size: 0.75rem;
}
.svcblk-logogrid-cell .svcblk-img-empty i { font-size: 1.1rem; }

/* Button row */
.svcblk-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.svcblk-btnrow-item { display: inline-flex; align-items: center; }
.svcblk-btn-primary,
.svcblk-btn-secondary,
.svcblk-btn-outline {
    display: inline-block;
    padding: 0.65rem 2rem;
    border: 2px solid transparent;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}
.svcblk-btn-primary { background: #3d1a6f; border-color: #3d1a6f; color: #fff; }
.svcblk-btn-primary:hover { background: #170a29; border-color: #170a29; color: #fff; text-decoration: none; }
.svcblk-btn-secondary { background: #ed174c; border-color: #ed174c; color: #fff; }
.svcblk-btn-secondary:hover { background: #d1133f; border-color: #d1133f; color: #fff; text-decoration: none; }
.svcblk-btn-outline { background: transparent; border-color: #3d1a6f; color: #3d1a6f; }
.svcblk-btn-outline:hover { background: #3d1a6f; border-color: #3d1a6f; color: #fff; text-decoration: none; }

/* Application status button. The closed pill keeps the brand gold as an
   outline over a pale gold fill so the text stays readable on a white
   section -- gold text on white does not. */
.svcblk-apply {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.svcblk-apply-closed {
    display: inline-block;
    padding: 0.65rem 2rem;
    background: #fff8e6;
    border: 2px solid #fdb913;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #5a4300;
    cursor: default;
}

/* Standalone brand-dot divider section */
.svcblk-dots-divider {
    display: flex;
    gap: 10px;
    padding: 0.5rem 0;
}
.svcblk-dots-divider span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Per-section alignment. Optional: a section with no alignment set keeps its
   natural layout, which is what every page authored before this control has.
   Flex rows (image+text, pills, dot dividers) follow the same instruction as
   the text does, so one control governs the whole section. */
.svcblk-align-left { text-align: left; }
.svcblk-align-center { text-align: center; }
.svcblk-align-right { text-align: right; }
.svcblk-align-left .svcblk-heading-dots,
.svcblk-align-left .svcblk-pill-list,
.svcblk-align-left .svcblk-dots-divider,
.svcblk-align-left .svcblk-imgtext { justify-content: flex-start; }
.svcblk-align-center .svcblk-heading-dots,
.svcblk-align-center .svcblk-pill-list,
.svcblk-align-center .svcblk-dots-divider,
.svcblk-align-center .svcblk-imgtext { justify-content: center; }
.svcblk-align-right .svcblk-heading-dots,
.svcblk-align-right .svcblk-pill-list,
.svcblk-align-right .svcblk-dots-divider,
.svcblk-align-right .svcblk-imgtext { justify-content: flex-end; }
/* The tile, logo, button and apply rows answer to the same one control. */
.svcblk-align-left .svcblk-stats,
.svcblk-align-left .svcblk-logogrid,
.svcblk-align-left .svcblk-btnrow,
.svcblk-align-left .svcblk-apply { justify-content: flex-start; }
.svcblk-align-center .svcblk-stats,
.svcblk-align-center .svcblk-logogrid,
.svcblk-align-center .svcblk-btnrow,
.svcblk-align-center .svcblk-apply { justify-content: center; }
.svcblk-align-right .svcblk-stats,
.svcblk-align-right .svcblk-logogrid,
.svcblk-align-right .svcblk-btnrow,
.svcblk-align-right .svcblk-apply { justify-content: flex-end; }

/* Hidden sections render ghosted in the editor only */
.svcblk-hidden { opacity: .35; outline: 2px dashed #c9c2d8; }

/* Empty image slot -- editor only (the public page renders nothing) */
.svcblk-img-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 160px;
    padding: 1.5rem;
    border: 2px dashed #c9c2d8;
    border-radius: 12px;
    background: #faf9fc;
    color: #6b6480;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.svcblk-img-empty:hover { border-color: #3d1a6f; color: #3d1a6f; }
.svcblk-img-empty i { font-size: 1.6rem; }
.svcblk-imgtext .svcblk-img-empty { flex: 0 0 40%; max-width: 40%; }

/* Responsive */
@media (max-width: 991px) {
    .svcblk-section { padding: 3.5rem 0; }
}
@media (max-width: 767px) {
    .svcblk-imgtext { flex-direction: column; }
    .svcblk-imgtext-right { flex-direction: column; }
    .svcblk-imgtext img { max-width: 100%; }
    .svcblk-imgtext .svcblk-img-empty { flex: 1 1 auto; max-width: 100%; width: 100%; }
}
@media (max-width: 575px) {
    .svcblk-pill { font-size: 0.85rem; padding: 0.5rem 1rem; }
}

/* Responsive -- tiles, logos and buttons */
@media (max-width: 767px) {
    .svcblk-stats, .svcblk-logogrid { gap: 1rem; }
    .svcblk-stat-tile { flex: 1 1 calc(50% - 0.5rem); max-width: none; padding: 1.25rem 0.75rem; }
    .svcblk-stat-value { font-size: 1.6rem; }
    .svcblk-logogrid-cell { flex: 1 1 calc(50% - 0.5rem); max-width: none; }
}
@media (max-width: 575px) {
    .svcblk-stat-value { font-size: 1.45rem; }
    .svcblk-stat-label { font-size: 0.8rem; }
    .svcblk-logogrid-img { max-height: 56px; }
    /* Full-width taps beat a row of half-width buttons on a phone */
    .svcblk-btnrow, .svcblk-apply { flex-direction: column; align-items: stretch; }
    .svcblk-btnrow-item { display: block; width: 100%; }
    .svcblk-btnrow .btn,
    .svcblk-apply .btn,
    .svcblk-apply-closed { display: block; width: 100%; text-align: center; padding-left: 1rem; padding-right: 1rem; }
}

/* Typed content inside a studio section.
   The page wrappers this content used to live in (.biv2-blog-text on a post,
   the service page's own body) carry the tick bullets and the heading font.
   A studio section sits outside those wrappers, so without these rules the same
   markup rendered with plain browser bullets and the body font while every page
   beside it showed gold ticks and Montserrat headings. Values are copied from
   those existing rules on purpose: one visual answer, not a second one. */
.svcblk-richtext ul,
.svcblk-imgtext ul {
    list-style: none;
    padding-left: 0;
}
.svcblk-richtext ul li,
.svcblk-imgtext ul li {
    position: relative;
    padding: 0.4rem 0 0.4rem 2rem;
}
.svcblk-richtext ul li::before,
.svcblk-imgtext ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #fdb913;
}
.svcblk-richtext h2, .svcblk-richtext h3, .svcblk-richtext h4,
.svcblk-imgtext h2, .svcblk-imgtext h3, .svcblk-imgtext h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #170a29;
}