/* =========================================================
   THEME — DEFAULT CREAM / LIGHT
   Optional dark mode kept below via :root[data-theme="dark"]
   ========================================================= */

:root {
  /* ===== Core palette ===== */
  --bg: #f6f1e7;
  --bg-alt: #efe7d8;
  --card-bg: rgba(255, 252, 246, 0.92);

  /* ===== Accent ===== */
  --accent: #b08d57;
  --accent-alt: #c9a063;
  --accent-soft: rgba(176, 141, 87, 0.12);

  /* ===== Text ===== */
  --text-main: #241f17;
  --text-muted: #6b6257;

  /* ===== Borders / layout ===== */
  --border-subtle: rgba(78, 63, 44, 0.12);
  --max-width: 1120px;

  /* ===== Radii / shadows ===== */
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-soft: 0 18px 40px rgba(80, 60, 30, 0.08);

  /* ===== Logo ===== */
  --logo-gap: 0.5rem;
  --logo-letter-spacing: 0.03em;

  /* ===== Layout ===== */
  --page-padding-x: 2rem;
  --page-padding-x-mobile: 1.25rem;
  --section-gap: 3rem;
  --section-header-gap: 0.5rem;
  --grid-gap: 1.4rem;
  --nav-gap: 1.6rem;
  --nav-height: 64px;

  /* ===== Breakpoints ===== */
  --bp-tablet: 880px;
  --bp-mobile: 600px;

  /* ===== Typography ===== */
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 0.8rem;
  --fs-sm: 0.86rem;
  --fs-base: 0.95rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.25rem;
  --fs-section-title: 1.25rem;
  --fs-hero: clamp(2.1rem, 4vw, 2.7rem);

  /* ===== Buttons ===== */
  --btn-radius-pill: 999px;
  --btn-font-size: 0.9rem;
  --btn-padding-y: 0.55rem;
  --btn-padding-x: 1.4rem;

  --btn-primary-bg-from: rgba(176, 141, 87, 0.16);
  --btn-primary-bg-to: rgba(201, 160, 99, 0.10);
  --btn-primary-text: #241f17;
  --btn-primary-shadow: 0 10px 25px rgba(176, 141, 87, 0.14);
  --btn-primary-shadow-hover: 0 14px 35px rgba(176, 141, 87, 0.22);

  --btn-ghost-bg: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(246,239,228,0.96));
  --btn-ghost-bg-hover: linear-gradient(180deg, rgba(255,255,255,1), rgba(243,232,211,0.98));
  --btn-ghost-border: rgba(176, 141, 87, 0.34);
  --btn-ghost-border-hover: rgba(176, 141, 87, 0.50);
  --btn-ghost-text: #1f1a14;
  --btn-ghost-text-hover: #b08d57;
  --btn-ghost-shadow:
    0 10px 25px rgba(176, 141, 87, 0.18),
    0 0 28px rgba(255, 244, 220, 0.72);
  --btn-ghost-shadow-hover:
    0 14px 35px rgba(176, 141, 87, 0.24),
    0 0 36px rgba(255, 241, 214, 0.88);

  /* ===== Footer ===== */
  --footer-bg: linear-gradient(180deg, rgba(239, 231, 216, 0.86), rgba(239, 231, 216, 1));
  --footer-border: rgba(78, 63, 44, 0.12);

  /* ===== Pills ===== */
  --pill-border: rgba(176, 141, 87, 0.30);
  --pill-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,239,228,0.94));
  --pill-text: #2a241d;
  --pill-shadow:
    0 10px 25px rgba(176, 141, 87, 0.12),
    0 0 22px rgba(255, 244, 220, 0.68);
  --pill-dot: #b08d57;
  --pill-dot-glow: rgba(176, 141, 87, 0.18);

  /* ===== Hero gradient ===== */
  --hero-gradient-from: #f3e7d1;
  --hero-gradient-to: #c79b5d;

  /* ===== Inputs ===== */
  --input-bg: rgba(255, 251, 245, 0.92);
  --input-border: rgba(78, 63, 44, 0.14);

  /* ===== Header / Nav ===== */
  --header-bg: rgba(246, 241, 231, 0.78);
  --nav-link-color: rgba(36, 31, 23, 0.78);
  --nav-link-hover: #241f17;
  --nav-link-active: #241f17;
  --nav-underline-color: #b08d57;
  --nav-underline-glow: 0 0 0 transparent;

  /* ===== Mobile menu ===== */
  --mobile-menu-bg: rgba(246, 241, 231, 0.97);
  --mobile-menu-border: rgba(78, 63, 44, 0.10);
  --mobile-menu-text: rgba(36, 31, 23, 0.88);
  --mobile-menu-text-hover: #241f17;
  --mobile-menu-underline: #b08d57;
  --mobile-menu-underline-glow: 0 0 0 transparent;

  --mobile-menu-item-padding-y: 0.6rem;
  --mobile-menu-item-gap: 0.75rem;
  --mobile-menu-padding-x: 1.5rem;
  --mobile-menu-padding-y: 1rem;

  /* ===== Cards ===== */
  --card-bg-default: rgba(255, 252, 246, 0.92);
  --card-border-default: rgba(176, 141, 87, 0.28);
  --card-radius: 22px;
  --card-padding: 1.2rem;

  --card-shadow: 0 16px 36px rgba(80, 60, 30, 0.08);
  --card-shadow-hover: 0 22px 55px rgba(176, 141, 87, 0.12);
  --card-glow-1: radial-gradient(circle at top left, rgba(176, 141, 87, 0.08), transparent 55%);
  --card-transition-speed: 0.25s;

  /* ===== 3D tilt ===== */
  --tilt-perspective: 700px;
  --tilt-rotate-max: 8deg;
  --tilt-enabled: 1;
  --card-tilt-lift: -2px;

  /* ===== Reveal on scroll ===== */
  --reveal-translateY: 40px;
  --reveal-opacity-start: 0;
  --reveal-duration: 0.8s;
  --reveal-delay: 90ms;

  /* ===== Filters ===== */
  --filters-panel-bg: rgba(255, 252, 246, 0.90);
  --filters-panel-border: rgba(78, 63, 44, 0.10);
  --filters-panel-radius: var(--radius-xl);
  --filters-panel-padding-x: 1.25rem;
  --filters-panel-padding-y: 1rem;

  --filters-panel-gap: 0.9rem;
  --filters-row-gap: 0.75rem;

  --filters-label-font-size: 0.8rem;
  --filters-label-color: var(--text-muted);

  --filters-field-radius: 999px;
  --filters-field-border: rgba(78, 63, 44, 0.14);
  --filters-field-bg: rgba(255, 251, 245, 0.92);
  --filters-field-padding-y: 0.45rem;
  --filters-field-padding-x: 0.8rem;
  --filters-field-font-size: 0.9rem;
  --filters-field-text-color: var(--text-main);

  --filters-focus-border: rgba(176, 141, 87, 0.52);
  --filters-focus-shadow: 0 0 0 1px rgba(176, 141, 87, 0.28);

  /* ===== Badges ===== */
  --badge-font-size: 0.7rem;
  --badge-radius: 999px;
  --badge-padding-y: 0.1rem;
  --badge-padding-x: 0.6rem;

  --badge-bg: rgba(255, 251, 245, 0.82);
  --badge-border: rgba(78, 63, 44, 0.12);
  --badge-text: var(--text-muted);

  --badge-primary-bg: radial-gradient(circle at top left, rgba(176, 141, 87, 0.12), transparent 60%);
  --badge-primary-border: rgba(176, 141, 87, 0.40);
  --badge-primary-text: var(--accent);

  /* ===== About / Team ===== */
  --about-card-rotate: -3deg;
  --about-card-inner-rotate: 3deg;
  --about-card-clip: polygon(
    12% 0%,   88% 0%,
    100% 25%, 100% 75%,
    88% 100%, 12% 100%,
    0% 75%,   0% 25%
  );
  --about-card-bg: var(--card-bg);
  --about-card-radius: var(--radius-xl);
  --about-card-padding: 1rem;

  --team-photo-spin-animation: team-photo-spin 24s linear infinite;
  --team-photo-spin-enabled: 1;

  --about-highlight-bg: radial-gradient(circle at top left, rgba(176, 141, 87, 0.08), transparent 55%);
  --about-highlight-border: rgba(176, 141, 87, 0.18);
  --about-highlight-radius: var(--radius-xl);
  --about-highlight-padding-x: 1.5rem;
  --about-highlight-padding-y: 1.25rem;
}

