/* Odisal Page Top: breadcrumb, big title (em = accent), tagline, intro, button + WhatsApp link.
   With a photo: the text sits low on the left of a full-width photo (min 500px) that settles in on load.
   Without: a plain title block. Room for a fixed header: --osx-pt-top (set from the widget's Style tab). */
.osx-page-top { --osx-pt-soft: color-mix(in srgb, var(--osx-text) 86%, var(--osx-dark)); position: relative; overflow-x: clip; }
.osx-page-top a { text-decoration: none; }
.osx-page-top .osx-pt-crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 400 11px/1 var(--osx-label); letter-spacing: 2px; text-transform: uppercase; color: var(--osx-muted); }
.osx-page-top .osx-pt-crumb a { color: var(--osx-accent); }
.osx-page-top .osx-pt-h1 { margin-top: 18px; font: 600 54px/1.08 var(--osx-head); color: var(--osx-text); }
.osx-page-top .osx-pt-h1 em { display: inline; font-style: normal; color: var(--osx-accent); }
.osx-page-top--emline .osx-pt-h1 em { display: block; }
.osx-page-top .osx-pt-tag { margin-top: 16px; font: 400 18px/1.4 var(--osx-head); color: var(--osx-accent); }
.osx-page-top .osx-pt-intro { margin-top: 18px; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--osx-pt-soft); }
.osx-page-top .osx-pt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.osx-page-top .osx-pt-wa { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--osx-pt-soft); transition: color 200ms ease; }
.osx-page-top .osx-pt-wa-ico { width: 18px; height: 18px; flex: none; fill: var(--osx-accent); color: var(--osx-accent); }
@media (hover: hover) and (pointer: fine) { .osx-page-top .osx-pt-wa:hover { color: var(--osx-accent); } }

/* With a photo: one grid cell for the photo, the lines stacked low on its left (aligned with the 1140px page width) */
.osx-page-top--photo .osx-pt-head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto auto; justify-items: start; min-height: var(--osx-pt-h, 500px); text-align: left; }
.osx-page-top--photo .osx-pt-txt { display: contents; }
.osx-page-top--photo .osx-pt-txt > * { position: relative; z-index: 1; grid-column: 1; width: 100%; max-width: 720px; margin-left: max(0px, calc((100% - 1140px) / 2)); padding-left: var(--osx-gutter-l); padding-right: var(--osx-gutter-r); }
.osx-page-top--photo .osx-pt-txt > :first-child { margin-top: var(--osx-pt-top, 124px); }
.osx-page-top--photo .osx-pt-intro { margin-top: 14px; color: color-mix(in srgb, var(--osx-text) 90%, var(--osx-dark)); }
.osx-page-top--photo .osx-pt-txt > :last-child { margin-bottom: 56px; }
.osx-page-top--photo .osx-pt-photo { position: relative; grid-row: 1 / -1; grid-column: 1; justify-self: stretch; margin: 0; overflow: hidden; background: var(--osx-card); }
.osx-page-top--photo .osx-pt-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.osx-page-top--photo .osx-pt-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--osx-dark) 55%, transparent) 0%, color-mix(in srgb, var(--osx-dark) 20%, transparent) 35%, color-mix(in srgb, var(--osx-dark) 92%, transparent) 100%); }
/* the grid rows follow the lines that are there: the first line takes the stretchy row */
.osx-page-top--photo .osx-pt-txt > :nth-child(1) { grid-row: 1; align-self: end; }
.osx-page-top--photo .osx-pt-txt > :nth-child(2) { grid-row: 2; }
.osx-page-top--photo .osx-pt-txt > :nth-child(3) { grid-row: 3; }
.osx-page-top--photo .osx-pt-txt > :nth-child(4) { grid-row: 4; }
.osx-page-top--photo .osx-pt-txt > :nth-child(5) { grid-row: 5; }

/* Without a photo */
.osx-page-top--plain { padding-top: var(--osx-pt-top, 132px); }
.osx-page-top--center { text-align: center; }
.osx-page-top--center .osx-pt-crumb, .osx-page-top--center .osx-pt-acts { justify-content: center; }
.osx-page-top--center .osx-pt-intro { margin-left: auto; margin-right: auto; }

/* Opening: the photo settles in, the lines rise in turn */
@keyframes osx-pt-settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes osx-pt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.osx-page-top .osx-pt-photo img { animation: osx-pt-settle 1600ms var(--osx-ease-out) both; }
.osx-page-top .osx-pt-txt > * { animation: osx-pt-rise 900ms var(--osx-ease-out) both; animation-delay: var(--osx-pt-d, 0ms); }
.elementor-editor-active .osx-page-top .osx-pt-photo img, .elementor-editor-active .osx-page-top .osx-pt-txt > * { animation: none; }

@media (max-width: 760px) {
  .osx-page-top--photo .osx-pt-head { min-height: var(--osx-pt-h, 520px); }
  .osx-page-top--photo .osx-pt-txt > :first-child { margin-top: var(--osx-pt-top, 130px); }
  .osx-page-top--plain { padding-top: var(--osx-pt-top, 104px); }
  .osx-page-top .osx-pt-h1 { font-size: 40px; }
  .osx-page-top--photo .osx-pt-h1 { font-size: 36px; }
  .osx-page-top .osx-pt-tag { font-size: 16px; }
  .osx-page-top .osx-pt-intro { font-size: 16px; }
  .osx-page-top .osx-pt-acts { margin-top: 26px; }
  .osx-page-top--photo .osx-pt-txt > :last-child { margin-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .osx-page-top .osx-pt-photo img, .osx-page-top .osx-pt-txt > * { animation: none; }
}