/* ============================================================
ONEETSAKO — OUR PRIDE
FULLY FLUID / DESKTOP STANDARD / PHONE VISIBLE
ZERO DEVICE RESPONSIVE MEDIA QUERIES
ZERO CONTAINER QUERIES
CONTINUOUS CLAMP() SCALING
FUNCTIONALITY PRESERVED
WHATSAPP + PHONE ALWAYS VISIBLE
============================================================ */

/* ============================================================
MASTER OUR PRIDE
============================================================ */

#our-pride-showcase {
position: relative;
width: min(92%, 680px);
margin:
clamp(5rem, 10vw, 10rem)
auto;
background-color: transparent;
display: flex;
flex-direction: column;
height: auto;
min-width: 0;
box-sizing: border-box;
}

/* ============================================================
HEADER
============================================================ */

.showcase-header {
width: 100%;
padding:
clamp(0.7rem, 1.4vw, 1rem)
clamp(0.35rem, 0.8vw, 0.65rem)
clamp(0.85rem, 1.6vw, 1.15rem);
box-sizing: border-box;
}

.showcase-header h3 {
font-family:
"Cinzel",
"Tempus Sans ITC",
serif;

font-weight: 400;

font-size:
clamp(
1rem,
1.35vw,
1.25rem
);

letter-spacing:
clamp(
0.06em,
0.16vw,
0.14em
);

line-height: 1.4;

color:
rgba(255, 255, 255, 0.95);

margin: 0;

max-width: 100%;

overflow-wrap: anywhere;
}

/* ============================================================
CINEMATIC SCREEN
IMPORTANT:
The minimum height is increased so the portal has
enough physical space on phones for BOTH buttons.
============================================================ */

.slideshow-screen {
position: relative;

width: 100%;
max-width: none;

aspect-ratio: 1.45 / 1;

min-height:
clamp(
20rem,
42vw,
38.75rem
);

max-height: 650px;

margin: 0 auto;

overflow: hidden;

box-sizing: border-box;

border-radius:
clamp(
0.5rem,
1.5vw,
0.875rem
);
}

/* ============================================================
VIEWPORT
============================================================ */

.slides-viewport {
position: absolute;

inset: 0;

width: 100%;
height: 100%;

z-index: 1;

overflow: hidden;

border-radius: inherit;
}

/* ============================================================
SLIDES
============================================================ */

.slide {
position: absolute;

inset: 0;

width: 100%;
height: 100%;

background-size: cover;
background-position: center center;
background-repeat: no-repeat;

opacity: 0;

transition:
opacity 1s cubic-bezier(
0.16,
1,
0.3,
1
);

filter:
brightness(1)
contrast(1);

border-radius: inherit;
}

.slide.active {
opacity: 1;
}

/* ============================================================
CAPTION
============================================================ */

.slideshow-caption {
position: absolute;

bottom:
clamp(
0.9rem,
2vw,
1.4rem
);

left:
clamp(
0.9rem,
2vw,
1.4rem
);

z-index: 10;

max-width:
calc(
100% -
clamp(
1.75rem,
4vw,
2.75rem
)
);

pointer-events: none;

box-sizing: border-box;
}

#slide-name {
margin: 0;

font-size:
clamp(
0.95rem,
1.25vw,
1.1rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.98);

letter-spacing:
clamp(
0.025em,
0.08vw,
0.07em
);

line-height: 1.45;

text-shadow:
0 2px 8px
rgba(0, 0, 0, 0.95);

overflow-wrap: anywhere;
}

/* ============================================================
SHOWCASE FOOTER
============================================================ */

.showcase-footer {
width: 100%;

padding:
clamp(0.8rem, 1.7vw, 1.15rem)
clamp(0.35rem, 0.8vw, 0.65rem)
clamp(0.7rem, 1.5vw, 1rem);

display: flex;

justify-content: space-between;

align-items: center;

gap:
clamp(
0.9rem,
2vw,
1.5rem
);

box-sizing: border-box;

min-width: 0;
}

