.elementor-19 .elementor-element.elementor-element-831780e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}body.elementor-page-19{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-58b3e56 */.rgm-home {
      /* POZADINA: zamijeni URL studio fotografijom iz WP Medije */
      --rgm-photo: url('https://rgm.mostarski.ba/wp-content/uploads/2026/07/radio-tast.webp');
      --rgm-surface: rgba(10, 14, 24, .55);
      --rgm-border: rgba(255, 255, 255, .12);
      --rgm-text: #f4f7fb;
      --rgm-muted: rgba(244, 247, 251, .72);
      --rgm-cyan: #4ec3e7;
      --rgm-yellow: #f2d21f;
      --rgm-green: #54b84c;
      --rgm-white: #f4f7fb;
      --rgm-blue: #6e86d8;
      position: relative;
      font-family: 'Space Grotesk', system-ui, sans-serif;
      color: var(--rgm-text);
      /* Sve stane u jedan ekran — bez scrolla */
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: clamp(20px, 3vh, 40px) clamp(20px, 4vw, 56px);
      box-sizing: border-box;
      isolation: isolate;
      overflow: hidden;
    }

    /* Studio fotografija + tamni overlay (fiksni sloj) */
    .rgm-home::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: var(--rgm-photo) center/cover no-repeat;
    }

    .rgm-home::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(1100px 560px at 50% -8%, rgba(78, 195, 231, .10), transparent 60%),
        linear-gradient(180deg, rgba(5, 8, 15, .82) 0%, rgba(5, 8, 15, .68) 45%, rgba(5, 8, 15, .88) 100%);
    }

    .rgm-home *,
    .rgm-home *::before,
    .rgm-home *::after {
      box-sizing: inherit;
      margin: 0;
      padding: 0
    }

    .rgm-wrap {
      max-width: 1160px;
      margin: 0 auto;
      width: 100%;
    }

    /* ─── Hero ──────────────────────────────────────────────────── */
    .rgm-hero {
      text-align: center;
      margin-bottom: clamp(20px, 3.5vh, 40px)
    }

    .rgm-czk {
      /* Logo Centra za kulturu Mostar — centriran, pretvoren u bijeli */
      display: block;
      margin: 0 auto 14px;
      height: clamp(62px, 8.5vh, 98px);
      width: auto;
      filter: invert(1);      /* crni crtež → bijeli */
      mix-blend-mode: screen; /* skriva eventualnu crnu (bivšu bijelu) pozadinu */
      opacity: .95;
    }

    .rgm-title {
      font-size: clamp(28px, 4.4vw, 52px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.015em;
      text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
    }

    .rgm-title span {
      color: var(--rgm-cyan)
    }

    .rgm-sub {
      margin-top: 10px;
      font-size: clamp(15px, 1.7vw, 18px);
      font-weight: 400;
      color: var(--rgm-muted);
      letter-spacing: .04em;
      text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
    }

    /* ─── FM skala (potpisni element) ───────────────────────────── */
    .rgm-dial {
      position: relative;
      max-width: 760px;
      margin: clamp(18px, 3vh, 30px) auto 0;
      padding-top: 32px;
    }

    .rgm-dial-scale {
      height: 40px;
      border-radius: 8px;
      border: 1px solid var(--rgm-border);
      background:
        repeating-linear-gradient(90deg,
          rgba(255, 255, 255, .30) 0 1px, transparent 1px calc(100%/82)),
        repeating-linear-gradient(90deg,
          rgba(255, 255, 255, .6) 0 1px, transparent 1px 10%),
        linear-gradient(180deg, rgba(10, 14, 24, .6), rgba(10, 14, 24, .35));
      background-size: 100% 12px, 100% 22px, 100% 100%;
      background-position: bottom, bottom, center;
      background-repeat: no-repeat;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .rgm-dial-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      color: var(--rgm-muted);
      margin-top: 8px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
    }

    .rgm-dial-marker {
      position: absolute;
      left: 5.4%;
      top: 0;
      bottom: 22px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .rgm-dial-marker::after {
      content: "";
      flex: 1;
      width: 2px;
      background: var(--rgm-cyan);
      box-shadow: 0 0 14px rgba(78, 195, 231, .9);
    }

    .rgm-dial-freq {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--rgm-cyan);
      white-space: nowrap;
      text-shadow: 0 0 18px rgba(78, 195, 231, .55);
      margin-bottom: 6px;
    }

    /* ─── Navigacione kartice ───────────────────────────────────── */
    .rgm-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 2vw, 22px);
    }

    .rgm-card {
      --card: var(--rgm-cyan);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: clamp(18px, 2vw, 24px);
      border-radius: 18px;
      border: 1px solid var(--rgm-border);
      background: var(--rgm-surface);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      text-decoration: none;
      color: var(--rgm-text);
      overflow: hidden;
      transition: transform .35s cubic-bezier(.2, .7, .3, 1),
        border-color .35s ease, box-shadow .35s ease;
    }

    .rgm-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(320px 180px at 50% -20%, var(--card), transparent 70%);
      opacity: 0;
      transition: opacity .35s ease;
    }

    .rgm-card:hover,
    .rgm-card:focus-visible {
      transform: translateY(-6px);
      border-color: color-mix(in srgb, var(--card) 60%, transparent);
      box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--card) 50%, transparent);
    }

    .rgm-card:hover::before,
    .rgm-card:focus-visible::before {
      opacity: .13
    }

    .rgm-card:focus-visible {
      outline: 2px solid var(--card);
      outline-offset: 3px
    }

    .rgm-card--aktuelno {
      --card: var(--rgm-yellow)
    }

    .rgm-card--produkcija {
      --card: var(--rgm-green)
    }

    .rgm-card--onama {
      --card: var(--rgm-white)
    }

    .rgm-card--kontakt {
      --card: var(--rgm-blue)
    }

    /* Logo slika — 4 RGM varijante (manja, da sve stane u ekran) */
    .rgm-logo {
      width: min(100%, clamp(110px, 15vh, 170px));
      margin: 0 auto;
      aspect-ratio: 1/1;
      border-radius: 14px;
      object-fit: cover;
      position: relative;
      z-index: 1;
      box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .6);
      transition: transform .35s cubic-bezier(.2, .7, .3, 1);
    }

    .rgm-card:hover .rgm-logo {
      transform: scale(1.03)
    }

    .rgm-card h3 {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .rgm-card p {
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--rgm-muted);
      position: relative;
      z-index: 1;
      flex: 1;
      text-align: center;
    }

    .rgm-card-arrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--card);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .rgm-card-arrow::after {
      content: "→";
      transition: transform .3s ease
    }

    .rgm-card:hover .rgm-card-arrow::after {
      transform: translateX(5px)
    }


    /* ─── Responsive ────────────────────────────────────────────── */
    @media(max-width:1020px) {
      .rgm-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .rgm-grid {
        grid-template-columns: 1fr
      }

      .rgm-logo {
        max-width: 220px;
        margin: 0 auto
      }

      .rgm-dial-labels span:nth-child(even) {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .rgm-card,
      .rgm-card::before,
      .rgm-card-arrow::after,
      .rgm-logo {
        transition: none
      }
    }/* End custom CSS */