/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(176, 141, 87, 0.10), transparent 60%),
    radial-gradient(900px 550px at 95% 10%, rgba(176, 141, 87, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  color: var(--text-main);
  line-height: 1.5;
  font-size: var(--fs-base);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

input,
select,
textarea,
button {
  font: inherit;
}

/* ===== Optional dark mode kept for later ===== */
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #000000;
  --card-bg: rgba(14, 14, 18, 0.86);

  --accent: #b08d57;
  --accent-alt: #c9a063;
  --accent-soft: rgba(176, 141, 87, 0.14);

  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.75);

  --border-subtle: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.55);

  --btn-primary-bg-from: rgba(176, 141, 87, 0.22);
  --btn-primary-bg-to: rgba(201, 160, 99, 0.12);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  --btn-primary-shadow-hover: 0 14px 35px rgba(176, 141, 87, 0.18);

  --btn-ghost-bg: rgba(12, 12, 16, 0.70);
  --btn-ghost-bg-hover: rgba(176, 141, 87, 0.12);
  --btn-ghost-border: rgba(255, 255, 255, 0.14);
  --btn-ghost-border-hover: rgba(176, 141, 87, 0.35);
  --btn-ghost-text: #ffffff;
  --btn-ghost-text-hover: #ffffff;
  --btn-ghost-shadow:
    0 10px 25px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(176, 141, 87, 0.18);
  --btn-ghost-shadow-hover:
    0 14px 35px rgba(176, 141, 87, 0.18),
    0 0 30px rgba(176, 141, 87, 0.22);

  --footer-bg: linear-gradient(180deg, rgba(10, 10, 14, 0.90), rgba(7, 7, 10, 1));
  --footer-border: rgba(255, 255, 255, 0.10);

  --pill-border: rgba(176, 141, 87, 0.35);
  --pill-bg: radial-gradient(circle at left, rgba(176, 141, 87, 0.14), transparent 55%), rgba(12, 12, 16, 0.78);
  --pill-text: rgba(255,255,255,0.86);
  --pill-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    0 0 18px rgba(176, 141, 87, 0.18);
  --pill-dot: #b08d57;
  --pill-dot-glow: rgba(176, 141, 87, 0.25);

  --hero-gradient-from: #ffffff;
  --hero-gradient-to: #b08d57;

  --input-bg: rgba(12, 12, 16, 0.85);
  --input-border: rgba(255, 255, 255, 0.14);

  --header-bg: rgba(7, 7, 10, 0.72);
  --nav-link-color: rgba(255, 255, 255, 0.82);
  --nav-link-hover: #ffffff;
  --nav-link-active: #ffffff;

  --mobile-menu-bg: rgba(10, 10, 14, 0.96);
  --mobile-menu-border: rgba(255, 255, 255, 0.10);
  --mobile-menu-text: rgba(255, 255, 255, 0.88);
  --mobile-menu-text-hover: #ffffff;

  --card-bg-default: rgba(14, 14, 18, 0.86);
  --card-border-default: rgba(176, 141, 87, 0.32);
  --card-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
  --card-shadow-hover: 0 22px 55px rgba(176, 141, 87, 0.12);
  --card-glow-1: radial-gradient(circle at top left, rgba(176, 141, 87, 0.10), transparent 55%);

  --filters-panel-bg: rgba(14, 14, 18, 0.86);
  --filters-panel-border: rgba(255, 255, 255, 0.12);
  --filters-field-border: rgba(255, 255, 255, 0.14);
  --filters-field-bg: rgba(12, 12, 16, 0.85);
  --filters-focus-border: rgba(176, 141, 87, 0.55);
  --filters-focus-shadow: 0 0 0 1px rgba(176, 141, 87, 0.35);

  --badge-bg: rgba(12, 12, 16, 0.70);
  --badge-border: rgba(255, 255, 255, 0.14);

  --about-highlight-bg: radial-gradient(circle at top left, rgba(176, 141, 87, 0.10), transparent 55%);
  --about-highlight-border: rgba(176, 141, 87, 0.22);
}*/