/* ============================================================
META TAG
============================================================ */

.meta-tag {
font-family: monospace;

font-size:
clamp(
0.82rem,
0.95vw,
0.95rem
);

font-weight: 400;

letter-spacing:
clamp(
0.06em,
0.2vw,
0.12em
);

color:
rgba(
124,
201,
109,
0.98
);

text-transform: uppercase;

line-height: 1.5;

min-width: 0;

overflow-wrap: anywhere;
}

/* ============================================================
ADVERTISE BUTTON
============================================================ */

.venture-link {
background: none !important;

padding:
0
0
clamp(0.2rem, 0.4vw, 0.3rem)
0 !important;

border: none !important;

border-bottom:
1px dashed
rgba(255, 255, 255, 0.55) !important;

cursor: pointer;

font-family: monospace;

font-size:
clamp(
0.82rem,
0.9vw,
0.95rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.95) !important;

letter-spacing:
clamp(
0.05em,
0.15vw,
0.1em
);

line-height: 1.5;

white-space: normal;

text-align: right;

transition:
color 0.3s ease,
border-color 0.3s ease;

max-width: 100%;

overflow-wrap: anywhere;
}

.venture-link:hover {
color:
#7cc96d !important;

border-bottom:
1px solid
#7cc96d !important;
}

/* ============================================================
PORTAL OVERLAY
============================================================ */

.ad-portal-overlay {
position: absolute;

inset: 0;

width: 100%;
height: 100%;

background:
rgba(3, 8, 5, 0.98);

backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

z-index: 20;

transform: translateY(100%);

opacity: 0;

visibility: hidden;

pointer-events: none;

transition:
transform 0.5s cubic-bezier(
0.16,
1,
0.3,
1
),
opacity 0.3s ease;

padding:
clamp(0.9rem, 3vw, 2.1rem)
clamp(0.85rem, 3vw, 1.75rem)
clamp(0.9rem, 2vw, 1.4rem);

display: flex;

flex-direction: column;

box-sizing: border-box;

overflow: hidden;
}

.ad-portal-overlay.open {
transform: translateY(0);

opacity: 1;

visibility: visible;

pointer-events: auto;
}

/* ============================================================
PORTAL CONTENT
IMPORTANT:
Do NOT force this to 100% height.
Natural height allows BOTH buttons to remain visible.
============================================================ */

.portal-content {
width: 100%;

height: auto;

min-height: 0;

display: flex;

flex-direction: column;

box-sizing: border-box;

min-width: 0;

flex: 1 1 auto;
}

/* ============================================================
PORTAL TEXT
============================================================ */

.portal-text-group {
width: 100%;

min-width: 0;

margin-bottom:
clamp(
0.45rem,
1.2vw,
1.15rem
);
}

/* ============================================================
PORTAL CLOSE
============================================================ */

.portal-close {
position: absolute;

top:
clamp(
0.6rem,
1.5vw,
1rem
);

right:
clamp(
0.75rem,
2.5vw,
1.5rem
);

background: none;

border: none;

color:
rgba(255, 255, 255, 0.8);

font-family: monospace;

font-size:
clamp(
0.72rem,
0.8vw,
0.9rem
);

font-weight: 400;

cursor: pointer;

z-index: 25;

padding:
clamp(
0.25rem,
0.5vw,
0.35rem
);
}

/* ============================================================
PORTAL TAG
============================================================ */

.portal-tag {
font-family: monospace;

font-size:
clamp(
0.68rem,
0.78vw,
0.85rem
);

font-weight: 400;

letter-spacing:
clamp(
0.06em,
0.25vw,
0.14em
);

color: #7cc96d;

display: block;

margin-bottom:
clamp(
0.2rem,
0.5vw,
0.4rem
);

line-height: 1.4;

overflow-wrap: anywhere;
}

/* ============================================================
PORTAL HEADING
============================================================ */

