/* ==========================================================================
   osztalykirandulas.css — az osztálykirándulás oldal egyedi szakaszai
   (hero pills, intro split, cikcakk programlista). subpage.css mellé töltődik.
   ========================================================================== */

.phero .pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.8rem}
.phero .pills span{font-family:'Saira Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;padding:.35em .9em;border:1.5px solid rgba(255,255,255,.2);color:#e9ddcf}

.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.intro .eyebrow{color:var(--o-red);display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.intro .eyebrow::before{content:"";width:28px;height:3px;background:var(--flame-h)}
.intro h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:1.1rem}
.intro p{color:#4f463d;line-height:1.65;margin-bottom:1rem;font-size:1.04rem}
.intro p strong{color:var(--ink)}
.intro-visual{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.intro-visual .photo{height:200px;border:1px solid var(--line);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.intro-visual .tall{grid-row:span 2;height:auto}

.zz{display:grid;gap:2.4rem}
.zrow{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);overflow:hidden}
.zrow .zimg{position:relative;min-height:340px;overflow:hidden}
.zrow .zimg .photo{position:absolute;inset:0;transition:transform .6s}
.zrow:hover .zimg .photo{transform:scale(1.06)}
.zrow .zimg .num{position:absolute;top:0;left:0;z-index:2;background:var(--flame-h);color:#1a0e00;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:1.1rem;padding:.3em 1em;clip-path:polygon(0 0,100% 0,100% 100%,16px 100%)}
.zrow .zimg .new{position:absolute;top:0;right:0;z-index:2;background:var(--o-red);color:#fff;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:.72rem;letter-spacing:.08em;padding:.3em 1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)}
.zrow .zbody{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.zrow .zbody .tag{font-family:'Saira Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--o-red);margin-bottom:.4rem}
.zrow .zbody h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.8rem}
.zrow .zbody p{color:#5a4f45;line-height:1.6;font-size:.98rem;margin-bottom:1.4rem}
.zrow.rev .zimg{order:2}
.zrow .lead-line{color:var(--ink);font-weight:600}

@media(max-width:860px){
  .intro-grid{grid-template-columns:1fr}
  .zrow{grid-template-columns:1fr}
  .zrow .zimg{min-height:260px}
  .zrow.rev .zimg{order:0}
}