/* =========================================================================
   OLIV — Proiecte portfolio components
   Category cards (main /proiecte/), case-study cards (category pages),
   competențe tags + project metadata (case-study pages).
   Built on the editorial token system; pairs with .ed-service component CSS.
   ========================================================================= */

/* Portfolio heroes are not numbered services — drop the inherited "01 / "
   numeral prefix that .service-hero .oliv-eyebrow adds. */
body.oliv-editorial .proiecte-hero .oliv-eyebrow::before { content: none; }

/* ---- Category grid — main /proiecte/ page ---------------------------- */
body.oliv-editorial .proiecte-cat-section { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
body.oliv-editorial .proiecte-cat-inner { max-width: 1080px; margin-inline: auto; width: 100%; }

body.oliv-editorial .proiecte-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 2.6vw, 1.9rem);
}

body.oliv-editorial .proiecte-cat-card {
  display: flex;
  flex-direction: column;
  background: rgba(245, 241, 232, 0.018);
  border: 1px solid var(--eds-faint, rgba(245, 241, 232, 0.12));
  border-radius: 7px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
body.oliv-editorial .proiecte-cat-card:hover {
  border-color: var(--eds-accent, #BFC74A);
  transform: translateY(-5px);
}

body.oliv-editorial .proiecte-cat-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
body.oliv-editorial .proiecte-cat-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
body.oliv-editorial .proiecte-cat-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,18,16,0) 45%, rgba(19,18,16,.5) 100%);
  pointer-events: none;
}
body.oliv-editorial .proiecte-cat-card:hover .proiecte-cat-media img { transform: scale(1.055); }