.portal-content h4 {
font-family:
"Cinzel",
"Tempus Sans ITC",
serif;

font-size:
clamp(
0.9rem,
1.4vw,
1.25rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.98);

margin:
0 0
clamp(
0.3rem,
0.7vw,
0.5rem
)
0;

letter-spacing:
clamp(
0.04em,
0.12vw,
0.1em
);

line-height: 1.35;

overflow-wrap: anywhere;
}

/* ============================================================
PORTAL PITCH
============================================================ */

.portal-pitch {
width: 100%;

min-width: 0;

font-size:
clamp(
0.76rem,
0.95vw,
1rem
);

line-height: 1.5;

color:
rgba(255, 255, 255, 0.88);

margin:
0 0
clamp(
0.45rem,
1.2vw,
1.15rem
)
0;

overflow-wrap: anywhere;
}

/* ============================================================
PORTAL META GRID
============================================================ */

.portal-meta-grid {
display: grid;

grid-template-columns:
repeat(
auto-fit,
minmax(
min(140px, 100%),
1fr
)
);

gap:
clamp(
0.45rem,
2vw,
1.4rem
);

margin-bottom:
clamp(
0.5rem,
1.5vw,
1.25rem
);

width: 100%;
}

.portal-meta-grid div {
min-width: 0;

display: flex;

flex-direction: column;

padding-bottom:
clamp(
0.2rem,
0.7vw,
0.5rem
);

border-bottom:
1px solid
rgba(255, 255, 255, 0.18);
}

.portal-meta-grid .lbl {
font-family: monospace;

font-size:
clamp(
0.66rem,
0.72vw,
0.82rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.7);

line-height: 1.3;
}

.portal-meta-grid .val {
font-family: monospace;

font-size:
clamp(
0.72rem,
0.9vw,
0.95rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.98);

overflow-wrap: anywhere;

line-height: 1.3;
}

/* ============================================================
ACTIONS
BOTH CONTACT + WHATSAPP ALWAYS EXIST
NEVER COLLAPSE
NEVER HIDE
============================================================ */

.portal-actions {
display: flex;

flex-direction: column;

gap:
clamp(
0.3rem,
0.8vw,
0.65rem
);

width: 100%;

margin-top: auto;

flex: 0 0 auto;

flex-shrink: 0;

min-height: 0;

box-sizing: border-box;
}

/* ============================================================
ACTION BUTTON
============================================================ */

.action-btn {
display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

width: 100%;

min-width: 0;

flex: 0 0 auto;

padding:
clamp(
0.38rem,
1.2vw,
0.85rem
)
clamp(
0.6rem,
1.5vw,
1rem
);

border-radius:
clamp(
0.25rem,
0.8vw,
0.45rem
);

text-decoration: none;

background:
rgba(255, 255, 255, 0.04);

border:
1px solid
rgba(255, 255, 255, 0.16);

box-sizing: border-box;

overflow: visible;

transition:
background 0.3s ease,
border-color 0.3s ease;
}

/* ============================================================
ACTION LABEL
============================================================ */

.action-btn span {
font-family: monospace;

font-size:
clamp(
0.64rem,
0.72vw,
0.82rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.7);

margin-bottom:
clamp(
0.05rem,
0.2vw,
0.2rem
);

line-height: 1.3;

display: block;

width: 100%;

text-align: center;

overflow-wrap: anywhere;
}

/* ============================================================
ACTION STRONG
============================================================ */

.action-btn strong {
display: block;

width: 100%;

min-width: 0;

height: auto;

max-height: none;

font-size:
clamp(
0.74rem,
0.95vw,
1rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.98);

line-height: 1.3;

text-align: center;

white-space: normal;

overflow-wrap: anywhere;

word-break: normal;

overflow: visible;

visibility: visible;

opacity: 1;

position: static;
}

/* ============================================================
PHONE / DIRECT CONTACT
============================================================ */

.call-btn {
display: flex !important;

visibility: visible !important;

opacity: 1 !important;

border-color:
rgba(255, 255, 255, 0.16);
}

/* ============================================================
WHATSAPP
CRITICAL FIX
============================================================ */

