/*!
 * MHP tema — prikazi 10 radova na /web-dizajn/ (G4-1, Marko 5. 10.). Učitava se samo na toj stranici (functions.php).
 * Radovi su generički koncepti: svaki ima vlastitu paletu (imenovane varijable --rp-* po konceptu – to nije MHP paleta)
 * i koristi samo fontove iz brand kita (Archivo, Lato, DM Sans; T5/G1 – bez Google Fontsa).
 * Raspored se ravna prema širini prikaza (container queries), ne prema zaslonu: isti prikaz na mobitelu i računalu,
 * bez preklapanja teksta i slike (tekst i slika su u odvojenim stupcima mreže).
 */

/* Visina prati širinu (ispod ~550 px najmanje 300 px), pa se prikaz u širokom jednom stupcu (tablet) samo skalira. */
.mhp-rad__prikaz { container-type: inline-size; width: 100%; height: auto; aspect-ratio: 11 / 6; min-height: 300px; min-width: 0; } /* izričita širina – inače se min. visina kroz omjer prenese u širinu 550 px */
.mhp-rad, .mhp-rad__okvir { min-width: 0; }

/* ---------- Zajednički kostur prikaza ---------- */
.rp {
  --rp-naslov-v: 6.6cqw;
  height: 100%; position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 38cqw; grid-template-rows: auto minmax(0, 1fr);
  column-gap: 4cqw; padding: 5cqw 6cqw;
  background: var(--rp-poz); color: var(--rp-tekst); font-family: var(--mhp-font-tekst);
}
.rp__nav { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 3cqw; min-width: 0; }
.rp__znak { font-family: var(--mhp-font-naslov); font-weight: 800; font-size: max(11px, 3cqw); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.rp__linkovi { font-family: var(--mhp-font-oznaka); font-size: max(9px, 2.2cqw); opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp__tekst { align-self: center; align-self: safe center; min-width: 0; } /* „safe”: ako je viši od reda, ne ulazi u navigaciju */
.rp__kicker { font-family: var(--mhp-font-oznaka); font-size: max(9px, 2.1cqw); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rp-naglasak); margin-bottom: 2.4cqw; }
.rp__naslov { font-family: var(--mhp-font-naslov); font-weight: 800; font-size: var(--rp-naslov-v); line-height: 1.02; letter-spacing: -.02em; }
.rp__naslov em { font-style: normal; color: var(--rp-naglasak); }
.rp__pod { font-size: max(10px, 2.4cqw); opacity: .8; margin-top: 1.6cqw; }
.rp__gumb { display: inline-block; margin-top: 4cqw; font-family: var(--mhp-font-oznaka); font-size: max(9px, 2.2cqw); font-weight: 700; letter-spacing: .06em; padding: 1.8cqw 3.6cqw; border-radius: 999px; background: var(--rp-gumb); color: var(--rp-gumb-tekst); white-space: nowrap; }
.rp__slika { align-self: center; justify-self: center; width: 100%; min-width: 0; }
.rp__slika svg { display: block; width: 100%; height: auto; max-height: 34cqw; margin: 0 auto; }
.rp__brojke { display: flex; gap: 5cqw; margin-top: 3.4cqw; font-size: max(9px, 2cqw); opacity: .85; }
.rp__brojke b { display: block; font-family: var(--mhp-font-naslov); font-weight: 900; font-size: max(14px, 4.4cqw); line-height: 1; color: var(--rp-naglasak); opacity: 1; }

/* SVG boje po konceptu */
.rp .ft { fill: var(--rp-tekst); } .rp .fa { fill: var(--rp-naglasak); } .rp .fp { fill: var(--rp-poz-svg, var(--rp-poz)); }
.rp .f1 { fill: var(--rp-f1); } .rp .f2 { fill: var(--rp-f2); } .rp .f3 { fill: var(--rp-f3); }
.rp .st { fill: none; stroke: var(--rp-tekst); } .rp .sa { fill: none; stroke: var(--rp-naglasak); } .rp .s1 { fill: none; stroke: var(--rp-f1); } .rp .s2 { fill: none; stroke: var(--rp-f2); }

/* ---------- 01 Uljara Otilijeta – editorijalno, maslina ---------- */
.rp--otilijeta { --rp-poz: #EEF0E2; --rp-tekst: #2C3320; --rp-naglasak: #6B7A3A; --rp-gumb: #3E4A26; --rp-gumb-tekst: #F4F2E6; --rp-f1: #C9A646; --rp-f2: #7C8C4E; --rp-f3: #5C6B3A; }
.rp--otilijeta .rp__znak { font-family: var(--mhp-font-tekst); font-weight: 700; letter-spacing: .32em; }
.rp--otilijeta .rp__naslov { font-family: var(--mhp-font-tekst); font-weight: 400; letter-spacing: -.01em; --rp-naslov-v: 7cqw; }
.rp--otilijeta .rp__naslov em { font-style: italic; }
.rp--otilijeta .rp__gumb { border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 02 Konoba Nataa – Jadran, fine dining ---------- */
.rp--nataa { --rp-poz: #0F2A44; --rp-tekst: #F3EBDD; --rp-naglasak: #D9B77E; --rp-gumb: #D9B77E; --rp-gumb-tekst: #0F2A44; --rp-f1: #F3EBDD; --rp-f2: #E4D7C1; --rp-f3: #3B6C8E; }
.rp--nataa { background: linear-gradient(180deg, var(--rp-poz) 62%, var(--rp-f3) 62%, var(--rp-f3) 63%, var(--rp-poz) 63%); }
.rp--nataa .rp__naslov { font-family: var(--mhp-font-tekst); font-weight: 400; font-size: 9cqw; line-height: .98; }
.rp--nataa .rp__naslov em { font-style: italic; }
.rp--nataa .rp__gumb { border-radius: 2px; }

/* ---------- 03 Brnić i partneri – korporativno, povjerenje ---------- */
.rp--brnic { --rp-poz: #F5F2EC; --rp-tekst: #1C2433; --rp-naglasak: #A8874A; --rp-gumb: #1C2433; --rp-gumb-tekst: #F5F2EC; grid-template-columns: 34cqw minmax(0, 1fr); padding: 0; column-gap: 0; }
.rp--brnic .rp__nav { padding: 4cqw 5cqw 0; grid-column: 2; grid-row: 1; }
.rp--brnic .rp__panel { grid-column: 1; grid-row: 1 / -1; background: var(--rp-tekst); color: var(--rp-poz); display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw 4.5cqw; height: 100%; }
.rp--brnic .rp__monogram { font-family: var(--mhp-font-naslov); font-weight: 900; font-size: 10cqw; line-height: .9; letter-spacing: -.03em; }
.rp--brnic .rp__monogram span { color: var(--rp-naglasak); }
.rp--brnic .rp__sitno { font-family: var(--mhp-font-oznaka); font-size: max(8px, 1.9cqw); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.rp--brnic .rp__crta { width: 9cqw; height: 2px; background: var(--rp-naglasak); }
.rp--brnic .rp__tekst { grid-column: 2; padding: 0 5cqw 5cqw; }
.rp--brnic .rp__naslov { --rp-naslov-v: 5.6cqw; font-weight: 700; letter-spacing: -.015em; }

/* ---------- 04 Amarr – event agencija, brutalist ---------- */
.rp--amarr { --rp-poz: #0B0B0F; --rp-tekst: #F2F2F2; --rp-naglasak: #FF2E88; --rp-mreza: #1E1E26; grid-template-columns: minmax(0, 1fr);
  background-color: var(--rp-poz);
  background-image: linear-gradient(var(--rp-mreza) 1px, transparent 1px), linear-gradient(90deg, var(--rp-mreza) 1px, transparent 1px);
  background-size: 7cqw 7cqw; }
.rp--amarr .rp__znak { font-weight: 900; letter-spacing: .02em; }
.rp--amarr .rp__linkovi { color: var(--rp-naglasak); opacity: 1; letter-spacing: .2em; }
.rp--amarr .rp__naslov { font-weight: 900; text-transform: uppercase; font-size: 12.5cqw; line-height: .84; letter-spacing: -.04em; }
.rp--amarr .rp__naslov em { display: block; text-align: right; }
.rp--amarr .rp__pod { font-family: var(--mhp-font-oznaka); letter-spacing: .08em; margin-top: 3cqw; }

/* ---------- 05 Dark Pooja – premium eko kozmetika ---------- */
.rp--pooja { --rp-poz: #F4EFE6; --rp-tekst: #141414; --rp-naglasak: #B08A3E; --rp-gumb: #141414; --rp-gumb-tekst: #F4EFE6; --rp-f1: #141414; --rp-f2: #D9C49A; --rp-f3: #6F8F4E; }
.rp--pooja .rp__znak { letter-spacing: .4em; font-weight: 700; }
.rp--pooja .rp__naslov { font-family: var(--mhp-font-tekst); font-weight: 400; --rp-naslov-v: 7.6cqw; line-height: 1; }
.rp--pooja .rp__naslov em { font-style: italic; }
.rp--pooja .rp__gumb { border-radius: 0; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- 06 OPG Tomek Pomek – povrće, lokalno ---------- */
.rp--tomek { --rp-poz: #FFF4E2; --rp-tekst: #2E4A1F; --rp-naglasak: #D8452B; --rp-gumb: #D8452B; --rp-gumb-tekst: #FFF4E2; --rp-f1: #D8452B; --rp-f2: #4E7D2E; --rp-f3: #F08A5D; }
.rp--tomek .rp__znak { text-transform: none; letter-spacing: 0; font-weight: 900; font-size: max(12px, 3.4cqw); }
.rp--tomek .rp__naslov { font-weight: 900; --rp-naslov-v: 5.4cqw; letter-spacing: -.03em; }
.rp--tomek .rp__kicker { margin-bottom: 1.6cqw; }
.rp--tomek .rp__gumb { margin-top: 2.8cqw; }
.rp--tomek .rp__pod { font-style: italic; }

/* ---------- 07 Stolar Vedran i sinovi – kuhinje po mjeri ---------- */
.rp--stolar { --rp-poz: #EFE6DA; --rp-tekst: #2B2118; --rp-naglasak: #9C6B3F; --rp-gumb: #2B2118; --rp-gumb-tekst: #EFE6DA; --rp-f1: #C49A6C; --rp-f2: #8A5E36; --rp-f3: #FBF7F1; grid-template-columns: minmax(0, 1fr) 42cqw; }
.rp--stolar .rp__znak { font-size: max(10px, 2.5cqw); letter-spacing: .2em; }
.rp--stolar .rp__naslov { font-weight: 900; --rp-naslov-v: 7.2cqw; text-transform: uppercase; letter-spacing: -.03em; }
.rp--stolar .rp__gumb { border-radius: 2px; }

/* ---------- 08 HYPER FREY – SEO agencija ---------- */
.rp--hyper { --rp-poz: #07140F; --rp-tekst: #D9FBE8; --rp-naglasak: #3DFF9A; --rp-gumb: #3DFF9A; --rp-gumb-tekst: #07140F; --rp-f1: #14382A; --rp-f2: #3DFF9A; }
.rp--hyper .rp__znak { text-transform: none; letter-spacing: -.02em; font-weight: 900; font-size: max(13px, 3.6cqw); }
.rp--hyper .rp__znak span { color: var(--rp-naglasak); }
.rp--hyper .rp__linkovi { color: var(--rp-naglasak); opacity: 1; }
.rp--hyper .rp__kicker { letter-spacing: .04em; text-transform: none; }
.rp--hyper .rp__naslov { font-weight: 900; text-transform: uppercase; --rp-naslov-v: 5.6cqw; line-height: .95; letter-spacing: -.03em; }
.rp--hyper .rp__kicker { margin-bottom: 1.6cqw; }
.rp--hyper .rp__brojke { margin-top: 2.4cqw; }
.rp--hyper .rp__gumb { border-radius: 4px; margin-top: 2.8cqw; }

/* ---------- 09 Ljubica trubica – rođendaonica ---------- */
.rp--ljubica { --rp-poz: #FCE7F3; --rp-tekst: #4A1E5C; --rp-naglasak: #E2559B; --rp-gumb: #7B3FA6; --rp-gumb-tekst: #FFFFFF; --rp-f1: #E2559B; --rp-f2: #7B3FA6; --rp-f3: #FFC94D; --rp-poz-svg: #FFFFFF; }
.rp--ljubica .rp__znak { text-transform: none; letter-spacing: 0; font-weight: 900; color: var(--rp-naglasak); font-size: max(13px, 3.6cqw); }
.rp--ljubica .rp__naslov { font-weight: 900; --rp-naslov-v: 6.8cqw; line-height: .98; }

/* ---------- 10 RobiX – servis mobitela ---------- */
.rp--robix { --rp-poz: #2A1B6B; --rp-poz-2: #1E4FD8; --rp-tekst: #FFFFFF; --rp-naglasak: #7DF9FF; --rp-gumb: #FFFFFF; --rp-gumb-tekst: #2A1B6B; --rp-f1: #0E0A2A; --rp-f2: #7DF9FF; --rp-f3: #4C3BC4;
  background: linear-gradient(135deg, var(--rp-poz), var(--rp-poz-2)); }
.rp--robix .rp__znak { text-transform: none; letter-spacing: -.02em; font-weight: 900; font-size: max(13px, 3.8cqw); }
.rp--robix .rp__znak span { color: var(--rp-naglasak); }
.rp--robix .rp__naslov { font-weight: 900; text-transform: uppercase; --rp-naslov-v: 6.6cqw; line-height: .95; letter-spacing: -.03em; }

/* ---------- Uski prikaz (mobitel): manje slike, ništa se ne preklapa ---------- */
@container (max-width: 420px) {
  .rp { grid-template-columns: minmax(0, 1fr) 32cqw; padding: 5.5cqw; }
  .rp--stolar { grid-template-columns: minmax(0, 1fr) 34cqw; }
  .rp--brnic { grid-template-columns: 30cqw minmax(0, 1fr); padding: 0; }
  .rp--brnic .rp__monogram { font-size: 8cqw; }
  .rp__slika svg { max-height: 46cqw; }
  .rp--amarr { grid-template-columns: minmax(0, 1fr); }
  .rp__naslov { --rp-naslov-v: 6.4cqw; }
}