/* meciurifilmate.ro: only what differs from the cameraveo.ro design (cameraveo.css, blog.css, meciuri.css). */

/* Logo: same green pill as cameraveo.ro, with the archive's own mark instead of the VEO logo */
.logo-mark svg{height:17px;width:auto;display:block}

/* Club crest from VEO, in place of the initials badge */
img.cr{object-fit:contain;background:#fff;border:1px solid var(--line)}

/* The cameraveo.ro call to action that replaces the offer form */
.cta-box{align-self:center;display:flex;flex-wrap:wrap;gap:14px}
.cta-list{list-style:none;margin:0 0 10px;padding:0;width:100%}
.cta-list li{position:relative;padding:0 0 12px 30px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.cta-list li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%235fe08a'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230b3d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
/* Match page, desktop: the key-moments column takes exactly the player's height and scrolls inside, instead of
   stretching the header (and leaving white space under the timeline) when the list is long. */
@media (min-width:961px){
  .m-main{align-items:stretch}
  .m-main>.moments{contain:size;max-height:none;min-height:320px}
}
/* The match text is split in <section>s; the global section{padding:…116px} from cameraveo.css is for page sections */
.prose>section{padding:0}
.m-body .prose>section:first-child>h2{margin-top:0}
/* "Meciuri recente" in the nav lands on the section label, clear of the 70px sticky nav */
.eyebrow[id]{scroll-margin-top:120px}
/* Goal sharing: WhatsApp, Facebook, X, copy link (and the system share sheet where there is one) */
.share{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.share a,.share button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--line);
  background:#fff;color:var(--green-deep);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.share a:hover,.share button:hover{background:var(--tint);border-color:var(--tint-2);color:var(--green-deep)}
.share svg{width:16px;height:16px}
.share button[data-copy].ok{background:var(--green);border-color:var(--green);color:#fff}
.share button[hidden]{display:none}
.goals-ol li{flex-wrap:wrap}
.goals-ol .share{margin-left:auto}
/* In the key-moments list the row opens from a small button next to each goal */
.mo-list li[data-type="goal"]{display:flex;flex-wrap:wrap;align-items:center}
.mo-list li[data-type="goal"] .mo{flex:1;min-width:0}
.mo-list li[data-type="goal"][hidden]{display:none}
.mo-share{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green-deep);
  display:grid;place-items:center;cursor:pointer;padding:0}
.mo-share svg{width:16px;height:16px}
.mo-share[aria-expanded="true"],.mo-share:hover{background:var(--tint);border-color:var(--tint-2)}
.mo-list .share{display:none;width:100%;padding:0 0 10px 108px}
.mo-list li.sharing .share{display:flex}
@media (max-width:620px){.goals-ol .share{margin-left:44px;width:100%}.mo-list .share{padding-left:0}}
/* Header button on phones: cameraveo.css hides its label (there it keeps a WhatsApp icon); ours is text only, so keep it, smaller */
@media (max-width:620px){
  .nav .btn span{display:inline}
  .nav .btn{padding:8px 13px;font-size:13px;min-height:38px;margin-left:auto}
  .nav-in{gap:10px}
  .logo-txt{font-size:15px}
}
@media (max-width:420px){
  .nav .logo-mark{display:none}
  .logo-txt{font-size:14.5px;letter-spacing:-.4px}
}
@media (max-width:359px){
  .logo-txt{font-size:13px}
  .nav .btn{padding:7px 10px;font-size:12px}
  .nav-in{gap:8px}
}
/* Match player on phones: ±5 s and "Copiază linkul" (short label) on one row; the clickable timeline is hidden
   (too small to hit there; the key-moments list does the same job) */
.p-ctrl .sm-only{display:none}
.p-ctrl{position:relative}
@media (max-width:620px){
  .p-ctrl{flex-wrap:nowrap;gap:8px}
  .p-ctrl .btn{padding:9px 12px;font-size:13.5px}
  .p-ctrl #share{flex:1 1 auto;min-width:0}
  .p-ctrl .lg-only{display:none}
  .p-ctrl .sm-only{display:inline}
  .p-ctrl .copied{position:absolute;right:0;top:100%;margin-top:6px}
  .tl{display:none}
  /* "Toate meciurile {club lung}" and similar link buttons may wrap instead of widening the page */
  p>.btn{white-space:normal;max-width:100%;text-align:center}
}
/* Search box with suggestions */
.search{position:relative;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:100px;
  padding:6px 6px 6px 16px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--green);box-shadow:0 0 0 4px var(--tint)}
.search>svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:8px 0}
.search input::-webkit-search-cancel-button{display:none}
.search .btn{flex:0 0 auto;width:auto;margin-top:0} /* cameraveo.css: form .btn{width:100%} is for its offer form */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;list-style:none;margin:0;padding:6px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(11,61,31,.12);max-height:360px;overflow-y:auto}
.sugg a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;border-radius:9px;color:var(--ink)}
.sugg b{font-weight:700;font-size:15px}
.sugg span{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.sugg li.on a,.sugg a:hover{background:var(--tint);color:var(--ink)}
.nav-search{display:inline-flex;align-items:center;gap:6px}
.nav-search svg{width:16px;height:16px}
@media (max-width:620px){.search .btn{display:none}.search{padding:4px 14px}}
.foot-brand p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:620px){.cta-box .btn{width:100%}}