/* ═══════════════════════════════════════════════════════════════════════════ AmericasPress — Countries Directory Loaded via $extraCss hook, guaranteed in before ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hub: Hero ──────────────────────────────────────────────────────────── */ .cd-hero { background: var(--ink); color: #fff; padding: 48px 0 40px; border-bottom: 3px solid var(--red); } .cd-hero-eyebrow { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red-light); margin-bottom: 10px; } .cd-hero-title { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; margin-bottom: 12px; } .cd-hero-sub { font-family: var(--font-body); font-size: clamp(14px, 1.4vw, 16px); color: rgba(255,255,255,.62); max-width: 560px; line-height: 1.65; margin-bottom: 28px; } .cd-hero-stats { display: flex; align-items: center; gap: 20px; } .cd-hero-stat { display: flex; flex-direction: column; gap: 2px; } .cd-hero-stat-num { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; color: #fff; } .cd-hero-stat-label { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38); } .cd-hero-stat-div { width: 1px; height: 32px; background: rgba(255,255,255,.14); } /* ── Hub: Directory wrapper ─────────────────────────────────────────────── */ .cd-directory { padding-top: 36px; padding-bottom: 64px; } /* ── Hub: Region section ────────────────────────────────────────────────── */ .cd-region-section { margin-bottom: 40px; } .cd-region-header { display: flex; align-items: center; gap: 10px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 10px 0; margin-bottom: 16px; } .cd-region-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0; } .cd-region-pill { font-family: var(--font-ui); font-size: 11px; font-weight: 700; background: var(--ink); color: #fff; padding: 2px 9px; border-radius: 20px; line-height: 1.7; } /* ══════════════════════════════════════════════════════════════════════════ COMPACT GRID — the key layout fix ══════════════════════════════════════════════════════════════════════════ */ .cd-compact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (min-width: 1100px) { .cd-compact-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 860px) { .cd-compact-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (max-width: 520px) { .cd-compact-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ── Compact card ───────────────────────────────────────────────────────── */ .cd-compact-card { display: flex; flex-direction: column; align-items: stretch; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--rule); overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .cd-compact-card:hover { border-color: var(--red); box-shadow: 0 4px 18px rgba(0,0,0,.10); transform: translateY(-2px); } /* ── Flag container — padding-bottom trick avoids the global img height:auto conflict ── */ .cd-compact-flag { position: relative; width: 100%; padding-bottom: 66.66%; /* 3:2 aspect ratio */ overflow: hidden; background: #e8e5dc; flex-shrink: 0; } /* Override the global: img { height: auto } with !important here */ .cd-compact-flag img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 280ms ease; } .cd-compact-card:hover .cd-compact-flag img { transform: scale(1.05); } /* ── Country name label ─────────────────────────────────────────────────── */ .cd-compact-name { font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink); padding: 9px 10px 10px; text-align: center; letter-spacing: .01em; } @media (max-width: 520px) { .cd-compact-name { font-size: 11px; padding: 7px 6px 8px; } } /* ═══════════════════════════════════════════════════════════════════════════ DETAIL PAGE (country.php — unchanged) ═══════════════════════════════════════════════════════════════════════════ */ .cd-breadcrumb { background: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 0; } .cd-breadcrumb .container { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px; color: rgba(255,255,255,.42); } .cd-breadcrumb a { color: rgba(255,255,255,.42); transition: color var(--transition); } .cd-breadcrumb a:hover { color: #fff; } .cd-bc-sep { opacity: .35; } .cd-detail-hero { position: relative; height: clamp(280px, 40vw, 460px); overflow: hidden; background: var(--ink); } .cd-detail-hero-flag { position: absolute; inset: 0; } .cd-detail-hero-flag img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; display: block; opacity: .55; } .cd-detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,.10) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.90) 100%); } .cd-detail-hero-content { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 36px; } .cd-detail-hero-region { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red-light); margin-bottom: 8px; } .cd-detail-hero-name { font-family: var(--font-display); font-size: clamp(36px, 6vw, 68px); font-weight: 700; letter-spacing: -.025em; line-height: 1; color: #fff; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .cd-detail-hero-formal { font-family: var(--font-ui); font-size: 14px; color: rgba(255,255,255,.52); letter-spacing: .02em; } .cd-intro-strip { background: #fff; border-bottom: 1px solid var(--rule); padding: 24px 0; } .cd-intro-text { font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--ink-3); max-width: 860px; font-style: italic; } .cd-detail-body { padding-top: 40px; padding-bottom: 60px; } .cd-detail-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .cd-detail-grid { grid-template-columns: 1fr; gap: 32px; } .cd-facts-aside { order: -1; } } .cd-facts-card { background: #fff; border: 1px solid var(--rule); overflow: hidden; position: sticky; top: 20px; } .cd-facts-title { background: var(--ink); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 14px 18px; display: flex; align-items: center; gap: 12px; } .cd-facts-flag-sm { display: inline-flex; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); overflow: hidden; } .cd-facts-flag-sm img { display: block; width: 40px !important; height: 27px !important; object-fit: cover !important; } .cd-facts-list { display: flex; flex-direction: column; } .cd-facts-row { display: grid; grid-template-columns: 42% 1fr; gap: 8px; padding: 11px 18px; border-bottom: 1px solid var(--rule-light); align-items: baseline; } .cd-facts-row:last-child { border-bottom: none; } .cd-facts-row dt { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); line-height: 1.4; } .cd-facts-row dd { font-family: var(--font-ui); font-size: 13px; color: var(--ink); line-height: 1.45; } .cd-back-link { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--red); padding: 14px 18px; border: 1px solid var(--rule); border-top: none; background: #fff; transition: background var(--transition), color var(--transition); } .cd-back-link:hover { background: var(--red); color: #fff; } .cd-section-header { display: flex; align-items: baseline; justify-content: space-between; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 10px 0; margin-bottom: 28px; } .cd-section-header h2 { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -.02em; } .cd-section-header a { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--red); letter-spacing: .04em; } .cd-section-header a:hover { text-decoration: underline; } .cd-description { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.78; color: var(--ink-3); } .cd-description p { margin-bottom: 1.5em; } .cd-description p:last-child { margin-bottom: 0; } .cd-pullquote { border-left: 4px solid var(--red); margin: 36px 0; padding: 18px 24px; background: var(--cream); font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 19px); font-style: italic; line-height: 1.55; color: var(--ink-2); } .cd-related-list { display: flex; flex-direction: column; gap: 16px; } .cd-related-item { display: flex; gap: 16px; padding: 14px; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition); } .cd-related-item:hover { border-color: var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .cd-related-img { flex-shrink: 0; width: 88px; height: 66px; overflow: hidden; background: var(--rule-light); } .cd-related-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } .cd-related-text { flex: 1; display: flex; flex-direction: column; gap: 4px; } .cd-related-cat { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); } .cd-related-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; } .cd-related-date { font-family: var(--font-ui); font-size: 11px; color: var(--mid); margin-top: auto; } @media (max-width: 640px) { .cd-hero { padding: 32px 0 26px; } .cd-hero-stats { gap: 14px; } .cd-detail-hero { height: clamp(200px, 52vw, 300px); } .cd-facts-card { position: static; } .cd-pullquote { margin: 24px 0; padding: 14px 18px; } }