.wa-btn {
display: flex !important;

visibility: visible !important;

opacity: 1 !important;

position: relative !important;

width: 100% !important;

height: auto !important;

min-height: 0 !important;

max-height: none !important;

flex: 0 0 auto !important;

flex-shrink: 0 !important;

overflow: visible !important;

border-color:
rgba(124, 201, 109, 0.45);
}

.wa-btn span {
display: block !important;

visibility: visible !important;

opacity: 1 !important;

width: 100% !important;

height: auto !important;
}

.wa-btn strong {
display: block !important;

visibility: visible !important;

opacity: 1 !important;

width: 100% !important;

height: auto !important;

max-height: none !important;

overflow: visible !important;

white-space: normal !important;

color: #7cc96d;

font-size:
clamp(
0.74rem,
0.95vw,
1rem
);

line-height: 1.3;

text-align: center;
}

/* ============================================================
LINK SAFETY
============================================================ */

.portal-actions a {
display: flex !important;

max-width: 100%;

min-width: 0;

overflow: visible !important;

white-space: normal;

text-decoration: none;
}

/* ============================================================
HUD CORNERS
============================================================ */

.hud-corner {
position: absolute;

width:
clamp(
0.5rem,
1vw,
0.75rem
);

height:
clamp(
0.5rem,
1vw,
0.75rem
);

border:
1px solid
rgba(255, 255, 255, 0.3);

z-index: 5;

pointer-events: none;
}

.top-left {
top:
clamp(
0.5rem,
1.2vw,
0.875rem
);

left:
clamp(
0.5rem,
1.2vw,
0.875rem
);

border-right: none;

border-bottom: none;
}

.top-right {
top:
clamp(
0.5rem,
1.2vw,
0.875rem
);

right:
clamp(
0.5rem,
1.2vw,
0.875rem
);

border-left: none;

border-bottom: none;
}

.bottom-left {
bottom:
clamp(
0.5rem,
1.2vw,
0.875rem
);

left:
clamp(
0.5rem,
1.2vw,
0.875rem
);

border-right: none;

border-top: none;
}

.bottom-right {
bottom:
clamp(
0.5rem,
1.2vw,
0.875rem
);

right:
clamp(
0.5rem,
1.2vw,
0.875rem
);

border-left: none;

border-top: none;
}

/* ============================================================
TELEMETRY
============================================================ */

.hud-telemetry {
position: absolute;

top:
clamp(
0.55rem,
1.2vw,
0.875rem
);

left:
clamp(
1.5rem,
3vw,
2.15rem
);

font-family: monospace;

font-size:
clamp(
0.78rem,
0.85vw,
0.9rem
);

font-weight: 400;

color:
rgba(255, 255, 255, 0.88);

z-index: 5;

white-space: normal;

line-height: 1.5;

max-width:
calc(
100% -
clamp(
3rem,
8vw,
5rem
)
);

overflow-wrap: anywhere;

text-shadow:
0 1px 5px
rgba(0, 0, 0, 0.9);
}

/* ============================================================
GLOBAL COMPONENT SAFETY
============================================================ */

#our-pride-showcase,
#our-pride-showcase *,
.slideshow-screen,
.slides-viewport,
.portal-content,
.showcase-footer {
min-width: 0;

max-width: 100%;
}

/* ============================================================
FLUID GALLERY / GRID SAFETY
============================================================ */

.gallery-grid {
display: grid;

grid-template-columns:
repeat(
auto-fit,
minmax(
min(260px, 100%),
1fr
)
);

gap:
clamp(
0.85rem,
2vw,
1.5rem
);

width: 100%;
}

/* ============================================================
IMAGE SAFETY
============================================================ */

#our-pride-showcase img,
.gallery-grid img {
max-width: 100%;

height: auto;
}

/* ============================================================
REDUCED MOTION
ACCESSIBILITY ONLY
============================================================ */

@media (prefers-reduced-motion: reduce) {

.slide {
transition: none;
}

.ad-portal-overlay {
transition: none;
}
}