/* DCT Broadcast reusable GNS overlay renderers.
   All coordinates are authored against a 1920x1080 stage. */

.gns-stage {
    position: absolute;
    z-index: 40;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform-origin: center center;
    pointer-events: none;
}

.gns-graphic {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.gns-graphic.is-visible {
    visibility: visible;
    animation: gnsGraphicIn 520ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.gns-graphic.is-leaving {
    visibility: visible;
    animation: gnsGraphicOut 340ms ease-in forwards;
}

.html-template-host {
    inset: 0;
    width: 1920px;
    height: 1080px;
    overflow: visible;
}

.html-template-host.is-visible {
    pointer-events: none;
}

@keyframes gnsGraphicIn {
    from { opacity: 0; transform: translateY(70px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gnsGraphicOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(70px); }
}

/* GNS angled lower third */
.gns-angled {
    inset: 0;
    --gns-primary: #5B9083;
    --gns-secondary: #353D30;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35));
}

.gns-angled svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 1920px;
    height: 1080px;
}

.gns-angled .gns-primary { fill: var(--gns-primary); }
.gns-angled .gns-secondary { fill: var(--gns-secondary); }

.gns-angle-logo {
    position: absolute;
    z-index: 6;
    left: 0;
    top: 804px;
    width: 275px;
    height: 275px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .32));
}

.gns-angle-label {
    position: absolute;
    z-index: 5;
    left: 295px;
    top: 804px;
    width: 217px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0 8px 0 18px;
    color: #fff;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gns-angle-title {
    position: absolute;
    z-index: 5;
    left: 317px;
    top: 889px;
    width: 820px;
    height: 102px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 10px 0 0;
    color: #fff;
    font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1.01;
    letter-spacing: -.02em;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
}

.gns-angle-body {
    position: absolute;
    z-index: 5;
    left: 317px;
    top: 962px;
    width: 820px;
    height: 42px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.gns-angle-subtitle {
    position: absolute;
    z-index: 5;
    left: 316px;
    top: 1014px;
    width: 620px;
    height: 58px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* Previous GNS layout retained as an operator-selectable design. */
.gns-angled.layout-original .gns-angle-logo {
    left: 0;
    top: 824px;
    width: 245px;
    height: 245px;
}

.gns-angled.layout-original .gns-angle-label {
    left: 247px;
    top: 806px;
    width: 205px;
    height: 83px;
    justify-content: center;
    padding: 0 8px 0 2px;
    font-size: 30px;
}

.gns-angled.layout-original .gns-angle-title {
    left: 250px;
    top: 890px;
    width: 790px;
    height: 113px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 58px;
    line-height: 1.02;
}

.gns-angled.layout-original .gns-angle-body {
    left: 252px;
    top: 958px;
    width: 700px;
    height: 48px;
    font-size: 23px;
}

.gns-angled.layout-original .gns-angle-subtitle {
    left: 250px;
    top: 1009px;
    width: 560px;
    height: 69px;
    font-size: 31px;
}

/* GNS teal scripture card */
.gns-card {
    inset: 0;
    filter: drop-shadow(0 18px 35px rgba(0, 0, 0, .4));
}

.gns-card svg {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
}

.gns-card-header {
    position: absolute;
    left: 426px;
    top: 611px;
    width: 1067px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    color: #fff;
}

.gns-card-heading {
    min-width: 0;
}

.gns-card-kicker {
    color: #dfece8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.gns-card-reference {
    margin-top: 2px;
    overflow: hidden;
    color: #fff;
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.gns-card-live {
    flex: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.gns-card-body {
    position: absolute;
    left: 395px;
    top: 704px;
    width: 1130px;
    height: 330px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: #fff;
}

.gns-card-language {
    min-width: 0;
    overflow: hidden;
    padding: 14px 30px;
}

.gns-card-language + .gns-card-language {
    border-left: 1px solid rgba(255, 255, 255, .25);
}

.gns-card-tag {
    color: #25342e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.gns-card-copy {
    height: 270px;
    margin-top: 12px;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1.35;
}

.gns-card-brand {
    position: absolute;
    left: 410px;
    bottom: 16px;
    color: #1f2b26;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gns-card.lyrics-mode .gns-card-body {
    grid-template-columns: 1fr;
}

.gns-card.lyrics-mode #gns-card-primary-panel {
    padding: 18px 80px 12px;
    text-align: center;
}

.gns-card.lyrics-mode #gns-card-secondary-panel {
    display: none;
}

.gns-card.lyrics-mode .gns-card-copy {
    height: 278px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    white-space: pre-line;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.28;
    text-align: center;
}

.gns-card.lyrics-mode .gns-card-tag {
    color: rgba(31, 43, 38, .82);
    font-size: 13px;
}

.gns-card.lyrics-mode .gns-card-reference {
    font-size: 31px;
}

/* GNS scrolling/strip banner family */
.gns-banner {
    --gns-primary: #5B9083;
    --gns-secondary: #353D30;
    left: 77px;
    right: 77px;
    bottom: 43px;
    height: 76px;
    display: flex;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35));
}

.gns-banner-label {
    position: relative;
    z-index: 4;
    width: 230px;
    min-width: 230px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    border-radius: 17px 0 0 17px;
    background: var(--gns-secondary);
    color: #F7F7F5;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.gns-banner-label::after {
    position: absolute;
    top: 0;
    right: -38px;
    width: 39px;
    height: 76px;
    content: "";
    background: var(--gns-secondary);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.gns-banner-body {
    position: relative;
    flex: 1;
    height: 76px;
    margin-left: 1px;
    overflow: hidden;
    background: var(--gns-primary);
    color: #F7F7F5;
}

.gns-banner-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 60px 0 58px;
    white-space: nowrap;
    font-size: 23px;
    font-weight: 500;
}

