/* ========================================================================
   AGROPROGNOZA LANDING v2.0 (2026-07-07)
   Landing + lista čekanja. Render: gutenberg-pocetna-agro.html (front page)
   + [ap_waitlist] shortcode (inc/waitlist.php).
   Paleta: poljoprivreda + leto (zelena polja / pšenično zlato / letnje nebo).
   Namespace: .ap-* (BEM). Dark mode: [data-theme="dark"] (inc/theme-mode.php).
   Grafikoni: inline SVG, boje serija fiksne (AGMET palete), ose/mreža kroz
   CSS varijable → rade u obe teme.
   ======================================================================== */

/* NAPOMENA: --ap-* CSS varijable, dark-mode baza, header glass i .ap-fhub
   footer hub žive u style.css (site-wide). Ovde su SAMO landing sekcije. */

/* Sakrij naslov stranice na front page-u */
.home .ct-page-title,
.home .entry-header { display: none; }

/* ------------------------------------------------------------------------
   HERO — duboko zelenilo sa zlatnim (letnjim) odsjajem
   ------------------------------------------------------------------------ */
.ap-hero {
    background:
        radial-gradient(circle at 82% 12%, rgba(251, 191, 36, 0.22), transparent 42%),
        radial-gradient(circle at 12% 88%, rgba(163, 230, 53, 0.14), transparent 45%),
        linear-gradient(150deg, #14532d 0%, #166534 45%, #1a2417 100%);
    color: #f8fafc;
    text-align: center;
    padding: 84px 24px 88px;
    border-radius: 0 0 28px 28px;
}
.ap-hero__inner { max-width: 880px; margin: 0 auto; }
.ap-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fde68a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 26px;
}
.ap-hero__title {
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 18px;
    color: #ffffff;
}
.ap-hero__title em {
    font-style: normal;
    background: var(--ap-gradient-summer, linear-gradient(135deg, #fbbf24, #a3e635));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ap-hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.16rem);
    line-height: 1.65;
    color: #d9e5d0;
    max-width: 660px;
    margin: 0 auto 32px;
}
.ap-hero__cta {
    display: inline-block;
    background: var(--ap-gradient-primary, linear-gradient(135deg, #16a34a, #65a30d));
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.02rem;
    padding: 15px 34px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: var(--ap-transition, all 0.2s ease);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4);
}
.ap-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(22, 163, 74, 0.5); }
.ap-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}
.ap-hero__stats li {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d9e5d0;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
}
.ap-hero__trust { margin-top: 24px; font-size: 0.88rem; color: #9db392; }
.ap-hero__trust a { color: #a3e635; text-decoration: none; }
.ap-hero__trust a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------------
   PROBLEM STRIP — obična prognoza vs agro odgovor
   ------------------------------------------------------------------------ */
.ap-problem { max-width: 960px; margin: 64px auto 0; padding: 0 24px; text-align: center; }
.ap-problem__title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--ap-text-primary, #1a2e1a);
    margin: 0 0 26px;
}
.ap-problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.ap-problem__card {
    border-radius: var(--ap-radius, 14px);
    padding: 22px 24px;
    border: 1px solid var(--ap-border-color, #d7ddcb);
    background: var(--ap-card-bg, #fff);
}
.ap-problem__card--generic { opacity: 0.75; }
.ap-problem__card--agro { border-color: var(--ap-green, #16a34a); box-shadow: 0 10px 26px rgba(22, 163, 74, 0.12); }
.ap-problem__label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 12px;
}
.ap-problem__card--generic .ap-problem__label { background: var(--ap-bg-secondary, #f4f6ef); color: var(--ap-text-muted, #6b7a63); }
.ap-problem__card--agro .ap-problem__label { background: rgba(22, 163, 74, 0.14); color: var(--ap-green-dark, #15803d); }
[data-theme="dark"] .ap-problem__card--agro .ap-problem__label { color: #4ade80; }
.ap-problem__card p { margin: 0; color: var(--ap-text-secondary, #44553f); line-height: 1.6; font-size: 0.98rem; }
.ap-problem__card--agro p strong { color: var(--ap-text-primary, #1a2e1a); }

/* ------------------------------------------------------------------------
   FEATURES — 6 kartica (šta pokazuje → koju odluku podržava)
   ------------------------------------------------------------------------ */
.ap-features { max-width: 1160px; margin: 0 auto; padding: 64px 24px 12px; }
.ap-features__title,
.ap-shots__title,
.ap-disease__title,
.ap-indices__title,
.ap-crops__title,
.ap-waitlist-section__title {
    text-align: center;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    color: var(--ap-text-primary, #1a2e1a);
    margin: 0 0 10px;
}
.ap-features__sub,
.ap-shots__sub,
.ap-disease__sub,
.ap-indices__sub,
.ap-crops__sub,
.ap-waitlist-section__sub {
    text-align: center;
    color: var(--ap-text-secondary, #44553f);
    max-width: 620px;
    margin: 0 auto 42px;
    line-height: 1.6;
}
.ap-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ap-card {
    background: var(--ap-card-bg, #ffffff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    border-radius: var(--ap-radius, 14px);
    padding: 26px 24px;
    transition: var(--ap-transition, all 0.2s ease);
}
.ap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(26, 46, 26, 0.10);
    border-color: var(--ap-green, #16a34a);
}
.ap-card__icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--ap-radius-small, 8px);
    background: rgba(22, 163, 74, 0.12);
    color: var(--ap-green, #16a34a);
    margin-bottom: 16px;
}
.ap-card:nth-child(even) .ap-card__icon { background: rgba(245, 158, 11, 0.14); color: var(--ap-amber, #f59e0b); }
.ap-card__icon svg { width: 26px; height: 26px; }
.ap-card__title { font-size: 1.08rem; font-weight: 700; color: var(--ap-text-primary, #1a2e1a); margin: 0 0 8px; }
.ap-card__desc { font-size: 0.94rem; line-height: 1.6; color: var(--ap-text-secondary, #44553f); margin: 0; }

/* ------------------------------------------------------------------------
   SHOWCASE — SVG grafikoni ("Zavirite u AgroPrognozu")
   ------------------------------------------------------------------------ */
.ap-shots { max-width: 1160px; margin: 0 auto; padding: 72px 24px 8px; }
.ap-shots__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ap-shot {
    background: var(--ap-card-bg, #ffffff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    border-radius: var(--ap-radius, 14px);
    padding: 22px 22px 16px;
    overflow: hidden;
}
.ap-shot--wide { grid-column: 1 / -1; }
.ap-shot__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ap-amber, #f59e0b);
    margin: 0 0 4px;
}
.ap-shot__title { font-size: 1.06rem; font-weight: 700; color: var(--ap-text-primary, #1a2e1a); margin: 0 0 14px; }
.ap-shot__fig { margin: 0; }
.ap-shot__fig svg { width: 100%; height: auto; display: block; }
.ap-shot__caption {
    font-size: 0.87rem;
    color: var(--ap-text-muted, #6b7a63);
    line-height: 1.55;
    margin: 12px 0 4px;
}
.ap-shot__caption strong { color: var(--ap-text-secondary, #44553f); }
.ap-shot__legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font-size: 0.8rem; color: var(--ap-text-muted, #6b7a63); }
.ap-shot__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ap-shot__dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* SVG ose/mreža/tekst — tema-svesno */
.ap-ch__grid { stroke: var(--ap-border-color, #d7ddcb); stroke-width: 1; opacity: 0.6; }
.ap-ch__axis { fill: var(--ap-text-muted, #6b7a63); font-size: 11px; }
.ap-ch__day { fill: var(--ap-text-secondary, #44553f); font-size: 10.5px; font-weight: 700; }
.ap-ch__note { fill: var(--ap-text-secondary, #44553f); font-size: 11.5px; font-weight: 700; }
.ap-ch__lbl { fill: var(--ap-text-secondary, #44553f); font-size: 11.5px; }

/* ------------------------------------------------------------------------
   MODELI BOLESTI
   ------------------------------------------------------------------------ */
.ap-disease { max-width: 960px; margin: 0 auto; padding: 72px 24px 0; text-align: center; }
.ap-disease__punch {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 800;
    color: var(--ap-green-dark, #15803d);
    margin: 26px 0 8px;
}
[data-theme="dark"] .ap-disease__punch { color: #4ade80; }
.ap-disease__note { font-size: 0.92rem; color: var(--ap-text-muted, #6b7a63); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.ap-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.ap-chips li {
    background: var(--ap-card-bg, #fff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    color: var(--ap-text-secondary, #44553f);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------------
   POKAZATELJI (indeksi) — grid čipova sa ikonicom
   ------------------------------------------------------------------------ */
.ap-indices { max-width: 1160px; margin: 0 auto; padding: 72px 24px 0; }
.ap-indices__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 880px; margin: 0 auto; }
.ap-index {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--ap-card-bg, #fff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    border-radius: var(--ap-radius, 14px);
    padding: 16px 18px;
}
.ap-index__emoji { font-size: 1.4rem; line-height: 1; margin-top: 2px; }
.ap-index__name { font-weight: 700; font-size: 0.97rem; color: var(--ap-text-primary, #1a2e1a); margin: 0 0 3px; }
.ap-index__desc { font-size: 0.87rem; color: var(--ap-text-muted, #6b7a63); margin: 0; line-height: 1.5; }

/* ------------------------------------------------------------------------
   ZA KOGA — kulture/publike
   ------------------------------------------------------------------------ */
.ap-crops { max-width: 1160px; margin: 0 auto; padding: 72px 24px 0; }
.ap-crops__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ap-crop {
    background: var(--ap-card-bg, #fff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    border-radius: var(--ap-radius, 14px);
    padding: 22px 20px;
    text-align: center;
    transition: var(--ap-transition, all 0.2s ease);
}
.ap-crop:hover { border-color: var(--ap-amber, #f59e0b); transform: translateY(-3px); }
.ap-crop__emoji { font-size: 2rem; display: block; margin-bottom: 10px; }
.ap-crop__name { font-weight: 800; color: var(--ap-text-primary, #1a2e1a); margin: 0 0 6px; font-size: 1.02rem; }
.ap-crop__desc { font-size: 0.86rem; color: var(--ap-text-muted, #6b7a63); margin: 0; line-height: 1.5; }
.ap-crops__escape { text-align: center; margin: 22px 0 0; font-size: 0.94rem; color: var(--ap-text-secondary, #44553f); }
.ap-crops__escape strong { color: var(--ap-green-dark, #15803d); }
[data-theme="dark"] .ap-crops__escape strong { color: #4ade80; }

/* ------------------------------------------------------------------------
   TRUST / METOD
   ------------------------------------------------------------------------ */
.ap-trust { max-width: 880px; margin: 64px auto 0; padding: 0 24px; text-align: center; }
.ap-trust__box {
    background: var(--ap-bg-secondary, #f4f6ef);
    border-radius: var(--ap-radius, 14px);
    padding: 28px 30px;
    color: var(--ap-text-secondary, #44553f);
    line-height: 1.65;
    font-size: 0.97rem;
}
.ap-trust__box a { color: var(--ap-green-dark, #15803d); font-weight: 600; text-decoration: none; }
.ap-trust__box a:hover { text-decoration: underline; }
[data-theme="dark"] .ap-trust__box a { color: #4ade80; }
.ap-trust__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ap-trust__facts li {
    background: var(--ap-card-bg, #fff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ap-text-secondary, #44553f);
    padding: 6px 14px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------------
   WAITLIST SEKCIJA + FORMA (.ap-wl — render inc/waitlist.php)
   ------------------------------------------------------------------------ */
.ap-waitlist-section {
    max-width: 760px;
    margin: 72px auto 0;
    padding: 0 24px;
    scroll-margin-top: 90px;
}
.ap-wl { max-width: 760px; margin: 26px auto 84px; padding: 0 24px; }
.ap-wl__form {
    background: var(--ap-card-bg, #ffffff);
    border: 1px solid var(--ap-border-color, #d7ddcb);
    border-radius: var(--ap-radius, 14px);
    padding: 30px 28px;
    box-shadow: 0 10px 30px rgba(26, 46, 26, 0.07);
}
.ap-wl__hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }
.ap-wl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ap-wl__field label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ap-text-secondary, #44553f);
    margin-bottom: 6px;
}
.ap-wl__req { color: var(--ap-amber, #f59e0b); }
.ap-wl__field input,
.ap-wl__field select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ap-border-color, #d7ddcb);
    border-radius: var(--ap-radius-small, 8px);
    background: var(--ap-bg-primary, #ffffff);
    color: var(--ap-text-primary, #1a2e1a);
    font-size: 0.97rem;
    transition: var(--ap-transition, all 0.2s ease);
}
.ap-wl__field input:focus,
.ap-wl__field select:focus {
    outline: none;
    border-color: var(--ap-green, #16a34a);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.ap-wl__gdpr {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.85rem; line-height: 1.55;
    color: var(--ap-text-muted, #6b7a63);
    margin: 4px 0 20px; cursor: pointer;
}
.ap-wl__gdpr input { margin-top: 3px; accent-color: var(--ap-green, #16a34a); }
.ap-wl__gdpr a { color: var(--ap-green-dark, #15803d); }
[data-theme="dark"] .ap-wl__gdpr a { color: #4ade80; }
.ap-wl__submit {
    width: 100%;
    background: var(--ap-gradient-primary, linear-gradient(135deg, #16a34a, #65a30d));
    color: #ffffff;
    border: none;
    font-weight: 700;
    font-size: 1.02rem;
    padding: 14px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--ap-transition, all 0.2s ease);
}
.ap-wl__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(22, 163, 74, 0.4); }
.ap-wl__submit:disabled { opacity: 0.65; cursor: wait; }
.ap-wl__msg { margin: 14px 0 0; font-size: 0.92rem; text-align: center; color: var(--ap-green-dark, #15803d); }
.ap-wl__msg--error { color: #dc2626; }
.ap-wl__success {
    background: rgba(22, 163, 74, 0.10);
    border: 1px solid var(--ap-green, #16a34a);
    border-radius: var(--ap-radius, 14px);
    color: var(--ap-text-primary, #1a2e1a);
    text-align: center;
    font-weight: 600;
    padding: 26px 24px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .ap-features__grid { grid-template-columns: repeat(2, 1fr); }
    .ap-shots__grid { grid-template-columns: 1fr; }
    .ap-crops__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ap-hero { padding: 60px 18px 64px; }
    .ap-features { padding: 48px 18px 8px; }
    .ap-features__grid { grid-template-columns: 1fr; gap: 16px; }
    .ap-problem__grid { grid-template-columns: 1fr; }
    .ap-indices__grid { grid-template-columns: 1fr; }
    .ap-crops__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ap-shots { padding: 52px 18px 4px; }
    .ap-shot { padding: 16px 14px 12px; }
    .ap-wl__row { grid-template-columns: 1fr; margin-bottom: 0; }
    .ap-wl__field { margin-bottom: 16px; }
    .ap-wl__form { padding: 24px 18px; }
    .ap-waitlist-section { margin: 56px auto 0; }
    .ap-wl { margin: 20px auto 64px; padding: 0 18px; }
}