/* =============================================
       CSS CUSTOM PROPERTIES
    ============================================= */
    :root {
      --navy:       #1a2d5a;
      --navy-dark:  #0f1d3d;
      --orange:     #f07820;
      --orange-light: #f9a254;
      --teal:       #3a8fa0;
      --teal-light: #e8f5f8;
      --gray-100:   #f4f6f9;
      --gray-200:   #e8ecf2;
      --gray-400:   #9aa3b2;
      --gray-600:   #5a6478;
      --gray-800:   #2e3444;
      --white:      #ffffff;
      --amd-blue:   #0085c2;
      --amd-dark:   #203A6B;
      --amd-oran:   #f39200;

      /*--font-display: 'Playfair Display', Georgia, serif;*/
      --font-display: 'Source Sans 3', sans-serif;
      --font-body:    'Source Sans 3', sans-serif;

      --container: 1140px;
      --gap:        24px;
      --radius:     4px;

      --transition: 200ms ease;
    }

    /* =============================================
       RESET & BASE
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.65;
      color: var(--gray-800);
      background: var(--white);
    }

    img { display: block; max-width: 100%; height: auto; }
    a  { color: inherit; text-decoration: none; }
    ul { list-style: none; }

    /* =============================================
       LAYOUT UTILITIES
    ============================================= */
    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: 20px;
    }

    .container ul {
      margin-left: 2em;
    }

    /* 4-column grid */
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
    }

    /* 3-column grid */
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
    }

    /* 2-column grid */
    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap);
    }

    /* =============================================
       TYPOGRAPHY
    ============================================= */
    h1, h2, h3, h4, h5 {
      font-family: var(--font-display);
      line-height: 1.25;
      color: var(--navy);
    }

    h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
    h2 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
    h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
    h4 { font-size: 1.05rem; }

    p { margin-bottom: 1em; }
    p:last-child { margin-bottom: 0; }

    .text-small  { font-size: 0.85rem; }
    .text-muted  { color: var(--gray-400); }
    .text-orange { color: var(--orange); }
    .text-navy   { color: var(--navy); }

    /* =============================================
       SECTION LABEL (coloured tag e.g. "Novosti")
    ============================================= */
    .section-label {
      position: absolute;
      display: inline-block;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: .06em;
      /* text-transform: uppercase; */
      color: var(--white);
      background: var(--amd-dark);
      padding: 4px 12px;
      /*border-radius: var(--radius);*/
      margin-bottom: 16px;
      margin-top: -10px;
      margin-left: -10px;
    }

    .section-label::after {
        content: "";
        position: absolute;
        top: 100%;          /* top aligned to bottom of element */
        right: 10px;        /* 10px from right side */
        width: 10px;
        height: 10px;

        background-image: url("/user-files/strelica-dark.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .section-label--orange { background: var(--amd-oran); }

    .section-label--orange::after {
       background-image: url("/user-files/strelica-orange.svg");
    }

    .section-label--blue::after {
       background-image: url("/user-files/strelica-blue.svg");
    }

    .section-label--teal   { background: var(--teal); }
    .section-label--blue   { background: var(--amd-blue); }

    .section-label--inline {
     position: relative;
    }

    .element-with-label {
      margin-top: 10px;
      margin-left: 10px;
    }

    /* =============================================
       BUTTONS
    ============================================= */
    .btn {
      display: inline-block;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 10px 24px;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
      border: 2px solid transparent;
    }

    .btn-primary {
      background: var(--orange);
      color: var(--white);
      border-color: var(--orange);
    }
    .btn-primary:hover { background: var(--orange-light); border-color: var(--orange-light); }

    .btn-outline {
      background: transparent;
      color: var(--navy);
      border-color: var(--navy);
    }
    .btn-outline:hover { background: var(--navy); color: var(--white); }

    /* =============================================
       CARDS
    ============================================= */
    .card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      overflow: hidden;
      transition: box-shadow var(--transition), transform var(--transition);
    }
    .card:hover {
      box-shadow: 0 8px 28px rgba(26,45,90,.12);
      transform: translateY(-2px);
    }

    .card__img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      background: var(--gray-200);
    }

    .card__body { padding: 16px 18px 20px; }

    .card__meta {
      font-size: 0.78rem;
      color: var(--orange);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .card__title {
      font-size: 1rem;
      margin-bottom: 8px;
    }

    .card__excerpt {
      font-size: 0.88rem;
      color: var(--gray-600);
      line-height: 1.55;
    }

    /* Horizontal card (thumbnail left) */
    .card--horizontal {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border-radius: var(--radius);
      border: 1px solid var(--gray-200);
      transition: box-shadow var(--transition);
    }
    .card--horizontal:hover { box-shadow: 0 4px 16px rgba(26,45,90,.1); }

    .card--horizontal .card__thumb {
      width: 72px;
      height: 72px;
      flex-shrink: 0;
      border-radius: var(--radius);
      object-fit: cover;
      background: var(--gray-200);
    }

    .card--horizontal .card__body {
      padding: 0;
      flex: 1;
    }

    .card--horizontal .card__title {
      font-size: 0.88rem;
      margin-bottom: 4px;
    }

    /* =============================================
       HEADER / NAVIGATION
    ============================================= */
    .site-header {
      background: var(--white);
      border-bottom: 2px solid var(--gray-200);
      position: sticky;
      top: 0;
      z-index: 200;
    }

    .header-inner {
      display: flex;
      align-items: end;
      justify-content: space-between;
      padding-block: 14px;
      gap: 20px;
    }

    /* Logo */
    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      flex-shrink: 0;
    }

    .logo__icon {
      width: 48px;
      height: 48px;
    }

    .logo__wordmark {
      line-height: 1;
    }

    .logo__alt {
      display: block;
      font-family: var(--font-body);
      font-size: 0.65rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--navy);
    }

    .logo__name {
      display: block;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--navy);
    }

    .logo__name span { color: var(--orange); }

    /* Tagline (center) */
    .header-tagline {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--navy);
      /*font-style: italic;*/
      text-align: center;
     font-weight: bold;
      flex: 1;
      margin-bottom: 0;
    }

    /* Header icons */
    .header-icons {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--gray-100);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy);
      transition: background var(--transition);
    }
    .icon-btn:hover { background: var(--gray-200); }
    .icon-btn svg { width: 18px; height: 18px; }

    .icon-btn--access {
      background: var(--navy);
      color: var(--white);
    }
    .icon-btn--access:hover { background: var(--navy-dark); }

    /* ── Primary Nav ── */
    .primary-nav {
      background: var(--white);
      border-top: 1px solid var(--gray-200);
    }

    .primary-nav__list {
      display: flex;
      justify-content: center;
    }
     
    .primary-nav__item {
      flex: 1;
    }

    .primary-nav__item a {
      display: block;
text-align: center;
      padding: 14px 20px;
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--gray-600);
      border-bottom: 5px solid transparent;
      transition: color var(--transition), border-color var(--transition);
    }
    .primary-nav__item a:hover,
    .primary-nav__item.active a {
      color: var(--navy);
      border-bottom-color: var(--orange);
    }

    /* ── Hamburger (CSS-only) ── */
    #nav-toggle { display: none; }

    .hamburger-label {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
    }
    .hamburger-label span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--navy);
      border-radius: 2px;
      transition: transform var(--transition), opacity var(--transition);
    }

    /* =============================================
       HERO / BREAKING NEWS BAND
    ============================================= */
    .news-band {
      background: var(--navy);
      color: var(--white);
      padding: 10px 0;
    }

    .news-band__inner {
      display: flex;
      align-items: center;
      gap: 16px;
      overflow: hidden;
    }

    .news-band__label {
      flex-shrink: 0;
      background: var(--orange);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: var(--radius);
    }

    .news-band__text {
      font-size: 0.88rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* =============================================
       MAIN CONTENT AREA
    ============================================= */
    .main-content {
      padding: 40px 0 60px;
    }

    /* ── Three-column news panel ── */
    .news-panel {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: var(--gap);
      align-items: stretch;
      margin-bottom: 50px;
    }

    /* Featured article (left) */
    .featured-article {}
    .featured-article__img {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      border-radius: var(--radius);
      background: var(--gray-200);
      margin-bottom: 14px;
    }

    .featured-article__byline {
      font-size: 0.78rem;
      color: var(--gray-400);
      margin-bottom: 4px;
    }

    .featured-article__title {
      font-size: 1.25rem;
      margin-bottom: 6px;
    }

    /* Magazine column (centre) */
    .magazine-col {
     /* border: 1px solid var(--gray-200);*/
      border-radius: var(--radius);
     /*  overflow: hidden; */
      position: relative;
    }

    .magazine-col__badge {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 52px;
      height: 52px;
      background: var(--orange);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 0.55rem;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      letter-spacing: .03em;
    }

    .magazine-col__list {
display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 25px;
 }
    .magazine-col__list li {
flex: 1;
 }

    .magazine-col__item {
      height: 100%;
      display: flex;
      gap: 12px;
      padding: 14px 14px;
      border-bottom: 1px solid var(--gray-200);
      transition: background var(--transition);

    }
    .magazine-col__item:last-child { border-bottom: none; }
    .magazine-col__item:hover { background: var(--gray-100); }

    .magazine-col__thumb {
      width: 64px;
     /* height: 64px; */
      border-radius: var(--radius);
      object-fit: cover;
      flex-shrink: 0;
      background: var(--gray-200);
    }

    .magazine-col__info { flex: 1; }
    .magazine-col__label {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--orange);
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .magazine-col__title {
      font-size: 0.88rem;
      font-family: var(--font-display);
      color: var(--navy);
      line-height: 1.3;
      margin-top: 2px;
    }
    .magazine-col__date {
      font-size: 0.72rem;
      color: var(--orange);
      margin-top: 4px;
    }

    /* Podcast column (right) */
    .podcast-col {
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      overflow: hidden;
   
    }

    .podcast-col__header {
      background: var(--teal);
      padding: 10px 14px;
    }
    .podcast-col__header-label {
      color: var(--white);
      font-weight: 600;
      font-size: 0.82rem;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .podcast-col__list {  
display: flex;
    flex-direction: column;
    height: 100%;
    background: #E6F2F4;
    padding-top: 25px;
}
.podcast-col__list li {  
    flex: 1;
}
    .podcast-col__item {
      height: 100%;
      display: flex;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid var(--gray-200);
      transition: background var(--transition);
    }
    .podcast-col__item:last-child { border-bottom: none; }
    .podcast-col__item:hover { background: var(--gray-100); }

    .podcast-col__thumb {
      width: 56px;
      /* height: 56px; */
      border-radius: var(--radius);
      object-fit: cover;
      flex-shrink: 0;
      background: var(--gray-200);
    }

    .podcast-col__info { flex: 1; }
    .podcast-col__ep {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--teal);
      text-transform: uppercase;
    }
    .podcast-col__title {
      font-size: 0.88rem;
      font-family: var(--font-display);
      color: var(--navy);
      line-height: 1.3;
    }
    .podcast-col__date {
      font-size: 0.72rem;
      color: var(--gray-400);
    }

    /* ── About section ── */
    .about-section {
      background: var(--gray-100);
      border-radius: var(--radius);
      padding: 36px 40px;
      margin-bottom: 50px;
    }

    .about-section__grid {
      display: grid;
      grid-template-columns: auto 1fr 1fr;
      gap: 40px;
      align-items: start;
    }

    .about-section p {
      font-size: 0.92rem;
      color: var(--gray-600);
    }

    /* ── Izdvojeno (Featured articles grid) ── */
    .featured-grid-section {
      margin-bottom: 50px;
      display: grid;
      grid-template-columns: 3fr 1fr;
       gap: var(--gap);

    }

    .fg-arrows a {
      display: block;
      width: 10px;
    }

    .featured-grid-section__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .featured-grid {
      display: grid;
      /*grid-template-columns: repeat(4, 1fr);*/
      /*grid-template-columns: auto 1fr auto;*/
      gap: var(--gap);
      align-items: center;
    }

    .fg-list-items {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
    }

    .featured-grid__item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 14px;
      border-left: 3px solid var(--orange);
      background: var(--white);
      border-radius: 0 var(--radius) var(--radius) 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
      transition: box-shadow var(--transition);
      min-height: 100px;
    }
    .featured-grid__item:hover { box-shadow: 0 6px 20px rgba(26,45,90,.1); }

    .featured-grid__item-text {
      font-family: var(--font-display);
      font-size: 0.92rem;
      color: var(--navy);
      line-height: 1.3;
    }

    /* Quote block (right side) */
    .quote-block {
      grid-column: 3 / 5;
      background: var(--teal-light);
      border-radius: var(--radius);
      padding: 28px 32px;
      position: relative;
    }

    .quote-block::before {
      content: '\201C';
      font-family: var(--font-display);
      font-size: 5rem;
      color: var(--teal);
      opacity: .25;
      position: absolute;
      top: 4px;
      left: 16px;
      line-height: 1;
    }

    .quote-block__text {
      font-style: italic;
      font-size: 0.95rem;
      color: var(--gray-700);
      line-height: 1.7;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }

    .quote-block__author {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--teal);
    }

    /* Slider arrows */
    .slider-arrows {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    .arrow-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--gray-200);
      background: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy);
      transition: background var(--transition);
    }
    .arrow-btn:hover { background: var(--navy); color: var(--white); }
    .arrow-btn svg { width: 14px; height: 14px; }

    /* ── Reader Reviews ── */
    .reviews-section {
      margin-bottom: 50px;
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
      margin-top: 20px;
    }

    .review-card {
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      font-size: 0.88rem;
      color: var(--gray-600);
      line-height: 1.65;
      border-top: 3px solid var(--navy);
    }

    /* ── Newsletter band ── */
    .newsletter-band {
      background: var(--amd-blue);
      border-radius: var(--radius);
      padding: 36px 40px;
      display: flex;
      align-items: center;
      gap: 40px;
      margin-bottom: 50px;
    }

    .newsletter-band__icon {
      flex-shrink: 0;
      width: 56px;
      height: 56px;
      color: var(--orange);
    }

    .newsletter-band__text {
      flex: 1;
    }

    .newsletter-band__title {
      color: var(--white);
      font-size: 1.1rem;
      margin-bottom: 4px;
    }

    .newsletter-band__sub {
      color: var(--gray-400);
      font-size: 0.88rem;
    }

    .newsletter-form {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .newsletter-input {
      padding: 10px 16px;
      border-radius: var(--radius);
      border: none;
      font-size: 0.88rem;
      width: 240px;
      font-family: var(--font-body);
      background: rgba(255,255,255);
      /* color: var(--white);*/
      outline: none;
      transition: background var(--transition);
    }
    .newsletter-input::placeholder { color: rgba(100,100,100,.45); }
   /* .newsletter-input:focus { background: rgba(255,255,255,.18); } */

    /* =============================================
       FOOTER
    ============================================= */
    .site-footer {
      background: var(--navy-dark);
      color: rgba(255,255,255,.75);
      padding: 40px 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      margin-bottom: 24px;
    }

    .footer-logo .logo__alt,
    .footer-logo .logo__name { color: var(--white); }

    .footer-tagline {
      font-size: 0.82rem;
      margin-top: 12px;
      opacity: .6;
    }

    .footer-support {
      font-size: 0.8rem;
      margin-top: 12px;
      opacity: .6;
    }

    .footer-col h5 {
      color: var(--white);
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .footer-col a {
      display: block;
      font-size: 0.84rem;
      color: rgba(255,255,255,.6);
      margin-bottom: 8px;
      transition: color var(--transition);
    }
    .footer-col a:hover { color: var(--orange); }

    .footer-contact { font-size: 0.84rem; opacity: .7; line-height: 1.8; }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.78rem;
      opacity: .5;
      flex-wrap: wrap;
      gap: 10px;
    }

    .footer-social {
      display: flex;
      gap: 12px;
    }

    .footer-social a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,.6);
      font-size: 0.9rem;
      transition: background var(--transition), color var(--transition);
    }
    .footer-social a:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }

    /* =============================================
       RESPONSIVE
    ============================================= */
    @media (max-width: 1024px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }

      .news-panel {
        grid-template-columns: 1fr 1fr;
      }

      .podcast-col {
        grid-column: 1 / 3;
      }

      .about-section {
        margin-bottom: 70px;
      }

      .featured-grid {
       /* grid-template-columns: repeat(2, 1fr); */
       grid-template-columns: 1fr;
      }

      .quote-block { grid-column: 1 / 3; }

      .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .featured-grid-section {
        grid-template-columns: 1fr;
      }

      #izdvojeno-heading {
        margin-top: -50px;
      }
    }

    @media (max-width: 768px) {
      /* Show hamburger */
      .hamburger-label { display: flex; }

      /* Hide header tagline and icons at mobile */
      .header-tagline { display: none; }

      /* Nav becomes collapsible */
      .primary-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms ease;
      }

      /* Checkbox hack – nav opens when checked */
      #nav-toggle:checked ~ .primary-nav {
        max-height: 400px;
      }

      /* Animate hamburger to X */
      #nav-toggle:checked ~ .header-inner .hamburger-label span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      #nav-toggle:checked ~ .header-inner .hamburger-label span:nth-child(2) {
        opacity: 0;
      }
      #nav-toggle:checked ~ .header-inner .hamburger-label span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      .primary-nav__list { flex-direction: column; }
      .primary-nav__item a {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding: 13px 20px;
      }
      .primary-nav__item a:hover,
      .primary-nav__item.active a {
        border-left-color: var(--orange);
        border-bottom: none;
        background: var(--gray-100);
      }

      /* Layouts → 1 column */
      .news-panel,
      .about-section__grid,
      .featured-grid,
      .reviews-grid,
      .grid-4,
      .grid-3,
      .grid-2,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .podcast-col { grid-column: 1; }
      .quote-block { grid-column: 1; }

      .newsletter-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
      }

      .newsletter-form { flex-direction: column; width: 100%; }
      .newsletter-input { width: 100%; }

      .fg-list-items {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .header-inner { padding-block: 12px; }
      .logo__name { font-size: 1.2rem; }
      .container { padding-inline: 14px; }
      .about-section { padding: 24px 20px; }
    }