.gns-banner.is-ticker .gns-banner-message {
    width: max-content;
    min-width: 100%;
    padding-left: 100%;
    animation: gnsBannerScroll 18s linear infinite;
}

.gns-banner.variant-rounded .gns-banner-body {
    border-radius: 0 18px 18px 0;
}

.gns-banner.variant-pill .gns-banner-body {
    border-radius: 0 38px 38px 0;
}

.gns-banner.variant-notch .gns-banner-body {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 29%,
        calc(100% - 24px) 50%,
        100% 71%,
        100% 100%,
        0 100%
    );
}

.gns-banner.variant-step .gns-banner-body {
    clip-path: polygon(
        0 0,
        calc(100% - 32px) 0,
        calc(100% - 32px) 16px,
        100% 16px,
        100% 60px,
        calc(100% - 32px) 60px,
        calc(100% - 32px) 100%,
        0 100%
    );
}

.gns-banner.variant-chamfer .gns-banner-body {
    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        0 100%
    );
}

@keyframes gnsBannerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}


/* --------------------------------------------------------------------------
   DCT broadcast target layout
   Sermon/subject follows the approved Faith & Obedience reference.
   Lyrics use a Presenter-style lower-screen treatment.
   -------------------------------------------------------------------------- */

/* Keep the approved lower-third proportions and lift it when a strip is live. */
.gns-stage.has-banner .gns-angled {
    top: -130px;
}

/* Approved announcement / notice strip, aligned beneath the sermon lower third. */
.gns-banner {
    left: 290px;
    right: auto;
    bottom: 36px;
    width: 900px;
    height: 82px;
    display: flex;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .32));
}

.gns-banner-label {
    width: 275px;
    min-width: 275px;
    height: 82px;
    padding: 0 26px;
    border-radius: 17px 0 0 17px;
    background: var(--gns-secondary);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .04em;
}

.gns-banner-label::after {
    right: -40px;
    width: 41px;
    height: 82px;
    background: var(--gns-secondary);
}

.gns-banner-body {
    height: 82px;
    margin-left: 1px;
    border-radius: 0 19px 19px 0;
    background: var(--gns-primary);
}

.gns-banner-message {
    padding: 0 48px 0 28px;
    font-size: 24px;
    font-weight: 600;
}

/* The label chevron extends 40px into the message panel.
   Reserve a hard safe zone so announcement text can never
   render underneath it. */
.gns-banner:not(.is-ticker) .gns-banner-message {
    left: 52px;
    right: 0;
}

.gns-banner.variant-rounded .gns-banner-body,
.gns-banner.variant-pill .gns-banner-body {
    border-radius: 0 19px 19px 0;
}

/* Song lyrics: camera-feed-friendly floating presenter panel.
   The rest of the 1920x1080 overlay stays transparent so OBS can show video. */
.gns-card.lyrics-mode {
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .30));
}

.gns-card.lyrics-mode svg {
    display: block;
}

.gns-card.lyrics-mode::before,
.gns-card.lyrics-mode::after {
    display: none;
}

/* The reference design uses only the olive pill shape, not header text. */
.gns-card.lyrics-mode .gns-card-header {
    display: none;
}

.gns-card-section-pill {
    display: none;
}

.gns-card.lyrics-mode .gns-card-section-pill {
    position: absolute;
    z-index: 5;
    left: 426px;
    top: 611px;
    width: 1067px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 48px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .11em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .30);
}

/* Match the supplied reference geometry:
   teal rounded card from x349..1570, y644..1080;
   olive pill overlaps the top edge. */
.gns-card.lyrics-mode .gns-card-body {
    z-index: 3;
    left: 385px;
    top: 690px;
    width: 1150px;
    height: 370px;
    display: grid;
    grid-template-rows: 1fr;
    color: #fff;
}

.gns-card.lyrics-mode.has-translation .gns-card-body {
    grid-template-rows: minmax(0, 1.55fr) minmax(0, .95fr);
}

.gns-card.lyrics-mode #gns-card-primary-panel,
.gns-card.lyrics-mode #gns-card-secondary-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 58px;
    text-align: center;
}

.gns-card.lyrics-mode #gns-card-secondary-panel {
    display: none;
}

.gns-card.lyrics-mode.has-translation #gns-card-secondary-panel {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, .30);
    border-left: 0;
}

.gns-card.lyrics-mode .gns-card-tag {
    display: none;
}

.gns-card.lyrics-mode .gns-card-copy {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    white-space: pre-line;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.012em;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, .72),
        0 0 10px rgba(0, 0, 0, .28);
}

/* Bilingual worship slides: original is dominant, translation supportive. */
.gns-card.lyrics-mode.has-translation #gns-card-english {
    max-height: 225px;
    font-size: 42px;
    line-height: 1.07;
}

.gns-card.lyrics-mode.has-translation #gns-card-french {
    max-height: 132px;
    color: rgba(255, 255, 255, .95);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.09;
}

/* Single-language songs can use more of the card. */
.gns-card.lyrics-mode:not(.has-translation) #gns-card-english {
    max-height: 300px;
    font-size: 60px;
    line-height: 1.07;
}

/* Keep the reference visually clean. */
.gns-card.lyrics-mode .gns-card-brand {
    display: none;
}

/* Scripture remains a dedicated bilingual presenter card. */
.gns-card:not(.lyrics-mode) {
    --gns-card-primary: #5C9083;
    --gns-card-secondary: #353D30;
}

.gns-card:not(.lyrics-mode) .gns-card-logo {
    width: 50px;
    height: 50px;
    flex: none;
    object-fit: contain;
}

.gns-card:not(.lyrics-mode) .gns-card-brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
}