body.oliv-editorial .proiecte-cat-body {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex; flex-direction: column;
  gap: .62rem;
  flex: 1;
}
body.oliv-editorial .proiecte-cat-num {
  font-family: var(--oliv-font-display, serif);
  font-size: 1.05rem; font-weight: 500; letter-spacing: .04em;
  color: rgba(191,199,74,.72);
}
body.oliv-editorial .proiecte-cat-title {
  font-family: var(--oliv-font-serif, serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.72rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--eds-cream, #F5F1E8);
  margin: 0;
}
body.oliv-editorial .proiecte-cat-desc {
  font-family: var(--oliv-font-sans, sans-serif);
  font-style: italic; font-weight: 400;
  font-size: .96rem; line-height: 1.62;
  color: rgba(245,241,232,.72);
  margin: 0;
}
body.oliv-editorial .proiecte-cat-cta {
  margin-top: auto; padding-top: .5rem;
  font-family: var(--oliv-font-sans, sans-serif);
  font-weight: 600; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--eds-accent, #BFC74A);
  transition: letter-spacing .3s ease;
}
body.oliv-editorial .proiecte-cat-card:hover .proiecte-cat-cta { letter-spacing: .16em; }

/* Category cards using a COMPOSED GRAPHIC (number + title baked into the image,
   e.g. cat-publice/strategie/retail/experiente). Hide the redundant text number
   + title, drop the bottom gradient, match the 16:9 graphic aspect — keep the
   italic description + CTA below. v1.9.56 */
body.oliv-editorial .proiecte-cat-card--graphic .proiecte-cat-media { aspect-ratio: 16 / 9; }
body.oliv-editorial .proiecte-cat-card--graphic .proiecte-cat-media::after { display: none; }
body.oliv-editorial .proiecte-cat-card--graphic .proiecte-cat-num,
body.oliv-editorial .proiecte-cat-card--graphic .proiecte-cat-title { display: none; }

@media (max-width: 781px) {
  body.oliv-editorial .proiecte-cat-grid { grid-template-columns: 1fr; }
}

/* ---- Case-study cards (category pages + "Alte studii de caz") --------- */
body.oliv-editorial .case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 2.6vw, 1.8rem);
  max-width: 1080px; margin-inline: auto; width: 100%;
}
body.oliv-editorial .case-card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.5rem, 3vw, 2.15rem);
  background: rgba(245, 241, 232, 0.018);
  border: 1px solid var(--eds-faint, rgba(245, 241, 232, 0.12));
  border-radius: 7px; text-decoration: none; color: inherit;
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
body.oliv-editorial .case-card:hover { border-color: var(--eds-accent, #BFC74A); transform: translateY(-4px); }
body.oliv-editorial .case-card-eyebrow {        /* descriptive title — role 1 */
  font-family: var(--oliv-font-sans, sans-serif);
  font-size: .82rem; line-height: 1.45; letter-spacing: .01em;
  color: rgba(245, 241, 232, 0.6);
}
body.oliv-editorial .case-card-title {          /* project / client name — role 2 */
  font-family: var(--oliv-font-serif, serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.6rem); line-height: 1.16;
  letter-spacing: -.01em; color: var(--eds-cream, #F5F1E8); margin: 0;
}
body.oliv-editorial .case-card-q {              /* strategic question — role 3 (italic) */
  font-family: var(--oliv-font-sans, sans-serif); font-style: italic;
  font-size: .95rem; line-height: 1.6; color: rgba(245, 241, 232, 0.72); margin: 0;
}
body.oliv-editorial .case-card-cta {
  margin-top: auto; padding-top: .5rem;
  font-family: var(--oliv-font-sans, sans-serif); font-weight: 600;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--eds-accent, #BFC74A); transition: letter-spacing .3s ease;
}
body.oliv-editorial .case-card:hover .case-card-cta { letter-spacing: .16em; }

/* ---- Case-study page: project metadata strip (Datele proiectului) ----- */
body.oliv-editorial .case-meta-section { padding-block: clamp(1.6rem, 4vw, 2.8rem); }
body.oliv-editorial .case-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.7rem);
  max-width: 900px; margin-inline: auto;
  border-top: 1px solid var(--eds-faint, rgba(245, 241, 232, 0.12));
  border-bottom: 1px solid var(--eds-faint, rgba(245, 241, 232, 0.12));
  padding-block: clamp(1.4rem, 3vw, 2rem);
}
body.oliv-editorial .case-meta-item { display: flex; flex-direction: column; gap: .35rem; }
body.oliv-editorial .case-meta-key {
  font-family: var(--oliv-font-sans, sans-serif); font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(191, 199, 74, 0.85);
}
body.oliv-editorial .case-meta-val {
  font-family: var(--oliv-font-sans, sans-serif); font-size: .96rem; line-height: 1.5;
  color: var(--eds-cream, #F5F1E8);
}

/* ---- Case-study page: long-form prose sections ----------------------- */
body.oliv-editorial .case-prose-section { padding-block: clamp(1.8rem, 4.5vw, 3rem); }
body.oliv-editorial .case-prose-inner { max-width: 720px; margin-inline: auto; }
body.oliv-editorial .case-prose-inner .case-h {
  font-family: var(--oliv-font-serif, serif); font-weight: 600;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem); line-height: 1.2;
  letter-spacing: -.01em; color: var(--eds-cream, #F5F1E8); margin: 0 0 1.1rem;
}
body.oliv-editorial .case-prose-inner .case-h::before {
  content: ""; display: block; width: 2.4rem; height: 2px;
  background: var(--eds-accent, #BFC74A); margin-bottom: 1.1rem; opacity: .85;
}
body.oliv-editorial .case-prose-inner p {
  font-family: var(--oliv-font-sans, sans-serif); font-size: 1.02rem; line-height: 1.74;
  color: rgba(245, 241, 232, 0.8); margin: 0 0 1.05rem;
}
body.oliv-editorial .case-prose-inner .case-q {  /* highlighted strategic question */
  font-family: var(--oliv-font-serif, serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.45;
  color: var(--eds-cream, #F5F1E8); margin: 0 0 1.2rem; padding-left: 1.1rem;
  border-left: 2px solid var(--eds-accent, #BFC74A);
}
body.oliv-editorial .case-prose-inner ul.case-list {
  list-style: none; margin: .3rem 0 1rem; padding: 0;
}
body.oliv-editorial .case-prose-inner ul.case-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: .55rem;
  font-family: var(--oliv-font-sans, sans-serif); font-size: 1rem; line-height: 1.6;
  color: rgba(245, 241, 232, 0.8);
}
body.oliv-editorial .case-prose-inner ul.case-list li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--eds-accent, #BFC74A); font-size: .9em;
}
body.oliv-editorial .case-prose-inner .case-subh {
  font-family: var(--oliv-font-serif, serif); font-weight: 600;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.3;
  color: var(--eds-cream, #F5F1E8); margin: 1.5rem 0 .8rem;
}

/* ---- Case-study page: competențe tag chips --------------------------- */
body.oliv-editorial .case-competente {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  max-width: 780px; margin: 1.4rem auto 0; padding: 0; list-style: none;
}
body.oliv-editorial .case-competente li {
  font-family: var(--oliv-font-sans, sans-serif); font-size: .82rem; line-height: 1;
  padding: .56rem .95rem; border-radius: 999px;
  border: 1px solid var(--eds-faint, rgba(245, 241, 232, 0.18));
  color: rgba(245, 241, 232, 0.84);
  transition: border-color .3s ease, color .3s ease;
}
body.oliv-editorial .case-competente li:hover { border-color: var(--eds-accent, #BFC74A); color: var(--eds-cream, #F5F1E8); }

@media (max-width: 781px) {
  body.oliv-editorial .case-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   MOBILE FIXES — homepage "Ce facem"/service cards + kinetic marquee
   On phones the editorial .service-card grid let the oversized number column
   collapse and the title overlapped the number. Stack number ABOVE the title
   (single column), and shrink the marquee so it's not oversized on phones.
   ========================================================================= */
@media (max-width: 600px) {
  body.oliv-editorial .service-card {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0.3rem;
  }
  body.oliv-editorial .service-card-num {
    grid-row: auto;
    grid-column: 1;
    font-size: 1.5rem;
    line-height: 1;
    align-self: start;
  }
  body.oliv-editorial .service-card-title {
    grid-column: 1;
    align-self: start;
    font-size: clamp(1.55rem, 6vw, 2rem);
  }
  body.oliv-editorial .service-card-dek { grid-column: 1; }
  body.oliv-editorial .service-card-cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    font-size: 1.1rem;
    margin-top: 0.45rem;
  }
  /* Kinetic marquee — smaller + tighter on phones */
  body.oliv-editorial .oliv-marquee { padding-block: clamp(1.4rem, 4vh, 2rem); }
  body.oliv-editorial .oliv-marquee-track { font-size: clamp(1.5rem, 7vw, 2.2rem); gap: 1.6rem; }
}

/* =========================================================================
   RICH case-card with photo (overlay + godmode hover + overlaid descriptive)
   Opt-in via .case-card--photo so existing text cards are untouched.
   ========================================================================= */
body.oliv-editorial .case-card--photo { padding: 0; gap: 0; overflow: hidden; }
body.oliv-editorial .case-card--photo .case-card-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0;
}
body.oliv-editorial .case-card--photo .case-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter: grayscale(.25) brightness(.82);
}
body.oliv-editorial .case-card--photo:hover .case-card-media img { transform: scale(1.08); filter: grayscale(0) brightness(.92); }
body.oliv-editorial .case-card--photo .case-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(19,18,16,.05) 0%, rgba(19,18,16,.35) 55%, rgba(19,18,16,.9) 100%);
}
body.oliv-editorial .case-card--photo .case-card-media .case-card-eyebrow {
  position: absolute; z-index: 2;
  left: clamp(1.1rem,2.5vw,1.6rem); right: clamp(1.1rem,2.5vw,1.6rem); bottom: 1.05rem;
  font-weight: 600; color: var(--eds-accent); text-shadow: 0 1px 12px rgba(0,0,0,.65);
}
body.oliv-editorial .case-card--photo .case-card-body {
  padding: clamp(1.4rem,3vw,2rem); display: flex; flex-direction: column; gap: .6rem;
}
body.oliv-editorial .case-card--photo .case-card-title {
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.35rem); line-height: 1.1;
}
body.oliv-editorial .case-card--photo:hover .case-card-title { color: #fff; }

/* ---- OLIV Events social block (experiente-evenimente page) ------------ */
body.oliv-editorial .oliv-events-social { padding-block: clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
body.oliv-editorial .oliv-evsocial-inner { max-width: 640px; margin-inline: auto; }
body.oliv-editorial .oliv-evsocial-label {
  font-family: var(--oliv-font-sans, sans-serif); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(245,241,232,.55); margin: 0 0 .6rem;
}
body.oliv-editorial .oliv-evsocial-title {
  font-family: var(--oliv-font-serif, serif); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color: var(--eds-cream, #F5F1E8); margin: 0 0 1.4rem;
}
body.oliv-editorial .oliv-evsocial-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
body.oliv-editorial .oliv-evsocial-links a {
  font-family: var(--oliv-font-sans, sans-serif); font-weight: 600; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--eds-cream, #F5F1E8);
  text-decoration: none; padding: .7rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--eds-faint, rgba(245,241,232,.2));
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
body.oliv-editorial .oliv-evsocial-links a:hover { border-color: var(--eds-accent, #BFC74A); color: #131210; background: var(--eds-accent, #BFC74A); }