/* ===== News list ===== */
.news-list {
  margin-top: 30px;
}
.page-header{
  margin-top: 30px;
  margin-bottom:40px;
}
.news-item {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
  align-items: center;
  border-bottom: 1px solid rgba(78, 63, 44, 0.10);
  padding-bottom: 40px;
}

.news-thumb img {
  width: 320px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.news-info {
  flex: 1;
}

.news-date{
position:relative;
top:1px;
}

.news-title a{
color:#504c48;
font-size:26px;
text-decoration:none;
transition:color .3s ease;
}

.news-title a:hover {
  color: var(--accent);
}

.news-excerpt {
  margin-top: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

.news-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-link:hover {
  color: var(--text-main);
}
/* ===== Article meta ===== */

.article-meta{
display:flex;
align-items:center;
gap:8px;
margin:10px 0 26px;
font-size:14px;
color:var(--text-muted);
}

.news-author a{
color:var(--text-main);
font-weight:600;
text-decoration:none;
transition:color .25s ease;
}

.news-author a:hover{
color:var(--accent);
}

.meta-separator{
opacity:.5;
}
/* ===== Article ===== */
.article-wrapper {
  max-width: 900px;
  margin: 60px auto;
}

.article-image{
width:100%;
max-width:700px;
height:360px;
object-fit:cover;
border-radius:14px;
margin:30px auto 40px;
display:block;
}
.article-content p {
  color: var(--text-muted);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* ===== Article reveal ===== */

/* ===== Article stagger reveal ===== */

.article-image,
.article-wrapper h1,
.article-meta,
.article-content{
opacity:0;
transform:translateY(24px);
animation:fadeUp .7s ease forwards;
}
.article-wrapper{
will-change:transform,opacity;
}

.article-image{
animation-delay:.05s;
}

.article-wrapper h1{
animation-delay:.15s;
}

.article-meta{
animation-delay:.28s;
}

.article-content{
animation-delay:.4s;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* ================= HERO ================= */

.hero-full{
position:relative;
min-height:680px;
height:100vh;
height:100svh;
overflow:hidden;
}

/* video background */

.hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;

object-fit:cover;
object-position:center;

z-index:0;

opacity:.85;
filter:brightness(.95) contrast(1.05) saturate(1.1);
}

/* overlay για contrast */

.hero-overlay{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;

background:linear-gradient(
90deg,
rgba(0,0,0,.45) 0%,
rgba(0,0,0,.30) 30%,
rgba(0,0,0,.15) 55%,
rgba(0,0,0,.05) 75%,
rgba(0,0,0,0) 100%
);
}

/* hero layout */

.hero-shell{
position:relative;
z-index:2;

height:100%;
width:100%;

display:grid;
grid-template-columns:0.95fr 1.05fr;
align-items:center;

gap:2rem;

padding-inline:clamp(24px,5vw,80px);
}

/* text container */

.hero-left-copy{
justify-self:start;
max-width:680px;

padding-top:4.5rem;
padding-bottom:3rem;
}

/* title */

.hero-title{
color:#ffffff;
font-weight:600;
letter-spacing:-0.01em;

font-size:clamp(2.3rem,4vw,3rem);
line-height:1.1;

text-shadow:
0 6px 18px rgba(0,0,0,.45),
0 20px 50px rgba(0,0,0,.35);
}

/* subtitle */

.hero-lock .section-subtitle{
color:rgba(255,255,255,.95);

text-shadow:
0 2px 12px rgba(0,0,0,.35);
}

/* meta pills */

.hero-meta{
display:flex;
gap:.7rem;
flex-wrap:wrap;
margin-top:1.6rem;
}

/* mobile */

@media (max-width:880px){

.hero-full{
min-height:560px;
height:auto;
}

.hero-shell{
grid-template-columns:1fr;
align-items:end;

min-height:560px;

padding-inline:1.25rem;
padding-bottom:2rem;
}

.hero-right-space{
display:none;
}

.hero-left-copy{
max-width:100%;
padding-top:3.5rem;
padding-bottom:.5rem;
}

.hero-bg{
width:120%;
height:100%;
object-fit:contain;

transform:scale(.92) translateY(-170px) translateX(-40px);
}

}