/* ── Color tokens (unifies all pages with homepage blues) ── */
:root {
  --md-primary-fg-color:              #0077a8;
  --md-primary-fg-color--light:       #0091c8;
  --md-primary-fg-color--dark:        #003d5c;
  --md-accent-fg-color:               #00a8cc;
  --md-accent-fg-color--transparent:  rgba(0,168,204,.1);
}

/* ── Hero ─────────────────────────────────────────────── */
.sm-hero {
  background:
    linear-gradient(135deg, rgba(0,61,92,.82) 0%, rgba(0,119,168,.72) 45%, rgba(0,168,204,.65) 100%),
    url('../assets/images/bay.jpeg') center/cover no-repeat;
  padding: 5rem 2rem 4rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.sm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23ffffff08' d='M0,100 C360,180 720,20 1080,100 C1260,140 1380,80 1440,100 L1440,200 L0,200Z'/%3E%3C/svg%3E") bottom/cover no-repeat;
}

.sm-hero__content { position: relative; max-width: 720px; margin: 0 auto; }

.sm-hero__tag {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  padding: .3rem 1rem;
  font-size: .85rem;
  letter-spacing: .05em;
  margin-bottom: 1.5rem;
}

.sm-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #fff !important;
}

.sm-hero__sub {
  font-size: 1.15rem;
  opacity: .88;
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.sm-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────── */
.sm-btn {
  display: inline-block;
  padding: .75rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s;
}
.sm-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.sm-btn--primary { background: #fff; color: #003d5c !important; }
.sm-btn--outline { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.6); }

/* ── Trip cards ───────────────────────────────────────── */
.sm-section { max-width: 900px; margin: 3.5rem auto; padding: 0 1.5rem; }
.sm-section__title { font-size: 1.6rem; font-weight: 700; text-align: center; margin-bottom: 2rem; }

.sm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.sm-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  transition: transform .2s, box-shadow .2s;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.sm-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.15); }

.sm-card__badge {
  padding: .4rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.sm-card--chlapy  .sm-card__badge { background: #1a5276; }
.sm-card--silna   .sm-card__badge { background: #0d6e5e; }
.sm-card--smisena .sm-card__badge { background: #0077a8; }

.sm-card__body { padding: 1.25rem 1.25rem .75rem; flex: 1; }
.sm-card__date { font-size: .82rem; color: var(--md-default-fg-color--light); margin-bottom: .4rem; font-weight: 600; }
.sm-card__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .6rem; color: var(--md-default-fg-color); }
.sm-card__desc { font-size: .9rem; line-height: 1.55; color: var(--md-default-fg-color--light); margin: 0 0 1rem; }
.sm-card__meta { display: flex; gap: 1rem; font-size: .82rem; flex-wrap: wrap; }
.sm-card__meta span { color: var(--md-default-fg-color--light); }

.sm-card__footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  font-size: .85rem;
  font-weight: 600;
  color: #0077a8;
}

/* ── Why section ──────────────────────────────────────── */
.sm-why {
  background: var(--md-code-bg-color);
  padding: 3rem 1.5rem;
  margin: 2rem 0;
}
.sm-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.sm-why__item { text-align: center; }
.sm-why__icon { font-size: 2.2rem; margin-bottom: .75rem; }
.sm-why__item h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; }
.sm-why__item p { font-size: .88rem; line-height: 1.55; color: var(--md-default-fg-color--light); margin: 0; }

/* ── Contact ──────────────────────────────────────────── */
.sm-contact {
  background: linear-gradient(135deg, #003d5c, #0077a8);
  color: #fff;
  padding: 3rem 1.5rem;
  text-align: center;
}
.sm-contact__inner { max-width: 540px; margin: 0 auto; }
.sm-contact h2 { color: #fff !important; font-size: 1.6rem; margin: 0 0 .5rem; }
.sm-contact p { opacity: .85; margin: 0 0 1.5rem; }
.sm-contact__links { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.sm-contact__links a { color: #fff !important; font-weight: 600; text-decoration: none !important; font-size: 1rem; }
.sm-contact__links a:hover { text-decoration: underline !important; }

/* ── Photo banner (trip pages) ────────────────────────── */
.sm-photo-banner {
  margin: 1.5rem 0 2.5rem;
  border-radius: 14px;
  overflow: hidden;
  max-height: 420px;
}
.sm-photo-banner img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* ── Photo grid (boat page) ───────────────────────────── */
.sm-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.sm-photo-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ── QR code block ────────────────────────────────────── */
.sm-qr {
  text-align: center;
  padding: 1.75rem 1.5rem;
  background: var(--md-code-bg-color);
  border-radius: 14px;
  max-width: 300px;
  margin: 2rem auto;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.sm-qr img { width: 190px; height: auto; display: block; margin: 0 auto 1rem; }
.sm-qr strong { display: block; font-size: 1rem; margin-bottom: .4rem; }
.sm-qr p { font-size: .85rem; color: var(--md-default-fg-color--light); margin: 0; line-height: 1.5; }

/* ── Místa / Places ───────────────────────────────────── */
.sm-places { display: flex; flex-direction: column; gap: 2.5rem; margin: 2rem 0; }

.sm-place {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.09);
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
}

@media (max-width: 680px) {
  .sm-place { grid-template-columns: 1fr; }
}

.sm-place__img {
  min-height: 220px;
  background-size: cover;
  background-position: center;
}

.sm-place__img--hydra     { background-color: #1a6b8a; background-image: linear-gradient(135deg, #1a6b8a 0%, #0a3d55 100%); }
.sm-place__img--spetses   { background-color: #2e7d52; background-image: linear-gradient(135deg, #2e7d52 0%, #1a4d30 100%); }
.sm-place__img--skopelos  { background-color: #5c6bc0; background-image: linear-gradient(135deg, #5c6bc0 0%, #303f9f 100%); }
.sm-place__img--alonnisos { background-color: #00838f; background-image: linear-gradient(135deg, #00838f 0%, #004d55 100%); }

.sm-place__body { padding: 1.75rem 2rem; }

.sm-place__tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #0077a8;
  margin-bottom: .6rem;
}

.sm-place__name {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 .75rem !important;
  border: none !important;
  padding: 0 !important;
}

.sm-place__desc {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  margin: 0 0 1.25rem;
}

.sm-place__facts {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: .9rem;
}

/* ── Hide default article padding on home ─────────────── */
[data-md-component="content"] .md-content__inner { padding: 0; }