/* scoped style strony (z tresci produkcyjnych szablonow) */

/* ── O Liceum - page-specific styles matching Figma kl() ── */
/* Icon square (Figma: w-14 h-14 rounded-xl) */
.ol-icon-square {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 16px;
}
/* Director grid (Figma: 2-col, photo left, text right) */
.ol-director-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.ol-director-photo { order: -1; }
/* Kim jesteśmy grid */
.ol-kim-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* White card (Figma: bg-white p-8 rounded-2xl border shadow-md) */
.ol-card-white {
background: #fff;
padding: 32px;
border-radius: 16px;
border: 1px solid #E5E7EB;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
transition: transform 0.25s, box-shadow 0.25s;
}
.ol-card-white:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
/* Mint gradient card (Figma: bg-gradient from-mint to-white) */
.ol-card-mint {
background: linear-gradient(135deg, rgba(210,229,225,0.6), #fff);
padding: 32px;
border-radius: 16px;
border: 1px solid #E5E7EB;
transition: transform 0.25s, box-shadow 0.25s;
}
.ol-card-mint:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
/* Glass card (dark section - Figma: bg-white/10 backdrop-blur border-white/20) */
.ol-card-glass {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 32px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.2);
transition: transform 0.25s, background 0.25s;
}
.ol-card-glass:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.15);
}
/* Smaller icon in principle/audience cards (Figma: w-12 h-12 rounded-lg = 48px, 8px) */
.ol-icon-sm {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Team card (Figma: gradient mint-to-white, green border-2) */
.ol-team-card {
background: linear-gradient(135deg, rgba(210,229,225,0.6), #fff);
padding: 32px;
border-radius: 16px;
border: 2px solid #81BD51;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
transition: transform 0.25s;
}
.ol-team-card:hover {
transform: translateY(-4px);
}
/* ── Responsive ── */
@media (max-width: 768px) {
.ol-director-grid { grid-template-columns: 1fr; gap: 32px; }
.ol-director-photo { order: 0; }
.ol-director-photo img { height: 350px !important; }
.ol-kim-grid { grid-template-columns: 1fr; gap: 32px; }
.ol-kim-grid > div:last-child > div:last-child { position: static !important; max-width: 100%; margin-top: 16px; }
.ol-grid-3 { grid-template-columns: 1fr !important; }
.ol-grid-2 { grid-template-columns: 1fr !important; }
.ol-mini-3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) and (min-width: 769px) {
.ol-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}


/* style inline przeniesione do klas */
.lc-i-1.lc-i-1.lc-i-1.lc-i-1 { padding: 96px 0 80px; }
.lc-i-2.lc-i-2.lc-i-2.lc-i-2 { gap: 48px; }
.lc-i-3.lc-i-3.lc-i-3.lc-i-3 { font-size: 48px; line-height: 1.15; margin-bottom: 24px; }
.lc-i-4.lc-i-4.lc-i-4.lc-i-4 { font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.9); max-width: 560px; margin-bottom: 32px; }
.lc-i-5.lc-i-5.lc-i-5.lc-i-5 { display: flex; flex-wrap: wrap; gap: 16px; }
.lc-i-6.lc-i-6.lc-i-6.lc-i-6 { background: #fff; color: #81BD51; padding: 16px 32px; font-size: 15px; }
.lc-i-7.lc-i-7.lc-i-7.lc-i-7 { border-color: #fff; color: #fff; padding: 16px 32px; font-size: 15px; }
.lc-i-8.lc-i-8.lc-i-8.lc-i-8 { border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.lc-i-9.lc-i-9.lc-i-9.lc-i-9 { background: linear-gradient(180deg, rgba(210,229,225,0.3) 0%, #fff 100%); scroll-margin-top: 8rem; }
.lc-i-10.lc-i-10.lc-i-10.lc-i-10 { margin-top: 24px; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-left: 4px solid #81BD51; }
.lc-i-11.lc-i-11.lc-i-11.lc-i-11 { font-size: 18px; font-weight: 600; color: #232D4B; margin-bottom: 4px; }
.lc-i-12.lc-i-12.lc-i-12.lc-i-12 { font-size: 14px; color: #81BD51; font-weight: 500; }
.lc-i-13.lc-i-13.lc-i-13.lc-i-13 { margin-bottom: 24px; }
.lc-i-14.lc-i-14.lc-i-14.lc-i-14 { font-size: 40px; margin-bottom: 16px; }
.lc-i-15.lc-i-15.lc-i-15.lc-i-15 { width: 80px; height: 4px; background: #81BD51; border-radius: 9999px; }
.lc-i-16.lc-i-16.lc-i-16.lc-i-16 { font-size: 16px; color: #4B5563; line-height: 1.7; }
.lc-i-17.lc-i-17.lc-i-17.lc-i-17 { margin-bottom: 16px; }
.lc-i-18.lc-i-18.lc-i-18.lc-i-18 { margin-top: 32px; display: flex; align-items: center; gap: 16px; padding: 24px; background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.lc-i-19.lc-i-19.lc-i-19.lc-i-19 { width: 48px; height: 48px; background: #81BD51; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-i-20.lc-i-20.lc-i-20.lc-i-20 { font-size: 14px; color: #4B5563; font-style: italic; line-height: 1.5; }
.lc-i-21.lc-i-21.lc-i-21.lc-i-21 { scroll-margin-top: 8rem; }
.lc-i-22.lc-i-22.lc-i-22.lc-i-22 { font-size: 40px; margin-bottom: 24px; }
.lc-i-23.lc-i-23.lc-i-23.lc-i-23 { margin-bottom: 12px; }
.lc-i-24.lc-i-24.lc-i-24.lc-i-24 { position: relative; }
.lc-i-25.lc-i-25.lc-i-25.lc-i-25 { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.lc-i-26.lc-i-26.lc-i-26.lc-i-26 { position: absolute; bottom: -32px; left: -32px; background: #81BD51; color: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-width: 320px; }
.lc-i-27.lc-i-27.lc-i-27.lc-i-27 { font-size: 14px; font-weight: 500; line-height: 1.5; }
.lc-i-28.lc-i-28.lc-i-28.lc-i-28 { background: rgba(210,229,225,0.2); scroll-margin-top: 8rem; }
.lc-i-29.lc-i-29.lc-i-29.lc-i-29 { max-width: 768px; margin: 0 auto 64px; }
.lc-i-30.lc-i-30.lc-i-30.lc-i-30 { text-align: center; }
.lc-i-31.lc-i-31.lc-i-31.lc-i-31 { text-align: center; font-size: 18px; color: #4B5563; margin-top: 24px; }
.lc-i-32.lc-i-32.lc-i-32.lc-i-32 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }
.lc-i-33.lc-i-33.lc-i-33.lc-i-33 { background: #81BD51; }
.lc-i-34.lc-i-34.lc-i-34.lc-i-34 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.lc-i-35.lc-i-35.lc-i-35.lc-i-35 { color: #4B5563; line-height: 1.6; }
.lc-i-36.lc-i-36.lc-i-36.lc-i-36 { background: #232D4B; }
.lc-i-37.lc-i-37.lc-i-37.lc-i-37 { margin-top: 48px; max-width: 768px; margin-left: auto; margin-right: auto; background: #fff; padding: 32px; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.lc-i-38.lc-i-38.lc-i-38.lc-i-38 { display: flex; align-items: flex-start; gap: 16px; }
.lc-i-39.lc-i-39.lc-i-39.lc-i-39 { font-size: 18px; font-weight: 600; color: #232D4B; margin-bottom: 8px; }
.lc-i-40.lc-i-40.lc-i-40.lc-i-40 { font-size: 16px; color: #4B5563; line-height: 1.6; }
.lc-i-41.lc-i-41.lc-i-41.lc-i-41 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
.lc-i-42.lc-i-42.lc-i-42.lc-i-42 { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.lc-i-43.lc-i-43.lc-i-43.lc-i-43 { font-size: 20px; font-weight: 600; }
.lc-i-44.lc-i-44.lc-i-44.lc-i-44 { text-align: center; color: #fff; }
.lc-i-45.lc-i-45.lc-i-45.lc-i-45 { text-align: center; font-size: 20px; color: rgba(255,255,255,0.9); margin-top: 24px; }
.lc-i-46.lc-i-46.lc-i-46.lc-i-46 { max-width: 1000px; margin: 0 auto 64px; background: rgba(129,189,81,0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 40px 48px; border-radius: 16px; border: 2px solid rgba(129,189,81,0.3); }
.lc-i-47.lc-i-47.lc-i-47.lc-i-47 { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.lc-i-48.lc-i-48.lc-i-48.lc-i-48 { font-size: 24px; color: #fff; margin-bottom: 8px; }
.lc-i-49.lc-i-49.lc-i-49.lc-i-49 { font-size: 14px; color: rgba(255,255,255,0.8); }
.lc-i-50.lc-i-50.lc-i-50.lc-i-50 { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.7; }
.lc-i-51.lc-i-51.lc-i-51.lc-i-51 { padding-top: 16px; margin-top: 16px; }
.lc-i-52.lc-i-52.lc-i-52.lc-i-52 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1100px; margin: 0 auto; }
.lc-i-53.lc-i-53.lc-i-53.lc-i-53 { font-size: 24px; color: #fff; }
.lc-i-54.lc-i-54.lc-i-54.lc-i-54 { color: rgba(255,255,255,0.8); line-height: 1.6; }
.lc-i-55.lc-i-55.lc-i-55.lc-i-55 { text-align: center; margin-top: 64px; }
.lc-i-56.lc-i-56.lc-i-56.lc-i-56 { display: inline-block; background: rgba(255,255,255,0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 32px 40px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); max-width: 768px; }
.lc-i-57.lc-i-57.lc-i-57.lc-i-57 { font-size: 20px; line-height: 1.5; color: #fff; }
.lc-i-58.lc-i-58.lc-i-58.lc-i-58 { text-align: center; margin-bottom: 48px; }
.lc-i-59.lc-i-59.lc-i-59.lc-i-59 { font-size: 18px; color: #4B5563; margin-top: 16px; }
.lc-i-60.lc-i-60.lc-i-60.lc-i-60 { border: 2px solid #81BD51; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.lc-i-61.lc-i-61.lc-i-61.lc-i-61 { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.lc-i-62.lc-i-62.lc-i-62.lc-i-62 { color: #4B5563; line-height: 1.6; margin-bottom: 24px; }
.lc-i-63.lc-i-63.lc-i-63.lc-i-63 { color: #81BD51; font-weight: 500; font-size: 14px; }
.lc-i-64.lc-i-64.lc-i-64.lc-i-64 { border: 2px solid #232D4B; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.lc-i-65.lc-i-65.lc-i-65.lc-i-65 { display: inline-flex; align-items: center; gap: 8px; color: #232D4B; font-weight: 500; font-size: 14px; transition: color 0.2s; }
.lc-i-66.lc-i-66.lc-i-66.lc-i-66 { border: 2px solid #E5E7EB; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.lc-i-67.lc-i-67.lc-i-67.lc-i-67 { aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.lc-i-68.lc-i-68.lc-i-68.lc-i-68 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.lc-i-69.lc-i-69.lc-i-69.lc-i-69 { font-size: 14px; color: #81BD51; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.lc-i-70.lc-i-70.lc-i-70.lc-i-70 { font-size: 13px; color: #4B5563; font-style: italic; margin-bottom: 16px; }
.lc-i-71.lc-i-71.lc-i-71.lc-i-71 { height: 1px; background: #E5E7EB; margin: 16px 0; }
.lc-i-72.lc-i-72.lc-i-72.lc-i-72 { font-size: 14px; color: #4B5563; line-height: 1.6; margin-bottom: 16px; }
.lc-i-73.lc-i-73.lc-i-73.lc-i-73 { font-size: 14px; color: #374151; line-height: 1.6; }
.lc-i-74.lc-i-74.lc-i-74.lc-i-74 { background: linear-gradient(135deg, rgba(210,229,225,0.4), #fff); }
.lc-i-75.lc-i-75.lc-i-75.lc-i-75 { max-width: 1000px; }
.lc-i-76.lc-i-76.lc-i-76.lc-i-76 { background: #fff; padding: 48px 56px; border-radius: 16px; border: 2px solid #81BD51; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.lc-i-77.lc-i-77.lc-i-77.lc-i-77 { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.lc-i-78.lc-i-78.lc-i-78.lc-i-78 { width: 64px; height: 64px; background: linear-gradient(135deg, #81BD51, #6fa043); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-i-79.lc-i-79.lc-i-79.lc-i-79 { font-size: 32px; margin-bottom: 12px; }
.lc-i-80.lc-i-80.lc-i-80.lc-i-80 { font-size: 18px; color: #4B5563; line-height: 1.7; }
.lc-i-81.lc-i-81.lc-i-81.lc-i-81 { margin-bottom: 20px; }
.lc-i-82.lc-i-82.lc-i-82.lc-i-82 { margin-top: 32px; padding-top: 32px; border-top: 1px solid #E5E7EB; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lc-i-83.lc-i-83.lc-i-83.lc-i-83 { display: flex; align-items: flex-start; gap: 12px; }
.lc-i-84.lc-i-84.lc-i-84.lc-i-84 { width: 40px; height: 40px; background: rgba(129,189,81,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-i-85.lc-i-85.lc-i-85.lc-i-85 { font-weight: 600; color: #232D4B; margin-bottom: 4px; }
.lc-i-86.lc-i-86.lc-i-86.lc-i-86 { font-size: 14px; color: #4B5563; }
.lc-i-87.lc-i-87.lc-i-87.lc-i-87 { max-width: 800px; text-align: center; }
.lc-i-88.lc-i-88.lc-i-88.lc-i-88 { color: #fff; margin-bottom: 24px; }
.lc-i-89.lc-i-89.lc-i-89.lc-i-89 { font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: 32px; line-height: 1.6; }
.lc-i-90.lc-i-90.lc-i-90.lc-i-90 { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }